Components/Feature Sections
Feature Sections
Centered with middle image
0import React from "react";12const AnalyticsIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 24 24"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"14 />15 </svg>16 );17};1819const ChartIcon = ({ className }) => {20 return (21 <svg22 xmlns="http://www.w3.org/2000/svg"23 viewBox="0 0 24 24"24 preserveAspectRatio="xMidYMid meet"25 className={className}26 >27 <path28 fillRule="evenodd"29 clipRule="evenodd"30 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"31 />32 <path33 fillRule="evenodd"34 clipRule="evenodd"35 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"36 />37 </svg>38 );39};4041const PresentationIcon = ({ className }) => {42 return (43 <svg44 xmlns="http://www.w3.org/2000/svg"45 viewBox="0 0 24 24"46 preserveAspectRatio="xMidYMid meet"47 className={className}48 >49 <path50 fillRule="evenodd"51 clipRule="evenodd"52 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"53 />54 </svg>55 );56};5758const BriefcaseIcon = ({ className }) => {59 return (60 <svg61 xmlns="http://www.w3.org/2000/svg"62 viewBox="0 0 24 24"63 preserveAspectRatio="xMidYMid meet"64 className={className}65 >66 <path67 fillRule="evenodd"68 clipRule="evenodd"69 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"70 />71 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />72 </svg>73 );74};7576const data = {77 subHeading: "Unlock Your Potential",78 title: "Elevate Your Online Presence",79 paragraph:80 "At Jettwave, we specialize in maximizing your online presence and delivering tangible results. Our team of experts understands the importance of a strong digital presence in today's competitive landscape.",81 image: {82 src: "https://images.unsplash.com/photo-1575318634028-6a0cfcb60c59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80",83 alt: "",84 },85 items: [86 {87 name: "Enhanced Analytics",88 description:89 "Unlock deep insights and gain a competitive edge in real-time analysis.",90 Icon: AnalyticsIcon,91 },92 {93 name: "Interactive Charts",94 description:95 "Visualize data with interactive charts that bring your numbers to life.",96 Icon: ChartIcon,97 },98 {99 name: "Collaborative Analytics",100 description:101 "Work together seamlessly and share valuable data with your team effortlessly.",102 Icon: PresentationIcon,103 },104 {105 name: "Advanced Reporting",106 description:107 "Generate comprehensive reports with advanced analytics and data visualization.",108 Icon: BriefcaseIcon,109 },110 ],111};112113export function FeatureSections1() {114 return (115 <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">116 <div className="mx-auto mb-12 max-w-3xl text-center">117 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">118 {data.subHeading}119 </p>120 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">121 {data.title}122 </h2>123 <p className="text-lg text-slate-600 [text-wrap:balance]">124 {data.paragraph}125 </p>126 </div>127 <div className="mx-auto grid max-w-6xl grid-cols-1 place-items-center gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">128 {data.items.map(({ name, description, Icon }, index: number) => {129 return (130 <div key={index} className="flex flex-col items-center gap-y-5">131 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">132 <Icon className="h-full w-full fill-sky-600" />133 </div>134 <div className="text-center">135 <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">136 {name}137 </p>138 <p className="text-base text-slate-600 [text-wrap:balance]">139 {description}140 </p>141 </div>142 </div>143 );144 })}145 <div className="row-span-2 row-start-1 h-full max-h-[576px] w-full overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 sm:max-sm:col-span-2 lg:col-start-2">146 <img147 src={data.image.src}148 alt={data.image.alt}149 onError={(e) => {150 const image = e.target as HTMLImageElement;151 image.src = "onerrorimg";152 }}153 className="h-full w-full object-cover"154 />155 </div>156 </div>157 </div>158 );159}160
Unlock Your Potential
Elevate Your Online Presence
At Jettwave, we specialize in maximizing your online presence and delivering tangible results. Our team of experts understands the importance of a strong digital presence in today's competitive landscape.
Enhanced Analytics
Unlock deep insights and gain a competitive edge in real-time analysis.
Interactive Charts
Visualize data with interactive charts that bring your numbers to life.
Collaborative Analytics
Work together seamlessly and share valuable data with your team effortlessly.
Advanced Reporting
Generate comprehensive reports with advanced analytics and data visualization.
Split image with list
0import React from "react";12const AnalyticsIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 24 24"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"14 />15 </svg>16 );17};1819const ChartIcon = ({ className }) => {20 return (21 <svg22 xmlns="http://www.w3.org/2000/svg"23 viewBox="0 0 24 24"24 preserveAspectRatio="xMidYMid meet"25 className={className}26 >27 <path28 fillRule="evenodd"29 clipRule="evenodd"30 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"31 />32 <path33 fillRule="evenodd"34 clipRule="evenodd"35 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"36 />37 </svg>38 );39};4041const PresentationIcon = ({ className }) => {42 return (43 <svg44 xmlns="http://www.w3.org/2000/svg"45 viewBox="0 0 24 24"46 preserveAspectRatio="xMidYMid meet"47 className={className}48 >49 <path50 fillRule="evenodd"51 clipRule="evenodd"52 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"53 />54 </svg>55 );56};5758const BriefcaseIcon = ({ className }) => {59 return (60 <svg61 xmlns="http://www.w3.org/2000/svg"62 viewBox="0 0 24 24"63 preserveAspectRatio="xMidYMid meet"64 className={className}65 >66 <path67 fillRule="evenodd"68 clipRule="evenodd"69 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"70 />71 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />72 </svg>73 );74};7576const data = {77 subHeading: "Empowering Your Success",78 title: "Unleash Your Brand's Potential",79 paragraph:80 "At Jettwave, we specialize in delivering impactful results for our clients through an innovative digital approach. We take the time to understand your brand, your target audience, and your goals.",81 image: {82 src: "https://cdn.dribbble.com/users/37385/screenshots/2877055/media/c5bff626e551d322808260e135549f42.jpg?resize=800x600&vertical=center",83 alt: "",84 },85 items: [86 {87 name: "Enhanced Analytics",88 description:89 "Unlock deep insights and gain a competitive edge in real-time analysis.",90 Icon: AnalyticsIcon,91 },92 {93 name: "Interactive Charts",94 description:95 "Visualize data with interactive charts that bring your numbers to life.",96 Icon: ChartIcon,97 },98 {99 name: "Collaborative Analytics",100 description:101 "Work together seamlessly and share valuable data with your team effortlessly.",102 Icon: PresentationIcon,103 },104 {105 name: "Advanced Reporting",106 description:107 "Generate comprehensive reports with advanced analytics and data visualization.",108 Icon: BriefcaseIcon,109 },110 ],111};112113export function FeatureSections2() {114 return (115 <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">116 <div className="mb-12 max-w-3xl">117 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">118 {data.subHeading}119 </p>120 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">121 {data.title}122 </h2>123 <p className="text-lg text-slate-600 [text-wrap:balance]">124 {data.paragraph}125 </p>126 </div>127 <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">128 <div className="shrink-0 space-y-12 lg:max-w-md">129 {data.items.map(({ name, description, Icon }, index: number) => {130 return (131 <div key={index} className="flex gap-x-5">132 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">133 <Icon className="h-full w-full fill-sky-600" />134 </div>135 <div>136 <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">137 {name}138 </p>139 <p className="text-base text-slate-600 [text-wrap:balance]">140 {description}141 </p>142 </div>143 </div>144 );145 })}146 </div>147 <div className="relative w-full max-lg:h-96">148 <div className="h-full w-full overflow-hidden rounded-3xl lg:absolute lg:inset-0">149 <img150 src={data.image.src}151 alt={data.image.alt}152 onError={(e) => {153 const image = e.target as HTMLImageElement;154 image.src = "onerrorimg";155 }}156 className="h-full w-full object-cover"157 />158 </div>159 </div>160 </div>161 </div>162 );163}164
Empowering Your Success
Unleash Your Brand's Potential
At Jettwave, we specialize in delivering impactful results for our clients through an innovative digital approach. We take the time to understand your brand, your target audience, and your goals.
Enhanced Analytics
Unlock deep insights and gain a competitive edge in real-time analysis.
Interactive Charts
Visualize data with interactive charts that bring your numbers to life.
Collaborative Analytics
Work together seamlessly and share valuable data with your team effortlessly.
Advanced Reporting
Generate comprehensive reports with advanced analytics and data visualization.
Split with sticky image and grid
0import React from "react";12const AnalyticsIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 24 24"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"14 />15 </svg>16 );17};1819const ChartIcon = ({ className }) => {20 return (21 <svg22 xmlns="http://www.w3.org/2000/svg"23 viewBox="0 0 24 24"24 preserveAspectRatio="xMidYMid meet"25 className={className}26 >27 <path28 fillRule="evenodd"29 clipRule="evenodd"30 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"31 />32 <path33 fillRule="evenodd"34 clipRule="evenodd"35 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"36 />37 </svg>38 );39};4041const PresentationIcon = ({ className }) => {42 return (43 <svg44 xmlns="http://www.w3.org/2000/svg"45 viewBox="0 0 24 24"46 preserveAspectRatio="xMidYMid meet"47 className={className}48 >49 <path50 fillRule="evenodd"51 clipRule="evenodd"52 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"53 />54 </svg>55 );56};5758const BriefcaseIcon = ({ className }) => {59 return (60 <svg61 xmlns="http://www.w3.org/2000/svg"62 viewBox="0 0 24 24"63 preserveAspectRatio="xMidYMid meet"64 className={className}65 >66 <path67 fillRule="evenodd"68 clipRule="evenodd"69 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"70 />71 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />72 </svg>73 );74};7576const data = {77 subHeading: "Empowering Your Success",78 title: "Accelerate Your Growth",79 paragraph:80 "At Jettwave, our dynamic team is a formidable force, leveraging their combined expertise to drive innovation and shape the future of technology.",81 image: {82 src: "https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80",83 alt: "",84 },85 items: [86 {87 name: "Enhanced Analytics",88 description:89 "Unlock deep insights and gain a competitive edge in real-time analysis.",90 Icon: AnalyticsIcon,91 },92 {93 name: "Interactive Charts",94 description:95 "Visualize data with interactive charts that bring your numbers to life.",96 Icon: ChartIcon,97 },98 {99 name: "Collaborative Analytics",100 description:101 "Work together seamlessly and share valuable data with your team effortlessly.",102 Icon: PresentationIcon,103 },104 {105 name: "Advanced Reporting",106 description:107 "Generate comprehensive reports with advanced analytics and data visualization.",108 Icon: BriefcaseIcon,109 },110 ],111};112113export function FeatureSections3() {114 return (115 <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">116 <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">117 <div className="max-w-3xl">118 <div className="mb-8">119 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">120 {data.subHeading}121 </p>122 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">123 {data.title}124 </h2>125 <p className="text-lg text-slate-600 [text-wrap:balance]">126 {data.paragraph}127 </p>128 </div>129 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2">130 {data.items.map(({ name, description, Icon }, index: number) => {131 return (132 <div key={index} className="flex flex-col gap-y-5">133 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">134 <Icon className="h-full w-full fill-sky-600" />135 </div>136 <div>137 <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">138 {name}139 </p>140 <p className="text-base text-slate-600">{description}</p>141 </div>142 </div>143 );144 })}145 </div>146 </div>147 <div className="sticky top-12 h-fit w-full shrink-0 overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 max-lg:h-96 lg:order-first lg:aspect-square lg:max-w-xs xl:max-w-md">148 <img149 src={data.image.src}150 alt={data.image.alt}151 onError={(e) => {152 const image = e.target as HTMLImageElement;153 image.src = "onerrorimg";154 }}155 className="h-full w-full object-cover max-lg:aspect-square"156 />157 <div className="absolute inset-0 bg-sky-600 mix-blend-color backdrop-brightness-50" />158 </div>159 </div>160 </div>161 );162}163
Empowering Your Success
Accelerate Your Growth
At Jettwave, our dynamic team is a formidable force, leveraging their combined expertise to drive innovation and shape the future of technology.
Enhanced Analytics
Unlock deep insights and gain a competitive edge in real-time analysis.
Interactive Charts
Visualize data with interactive charts that bring your numbers to life.
Collaborative Analytics
Work together seamlessly and share valuable data with your team effortlessly.
Advanced Reporting
Generate comprehensive reports with advanced analytics and data visualization.
Simple side-by-side
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 AnalyticsIcon = ({ className }) => {16 return (17 <svg18 xmlns="http://www.w3.org/2000/svg"19 viewBox="0 0 24 24"20 preserveAspectRatio="xMidYMid meet"21 className={className}22 >23 <path24 fillRule="evenodd"25 clipRule="evenodd"26 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"27 />28 </svg>29 );30};3132const ChartIcon = ({ className }) => {33 return (34 <svg35 xmlns="http://www.w3.org/2000/svg"36 viewBox="0 0 24 24"37 preserveAspectRatio="xMidYMid meet"38 className={className}39 >40 <path41 fillRule="evenodd"42 clipRule="evenodd"43 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"44 />45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"49 />50 </svg>51 );52};5354const data = {55 title: "Unlock Your Brand's Potential",56 paragraph:57 "Whether you're looking to enhance your online presence, optimize your digital marketing strategy, or streamline your business operations, Jettwave has the solutions you need.",58 items: [59 {60 name: "Enhanced Analytics",61 description:62 "Unlock deep insights and gain a competitive edge in real-time analysis.",63 button: { label: "Explore Features", link: "#" },64 Icon: AnalyticsIcon,65 },66 {67 name: "Interactive Charts ",68 description:69 "Visualize data with interactive charts that bring your numbers to life.",70 button: { label: "Learn More", link: "#" },71 Icon: ChartIcon,72 },73 ],74 button: { label: "Learn more", link: "#" },75};7677export function FeatureSections4() {78 return (79 <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">80 <div className="flex gap-x-20 gap-y-12 max-xl:flex-col xl:items-center">81 <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">82 <div className="max-w-3xl">83 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">84 {data.title}85 </h2>86 <p className="text-lg text-slate-600 [text-wrap:balance]">87 {data.paragraph}88 </p>89 </div>90 <Link91 role="button"92 href={data.button.link}93 className="h-fit w-fit select-none whitespace-nowrap rounded-lg bg-slate-800 px-6 py-2.5 text-base text-slate-100 outline-sky-700 duration-75 hover:bg-slate-900 active:scale-95 disabled:pointer-events-none disabled:bg-sky-800/50"94 >95 {data.button.label}96 </Link>97 </div>98 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2">99 {data.items.map(100 ({ name, description, button, Icon }, index: number) => {101 return (102 <div key={index} className="flex flex-col gap-y-5">103 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">104 <Icon className="h-full w-full fill-sky-600" />105 </div>106 <div className="flex grow flex-col justify-between gap-y-6">107 <div>108 <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">109 {name}110 </p>111 <p className="text-base text-slate-600">{description}</p>112 </div>113 <Link114 href={button.link}115 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"116 >117 {button.label}118 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />119 </Link>120 </div>121 </div>122 );123 }124 )}125 </div>126 </div>127 </div>128 );129}130
Unlock Your Brand's Potential
Whether you're looking to enhance your online presence, optimize your digital marketing strategy, or streamline your business operations, Jettwave has the solutions you need.
Enhanced Analytics
Unlock deep insights and gain a competitive edge in real-time analysis.
Interactive Charts
Visualize data with interactive charts that bring your numbers to life.
Split with heading and card cluster
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 AnalyticsIcon = ({ className }) => {16 return (17 <svg18 xmlns="http://www.w3.org/2000/svg"19 viewBox="0 0 24 24"20 preserveAspectRatio="xMidYMid meet"21 className={className}22 >23 <path24 fillRule="evenodd"25 clipRule="evenodd"26 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"27 />28 </svg>29 );30};3132const ChartIcon = ({ className }) => {33 return (34 <svg35 xmlns="http://www.w3.org/2000/svg"36 viewBox="0 0 24 24"37 preserveAspectRatio="xMidYMid meet"38 className={className}39 >40 <path41 fillRule="evenodd"42 clipRule="evenodd"43 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"44 />45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"49 />50 </svg>51 );52};5354const PresentationIcon = ({ className }) => {55 return (56 <svg57 xmlns="http://www.w3.org/2000/svg"58 viewBox="0 0 24 24"59 preserveAspectRatio="xMidYMid meet"60 className={className}61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"66 />67 </svg>68 );69};7071const BriefcaseIcon = ({ className }) => {72 return (73 <svg74 xmlns="http://www.w3.org/2000/svg"75 viewBox="0 0 24 24"76 preserveAspectRatio="xMidYMid meet"77 className={className}78 >79 <path80 fillRule="evenodd"81 clipRule="evenodd"82 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"83 />84 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />85 </svg>86 );87};8889const data = {90 subHeading: "Elevate Your Brand",91 title: "Take Your Brand's Presence to New Heights",92 paragraph:93 "Discover our comprehensive range of products and services to enhance your brand's online presence. Whether you're looking to create an account, explore our offerings, or seek a customized solution, we're here to help. Let us take your brand to new heights and connect with your audience effectively.",94 paragraph2:95 "I've had the pleasure of partnering with this team for our online branding needs, and I must say the experience has been transformative.",96 items: [97 {98 name: "Intelligent Data Insights",99 description:100 "Optimize your team's performance and drive business growth.",101 button: { label: "Learn more", link: "#" },102 Icon: AnalyticsIcon,103 },104 {105 name: "Real-time Performance Tracking",106 description: "Unlock intelligent data insights.",107 button: { label: "Explore features", link: "#" },108 Icon: ChartIcon,109 },110 {111 name: "Streamlined Team Collaboration",112 description: "Streamline collaboration and enhance communication.",113 button: { label: "Get started", link: "#" },114 Icon: PresentationIcon,115 },116 {117 name: "Robust Data Security",118 description: "Ensure the security of your valuable data.",119 button: { label: "Begin your journey", link: "#" },120 Icon: BriefcaseIcon,121 },122 ],123};124125export function FeatureSections5() {126 return (127 <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">128 <div className="flex gap-x-20 gap-y-12 max-xl:flex-col xl:items-center">129 <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">130 <div className="max-w-3xl">131 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">132 {data.subHeading}133 </p>134 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">135 {data.title}136 </h2>137 <p className="mb-4 border-b border-slate-200 pb-4 text-lg text-slate-600 [text-wrap:balance]">138 {data.paragraph}139 </p>140 <p className="text-lg italic text-slate-500 [text-wrap:balance]">141 "{data.paragraph2}"142 </p>143 </div>144 </div>145 <div className="grid w-full grid-cols-1 gap-6 max-md:mx-2 md:my-3 md:grid-cols-2">146 {data.items.map(147 ({ name, description, button, Icon }, index: number) => {148 return (149 <div150 key={index}151 className="flex flex-col gap-y-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-md:odd:-translate-x-2 max-md:even:translate-x-2 md:odd:-translate-y-3 md:even:translate-y-3"152 >153 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">154 <Icon className="h-full w-full fill-sky-600" />155 </div>156 <div className="flex grow flex-col justify-between gap-y-6">157 <div>158 <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">159 {name}160 </p>161 <p className="text-base text-slate-600">{description}</p>162 </div>163 <Link164 href={button.link}165 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"166 >167 {button.label}168 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />169 </Link>170 </div>171 </div>172 );173 }174 )}175 </div>176 </div>177 </div>178 );179}180
Elevate Your Brand
Take Your Brand's Presence to New Heights
Discover our comprehensive range of products and services to enhance your brand's online presence. Whether you're looking to create an account, explore our offerings, or seek a customized solution, we're here to help. Let us take your brand to new heights and connect with your audience effectively.
"I've had the pleasure of partnering with this team for our online branding needs, and I must say the experience has been transformative."
Intelligent Data Insights
Optimize your team's performance and drive business growth.
Real-time Performance Tracking
Unlock intelligent data insights.
Streamlined Team Collaboration
Streamline collaboration and enhance communication.
Robust Data Security
Ensure the security of your valuable data.
Four-column simple
0import React from "react";12const AnalyticsIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 24 24"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"14 />15 </svg>16 );17};1819const ChartIcon = ({ className }) => {20 return (21 <svg22 xmlns="http://www.w3.org/2000/svg"23 viewBox="0 0 24 24"24 preserveAspectRatio="xMidYMid meet"25 className={className}26 >27 <path28 fillRule="evenodd"29 clipRule="evenodd"30 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"31 />32 <path33 fillRule="evenodd"34 clipRule="evenodd"35 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"36 />37 </svg>38 );39};4041const PresentationIcon = ({ className }) => {42 return (43 <svg44 xmlns="http://www.w3.org/2000/svg"45 viewBox="0 0 24 24"46 preserveAspectRatio="xMidYMid meet"47 className={className}48 >49 <path50 fillRule="evenodd"51 clipRule="evenodd"52 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"53 />54 </svg>55 );56};5758const BriefcaseIcon = ({ className }) => {59 return (60 <svg61 xmlns="http://www.w3.org/2000/svg"62 viewBox="0 0 24 24"63 preserveAspectRatio="xMidYMid meet"64 className={className}65 >66 <path67 fillRule="evenodd"68 clipRule="evenodd"69 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"70 />71 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />72 </svg>73 );74};7576const data = [77 {78 name: "Seamless Integrations",79 description:80 "Easily integrate with your favorite tools and services to streamline your workflow and enhance productivity.",81 Icon: AnalyticsIcon,82 },83 {84 name: "Mobile Accessibility",85 description:86 "Stay connected and manage your tasks on the go with our mobile-friendly platform and dedicated apps.",87 Icon: ChartIcon,88 },89 {90 name: "24/7 Customer Support",91 description:92 "Get round-the-clock support from our dedicated team to address any queries or issues you may have.",93 Icon: PresentationIcon,94 },95 {96 name: "Data Security",97 description:98 "Rest assured knowing your sensitive information is safeguarded with our robust data security measures.",99 Icon: BriefcaseIcon,100 },101];102103export function FeatureSections6() {104 return (105 <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">106 <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 xl:grid-cols-4">107 {data.map(({ name, description, Icon }, index: number) => {108 return (109 <div110 key={index}111 className="flex max-w-sm flex-col items-center gap-y-5"112 >113 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">114 <Icon className="h-full w-full fill-sky-600" />115 </div>116 <div className="text-center">117 <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">118 {name}119 </p>120 <p className="text-base text-slate-600 [text-wrap:balance]">121 {description}122 </p>123 </div>124 </div>125 );126 })}127 </div>128 </div>129 );130}131
Seamless Integrations
Easily integrate with your favorite tools and services to streamline your workflow and enhance productivity.
Mobile Accessibility
Stay connected and manage your tasks on the go with our mobile-friendly platform and dedicated apps.
24/7 Customer Support
Get round-the-clock support from our dedicated team to address any queries or issues you may have.
Data Security
Rest assured knowing your sensitive information is safeguarded with our robust data security measures.
Three-column centered
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 AnalyticsIcon = ({ className }) => {16 return (17 <svg18 xmlns="http://www.w3.org/2000/svg"19 viewBox="0 0 24 24"20 preserveAspectRatio="xMidYMid meet"21 className={className}22 >23 <path24 fillRule="evenodd"25 clipRule="evenodd"26 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"27 />28 </svg>29 );30};3132const ChartIcon = ({ className }) => {33 return (34 <svg35 xmlns="http://www.w3.org/2000/svg"36 viewBox="0 0 24 24"37 preserveAspectRatio="xMidYMid meet"38 className={className}39 >40 <path41 fillRule="evenodd"42 clipRule="evenodd"43 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"44 />45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"49 />50 </svg>51 );52};5354const PresentationIcon = ({ className }) => {55 return (56 <svg57 xmlns="http://www.w3.org/2000/svg"58 viewBox="0 0 24 24"59 preserveAspectRatio="xMidYMid meet"60 className={className}61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"66 />67 </svg>68 );69};7071const data = {72 subHeading: "Empowering Your Success",73 title: "Ignite Your Brand's Potential",74 paragraph:75 "At Jettwave, we are dedicated to making your brand shine in the digital realm. Our result-oriented approach combines organic digital strategies with a deep understanding of your brand and target audience.",76 items: [77 {78 name: "Scalable Infrastructure",79 description:80 "Scale your operations seamlessly as your business grows, with our flexible and scalable infrastructure.",81 button: { label: "Learn more", link: "#" },82 Icon: AnalyticsIcon,83 },84 {85 name: "Automated Workflows",86 description:87 "Automate repetitive tasks and streamline your workflows for increased efficiency and time savings.",88 button: { label: "Explore features", link: "#" },89 Icon: ChartIcon,90 },91 {92 name: "Customizable Solutions",93 description:94 "Tailor our solutions to meet your specific business needs with customizable features and configurations.",95 button: { label: "Customize Now", link: "#" },96 Icon: PresentationIcon,97 },98 ],99};100101export function FeatureSections7() {102 return (103 <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">104 <div className="mx-auto mb-12 max-w-3xl text-center">105 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">106 {data.subHeading}107 </p>108 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">109 {data.title}110 </h2>111 <p className="text-lg text-slate-600 [text-wrap:balance]">112 {data.paragraph}113 </p>114 </div>115 <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-3">116 {data.items.map(117 ({ name, description, button, Icon }, index: number) => {118 return (119 <div120 key={index}121 className="flex max-w-sm flex-col items-center gap-y-5"122 >123 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">124 <Icon className="h-full w-full fill-sky-600" />125 </div>126 <div className="flex grow flex-col justify-between gap-y-6">127 <div className="text-center">128 <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">129 {name}130 </p>131 <p className="text-base text-slate-600 [text-wrap:balance]">132 {description}133 </p>134 </div>135 <Link136 href={button.link}137 className="group inline-flex items-center justify-center gap-x-0.5 whitespace-nowrap text-center text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"138 >139 {button.label}140 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />141 </Link>142 </div>143 </div>144 );145 }146 )}147 </div>148 </div>149 );150}151
Empowering Your Success
Ignite Your Brand's Potential
At Jettwave, we are dedicated to making your brand shine in the digital realm. Our result-oriented approach combines organic digital strategies with a deep understanding of your brand and target audience.
Scalable Infrastructure
Scale your operations seamlessly as your business grows, with our flexible and scalable infrastructure.
Automated Workflows
Automate repetitive tasks and streamline your workflows for increased efficiency and time savings.
Customizable Solutions
Tailor our solutions to meet your specific business needs with customizable features and configurations.
Three-column left-aligned
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 AnalyticsIcon = ({ className }) => {16 return (17 <svg18 xmlns="http://www.w3.org/2000/svg"19 viewBox="0 0 24 24"20 preserveAspectRatio="xMidYMid meet"21 className={className}22 >23 <path24 fillRule="evenodd"25 clipRule="evenodd"26 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"27 />28 </svg>29 );30};3132const ChartIcon = ({ className }) => {33 return (34 <svg35 xmlns="http://www.w3.org/2000/svg"36 viewBox="0 0 24 24"37 preserveAspectRatio="xMidYMid meet"38 className={className}39 >40 <path41 fillRule="evenodd"42 clipRule="evenodd"43 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"44 />45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"49 />50 </svg>51 );52};5354const PresentationIcon = ({ className }) => {55 return (56 <svg57 xmlns="http://www.w3.org/2000/svg"58 viewBox="0 0 24 24"59 preserveAspectRatio="xMidYMid meet"60 className={className}61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"66 />67 </svg>68 );69};7071const data = [72 {73 name: "Dedicated Customer Support",74 description:75 "Receive dedicated customer support from our knowledgeable team whenever you need assistance.",76 button: { label: "Learn more", link: "#" },77 Icon: AnalyticsIcon,78 },79 {80 name: "Flexible and Scalable Architecture",81 description:82 "Adapt and scale your architecture to meet the evolving needs of your growing business.",83 button: { label: "Explore features", link: "#" },84 Icon: ChartIcon,85 },86 {87 name: "Workflow Automation",88 description:89 "Automate repetitive tasks and streamline your workflows for enhanced productivity and efficiency.",90 button: { label: "Customize Now", link: "#" },91 Icon: PresentationIcon,92 },93];9495export function FeatureSections8() {96 return (97 <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">98 <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 xl:grid-cols-3">99 {data.map(({ name, description, button, Icon }, index: number) => {100 return (101 <div key={index} className="flex max-w-sm gap-x-5">102 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">103 <Icon className="h-full w-full fill-sky-600" />104 </div>105 <div className="flex h-full flex-col justify-between gap-y-4">106 <div>107 <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">108 {name}109 </p>110 <p className="text-base text-slate-600">{description}</p>111 </div>112 <Link113 href={button.link}114 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"115 >116 {button.label}117 <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />118 </Link>119 </div>120 </div>121 );122 })}123 </div>124 </div>125 );126}127
Dedicated Customer Support
Receive dedicated customer support from our knowledgeable team whenever you need assistance.
Flexible and Scalable Architecture
Adapt and scale your architecture to meet the evolving needs of your growing business.
Workflow Automation
Automate repetitive tasks and streamline your workflows for enhanced productivity and efficiency.
3x2 grid with overhead image
0import React from "react";12const AnalyticsIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 24 24"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"14 />15 </svg>16 );17};1819const ChartIcon = ({ className }) => {20 return (21 <svg22 xmlns="http://www.w3.org/2000/svg"23 viewBox="0 0 24 24"24 preserveAspectRatio="xMidYMid meet"25 className={className}26 >27 <path28 fillRule="evenodd"29 clipRule="evenodd"30 d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"31 />32 <path33 fillRule="evenodd"34 clipRule="evenodd"35 d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"36 />37 </svg>38 );39};4041const PresentationIcon = ({ className }) => {42 return (43 <svg44 xmlns="http://www.w3.org/2000/svg"45 viewBox="0 0 24 24"46 preserveAspectRatio="xMidYMid meet"47 className={className}48 >49 <path50 fillRule="evenodd"51 clipRule="evenodd"52 d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"53 />54 </svg>55 );56};5758const BriefcaseIcon = ({ className }) => {59 return (60 <svg61 xmlns="http://www.w3.org/2000/svg"62 viewBox="0 0 24 24"63 preserveAspectRatio="xMidYMid meet"64 className={className}65 >66 <path67 fillRule="evenodd"68 clipRule="evenodd"69 d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"70 />71 <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />72 </svg>73 );74};7576const GlobeIcon = ({ className }) => {77 return (78 <svg79 xmlns="http://www.w3.org/2000/svg"80 viewBox="0 0 24 24"81 preserveAspectRatio="xMidYMid meet"82 className={className}83 >84 <path85 fillRule="evenodd"86 clipRule="evenodd"87 d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM6.262 6.072a8.25 8.25 0 1010.562-.766 4.5 4.5 0 01-1.318 1.357L14.25 7.5l.165.33a.809.809 0 01-1.086 1.085l-.604-.302a1.125 1.125 0 00-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 01-2.288 4.04l-.723.724a1.125 1.125 0 01-1.298.21l-.153-.076a1.125 1.125 0 01-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 01-.21-1.298L9.75 12l-1.64-1.64a6 6 0 01-1.676-3.257l-.172-1.03z"88 />89 </svg>90 );91};9293const CommisionIcon = ({ className }) => {94 return (95 <svg96 xmlns="http://www.w3.org/2000/svg"97 viewBox="0 0 24 24"98 preserveAspectRatio="xMidYMid meet"99 className={className}100 >101 <path d="M12 7.5C10.7574 7.5 9.75 8.50736 9.75 9.75C9.75 10.9926 10.7574 12 12 12C13.2426 12 14.25 10.9926 14.25 9.75C14.25 8.50736 13.2426 7.5 12 7.5Z" />102 <path103 fillRule="evenodd"104 clipRule="evenodd"105 d="M1.5 4.875C1.5 3.83947 2.33947 3 3.375 3H20.625C21.6605 3 22.5 3.83947 22.5 4.875V14.625C22.5 15.6605 21.6605 16.5 20.625 16.5H3.375C2.33947 16.5 1.5 15.6605 1.5 14.625V4.875ZM8.25 9.75C8.25 7.67893 9.92893 6 12 6C14.0711 6 15.75 7.67893 15.75 9.75C15.75 11.8211 14.0711 13.5 12 13.5C9.92893 13.5 8.25 11.8211 8.25 9.75ZM18.75 9C18.3358 9 18 9.33579 18 9.75V9.7575C18 10.1717 18.3358 10.5075 18.75 10.5075H18.7575C19.1717 10.5075 19.5075 10.1717 19.5075 9.7575V9.75C19.5075 9.33579 19.1717 9 18.7575 9H18.75ZM4.5 9.75C4.5 9.33579 4.83579 9 5.25 9H5.2575C5.67171 9 6.0075 9.33579 6.0075 9.75V9.7575C6.0075 10.1717 5.67171 10.5075 5.2575 10.5075H5.25C4.83579 10.5075 4.5 10.1717 4.5 9.7575V9.75Z"106 />107 <path d="M2.25 18C1.83579 18 1.5 18.3358 1.5 18.75C1.5 19.1642 1.83579 19.5 2.25 19.5C7.65005 19.5 12.8802 20.2222 17.8498 21.5749C19.0404 21.899 20.25 21.0168 20.25 19.7551V18.75C20.25 18.3358 19.9142 18 19.5 18H2.25Z" />108 </svg>109 );110};111112const data = {113 subHeading: "Results-Oriented Approach",114 title: "Gain more insight into how people use your software",115 paragraph:116 "With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.",117 items: [118 {119 name: "Customizable Templates",120 description:121 "Create unique designs with our extensive collection of customizable templates tailored to your specific needs.",122 Icon: AnalyticsIcon,123 },124 {125 name: "Real-time Collaboration",126 description:127 "Collaborate seamlessly with your team in real-time, enabling efficient communication and shared decision-making.",128 Icon: ChartIcon,129 },130 {131 name: "Automated Workflows",132 description:133 "Streamline your workflows and save time with automated processes that simplify repetitive tasks.",134 Icon: PresentationIcon,135 },136 {137 name: "Intuitive User Interface",138 description:139 "Enjoy a user-friendly and intuitive interface that makes navigating our platform effortless and enjoyable.",140 Icon: BriefcaseIcon,141 },142 {143 name: "Scalable Infrastructure",144 description:145 "Rely on our robust and scalable infrastructure to support your growing business needs without compromising performance.",146 Icon: GlobeIcon,147 },148 {149 name: "Advanced Analytics",150 description:151 "Gain valuable insights and make data-driven decisions with our advanced analytics capabilities and reporting tools.",152 Icon: CommisionIcon,153 },154 ],155};156157export function FeatureSections9() {158 return (159 <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">160 <div className="mb-12 grid grid-cols-1 gap-x-20 gap-y-12 md:grid-cols-2">161 <div className="max-w-3xl">162 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">163 {data.subHeading}164 </p>165 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">166 {data.title}167 </h2>168 <p className="text-lg text-slate-600 [text-wrap:balance]">169 {data.paragraph}170 </p>171 </div>172 <div className="relative mt-6 max-md:mr-6 md:max-lg:ml-6">173 <div className="absolute inset-0 h-full max-h-[320px] w-full -translate-y-6 translate-x-6 rounded-3xl bg-slate-200 md:-translate-x-6 lg:-translate-x-10" />174 <div className="relative h-full max-h-[320px] w-full overflow-hidden rounded-3xl">175 <img176 src="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"177 alt=""178 onError={(e) => {179 const image = e.target as HTMLImageElement;180 image.src = "onerrorimg";181 }}182 className="h-full w-full object-cover"183 />184 </div>185 </div>186 </div>187 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">188 {data.items.map(({ name, description, Icon }, index: number) => {189 return (190 <div key={index} className="flex flex-col gap-y-5">191 <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">192 <Icon className="h-full w-full fill-sky-600" />193 </div>194 <div>195 <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">196 {name}197 </p>198 <p className="text-base text-slate-600">{description}</p>199 </div>200 </div>201 );202 })}203 </div>204 </div>205 );206}207
Results-Oriented Approach
Gain more insight into how people use your software
With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.
Customizable Templates
Create unique designs with our extensive collection of customizable templates tailored to your specific needs.
Real-time Collaboration
Collaborate seamlessly with your team in real-time, enabling efficient communication and shared decision-making.
Automated Workflows
Streamline your workflows and save time with automated processes that simplify repetitive tasks.
Intuitive User Interface
Enjoy a user-friendly and intuitive interface that makes navigating our platform effortless and enjoyable.
Scalable Infrastructure
Rely on our robust and scalable infrastructure to support your growing business needs without compromising performance.
Advanced Analytics
Gain valuable insights and make data-driven decisions with our advanced analytics capabilities and reporting tools.
3x2 card layout
0import React, { FC, ReactElement } from "react";12const AnalyticsIcon: FC<{ className: string }> = ({3 className,4}): ReactElement => {5 return (6 <svg7 xmlns="http://www.w3.org/2000/svg"8 viewBox="0 0 24 24"9 preserveAspectRatio="xMidYMid meet"10 className={className}11 >12 <path13 fillRule="evenodd"14 clipRule="evenodd"15 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"16 />17 </svg>18 );19};2021const ChartIcon: FC<{ className: string }> = ({ className }): ReactElement => {22 return (23 <svg24 xmlns="http://www.w3.org/2000/svg"25 view