Components/Showcase Sections
Showcase Sections
Three-column inset cards
0import React from "react";1import Link from "next/link";23const ChevronRightIcon = ({ className }) => {4 return (5 <svg6 xmlns="http://www.w3.org/2000/svg"7 viewBox="0 0 24 24"8 className={className}9 >10 <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />11 </svg>12 );13};1415const data = {16 subHeading: "Empowering Innovation",17 title: "Harnessing Collective Brilliance",18 paragraph:19 "Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.",20 items: [21 {22 title: "JettWave: The Odyssey of Tech Evolution",23 image: {24 src: "https://cdn.dribbble.com/users/464226/screenshots/14490629/media/591178cb7994be86d4812b3dbc884efd.png?resize=800x600&vertical=center",25 alt: "",26 },27 button: { label: "Discover", link: "#" },28 },29 {30 title: "The Visionary Path of JettWave",31 image: {32 src: "https://cdn.dribbble.com/users/464226/screenshots/14507703/media/ec1b31df01640a6bacfc1ef6e4d637b0.png?resize=800x600&vertical=center",33 alt: "",34 },35 button: { label: "Dive In", link: "#" },36 },37 {38 title: "Behind the Scenes: JettWave's Innovation Lab",39 image: {40 src: "https://cdn.dribbble.com/users/464226/screenshots/14483950/media/b0df1d0cd821d712de1bff0ffdbe9855.png?resize=800x600&vertical=center",41 alt: "",42 },43 button: { label: "Explore", link: "#" },44 },45 ],46};4748export function ShowcaseSections1() {49 return (50 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">51 <div className="mx-auto mb-12 max-w-3xl text-center">52 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">53 {data.subHeading}54 </p>55 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">56 {data.title}57 </h2>58 <p className="text-lg text-slate-600 [text-wrap:balance]">59 {data.paragraph}60 </p>61 </div>62 <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">63 {data.items.map(({ title, image, button }, index: number) => {64 return (65 <div66 key={index}67 className="mx-auto flex w-full flex-col gap-y-8 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-lg:max-w-md"68 >69 <div className="aspect-[6/7] w-full overflow-hidden rounded-2xl">70 <img71 src={image.src}72 alt={image.alt}73 onError={(e) => {74 const image = e.target as HTMLImageElement;75 image.src = "onerrorimg";76 }}77 className="aspect-[5/3] h-full w-full object-cover"78 />79 </div>80 <div className="flex grow flex-col justify-between gap-y-6">81 <div className="min-w-0">82 <p className="mx-auto line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">83 {title}84 </p>85 </div>86 <Link87 href={button.link}88 className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"89 >90 {button.label}91 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />92 </Link>93 </div>94 </div>95 );96 })}97 </div>98 </div>99 );100}101
Empowering Innovation
Harnessing Collective Brilliance
Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.
Alternating rows layout
0import Link from "next/link";1import React from "react";23const data = {4 subHeading: "Empowering Innovation",5 title: "Harnessing Collective Brilliance",6 paragraph:7 "Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.",8 items: [9 {10 image: {11 src: "https://images.unsplash.com/photo-1495837139561-4a6359962783?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",12 altText: "",13 },14 breadcrumb: "Home > Projects > UI Components",15 title: "Unleashing the Power of Machine",16 description:17 "Interactively leverage other's dynamic intellectual capital vis-a-vis unique web services. Conveniently innovate intermandated methodologies vis-a-vis process-centric best practices. Holisticly whiteboard transparent relationships",18 link: "",19 },20 {21 image: {22 src: "https://images.unsplash.com/photo-1499689496495-5bdf4421b725?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80",23 altText: "",24 },25 breadcrumb:26 "Home > Project Gallery",27 title: "Advanced Server-Side Development",28 description:29 "Dynamically harness robust infrastructural models with our cutting-edge server-side project. This project showcases our ability to integrate advanced methodologies in backend development, ensuring seamless process.",30 link: "",31 },32]};3334const Arrow = ({ className }) => {35 return (36 <svg37 className={className}38 xmlns="http://www.w3.org/2000/svg"39 fill="none"40 viewBox="0 0 24 24"41 strokeWidth="1.5"42 stroke="currentColor"43 >44 <path45 strokeLinecap="round"46 strokeLinejoin="round"47 d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"48 />49 </svg>50 );51};5253export function ShowcaseSections2() {54 return (55 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">56 <div className="mx-auto mb-12 max-w-3xl text-center">57 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">58 {data.subHeading}59 </p>60 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">61 {data.title}62 </h2>63 <p className="text-lg text-slate-600 [text-wrap:balance]">64 {data.paragraph}65 </p>66 </div>67 <div className="space-y-12 lg:space-y-20 max-w-5xl mx-auto">68 {data.items.map(69 (70 { image, breadcrumb, title, description, link },71 index: number72 ) => {73 return (74 <div75 key={index}76 className="flex w-full items-center odd:flex-col even:flex-col md:gap-16 odd:md:flex-row even:md:flex-row-reverse"77 >78 <img79 src={image.src}80 alt={image.altText}81 className="md:max-lg:aspect-[4/3] aspect-[2/1] h-full w-full rounded-2xl object-cover md:w-1/2"82 />83 <div className="flex flex-col justify-center gap-4 max-md:mt-10 md:w-1/2">84 <p className="truncate text-left text-sm font-semibold capitalize text-sky-700 sm:text-base">85 {breadcrumb}86 </p>87 <h2 className="text-left text-lg font-bold text-slate-900 first-letter:uppercase lg:text-xl">88 {title}89 </h2>90 <p className="mb-3 max-w-4xl text-left text-sm text-slate-700 first-letter:uppercase sm:line-clamp-[8] md:line-clamp-5 lg:text-base">91 {description}92 </p>93 <Link94 href={link}95 className="flex w-fit min-w-0 items-center justify-center gap-1.5 rounded-lg bg-sky-700 p-2 px-3 py-2.5 text-sm capitalize text-slate-50 duration-150 hover:bg-sky-700 lg:justify-start"96 >97 view case study98 <Arrow className={"h-5 w-5 stroke-slate-50 stroke-2"} />99 </Link>100 </div>101 </div>102 );103 }104 )}105 </div>106 </div>107108 );109}110
Empowering Innovation
Harnessing Collective Brilliance
Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.
Home > Projects > UI Components
Unleashing the Power of Machine
Interactively leverage other's dynamic intellectual capital vis-a-vis unique web services. Conveniently innovate intermandated methodologies vis-a-vis process-centric best practices. Holisticly whiteboard transparent relationships
view case studyHome > Project Gallery
Advanced Server-Side Development
Dynamically harness robust infrastructural models with our cutting-edge server-side project. This project showcases our ability to integrate advanced methodologies in backend development, ensuring seamless process.
view case studyMasonry layout with tab navigation
0import Link from "next/link";1import React, { useEffect, useState } from "react";23const projectsData = [4 {5 category: "Innovative Solutions",6 projects: [7 {8 tagline: "Charting New Heights",9 title: "Project Falcon",10 link: { title: "Learn More", href: "#" },11 description:12 "Embark on a journey with Project Falcon as we innovate and streamline business processes using AI and ML technologies.",13 images: [14 {15 image: {16 src: "https://images.unsplash.com/photo-1683637176024-53e5a0ef5855?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDh8eEh4WVRNSExnT2N8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",17 altText: "Project Falcon Image 1",18 },19 },20 {21 image: {22 src: "https://images.unsplash.com/photo-1675186402592-05c87ae206a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDl8eEh4WVRNSExnT2N8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",23 altText: "Project Falcon Image 2",24 },25 },26 {27 image: {28 src: "https://images.unsplash.com/photo-1675186402639-0ee777524670?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",29 altText: "Project Falcon Image 3",30 },31 },32 ],33 },34 {35 tagline: "Driving Innovation",36 title: "Project Eagle",37 link: { title: "Learn More", href: "#" },38 description:39 "Join Project Eagle on its mission to redefine user experiences with groundbreaking design principles and strategies.",40 images: [41 {42 image: {43 src: "https://images.unsplash.com/photo-1585309291132-40ed86333470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",44 altText: "Project Eagle Image 1",45 },46 },47 {48 image: {49 src: "https://images.unsplash.com/photo-1685572699272-c137a50e43d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIzfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",50 altText: "Project Eagle Image 2",51 },52 },53 {54 image: {55 src: "https://images.unsplash.com/photo-1685374587390-74d79d19eaab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI0fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",56 altText: "Project Eagle Image 3",57 },58 },59 ],60 },61 ],62 },63 {64 category: "Smart Technologies",65 projects: [66 {67 tagline: "Redefining Boundaries",68 title: "Project Hawk",69 link: { title: "Learn More", href: "#" },70 description:71 "Witness the power of smart technologies with Project Hawk as we transform mundane tasks into engaging experiences.",72 images: [73 {74 image: {75 src: "https://images.unsplash.com/photo-1685450185433-657bfb6e0efa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMyfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",76 altText: "Project Hawk Image 1",77 },78 },79 {80 image: {81 src: "https://images.unsplash.com/photo-1614201766454-eaa827b16b9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM3fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",82 altText: "Project Hawk Image 2",83 },84 },85 {86 image: {87 src: "https://images.unsplash.com/photo-1682018242726-b5749c0ed668?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQxfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",88 altText: "Project Hawk Image 3",89 },90 },91 ],92 },93 {94 tagline: "Pushing the Envelope",95 title: "Project Raven",96 link: { title: "Learn More", href: "#" },97 description:98 "Dive into the world of smart devices with Project Raven as we bridge the gap between imagination and reality.",99 images: [100 {101 image: {102 src: "https://images.unsplash.com/photo-1685305038007-0db1486420f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQ2fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",103 altText: "Project Raven Image 1",104 },105 },106 {107 image: {108 src: "https://images.unsplash.com/photo-1685288040986-bc79d6df9003?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQ4fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",109 altText: "Project Raven Image 2",110 },111 },112 {113 image: {114 src: "https://images.unsplash.com/photo-1684962144204-239afc09b6fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDU0fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",115 altText: "Project Raven Image 3",116 },117 },118 ],119 },120 ],121 },122123 {124 category: "Artificial Intelligence",125 projects: [126 {127 tagline: "Transforming the Future",128 title: "Project Phoenix",129 link: { title: "Learn More", href: "#" },130 description:131 "Project Phoenix is spearheading the AI revolution with cutting-edge solutions designed to elevate business performance and productivity.",132 images: [133 {134 image: {135 src: "https://images.unsplash.com/photo-1684966693095-36394ec00c5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDU3fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",136 altText: "Project Phoenix Image 1",137 },138 },139 {140 image: {141 src: "https://images.unsplash.com/photo-1684363641415-85e88a069bad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDY2fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",142 altText: "Project Phoenix Image 2",143 },144 },145 {146 image: {147 src: "https://images.unsplash.com/photo-1684287860653-cdae7596bc3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDcxfHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",148 altText: "Project Phoenix Image 3",149 },150 },151 ],152 },153 {154 tagline: "Driving Digital Intelligence",155 title: "Project Quantum",156 link: { title: "Learn More", href: "#" },157 description:158 "Experience the dawn of a new era with Project Quantum, blending AI with quantum computing to create unparalleled solutions.",159 images: [160 {161 image: {162 src: "https://images.unsplash.com/photo-1560956423-b315fdb404d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg0fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",163 altText: "Project Quantum Image 1",164 },165 },166 {167 image: {168 src: "https://images.unsplash.com/photo-1684350773533-689f34efa3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg3fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",169 altText: "Project Quantum Image 2",170 },171 },172 {173 image: {174 src: "https://images.unsplash.com/photo-1677798257321-9b19f42478a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg2fHhIeFlUTUhMZ09jfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",175 altText: "Project Quantum Image 3",176 },177 },178 ],179 },180 ],181 },182];183184const Tabs = ({ category, selected, buttonIndex, setSelected }) => {185 return (186 <button187 onClick={() => setSelected(buttonIndex)}188 className={189 buttonIndex === selected190 ? "h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium lowercase text-slate-100 duration-75 first-letter:uppercase hover:bg-sky-800 disabled:bg-sky-700/50"191 : "h-fit w-fit select-none rounded-lg px-5 py-2.5 text-sm bg-slate-100 font-medium lowercase text-slate-900 duration-75 first-letter:uppercase hover:bg-slate-200 disabled:text-slate-900/50"192 }193 >194 {category}195 </button>196 );197};198199const HoverDetails = ({ tagline, title, description, link }) => {200 return (201 <>202 <p className="font-semibold text-sky-700">{tagline}</p>203 <p className="text-2xl font-semibold text-slate-50">{title}</p>204 <p className="mb-4 line-clamp-3 text-sm text-slate-200">{description}</p>205 <Link206 href={link.href}207 className="w-fit rounded-lg bg-sky-700 px-4 py-2 text-sm text-slate-50 duration-150 hover:bg-sky-700"208 >209 {link.title}210 </Link>211 </>212 );213};214215export function ShowcaseSections3() {216 const [selected, setSelected] = useState(0);217 const [data, setData] = useState(projectsData[0]);218219 useEffect(() => {220 setData(projectsData[selected]);221 }, [selected]);222 return (223 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">224 <div className="mx-auto flex w-full max-w-4xl flex-col items-center justify-center gap-y-6">225 {/* Heading */}226 <div className="flex w-full flex-col items-center gap-y-2">227 <p className="w-full text-center font-semibold capitalize text-sky-700">228 the gallery229 </p>230 <h2 className="mb-4 text-center text-3xl font-bold text-slate-900 first-letter:uppercase lg:text-4xl">231 view our projects232 </h2>233 <div className="mx-auto my-6 mb-2 mt-1 flex justify-center w-fit gap-2 flex-wrap">234 {projectsData.map(({ category, ...props }, index) => {235 return (236 <Tabs237 key={index}238 buttonIndex={index}239 setSelected={setSelected}240 category={category}241 selected={selected}242 />243 );244 })}245 </div>246 </div>247 <div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2">248 {data.projects.map(249 ({ images, tagline, title, link, description }, index) => {250 return (251 <div252 key={index}253 className="group relative grid w-full grid-cols-2 grid-rows-3 gap-5"254 >255 {/* overlay interferes with first: & last: utilities. This removes it from html when not needed.*/}256 {index === 1 && (257 <div className="absolute bottom-0 z-20 flex h-[66%] w-full flex-col justify-end gap-1 rounded-xl bg-gradient-to-t from-slate-900 via-slate-900 p-8 opacity-0 duration-150 group-hover:opacity-100">258 <HoverDetails259 tagline={tagline}260 title={title}261 link={link}262 description={description}263 />264 </div>265 )}266 {images.map(({ image }, index: number) => {267 return (268 <div269 key={index}270 className={271 "h-full w-full group-odd:first:col-span-2 group-odd:first:row-span-2 group-even:last:col-span-2 group-even:last:row-span-2"272 }273 >274 <img275 className="aspect-square h-full w-full rounded-xl object-cover"276 src={image.src}277 alt={image.altText}278 />279 </div>280 );281 })}282 {/* overlay interferes with first: & last: utilities. This removes it from html when not needed.*/}283 {index === 0 && (284 <div className="absolute top-0 z-20 flex h-[66%] w-full flex-col justify-end gap-1 rounded-xl bg-gradient-to-t from-slate-900 via-slate-900 p-8 opacity-0 duration-150 group-hover:opacity-100">285 <HoverDetails286 tagline={tagline}287 title={title}288 link={link}289 description={description}290 />291 </div>292 )}293 </div>294 );295 }296 )}297 </div>298 </div>299 </div>300 );301}302
the gallery
view our projects
Charting New Heights
Project Falcon
Embark on a journey with Project Falcon as we innovate and streamline business processes using AI and ML technologies.
Learn MoreDriving Innovation
Project Eagle
Join Project Eagle on its mission to redefine user experiences with groundbreaking design principles and strategies.
Learn MoreFour-column cards with hover options
0import React from "react";1import Link from "next/link";23const data = {4 subHeading: "Empowering Innovation",5 title: "Harnessing Collective Brilliance",6 paragraph:7 "Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.",8 items: [9 {10 image:11 "https://images.unsplash.com/photo-1618172193622-ae2d025f4032?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fDNkJTIwcmVuZGVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",12 title: "E-commerce Redesign",13 tag: "Amazon",14 link: { content: "Case study", href: "#" },15 altText: "",16 },17 {18 image:19 "https://images.unsplash.com/photo-1633907284646-7abf4a195875?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fDNkJTIwcmVuZGVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",20 title: "Mobile App Development",21 tag: "Apple",22 link: { content: "Case study", href: "#" },23 altText: "",24 },25 {26 image:27 "https://images.unsplash.com/photo-1607789377672-f6934b34c7d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fDNkJTIwcmVuZGVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",28 title: "Social Media Campaign",29 tag: "Facebook",30 link: { content: "Case study", href: "#" },31 altText: "",32 },33 {34 image:35 "https://images.unsplash.com/photo-1607789377672-f6934b34c7d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fDNkJTIwcmVuZGVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",36 title: "Branding Strategy",37 tag: "Nike",38 link: { content: "Case study", href: "#" },39 altText: "",40 },41 ],42};4344const ArrowSvg = ({ className }) => {45 return (46 <svg47 xmlns="http://www.w3.org/2000/svg"48 viewBox="0 0 24 24"49 className={className}50 >51 <path52 fillRule="evenodd"53 d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z"54 clipRule="evenodd"55 />56 </svg>57 );58};5960export function ShowcaseSections4() {61 return (62 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">63 <div className="mx-auto mb-12 max-w-3xl text-center">64 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">65 {data.subHeading}66 </p>67 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">68 {data.title}69 </h2>70 <p className="text-lg text-slate-600 [text-wrap:balance]">71 {data.paragraph}72 </p>73 </div>74 <div className="mx-auto grid w-fit grid-cols-1 gap-8 sm:grid-cols-2 xl:grid-cols-4">75 {data.items.map(({ image, title, altText, tag, link }, index) => {76 return (77 <div78 key={index}79 className="group relative aspect-square max-w-sm cursor-pointer overflow-hidden rounded-3xl"80 >81 <img82 alt={altText}83 src={image}84 width={300}85 height={300}86 className="aspect-video h-full w-full object-cover"87 />88 <div className="absolute bottom-0 z-20 flex h-full w-full translate-y-1/2 flex-wrap place-items-end content-end gap-2 bg-gradient-to-t from-slate-900 to-transparent p-6 duration-300 group-hover:-translate-y-0 group-hover:from-slate-900 sm:from-transparent sm:max-md:translate-y-[60%]">89 <p className="h-min w-full font-semibold text-sky-300">{tag}</p>90 <p className="h-min w-full text-xl font-medium tracking-wider text-slate-100">91 {title}92 </p>93 <Link94 href={link.href}95 className="flex w-fit flex-nowrap rounded-lg text-center text-slate-200"96 >97 {link.content}98 <ArrowSvg className="h-6 w-6 fill-slate-100" />99 </Link>100 </div>101 </div>102 );103 })}104 </div>105 </div>106 );107}108
Empowering Innovation
Harnessing Collective Brilliance
Jettwave is not just a team; it's a movement. By synergizing diverse talents, we pioneer groundbreaking solutions for tomorrow's challenges.
Video carousel with tab navigation
0import Link from "next/link";1import React, { useState, useRef, useEffect } from "react";23const portfolioData = [4 {5 category: "Web Design",6 heading: "Creative Website Redesign",7 video: {8 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",9 title: "Website Redesign Showcase",10 },11 link: { content: "see all", href: "/" },12 },13 {14 category: "Mobile App Development",15 heading: "Innovative App UI/UX Design",16 video: {17 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",18 title: "App UI/UX Design Demo",19 },20 link: { content: "Case study", href: "/" },21 },22 {23 category: "Branding",24 heading: "Brand Identity and Logo Design",25 video: {26 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",27 title: "Brand Identity Showcase",28 },29 link: { content: "watch video", href: "/" },30 },31];3233const ArrowSvg = ({ className }) => {34 return (35 <svg36 xmlns="http://www.w3.org/2000/svg"37 viewBox="0 0 24 24"38 className={className}39 >40 <path41 fillRule="evenodd"42 d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z"43 clipRule="evenodd"44 />45 </svg>46 );47};4849export function ShowcaseSections5() {50 const [current, setCurrent] = useState(0);51 return (52 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl overflow-hidden xl:max-w-7xl">53 <div className="mx-auto mb-2 mt-1 flex w-fit gap-x-1 rounded-lg bg-slate-100 p-1 ring-1 ring-slate-200">54 {portfolioData.map(({ category, ...props }, index) => {55 return (56 <button57 onClick={() => setCurrent(index)}58 type="button"59 key={index}60 className={61 current === index62 ? "h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium lowercase text-slate-100 duration-75 first-letter:uppercase hover:bg-sky-800 disabled:bg-sky-700/50"63 : "h-fit w-fit select-none rounded-lg px-5 py-2.5 text-sm font-medium lowercase text-slate-900 duration-75 first-letter:uppercase hover:bg-slate-200 disabled:text-slate-900/50"64 }65 >66 {category}67 </button>68 );69 })}70 </div>7172 <div className="relative lg:h-[700px] overflow-hidden md:h-[600px] h-[425px] sm:h-[475px] w-full">73 {portfolioData.map(74 ({ heading, category, video, link }, index: number) => {75 return (76 <div77 key={index}78 className="absolute inset-0 h-full w-full py-6 last:translate-x-[200%] even:translate-x-[100%]"79 >80 <div81 style={{ translate: `${-current * 100}%` }}82 className="sm:h-full w-full duration-500"83 >84 <div className="mx-auto flex h-full max-w-4xl flex-col items-center justify-between gap-y-6">85 <h2 className="w-full text-center text-3xl font-bold capitalize text-slate-900 first-letter:uppercase lg:text-4xl">86 {heading}87 </h2>88 <div className="w-full">89 <iframe90 className="aspect-video w-full rounded-t-2xl object-cover"91 src={video.embed}92 title={video.title}93 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"94 ></iframe>95 <Link96 href={link.href}97 className="flex w-full flex-nowrap justify-center gap-x-2 rounded-b-2xl bg-slate-200 px-6 py-4 text-center font-semibold capitalize text-slate-900 duration-150 hover:bg-sky-700"98 >99 {link.content}100 <ArrowSvg className="h-6 w-6 fill-slate-900" />101 </Link>102 </div>103 </div>104 </div>105 </div>106 );107 }108 )}109 </div>110 </div>111 );112}113
Creative Website Redesign
Innovative App UI/UX Design
Brand Identity and Logo Design
Split video carousel with tab navigation
0import Link from "next/link";1import React, { useState, useRef, useEffect } from "react";23const portfolioData = [4 {5 category: "Photography",6 heading: "Captivating Landscape Photography",7 video: {8 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",9 title: "Landscape Photography Showcase",10 },11 link: { content: "Explore More", href: "#" },12 description:13 "Immerse yourself in the beauty of our captivating landscape photography collection and experience the wonders of nature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",14 },15 {16 category: "E-commerce",17 heading: "User-Friendly Online Store Design",18 video: {19 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",20 title: "E-commerce Design Demo",21 },22 link: { content: "Discover More", href: "#" },23 description:24 "Discover our user-friendly e-commerce website design that ensures a seamless shopping experience for customers. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.",25 },26 {27 category: "Animation",28 heading: "Engaging 3D Animation Showcase",29 video: {30 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",31 title: "3D Animation Demo",32 },33 link: { content: "Learn More", href: "#" },34 description:35 "Explore the world of our engaging 3D animations and experience the magic of visual storytelling. Consetetur sadipscing elitr, sed diam nonumy.",36 },37 {38 category: "Content Writing",39 heading: "Compelling Copywriting Samples",40 video: {41 embed: "https://www.youtube.com/embed/Cx2dkpBxst8",42 title: "Copywriting Showcase",43 },44 link: { content: "See More", href: "#" },45 description:46 "Discover the power of words with our compelling copywriting samples that engage and inspire. Ipsum dolor sit amet, consetetur sadipscing elitr.",47 },48];4950export function ShowcaseSections6() {51 const [current, setCurrent] = useState(0);52 return (53 <div className="mx-auto w-full max-w-md overflow-hidden px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">54 <div className="flex flex-wrap gap-4 pb-12">55 {portfolioData.map(({ category, ...props }, index) => {56 return (57 <button58 onClick={() => setCurrent(index)}59 key={index}60 className={61 current === index62 ? "h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 text-sm font-medium lowercase text-slate-100 duration-75 first-letter:uppercase hover:bg-sky-800 disabled:bg-sky-700/50"63 : "h-fit w-fit select-none rounded-lg bg-slate-100 px-5 py-2.5 text-sm font-medium lowercase text-slate-900 duration-75 first-letter:uppercase hover:bg-slate-200 disabled:text-slate-900/50"64 }65 >66 {category}67 </button>68 );69 })}70 </div>71 <div className="flex w-max flex-nowrap justify-start ">72 {portfolioData.map(73 ({ heading, description, video, link, ...props }, index: number) => {74 return (75 <div76 style={{ translate: `${-current * 100}%` }}77 className="w-[100vw] duration-500"78 key={index}79 >80 <div className="flex w-full max-lg:flex-col sm:max-w-xl lg:items-center md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">81 <div className="flex max-w-md lg:max-w-md xl:max-w-lg flex-col gap-3 max-lg:pb-16 pr-12 lg:gap-8">82 <div>83 <p className="mb-4 text-4xl font-bold tracking-tight text-slate-900">84 {heading}85 </p>86 <p className="text-lg text-slate-600">{description}</p>87 </div>88 <Link89 href={link.href}90 className="w-fit rounded-xl bg-sky-700 px-6 py-3 text-center text-slate-50 duration-150 hover:bg-sky-700"91 >92 {link.content}93 </Link>94 </div>9596 <iframe97 className="aspect-video max-w-xs sm:max-w-lg md:max-w-xl lg:max-w-lg xl:max-w-2xl w-full rounded-2xl"98 src={video.embed}99 title={video.title}100 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"101 ></iframe>102103 </div>104 </div>105 );106 }107 )}108 </div>109 </div>110 );111}112
Captivating Landscape Photography
Immerse yourself in the beauty of our captivating landscape photography collection and experience the wonders of nature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
User-Friendly Online Store Design
Discover our user-friendly e-commerce website design that ensures a seamless shopping experience for customers. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Engaging 3D Animation Showcase
Explore the world of our engaging 3D animations and experience the magic of visual storytelling. Consetetur sadipscing elitr, sed diam nonumy.
Compelling Copywriting Samples
Discover the power of words with our compelling copywriting samples that engage and inspire. Ipsum dolor sit amet, consetetur sadipscing elitr.
2x2 centered grid
0import React from "react";1import Link from "next/link";23const ChevronRightIcon = ({ className }) => {4 return (5 <svg6 xmlns="http://www.w3.org/2000/svg"7 viewBox="0 0 24 24"8 className={className}9 >10 <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />11 </svg>12 );13};1415const data = {16 subHeading: "Revolutionary Solutions",17 title: "Redefining Software Excellence",18 paragraph:19 "At SyntaxHub, we're not just building software; we're crafting the future. Through a fusion of cutting-edge technologies and industry-leading expertise, we bring transformative solutions that set new benchmarks.",20 items: [21 {22 title: "SyntaxHub: Pioneers in Cloud Computing",23 description:24 "Step into the fascinating world of SyntaxHub. From being a modest startup to leading the cloud computing revolution, learn how we have redefined the rules of the game.",25 image: {26 src: "https://images.unsplash.com/photo-1595475207225-428b62bda831?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80",27 alt: "",28 },29 button: { label: "Learn More", link: "#" },30 },31 {32 title: "Agile Workflow, Faster Delivery",33 description:34 "Dive deep into the agile methodologies that make SyntaxHub stand out. Our project management practices guarantee quick iterations and rapid product delivery without compromising quality.",35 image: {36 src: "https://images.unsplash.com/photo-1624390001255-8961cf1d1dcf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80",37 alt: "",38 },39 button: { label: "Discover", link: "#" },40 },41 {42 title: "Code Elegance: SyntaxHub's Dev Practices",43 description:44 "Explore the core development practices that serve as the foundation of our quality code. Our focus on code elegance and efficiency sets us apart from the rest.",45 image: {46 src: "https://images.unsplash.com/photo-1553207356-888863871e82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",47 alt: "",48 },49 button: { label: "Uncover", link: "#" },50 },51 {52 title: "Security as a Standard",53 description:54 "Get an insider’s perspective on how SyntaxHub prioritizes security. From our SDLC to our choice of frameworks, security is at the core of everything we do.",55 image: {56 src: "https://images.unsplash.com/photo-1543363575-d306a0b37c9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80",57 alt: "",58 },59 button: { label: "Investigate", link: "#" },60 },61 ],62};6364export function ShowcaseSections7() {65 return (66 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">67 <div className="mx-auto mb-12 max-w-3xl text-center">68 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">69 {data.subHeading}70 </p>71 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">72 {data.title}73 </h2>74 <p className="text-lg text-slate-600 [text-wrap:balance]">75 {data.paragraph}76 </p>77 </div>78 <div className="mx-auto grid w-fit max-w-5xl grid-cols-1 gap-8 md:grid-cols-2">79 {data.items.map(80 ({ title, button, description, image }, index: number) => {81 return (82 <div83 key={index}84 className="mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white ring-4 ring-slate-50 duration-300 hover:border-sky-200 hover:ring-sky-100"85 >86 <div className="aspect-[2/1] w-full">87 <img88 src={image.src}89 alt={image.alt}90 onError={(e) => {91 const image = e.target as HTMLImageElement;92 image.src = "onerrorimg";93 }}94 className="aspect-[2/1] h-full w-full object-cover"95 />96 </div>97 <div className="flex grow flex-col justify-between gap-y-8 p-8">98 <div className="flex grow flex-col justify-between gap-y-6">99 <div className="min-w-0">100 <p className="mx-auto line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">101 {title}102 </p>{" "}103 <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">104 {description}105 </p>106 </div>107 <Link108 href={button.link}109 className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"110 >111 {button.label}112 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />113 </Link>114 </div>115 </div>116 </div>117 );118 }119 )}120 </div>121 </div>122 );123}124
Revolutionary Solutions
Redefining Software Excellence
At SyntaxHub, we're not just building software; we're crafting the future. Through a fusion of cutting-edge technologies and industry-leading expertise, we bring transformative solutions that set new benchmarks.
SyntaxHub: Pioneers in Cloud Computing
Step into the fascinating world of SyntaxHub. From being a modest startup to leading the cloud computing revolution, learn how we have redefined the rules of the game.
Agile Workflow, Faster Delivery
Dive deep into the agile methodologies that make SyntaxHub stand out. Our project management practices guarantee quick iterations and rapid product delivery without compromising quality.
Code Elegance: SyntaxHub's Dev Practices
Explore the core development practices that serve as the foundation of our quality code. Our focus on code elegance and efficiency sets us apart from the rest.
Security as a Standard
Get an insider’s perspective on how SyntaxHub prioritizes security. From our SDLC to our choice of frameworks, security is at the core of everything we do.
2x2 grid with horizontal cards
0import React from "react";1import Link from "next/link";23const ChevronRightIcon = ({ className }) => {4 return (5 <svg6 xmlns="http://www.w3.org/2000/svg"7 viewBox="0 0 24 24"8 className={className}9 >10 <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />11 </svg>12 );13};1415const data = {16 subHeading: "Igniting Innovation",17 title: "Explore the Future with QuantumHub",18 paragraph:19 "QuantumHub deploys cutting-edge technology and industry-leading expertise to fuel innovation, ensuring you're always steps ahead in the tech landscape.",20 items: [21 {22 category: "Innovation",23 title: "QuantumHub's Next-Gen Solutions",24 image: {25 src: "https://images.unsplash.com/photo-1506440885189-ba4072a9305f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",26 alt: "Next-Gen Solutions",27 },28 button: { label: "Discover More", link: "#" },29 },30 {31 category: "Scalability",32 title: "Built for Enterprise Scale",33 image: {34 src: "https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",35 alt: "Enterprise Scalability",36 },37 button: { label: "Learn More", link: "#" },38 },39 {40 category: "Security",41 title: "Impenetrable Security Measures",42 image: {43 src: "https://images.unsplash.com/photo-1585435465945-bef5a93f8849?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",44 alt: "Security Measures",45 },46 button: { label: "Secure Now", link: "#" },47 },48 {49 category: "User Experience",50 title: "Delivering Unmatched User Engagement",51 image: {52 src: "https://images.unsplash.com/5/unsplash-kitsune-3.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",53 alt: "User Engagement",54 },55 button: { label: "Engage Now", link: "#" },56 },57 ],58};5960export function ShowcaseSections8() {61 return (62 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">63 <div className="mb-10 border-b border-slate-200 pb-8">64 <div className="max-w-3xl">65 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">66 {data.subHeading}67 </p>68 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">69 {data.title}70 </h2>71 <p className="text-lg text-slate-600 [text-wrap:balance]">72 {data.paragraph}73 </p>74 </div>75 </div>76 <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">77 {data.items.map(({ category, title, image, button }, index: number) => {78 return (79 <div80 key={index}81 className="flex w-full gap-8 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-sm:flex-col sm:items-center"82 >83 <div className="aspect-square h-40 shrink-0 overflow-hidden rounded-2xl sm:max-md:h-40 lg:max-xl:h-40">84 <img85 src={image.src}86 alt={image.alt}87 onError={(e) => {88 const image = e.target as HTMLImageElement;89 image.src = "onerrorimg";90 }}91 className="aspect-square h-full w-full object-cover"92 />93 </div>94 <div className="flex h-fit min-w-0 flex-col justify-between gap-y-5">95 <div>96 <p className="mb-1 truncate text-sm font-semibold uppercase text-sky-600 sm:max-md:hidden lg:max-xl:hidden">97 {category}98 </p>99 <Link100 href={button.link}101 className="mb-1 text-xl font-bold text-slate-900 duration-150 [text-wrap:balance] first-letter:uppercase hover:text-sky-700"102 >103 {title}104 </Link>105 </div>106 <Link107 href={button.link}108 className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"109 >110 {button.label}111 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />112 </Link>113 </div>114 </div>115 );116 })}117 </div>118 </div>119 );120}121
Igniting Innovation
Explore the Future with QuantumHub
QuantumHub deploys cutting-edge technology and industry-leading expertise to fuel innovation, ensuring you're always steps ahead in the tech landscape.
Scalability
Built for Enterprise ScaleUser Experience
Delivering Unmatched User EngagementThree-column cards with background images
0import React from "react";1const data = {2 subHeading: "Driving Excellence",3 title: "Unlock Possibilities with CodeMomentum",4 paragraph:5 "CodeMomentum sets the standard in software engineering, offering robust, efficient, and transformative solutions tailored for the ever-changing tech ecosystem.",6 items: [7 {8 category: "Efficiency",9 title: "Streamlined Software Solutions",10 image: {11 src: "https://images.unsplash.com/photo-1614624533048-a9c2f9cb5a96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2127&q=80",12 alt: "Efficiency in Software",13 },14 },15 {16 category: "Collaboration",17 title: "Unified Team Synergy",18 image: {19 src: "https://images.unsplash.com/photo-1595327656903-2f54e37ce09b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",20 alt: "Collaboration in Tech",21 },22 },23 {24 category: "Sustainability",25 title: "Eco-Friendly Software Architecture",26 image: {27 src: "https://images.unsplash.com/photo-1547658718-1cdaa0852790?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",28 alt: "Sustainable Tech",29 },30 button: { label: "Sustain Now", link: "#" },31 },32 ],33};3435export function ShowcaseSections9() {36 return (37 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">38 <div className="mx-auto mb-12 max-w-3xl text-center">39 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">40 {data.subHeading}41 </p>42 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">43 {data.title}44 </h2>45 <p className="text-lg text-slate-600 [text-wrap:balance]">46 {data.paragraph}47 </p>48 </div>49 <div className="mx-auto grid max-w-6xl w-fit grid-cols-1 gap-8 lg:grid-cols-3">50 {data.items.map(({ category, title, image, button }, index: number) => {51 return (52 <div53 key={index}54 className="relative w-full overflow-hidden rounded-3xl max-lg:max-w-md"55 >56 <div className="aspect-[3/4]">57 <img58 src={image.src}59 alt={image.alt}60 onError={(e) => {61 const image = e.target as HTMLImageElement;62 image.src = "onerrorimg";63 }}64 className="h-full w-full object-cover"65 />66 </div>67 <div className="absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/80 from-40% via-black/60 to-transparent p-8 pt-20">68 <div className="min-w-0">69 <p className="mb-2 line-clamp-2 text-xl font-semibold text-slate-50 first-letter:uppercase">70 {title}71 </p>72 <p className="truncate text-sm text-slate-300">{category}</p>73 </div>74 </div>75 </div>76 );77 })}78 </div>79 </div>80 );81}82
Driving Excellence
Unlock Possibilities with CodeMomentum
CodeMomentum sets the standard in software engineering, offering robust, efficient, and transformative solutions tailored for the ever-changing tech ecosystem.
Streamlined Software Solutions
Efficiency
Unified Team Synergy
Collaboration
Eco-Friendly Software Architecture
Sustainability
Two-column horizontal cards
0import React from "react";1import Link from "next/link";23const ChevronRightIcon = ({ className }) => {4 return (5 <svg6 xmlns="http://www.w3.org/2000/svg"7 viewBox="0 0 24 24"8 className={className}9 >10 <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />11 </svg>12 );13};1415const data = {16 subHeading: "Pioneering Innovation",17 title: "Navigate the Tech Odyssey with NextMomentum",18 paragraph:19 "NextMomentum is where groundbreaking ideas meet actionable solutions. We're a catalyst for change in the tech industry, leading the way with innovative software and a commitment to excellence.",20 items: [21 {22 category: "Cybersecurity",23 title: "Safeguarding Digital Assets",24 description:25 "Delve into how NextMomentum is revolutionizing cybersecurity measures. Explore our state-of-the-art encryption and compliance solutions that protect your enterprise from emerging threats.",26 image: {27 src: "https://images.unsplash.com/photo-1523553374578-aba5fa21a345?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",28 alt: "Cybersecurity",29 },30 button: { label: "Learn More", link: "#" },31 },32 {33 category: "Cloud Solutions",34 title: "Cloud-Powered Agility",35 description:36 "Leverage NextMomentum's robust cloud infrastructure to elevate your business operations. Discover our scalable cloud solutions designed for maximum efficiency and reliability.",37 image: {38 src: "https://images.unsplash.com/photo-1529338296731-c4280a44fc48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",39 alt: "Cloud Computing",40 },41 button: { label: "Explore Cloud", link: "#" },42 },43 {44 category: "AI & ML",45 title: "Innovating with Intelligence",46 description:47 "Step into the future with NextMomentum's AI and machine learning platforms. Our algorithms are redefining problem-solving and driving unparalleled business outcomes.",48 image: {49 src: "https://images.unsplash.com/photo-1576768324656-b8f41d7457f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80",50 alt: "AI and Machine Learning",51 },52 button: { label: "Discover AI", link: "#" },53 },54 {55 category: "IoT",56 title: "Connectivity Reimagined",57 description:58 "Experience seamless integration with NextMomentum’s Internet of Things (IoT) solutions. We're weaving connectivity into the fabric of daily life, one device at a time.",59 image: {60 src: "https://images.unsplash.com/photo-1541677854486-ae7c09ba8c0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",61 alt: "IoT Solutions",62 },63 button: { label: "Embrace IoT", link: "#" },64 },65 {66 category: "DevOps",67 title: "Unparalleled DevOps Expertise",68 description:69 "Ascertain how CodeStream optimizes every stage of the software development lifecycle. Our agile DevOps practices ensure rapid delivery, reliability, and continuous innovation.",70 image: {71 src: "https://images.unsplash.com/photo-1535341000823-01aa350a4fbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",72 alt: "DevOps",73 },74 button: { label: "Learn More", link: "#" },75 },76 {77 category: "Data Analytics",78 title: "Unlocking Data Potential",79 description:80 "Turn data into action with CodeStream's advanced analytics solutions. Explore our capabilities in data mining, visualization, and predictive analytics for informed decision-making.",81 image: {82 src: "https://images.unsplash.com/photo-1527800792452-506aacb2101f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",83 alt: "Data Analytics",84 },85 button: { label: "Explore Analytics", link: "#" },86 },87 ],88};8990export function ShowcaseSections10() {91 return (92 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">93 <div className="mx-auto mb-12 max-w-3xl text-center">94 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">95 {data.subHeading}96 </p>97 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">98 {data.title}99 </h2>100 <p className="text-lg text-slate-600 [text-wrap:balance]">101 {data.paragraph}102 </p>103 </div>104 <div className="divide-y-slate-200 grid w-full grid-cols-1 divide-y lg:grid-cols-2 lg:gap-12 lg:divide-y-0">105 {data.items.map(106 ({ category, title, description, image, button }, index: number) => {107 return (108 <div109 key={index}110 className="flex w-full gap-8 py-8 first:pt-0 last:pb-0 max-sm:flex-col lg:p-0"111 >112 <div className="aspect-square h-48 shrink-0 overflow-hidden rounded-2xl sm:max-md:h-40 lg:h-40 xl:aspect-[5/3]">113 <img114 src={image.src}115 alt={image.alt}116 onError={(e) => {117 const image = e.target as HTMLImageElement;118 image.src = "onerrorimg";119 }}120 className="aspect-square h-full w-full object-cover xl:aspect-[5/3]"121 />122 </div>123 <div className="flex w-full grow flex-col justify-between gap-y-5">124 <div className="min-w-0">125 <p className="mb-3 w-fit rounded-full bg-sky-100 px-2.5 py-1.5 text-xs font-semibold uppercase text-sky-600 sm:max-md:hidden lg:hidden">126 {category}127 </p>128 <Link129 href={button.link}130 className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 duration-150 [text-wrap:balance] first-letter:uppercase hover:text-sky-700"131 >132 {title}133 </Link>134 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance] md:max-lg:line-clamp-3">135 {description}136 </p>137 </div>138 <Link139 href={button.link}140 className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"141 >142 {button.label}143 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />144 </Link>145 </div>146 </div>147 );148 }149 )}150 </div>151 </div>152 );153}154
Pioneering Innovation
Navigate the Tech Odyssey with NextMomentum
NextMomentum is where groundbreaking ideas meet actionable solutions. We're a catalyst for change in the tech industry, leading the way with innovative software and a commitment to excellence.
Cybersecurity
Safeguarding Digital AssetsDelve into how NextMomentum is revolutionizing cybersecurity measures. Explore our state-of-the-art encryption and compliance solutions that protect your enterprise from emerging threats.
Cloud Solutions
Cloud-Powered AgilityLeverage NextMomentum's robust cloud infrastructure to elevate your business operations. Discover our scalable cloud solutions designed for maximum efficiency and reliability.
AI & ML
Innovating with IntelligenceStep into the future with NextMomentum's AI and machine learning platforms. Our algorithms are redefining problem-solving and driving unparalleled business outcomes.
IoT
Connectivity ReimaginedExperience seamless integration with NextMomentum’s Internet of Things (IoT) solutions. We're weaving connectivity into the fabric of daily life, one device at a time.
DevOps
Unparalleled DevOps ExpertiseAscertain how CodeStream optimizes every stage of the software development lifecycle. Our agile DevOps practices ensure rapid delivery, reliability, and continuous innovation.
Data Analytics
Unlocking Data PotentialTurn data into action with CodeStream's advanced analytics solutions. Explore our capabilities in data mining, visualization, and predictive analytics for informed decision-making.