Components/Testimonials
Testimonials
3x2 grid with rating stars
0import React from "react";12const StarIcon = ({ className }) => (3 <svg4 className={className}5 aria-hidden='true'6 viewBox='0 0 24 24'7 xmlns='http://www.w3.org/2000/svg'8 >9 <path10 fillRule='evenodd'11 clipRule='evenodd'12 d='M10.7881 3.2108C11.2365 2.13286 12.7635 2.13286 13.2119 3.2108L15.2939 8.21652L20.6979 8.64976C21.8617 8.74306 22.3336 10.1953 21.4469 10.9549L17.3296 14.4818L18.5875 19.7553C18.8584 20.8909 17.623 21.7884 16.6267 21.1799L12 18.354L7.37335 21.1799C6.37703 21.7884 5.14164 20.8909 5.41252 19.7553L6.67044 14.4818L2.55309 10.9549C1.66645 10.1953 2.13833 8.74306 3.30206 8.64976L8.70615 8.21652L10.7881 3.2108Z'13 />14 </svg>15);1617const StarHalfIcon = ({ className }) => (18 <svg19 className={className}20 aria-hidden='true'21 viewBox='0 0 24 24'22 xmlns='http://www.w3.org/2000/svg'23 >24 <path25 fillRule='evenodd'26 clipRule='evenodd'27 d='M10.7881 3.2108C11.0123 2.67181 11.5062 2.40232 12.0001 2.40234L12 18.354L7.37335 21.1799C6.37703 21.7884 5.14164 20.8909 5.41252 19.7553L6.67044 14.4818L2.55309 10.9549C1.66645 10.1953 2.13833 8.74306 3.30206 8.64976L8.70615 8.21652L10.7881 3.2108Z'28 />29 </svg>30);3132const data = {33 subHeading: "Web development redefined",34 title: "The future of web design with Jettwave",35 paragraph:36 "Jettwave's modular components bring a revolutionary shift in web design, enabling developers and designers to produce powerful and visually stunning web pages with ease.",37 items: [38 {39 rating: 10,40 testimonial:41 "Jettwave's Enterprise Suite has revolutionized how our team collaborates on large-scale projects. The cohesion it brings to our workflow is unparalleled.",42 person: {43 name: "Liam T.",44 position: "Tech Lead, InnovateWeb Tech",45 image: {46 src: "https://randomuser.me/api/portraits/men/35.jpg",47 alt: "",48 },49 },50 },51 {52 rating: 9,53 testimonial:54 "With Jettwave, our design philosophy has evolved. Leveraging its modular components, we've shifted our focus from nitty-gritty code details to pure creativity.",55 person: {56 name: "Sophia A.",57 position: "Head of Design, ArtisticWeb Creations",58 image: {59 src: "https://randomuser.me/api/portraits/women/30.jpg",60 alt: "",61 },62 },63 },64 {65 rating: 10,66 testimonial:67 "What impresses me about Jettwave is its adaptability. No matter the design complexity or requirements, its components gracefully fit the bill.",68 person: {69 name: "Benjamin L.",70 position: "Frontend Expert, WebCraftsmen",71 image: {72 src: "https://randomuser.me/api/portraits/men/21.jpg",73 alt: "",74 },75 },76 },77 {78 rating: 10,79 testimonial:80 "Using Jettwave's pre-configured UI kits, I've significantly enhanced the aesthetics of my projects while cutting down on development time. It's simply brilliant!",81 person: {82 name: "Olivia W.",83 position: "Senior Web Designer, WebScape Designs",84 image: {85 src: "https://randomuser.me/api/portraits/women/45.jpg",86 alt: "",87 },88 },89 },90 {91 rating: 8,92 testimonial:93 "With Jettwave, we've managed to eliminate a plethora of third-party dependencies from our projects. It's a comprehensive tool that every developer needs in their arsenal.",94 person: {95 name: "Ethan P.",96 position: "UX Expert, InterfaceMasters",97 image: {98 src: "https://randomuser.me/api/portraits/men/12.jpg",99 alt: "",100 },101 },102 },103 {104 rating: 9,105 testimonial:106 "Building pages is a breeze with Jettwave's drag-and-drop functionality. I can visualize my designs, tweak them in real-time, and extract optimized code instantly.",107 person: {108 name: "Ava K.",109 position: "Lead UI/UX Artist, Visionary Design Studios",110 image: {111 src: "https://randomuser.me/api/portraits/women/20.jpg",112 alt: "",113 },114 },115 },116 ],117};118119export function Testimonials1() {120 return (121 <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'>122 <div className='mx-auto mb-12 max-w-3xl text-center'>123 <p className='mb-1 truncate text-lg font-semibold capitalize text-sky-600'>124 {data.subHeading}125 </p>126 <h2 className='mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]'>127 {data.title}128 </h2>129 <p className='text-lg text-slate-600 [text-wrap:balance]'>130 {data.paragraph}131 </p>132 </div>133 <div className='grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3'>134 {data.items.map(({ rating, testimonial, person }, index: number) => {135 let starRating;136 if (rating > 10) {137 starRating = 5;138 } else if (rating < 1) {139 starRating = 0.5;140 } else {141 starRating = rating / 2;142 }143 const fullStars = Math.floor(starRating);144 const halfStar = starRating - fullStars === 0.5;145 return (146 <div147 key={index}148 className='flex flex-col justify-between gap-y-8 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50'149 >150 <div>151 <div className='mb-4 flex gap-x-0.5'>152 {[...Array(fullStars)].map((_, starIndex) => (153 <StarIcon154 key={starIndex}155 className='h-6 w-6 fill-sky-600'156 />157 ))}158 {halfStar && (159 <StarHalfIcon className='h-6 w-6 fill-sky-600' />160 )}161 </div>162 <p className='text-base text-slate-900 first-letter:uppercase'>163 {testimonial}164 </p>165 </div>166 <div className='flex items-center gap-x-4'>167 <div className='h-12 w-12 shrink-0 overflow-hidden rounded-full'>168 <img169 src={person.image.src}170 alt={person.image.alt}171 onError={(e) => {172 const image = e.target as HTMLImageElement;173 image.src = "onerrorimg";174 }}175 className='aspect-square h-full w-full object-cover'176 />177 </div>178 <div className='min-w-0'>179 <p className='truncate text-base font-medium capitalize text-slate-900'>180 {person.name}181 </p>182 <p className='truncate text-sm text-slate-600'>183 {person.position}184 </p>185 </div>186 </div>187 </div>188 );189 })}190 </div>191 </div>192 );193}194
Web development redefined
The future of web design with Jettwave
Jettwave's modular components bring a revolutionary shift in web design, enabling developers and designers to produce powerful and visually stunning web pages with ease.
Jettwave's Enterprise Suite has revolutionized how our team collaborates on large-scale projects. The cohesion it brings to our workflow is unparalleled.
Liam T.
Tech Lead, InnovateWeb Tech
With Jettwave, our design philosophy has evolved. Leveraging its modular components, we've shifted our focus from nitty-gritty code details to pure creativity.
Sophia A.
Head of Design, ArtisticWeb Creations
What impresses me about Jettwave is its adaptability. No matter the design complexity or requirements, its components gracefully fit the bill.
Benjamin L.
Frontend Expert, WebCraftsmen
Using Jettwave's pre-configured UI kits, I've significantly enhanced the aesthetics of my projects while cutting down on development time. It's simply brilliant!
Olivia W.
Senior Web Designer, WebScape Designs
With Jettwave, we've managed to eliminate a plethora of third-party dependencies from our projects. It's a comprehensive tool that every developer needs in their arsenal.
Ethan P.
UX Expert, InterfaceMasters
Building pages is a breeze with Jettwave's drag-and-drop functionality. I can visualize my designs, tweak them in real-time, and extract optimized code instantly.
Ava K.
Lead UI/UX Artist, Visionary Design Studios
Simple centered
0import React from "react";12const PayPalLogo = ({ className }) => {3 return (4 <svg5 xmlns='http://www.w3.org/2000/svg'6 viewBox='0 0 143 48'7 preserveAspectRatio='xMidYMid meet'8 className={className}9 >10 <path11 d='M53.2126 12.7716H45.3374C44.7985 12.7716 44.3402 13.1631 44.2561 13.6951L41.071 33.8892C41.0077 34.2877 41.3163 34.6469 41.7205 34.6469H45.4802C46.0191 34.6469 46.4774 34.2554 46.5614 33.7223L47.4205 28.2756C47.5034 27.7425 47.9628 27.3509 48.5006 27.3509H50.9936C56.1812 27.3509 59.1751 24.8406 59.957 19.8661C60.3094 17.6897 59.972 15.9797 58.9529 14.7822C57.8336 13.4671 55.8484 12.7716 53.2126 12.7716ZM54.1211 20.1471C53.6905 22.9729 51.5314 22.9729 49.4437 22.9729H48.2553L49.089 17.6955C49.1385 17.3765 49.4149 17.1416 49.7373 17.1416H50.282C51.7041 17.1416 53.0456 17.1416 53.7388 17.9523C54.1522 18.4359 54.2789 19.1545 54.1211 20.1471Z'12 fill='#253B80'13 />14 <path15 d='M76.7532 20.0561H72.982C72.6607 20.0561 72.3832 20.291 72.3337 20.61L72.1667 21.6647L71.903 21.2824C71.0866 20.0975 69.266 19.7014 67.449 19.7014C63.2816 19.7014 59.7223 22.8577 59.0291 27.2853C58.6687 29.4939 59.1811 31.6058 60.4339 33.0786C61.5831 34.4327 63.2275 34.997 65.1839 34.997C68.5417 34.997 70.4037 32.8379 70.4037 32.8379L70.2356 33.8858C70.1723 34.2865 70.4809 34.6458 70.8828 34.6458H74.2797C74.8198 34.6458 75.2758 34.2543 75.361 33.7211L77.3992 20.8138C77.4637 20.4165 77.1562 20.0561 76.7532 20.0561ZM71.4965 27.3958C71.1326 29.5503 69.4226 30.9966 67.2417 30.9966C66.1466 30.9966 65.2714 30.6454 64.7095 29.9798C64.1522 29.3189 63.9403 28.3781 64.1176 27.3302C64.4573 25.1941 66.1961 23.7006 68.3437 23.7006C69.4146 23.7006 70.2851 24.0564 70.8586 24.7278C71.4332 25.406 71.6612 26.3526 71.4965 27.3958Z'16 fill='#253B80'17 />18 <path19 d='M96.8379 20.056H93.0482C92.6867 20.056 92.347 20.2357 92.142 20.5362L86.9153 28.2352L84.6997 20.8368C84.5604 20.3738 84.1332 20.056 83.6496 20.056H79.9256C79.473 20.056 79.1587 20.4982 79.3026 20.9243L83.4768 33.1741L79.5525 38.714C79.2439 39.1505 79.5548 39.7504 80.0879 39.7504H83.873C84.2322 39.7504 84.5685 39.5754 84.7723 39.2806L97.3768 21.0866C97.6785 20.6514 97.3687 20.056 96.8379 20.056Z'20 fill='#253B80'21 />22 <path23 d='M109.385 12.7716H101.508C100.971 12.7716 100.512 13.1631 100.428 13.6951L97.2431 33.8892C97.1798 34.2877 97.4884 34.6469 97.8903 34.6469H101.932C102.307 34.6469 102.629 34.3729 102.688 33.9998L103.591 28.2756C103.674 27.7425 104.134 27.3509 104.672 27.3509H107.163C112.352 27.3509 115.345 24.8406 116.128 19.8661C116.481 17.6897 116.142 15.9797 115.123 14.7822C114.005 13.4671 112.021 12.7716 109.385 12.7716ZM110.293 20.1471C109.864 22.9729 107.705 22.9729 105.616 22.9729H104.429L105.263 17.6955C105.313 17.3765 105.587 17.1416 105.911 17.1416H106.455C107.876 17.1416 109.219 17.1416 109.912 17.9523C110.325 18.4359 110.451 19.1545 110.293 20.1471Z'24 fill='#179BD7'25 />26 <path27 d='M132.924 20.0561H129.155C128.832 20.0561 128.556 20.291 128.508 20.61L128.341 21.6647L128.076 21.2824C127.26 20.0975 125.44 19.7014 123.623 19.7014C119.456 19.7014 115.898 22.8577 115.205 27.2853C114.845 29.4939 115.355 31.6058 116.608 33.0786C117.76 34.4327 119.402 34.997 121.358 34.997C124.716 34.997 126.578 32.8379 126.578 32.8379L126.41 33.8858C126.347 34.2865 126.655 34.6458 127.059 34.6458H130.455C130.993 34.6458 131.451 34.2543 131.535 33.7211L133.575 20.8138C133.637 20.4165 133.328 20.0561 132.924 20.0561ZM127.667 27.3958C127.306 29.5503 125.594 30.9966 123.413 30.9966C122.32 30.9966 121.442 30.6454 120.88 29.9798C120.323 29.3189 120.113 28.3781 120.288 27.3302C120.63 25.1941 122.367 23.7006 124.515 23.7006C125.585 23.7006 126.456 24.0564 127.029 24.7278C127.606 25.406 127.834 26.3526 127.667 27.3958Z'28 fill='#179BD7'29 />30 <path31 d='M137.37 13.3254L134.138 33.8892C134.074 34.2876 134.383 34.6469 134.785 34.6469H138.034C138.574 34.6469 139.033 34.2554 139.116 33.7222L142.303 13.5292C142.366 13.1308 142.058 12.7704 141.656 12.7704H138.017C137.696 12.7715 137.419 13.0064 137.37 13.3254Z'32 fill='#179BD7'33 />34 <path35 d='M8.36683 38.5713L8.96907 34.746L7.62756 34.7149H1.22168L5.67344 6.48781C5.68726 6.40259 5.73216 6.32314 5.7978 6.26671C5.86344 6.21029 5.9475 6.1792 6.03501 6.1792H16.8362C20.422 6.1792 22.8966 6.92538 24.1886 8.39817C24.7943 9.08908 25.1801 9.81108 25.3666 10.6056C25.5624 11.4393 25.5659 12.4354 25.3747 13.6502L25.3609 13.7389V14.5173L25.9666 14.8605C26.4767 15.1311 26.882 15.4408 27.1929 15.7955C27.7111 16.3862 28.0462 17.137 28.1879 18.0271C28.3341 18.9426 28.2857 20.0319 28.0462 21.2652C27.7699 22.6839 27.3231 23.9194 26.7197 24.9305C26.1646 25.862 25.4576 26.6347 24.6182 27.2335C23.8167 27.8024 22.8644 28.2342 21.7877 28.5105C20.7445 28.7823 19.555 28.9193 18.2503 28.9193H17.4097C16.8086 28.9193 16.2248 29.1358 15.7665 29.5239C15.307 29.92 15.003 30.4612 14.9097 31.0531L14.8464 31.3974L13.7824 38.1395L13.734 38.3871C13.7214 38.4654 13.6995 38.5045 13.6673 38.531C13.6385 38.5552 13.597 38.5713 13.5567 38.5713H8.36683Z'36 fill='#253B80'37 />38 <path39 d='M26.5401 13.8286C26.5079 14.0347 26.471 14.2455 26.4296 14.4619C25.0052 21.7752 20.132 24.3016 13.908 24.3016H10.739C9.9779 24.3016 9.3365 24.8544 9.2179 25.6052L7.59541 35.8951L7.13596 38.8119C7.0588 39.3047 7.4388 39.7492 7.93626 39.7492H13.5568C14.2224 39.7492 14.7878 39.2656 14.8926 38.6092L14.9478 38.3236L16.0061 31.608L16.074 31.2395C16.1777 30.5809 16.7442 30.0972 17.4098 30.0972H18.2504C23.6959 30.0972 27.9588 27.8863 29.2047 21.4885C29.7252 18.8158 29.4558 16.5842 28.0786 15.0147C27.6617 14.5414 27.1447 14.1487 26.5401 13.8286Z'40 fill='#179BD7'41 />42 <path43 d='M25.05 13.2345C24.8323 13.1712 24.6078 13.1136 24.3775 13.0618C24.146 13.0111 23.9088 12.9662 23.6647 12.9271C22.8103 12.7889 21.8741 12.7233 20.8711 12.7233H12.4052C12.1967 12.7233 11.9987 12.7705 11.8213 12.8557C11.431 13.0434 11.1408 13.413 11.0706 13.8656L9.26959 25.2725L9.21777 25.6053C9.33638 24.8545 9.97777 24.3018 10.7389 24.3018H13.9079C20.1318 24.3018 25.005 21.7742 26.4295 14.4621C26.4721 14.2456 26.5078 14.0348 26.54 13.8287C26.1796 13.6376 25.7892 13.4741 25.3689 13.3347C25.2653 13.3002 25.1582 13.2668 25.05 13.2345Z'44 fill='#222D65'45 />46 <path47 d='M11.0707 13.8655C11.1409 13.413 11.4311 13.0433 11.8214 12.8568C11.9999 12.7716 12.1968 12.7244 12.4053 12.7244H20.8712C21.8742 12.7244 22.8103 12.79 23.6648 12.9282C23.9089 12.9673 24.1461 13.0122 24.3776 13.0629C24.6079 13.1147 24.8324 13.1723 25.05 13.2356C25.1583 13.2679 25.2654 13.3013 25.3702 13.3347C25.7905 13.474 26.1808 13.6387 26.5413 13.8287C26.965 11.1261 26.5378 9.28594 25.0765 7.6197C23.4656 5.78533 20.558 5 16.8374 5H6.03623C5.27623 5 4.62793 5.55273 4.51047 6.30467L0.0115023 34.8219C-0.0771644 35.3862 0.358108 35.8952 0.926957 35.8952H7.59538L9.26968 25.2724L11.0707 13.8655Z'48 fill='#253B80'49 />50 </svg>51 );52};5354const QuoteIcon = ({ className }) => {55 return (56 <svg57 xmlns='http://www.w3.org/2000/svg'58 viewBox='0 0 448 320'59 preserveAspectRatio='xMidYMid meet'60 className={className}61 >62 <path d='M0 120C0 53.7 53.7 0 120 0H128C145.7 0 160 14.3 160 32C160 49.7 145.7 64 128 64H120C89.1 64 64 89.1 64 120V128H128C163.3 128 192 156.7 192 192V256C192 291.3 163.3 320 128 320H64C28.7 320 0 291.3 0 256V224V192V120ZM256 120C256 53.7 309.7 0 376 0H384C401.7 0 416 14.3 416 32C416 49.7 401.7 64 384 64H376C345.1 64 320 89.1 320 120V128H384C419.3 128 448 156.7 448 192V256C448 291.3 419.3 320 384 320H320C284.7 320 256 291.3 256 256V224V192V120Z' />63 </svg>64 );65};6667const data = {68 testimonial:69 "Our collaboration with Jettwave has revolutionized our business operations. Their exceptional proficiency in the field of digital marketing has played a pivotal role in amplifying our online presence and attracting a broader customer base.",70 person: {71 name: "Zara F.",72 position: "Director of Engineering",73 image: {74 src: "https://randomuser.me/api/portraits/women/58.jpg",75 alt: "",76 },77 },78 Logo: PayPalLogo,79};8081export function Testimonials2() {82 return (83 <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'>84 <div className='mx-auto flex max-w-4xl flex-col items-center gap-y-8'>85 <div className='m-1 h-16 w-16 shrink-0 overflow-hidden rounded-2xl border border-sky-200 bg-white p-3 ring-4 ring-sky-100'>86 <QuoteIcon className='h-full w-full fill-sky-600' />87 </div>88 <div>89 <p className='mb-10 text-center text-xl italic tracking-wide text-slate-900 [text-wrap:balance]'>90 "{data.testimonial}"91 </p>92 <div className='grid grid-cols-2 items-center divide-x divide-slate-200'>93 <div className='flex items-center justify-end gap-x-4 pr-8'>94 <div className='h-12 w-12 shrink-0 overflow-hidden rounded-full'>95 <img96 src={data.person.image.src}97 alt={data.person.image.alt}98 onError={(e) => {99 const image = e.target as HTMLImageElement;100 image.src = "onerrorimg";101 }}102 className='h-full w-full object-cover'103 />104 </div>105 <div className='min-w-0'>106 <p className='truncate text-base font-medium capitalize text-slate-900'>107 {data.person.name}108 </p>109 <p className='truncate text-sm text-slate-600'>110 {data.person.position}111 </p>112 </div>113 </div>114 <data.Logo className='h-10 fill-current pl-8' />115 </div>116 </div>117 </div>118 </div>119 );120}121
"Our collaboration with Jettwave has revolutionized our business operations. Their exceptional proficiency in the field of digital marketing has played a pivotal role in amplifying our online presence and attracting a broader customer base."
Zara F.
Director of Engineering
Simple left-aligned
0import React from "react";12const QuoteIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 448 320"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path d="M0 120C0 53.7 53.7 0 120 0H128C145.7 0 160 14.3 160 32C160 49.7 145.7 64 128 64H120C89.1 64 64 89.1 64 120V128H128C163.3 128 192 156.7 192 192V256C192 291.3 163.3 320 128 320H64C28.7 320 0 291.3 0 256V224V192V120ZM256 120C256 53.7 309.7 0 376 0H384C401.7 0 416 14.3 416 32C416 49.7 401.7 64 384 64H376C345.1 64 320 89.1 320 120V128H384C419.3 128 448 156.7 448 192V256C448 291.3 419.3 320 384 320H320C284.7 320 256 291.3 256 256V224V192V120Z" />11 </svg>12 );13};1415export function Testimonials3() {16 return (17 <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">18 <div className="mx-auto flex max-w-4xl gap-x-16 gap-y-16 max-sm:flex-col sm:pt-7">19 <img20 src="https://picsum.photos/128"21 className="h-32 w-32 rounded-full bg-sky-100 object-cover"22 />2324 <div className="relative">25 <QuoteIcon className="absolute -left-4 -z-10 h-28 w-28 -translate-y-[50%] fill-sky-200" />26 <p className="mb-6 text-xl text-slate-900">27 Working with Jettwave has been a game-changer for our business.28 Their expertise in digital marketing has helped us significantly29 increase our online visibility and attract a larger audience. The30 team is highly knowledgeable, professional, and dedicated to31 delivering results.32 </p>33 <p className="text-base font-semibold capitalize text-sky-600">34 Kristin Watson35 </p>36 <p className="text-base font-medium text-slate-600">CEO, Jettwave</p>37 </div>38 </div>39 </div>40 );41}42
Working with Jettwave has been a game-changer for our business. Their expertise in digital marketing has helped us significantly increase our online visibility and attract a larger audience. The team is highly knowledgeable, professional, and dedicated to delivering results.
Kristin Watson
CEO, Jettwave
Simple left-aligned
0import Link from "next/link";1import React, { useState, useRef, useEffect } from "react";2import Image from "next/image";34const data = [5 {6 testi:7 "Jettwave's team provided exceptional customer service and demonstrated unwavering dedication. They approached the project with utmost professionalism, delivering outstanding results efficiently and effectively. We are truly impressed!",8 author: "Kyle Rutledge",9 about: "CEO, Paris",10 image: "https://picsum.photos/100",11 },12];1314const Quote = ({ iconClass }) => {15 return (16 <svg17 width="140"18 height="100"19 viewBox="0 0 140 100"20 fill="none"21 xmlns="http://www.w3.org/2000/svg"22 className={iconClass}23 >24 <path25 fillRule="evenodd"26 clipRule="evenodd"27 d="M27.9834 1.05947C21.5254 2.92547 17.3754 5.28047 12.2984 9.96047C2.03742 19.4185 0.025412 27.1785 0.00041203 57.3845C-0.020588 83.3755 0.743417 87.6785 6.38042 93.3325C11.9344 98.9015 16.1754 99.9095 32.3684 99.5085C47.6704 99.1295 51.5694 97.7145 56.4834 90.7585L59.4834 86.5115V69.6835V52.8555L56.4834 48.6085C51.6054 41.7025 47.6344 40.2395 32.7334 39.8545C18.3674 39.4825 18.5014 39.5835 21.4324 31.3675C24.0574 24.0055 28.6834 20.8985 38.9094 19.6305C44.1724 18.9775 45.9184 18.2975 47.7274 16.1945C50.8194 12.6005 50.7704 6.70947 47.6184 3.04547C45.5614 0.653473 44.4214 0.260475 38.8684 0.0274749C35.3564 -0.120525 30.4584 0.344473 27.9834 1.05947ZM107.983 1.05947C101.525 2.92547 97.3754 5.28047 92.2984 9.96047C82.0374 19.4185 80.0254 27.1785 80.0004 57.3845C79.9794 83.3755 80.7434 87.6785 86.3804 93.3325C91.9344 98.9015 96.1754 99.9095 112.368 99.5085C127.67 99.1295 131.569 97.7145 136.483 90.7585L139.483 86.5115V69.6835V52.8555L136.483 48.6085C131.605 41.7025 127.634 40.2395 112.733 39.8545C98.3674 39.4825 98.5014 39.5835 101.432 31.3675C104.057 24.0055 108.683 20.8985 118.909 19.6305C124.172 18.9775 125.918 18.2975 127.727 16.1945C130.819 12.6005 130.77 6.70947 127.618 3.04547C125.561 0.653473 124.421 0.260475 118.868 0.0274749C115.356 -0.120525 110.458 0.344473 107.983 1.05947Z"28 />29 </svg>30 );31};3233export function Testimonials4() {34 return (35 <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">36 <div className="flex flex-col gap-10">37 <div className="flex justify-center gap-10 max-sm:flex-col ">38 <div className="flex flex-col">39 {data.map(({ testi, author, about, image }, index: number) => {40 return (41 <div key={index} className="flex w-full gap-6 rounded-xl">42 <div className="flex flex-wrap gap-x-3 ">43 <div>44 <img45 className="h-20 w-20 rounded-full object-cover"46 src={image}47 ></img>48 </div>49 <div className="my-auto flex flex-col gap-y-2">50 <p className="font-poppins w-full text-xl font-semibold text-slate-700">51 {author}52 </p>53 <p className="font-poppins text-grey w-full">{about}</p>54 </div>55 </div>56 </div>57 );58 })}59 </div>60 <div className="relative flex w-1/2 flex-col">61 <Quote62 iconClass={"fill-slate-300 absolute -translate-y-10 w-20 h-20"}63 />6465 <p className=" z-10 text-xl font-semibold text-slate-700">66 Content Description lorem ipsum consetetur sadipscing elitr, sed67 diam nonumy lorem ipsum consetetur sadipscing elitr, sed diam68 nonumy. Content Description lorem ipsum consetetur sadipscing69 elitr, sed diam.70 </p>71 <Quote72 iconClass={73 "fill-slate-300 rotate-180 absolute bottom-0 right-0 translate-y-10 flex w-20 h-20"74 }75 />76 </div>77 </div>78 </div>79 </div>80 );81}82
Kyle Rutledge
CEO, Paris
Content Description lorem ipsum consetetur sadipscing elitr, sed diam nonumy lorem ipsum consetetur sadipscing elitr, sed diam nonumy. Content Description lorem ipsum consetetur sadipscing elitr, sed diam.
2x2 grid
0import React from "react";12const QuoteIcon = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 448 320"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path d="M0 120C0 53.7 53.7 0 120 0H128C145.7 0 160 14.3 160 32C160 49.7 145.7 64 128 64H120C89.1 64 64 89.1 64 120V128H128C163.3 128 192 156.7 192 192V256C192 291.3 163.3 320 128 320H64C28.7 320 0 291.3 0 256V224V192V120ZM256 120C256 53.7 309.7 0 376 0H384C401.7 0 416 14.3 416 32C416 49.7 401.7 64 384 64H376C345.1 64 320 89.1 320 120V128H384C419.3 128 448 156.7 448 192V256C448 291.3 419.3 320 384 320H320C284.7 320 256 291.3 256 256V224V192V120Z" />11 </svg>12 );13};1415const data = [16 {17 testimonial:18 "We have been thoroughly impressed by the exceptional services provided by Jettwave. Their team's unwavering commitment and extensive knowledge were evident in every aspect of our collaboration. We wholeheartedly recommend their services to any business!",19 author: {20 name: "Sophia Walker",21 position: "CTO",22 image: {23 src: "https://picsum.photos/40",24 altText: "alttext",25 },26 },27 },28 {29 testimonial:30 "Jettwave's expertise and innovative solutions have transformed our business. Their team's professionalism and attention to detail have been instrumental in our success. We highly endorse their services!",31 author: {32 name: "John Anderson",33 position: "CEO",34 image: {35 src: "https://picsum.photos/40",36 altText: "alttext",37 },38 },39 },40 {41 testimonial:42 "Working with Jettwave has been a game-changer for our company. Their strategic approach and unmatched skills have propelled our growth and market presence. We enthusiastically recommend Jettwave!",43 author: {44 name: "Emily Thompson",45 position: "Marketing Director",46 image: {47 src: "https://picsum.photos/40",48 altText: "alttext",49 },50 },51 },52 {53 testimonial:54 "Jettwave's dedication and expertise have exceeded our expectations. Their exceptional services have been instrumental in our business expansion. We confidently endorse Jettwave to any organization seeking transformative results.",55 author: {56 name: "David Roberts",57 position: "COO",58 image: {59 src: "https://picsum.photos/40",60 altText: "alttext",61 },62 },63 },64];6566export function Testimonials5() {67 return (68 <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">69 <div className="mx-auto mb-12 max-w-3xl text-center">70 <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">71 Testimonials72 </h2>73 <p className="text-lg text-slate-600">74 Our Testimonials section features feedback from our valued clients,75 highlighting their experiences and insights into our services.76 </p>77 </div>7879 <div className="mx-auto grid max-w-5xl grid-cols-1 gap-4 lg:grid-cols-2">80 {data.map(({ testimonial, author }, index: number) => {81 return (82 <div83 key={index}84 className="relative mx-auto flex max-w-xl flex-col items-center justify-between gap-y-8 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"85 >8687 <QuoteIcon className="absolute bottom-1/2 left-4 h-28 w-28 fill-sky-200/50" />88 <p className="relative text-center text-base text-slate-900">89 {testimonial}90 </p>9192 <div className="flex items-center gap-x-4 max-sm:pb-6 sm:pr-6">93 <img94 src={author.image.src}95 className="h-12 w-12 rounded-full bg-sky-100 object-cover"96 />97 <div>98 <p className="text-base font-semibold capitalize text-sky-600">99 {author.name}100 </p>101 <p className="text-base font-medium text-slate-600">102 {author.position}103 </p>104 </div>105 </div>106 </div>107 );108 })}109 </div>110 </div>111 );112}113
Testimonials
Our Testimonials section features feedback from our valued clients, highlighting their experiences and insights into our services.
We have been thoroughly impressed by the exceptional services provided by Jettwave. Their team's unwavering commitment and extensive knowledge were evident in every aspect of our collaboration. We wholeheartedly recommend their services to any business!
Sophia Walker
CTO
Jettwave's expertise and innovative solutions have transformed our business. Their team's professionalism and attention to detail have been instrumental in our success. We highly endorse their services!
John Anderson
CEO
Working with Jettwave has been a game-changer for our company. Their strategic approach and unmatched skills have propelled our growth and market presence. We enthusiastically recommend Jettwave!
Emily Thompson
Marketing Director
Jettwave's dedication and expertise have exceeded our expectations. Their exceptional services have been instrumental in our business expansion. We confidently endorse Jettwave to any organization seeking transformative results.
David Roberts
COO
Three-column simple
0import React from "react";12const data = [3 {4 testimonial:5 "We have been thoroughly impressed by the exceptional services by Jettwave. Their team's unwavering commitment and extensive knowledge were evident in every aspect of our collaboration. We wholeheartedly recommend their services to any business!",6 author: {7 name: "Sophia Walker",8 position: "CTO",9 image: {10 src: "https://picsum.photos/100",11 altText: "Sophia Walker's headshot",12 },13 },14 },15 {16 testimonial:17 "Jettwave's expertise and innovative solutions have transformed our business. Their team's professionalism and attention to detail have been instrumental in our success. We highly endorse their services!",18 author: {19 name: "John Anderson",20 position: "CEO",21 image: {22 src: "https://picsum.photos/100",23 altText: "John Anderson's headshot",24 },25 },26 },27 {28 testimonial:29 "Working with Jettwave has been a game-changer for our company. Their strategic approach and unmatched skills have propelled our growth and market presence. We enthusiastically recommend Jettwave!",30 author: {31 name: "Emily Thompson",32 position: "Marketing Director",33 image: {34 src: "https://picsum.photos/100",35 altText: "Emily Thompson's headshot",36 },37 },38 },39];4041export function Testimonials6() {42 return (43 <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">44 <div className="mx-auto mb-12 max-w-3xl text-center">45 <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">46 Hear from Our Satisfied Clients47 </h2>48 <p className="text-lg text-slate-600">49 Discover what our clients have to say about their experiences working50 with us. Our Testimonials section showcases their feedback, providing51 valuable insights into the quality of our services and the impact52 we've had on their businesses.53 </p>54 </div>5556 <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 sm:max-lg:grid-rows-2 lg:grid-cols-3">57 {data.map(({ testimonial, author }, index: number) => {58 return (59 <div60 key={index}61 className="mx-auto flex max-w-sm flex-col items-center justify-between gap-y-6 sm:max-lg:last:col-span-2"62 >63 <div className="flex flex-col items-center gap-y-8">64 <img65 src={author.image.src}66 className="h-20 w-20 rounded-full bg-sky-100 object-cover"67 />68 <p className="relative text-center text-base text-slate-900">69 {testimonial}70 </p>71 </div>7273 <div className="text-center">74 <p className="text-base font-semibold capitalize text-sky-600">75 {author.name}76 </p>77 <p className="text-base font-medium text-slate-600">78 {author.position}79 </p>80 </div>81 </div>82 );83 })}84 </div>85 </div>86 );87}88
Hear from Our Satisfied Clients
Discover what our clients have to say about their experiences working with us. Our Testimonials section showcases their feedback, providing valuable insights into the quality of our services and the impact we've had on their businesses.
We have been thoroughly impressed by the exceptional services by Jettwave. Their team's unwavering commitment and extensive knowledge were evident in every aspect of our collaboration. We wholeheartedly recommend their services to any business!
Sophia Walker
CTO
Jettwave's expertise and innovative solutions have transformed our business. Their team's professionalism and attention to detail have been instrumental in our success. We highly endorse their services!
John Anderson
CEO
Working with Jettwave has been a game-changer for our company. Their strategic approach and unmatched skills have propelled our growth and market presence. We enthusiastically recommend Jettwave!
Emily Thompson
Marketing Director
Simple carousel
0import React, { useState, useEffect } from "react";12const ChevronRightIcon = ({ className }) => {3 return (4 <svg5 className={className}6 aria-hidden="true"7 viewBox="0 0 24 24"8 xmlns="http://www.w3.org/2000/svg"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 ChevronLeftIcon = ({ className }) => {16 return (17 <svg18 className={className}19 aria-hidden="true"20 viewBox="0 0 24 24"21 xmlns="http://www.w3.org/2000/svg"22 >23 <path d="M15.3339 3.91556C14.9144 3.75089 14.4528 3.70785 14.0075 3.79186C13.5622 3.87588 13.1532 4.08319 12.8322 4.38755L6.42198 10.4626C5.99171 10.8705 5.75 11.4236 5.75 12.0004C5.75 12.5771 5.99171 13.1303 6.42198 13.5381L12.8322 19.6132C13.1532 19.9173 13.5621 20.1243 14.0073 20.2082C14.4524 20.2921 14.9138 20.249 15.3331 20.0845C15.7524 19.9199 16.1109 19.6412 16.363 19.2835C16.6152 18.9259 16.7499 18.5055 16.75 18.0754V5.92534C16.7501 5.49518 16.6156 5.07465 16.3636 4.71692C16.1115 4.35918 15.7532 4.08031 15.3339 3.91556Z" />24 </svg>25 );26};2728const PayPalLogo = ({ className }) => {29 return (30 <svg31 xmlns="http://www.w3.org/2000/svg"32 viewBox="0 0 143 48"33 preserveAspectRatio="xMidYMid meet"34 className={className}35 >36 <path37 d="M53.2126 12.7716H45.3374C44.7985 12.7716 44.3402 13.1631 44.2561 13.6951L41.071 33.8892C41.0077 34.2877 41.3163 34.6469 41.7205 34.6469H45.4802C46.0191 34.6469 46.4774 34.2554 46.5614 33.7223L47.4205 28.2756C47.5034 27.7425 47.9628 27.3509 48.5006 27.3509H50.9936C56.1812 27.3509 59.1751 24.8406 59.957 19.8661C60.3094 17.6897 59.972 15.9797 58.9529 14.7822C57.8336 13.4671 55.8484 12.7716 53.2126 12.7716ZM54.1211 20.1471C53.6905 22.9729 51.5314 22.9729 49.4437 22.9729H48.2553L49.089 17.6955C49.1385 17.3765 49.4149 17.1416 49.7373 17.1416H50.282C51.7041 17.1416 53.0456 17.1416 53.7388 17.9523C54.1522 18.4359 54.2789 19.1545 54.1211 20.1471Z"38 fill="#253B80"39 />40 <path41 d="M76.7532 20.0561H72.982C72.6607 20.0561 72.3832 20.291 72.3337 20.61L72.1667 21.6647L71.903 21.2824C71.0866 20.0975 69.266 19.7014 67.449 19.7014C63.2816 19.7014 59.7223 22.8577 59.0291 27.2853C58.6687 29.4939 59.1811 31.6058 60.4339 33.0786C61.5831 34.4327 63.2275 34.997 65.1839 34.997C68.5417 34.997 70.4037 32.8379 70.4037 32.8379L70.2356 33.8858C70.1723 34.2865 70.4809 34.6458 70.8828 34.6458H74.2797C74.8198 34.6458 75.2758 34.2543 75.361 33.7211L77.3992 20.8138C77.4637 20.4165 77.1562 20.0561 76.7532 20.0561ZM71.4965 27.3958C71.1326 29.5503 69.4226 30.9966 67.2417 30.9966C66.1466 30.9966 65.2714 30.6454 64.7095 29.9798C64.1522 29.3189 63.9403 28.3781 64.1176 27.3302C64.4573 25.1941 66.1961 23.7006 68.3437 23.7006C69.4146 23.7006 70.2851 24.0564 70.8586 24.7278C71.4332 25.406 71.6612 26.3526 71.4965 27.3958Z"42 fill="#253B80"43 />44 <path45 d="M96.8379 20.056H93.0482C92.6867 20.056 92.347 20.2357 92.142 20.5362L86.9153 28.2352L84.6997 20.8368C84.5604 20.3738 84.1332 20.056 83.6496 20.056H79.9256C79.473 20.056 79.1587 20.4982 79.3026 20.9243L83.4768 33.1741L79.5525 38.714C79.2439 39.1505 79.5548 39.7504 80.0879 39.7504H83.873C84.2322 39.7504 84.5685 39.5754 84.7723 39.2806L97.3768 21.0866C97.6785 20.6514 97.3687 20.056 96.8379 20.056Z"46 fill="#253B80"47 />48 <path49 d="M109.385 12.7716H101.508C100.971 12.7716 100.512 13.1631 100.428 13.6951L97.2431 33.8892C97.1798 34.2877 97.4884 34.6469 97.8903 34.6469H101.932C102.307 34.6469 102.629 34.3729 102.688 33.9998L103.591 28.2756C103.674 27.7425 104.134 27.3509 104.672 27.3509H107.163C112.352 27.3509 115.345 24.8406 116.128 19.8661C116.481 17.6897 116.142 15.9797 115.123 14.7822C114.005 13.4671 112.021 12.7716 109.385 12.7716ZM110.293 20.1471C109.864 22.9729 107.705 22.9729 105.616 22.9729H104.429L105.263 17.6955C105.313 17.3765 105.587 17.1416 105.911 17.1416H106.455C107.876 17.1416 109.219 17.1416 109.912 17.9523C110.325 18.4359 110.451 19.1545 110.293 20.1471Z"50 fill="#179BD7"51 />52 <path53 d="M132.924 20.0561H129.155C128.832 20.0561 128.556 20.291 128.508 20.61L128.341 21.6647L128.076 21.2824C127.26 20.0975 125.44 19.7014 123.623 19.7014C119.456 19.7014 115.898 22.8577 115.205 27.2853C114.845 29.4939 115.355 31.6058 116.608 33.0786C117.76 34.4327 119.402 34.997 121.358 34.997C124.716 34.997 126.578 32.8379 126.578 32.8379L126.41 33.8858C126.347 34.2865 126.655 34.6458 127.059 34.6458H130.455C130.993 34.6458 131.451 34.2543 131.535 33.7211L133.575 20.8138C133.637 20.4165 133.328 20.0561 132.924 20.0561ZM127.667 27.3958C127.306 29.5503 125.594 30.9966 123.413 30.9966C122.32 30.9966 121.442 30.6454 120.88 29.9798C120.323 29.3189 120.113 28.3781 120.288 27.3302C120.63 25.1941 122.367 23.7006 124.515 23.7006C125.585 23.7006 126.456 24.0564 127.029 24.7278C127.606 25.406 127.834 26.3526 127.667 27.3958Z"54 fill="#179BD7"55 />56 <path57 d="M137.37 13.3254L134.138 33.8892C134.074 34.2876 134.383 34.6469 134.785 34.6469H138.034C138.574 34.6469 139.033 34.2554 139.116 33.7222L142.303 13.5292C142.366 13.1308 142.058 12.7704 141.656 12.7704H138.017C137.696 12.7715 137.419 13.0064 137.37 13.3254Z"58 fill="#179BD7"59 />60 <path61 d="M8.36683 38.5713L8.96907 34.746L7.62756 34.7149H1.22168L5.67344 6.48781C5.68726 6.40259 5.73216 6.32314 5.7978 6.26671C5.86344 6.21029 5.9475 6.1792 6.03501 6.1792H16.8362C20.422 6.1792 22.8966 6.92538 24.1886 8.39817C24.7943 9.08908 25.1801 9.81108 25.3666 10.6056C25.5624 11.4393 25.5659 12.4354 25.3747 13.6502L25.3609 13.7389V14.5173L25.9666 14.8605C26.4767 15.1311 26.882 15.4408 27.1929 15.7955C27.7111 16.3862 28.0462 17.137 28.1879 18.0271C28.3341 18.9426 28.2857 20.0319 28.0462 21.2652C27.7699 22.6839 27.3231 23.9194 26.7197 24.9305C26.1646 25.862 25.4576 26.6347 24.6182 27.2335C23.8167 27.8024 22.8644 28.2342 21.7877 28.5105C20.7445 28.7823 19.555 28.9193 18.2503 28.9193H17.4097C16.8086 28.9193 16.2248 29.1358 15.7665 29.5239C15.307 29.92 15.003 30.4612 14.9097 31.0531L14.8464 31.3974L13.7824 38.1395L13.734 38.3871C13.7214 38.4654 13.6995 38.5045 13.6673 38.531C13.6385 38.5552 13.597 38.5713 13.5567 38.5713H8.36683Z"62 fill="#253B80"63 />64 <path65 d="M26.5401 13.8286C26.5079 14.0347 26.471 14.2455 26.4296 14.4619C25.0052 21.7752 20.132 24.3016 13.908 24.3016H10.739C9.9779 24.3016 9.3365 24.8544 9.2179 25.6052L7.59541 35.8951L7.13596 38.8119C7.0588 39.3047 7.4388 39.7492 7.93626 39.7492H13.5568C14.2224 39.7492 14.7878 39.2656 14.8926 38.6092L14.9478 38.3236L16.0061 31.608L16.074 31.2395C16.1777 30.5809 16.7442 30.0972 17.4098 30.0972H18.2504C23.6959 30.0972 27.9588 27.8863 29.2047 21.4885C29.7252 18.8158 29.4558 16.5842 28.0786 15.0147C27.6617 14.5414 27.1447 14.1487 26.5401 13.8286Z"66 fill="#179BD7"67 />68 <path69 d="M25.05 13.2345C24.8323 13.1712 24.6078 13.1136 24.3775 13.0618C24.146 13.0111 23.9088 12.9662 23.6647 12.9271C22.8103 12.7889 21.8741 12.7233 20.8711 12.7233H12.4052C12.1967 12.7233 11.9987 12.7705 11.8213 12.8557C11.431 13.0434 11.1408 13.413 11.0706 13.8656L9.26959 25.2725L9.21777 25.6053C9.33638 24.8545 9.97777 24.3018 10.7389 24.3018H13.9079C20.1318 24.3018 25.005 21.7742 26.4295 14.4621C26.4721 14.2456 26.5078 14.0348 26.54 13.8287C26.1796 13.6376 25.7892 13.4741 25.3689 13.3347C25.2653 13.3002 25.1582 13.2668 25.05 13.2345Z"70 fill="#222D65"71 />72 <path73 d="M11.0707 13.8655C11.1409 13.413 11.4311 13.0433 11.8214 12.8568C11.9999 12.7716 12.1968 12.7244 12.4053 12.7244H20.8712C21.8742 12.7244 22.8103 12.79 23.6648 12.9282C23.9089 12.9673 24.1461 13.0122 24.3776 13.0629C24.6079 13.1147 24.8324 13.1723 25.05 13.2356C25.1583 13.2679 25.2654 13.3013 25.3702 13.3347C25.7905 13.474 26.1808 13.6387 26.5413 13.8287C26.965 11.1261 26.5378 9.28594 25.0765 7.6197C23.4656 5.78533 20.558 5 16.8374 5H6.03623C5.27623 5 4.62793 5.55273 4.51047 6.30467L0.0115023 34.8219C-0.0771644 35.3862 0.358108 35.8952 0.926957 35.8952H7.59538L9.26968 25.2724L11.0707 13.8655Z"74 fill="#253B80"75 />76 </svg>77 );78};7980const data = [81 {82 testimonial:83 "After integrating Jettwave's Advanced Suite into our development cycle, we experienced a profound enhancement in our project output. The tools and assets provided by Jettwave have been nothing short of transformational, enabling us to push the boundaries of what's possible in web design.",84 person: {85 name: "Alexander Hamilton",86 position: "Product Developer at QuantumWeb",87 image: {88 src: "https://randomuser.me/api/portraits/men/60.jpg",89 alt: "",90 },91 },92 Logo: PayPalLogo,93 },94 {95 testimonial:96 "Jettwave, with its unparalleled suite of modular components, has been a beacon of inspiration for our design team. It's liberated us from the routine technical challenges, allowing us to focus solely on pioneering unique and captivating web experiences.",97 person: {98 name: "Elizabeth Turner",99 position: "Lead Designer at Ethereal",100 image: {101 src: "https://randomuser.me/api/portraits/women/40.jpg",102 alt: "",103 },104 },105 Logo: PayPalLogo,106 },107 // {108 // testimonial:109 // "In the ever-evolving domain of web development, Jettwave has consistently proven itself as an indispensable asset. Its vast array of design elements and tools adapt seamlessly to any project requirement, consistently delivering results that exceed our expectations.",110 // person: {111 // name: "Nathan Drake",112 // position: "Frontend Specialist at ByteCrafters",113 // image: {114 // src: "https://randomuser.me/api/portraits/men/15.jpg",115 // alt: "",116 // },117 // },118 // Logo: PayPalLogo,119 // },120];121122interface CarouselItem {123 testimonial: string;124 person: {125 name: string;126 position: string;127 image: {128 src: string;129 alt: string;130 };131 };132 Logo: any;133}134135function moveItemToBack(arr: CarouselItem[]): CarouselItem[] {136 if (arr.length <= 1) {137 // No need to move if array has 0 or 1 item138 return arr;139 }140 const firstItem: CarouselItem = arr.shift()!; // Remove the first item from the array141 arr.push(firstItem); // Append the first item to the end of the array142 return arr;143}144145function moveItemToFront(arr: CarouselItem[]): CarouselItem[] {146 if (arr.length <= 1) {147 // No need to move if array has 0 or 1 item148 return arr;149 }150 const lastItem: CarouselItem = arr.pop()!; // Remove the last item from the array151 arr.unshift(lastItem); // Add the last item to the front of the array152 return arr;153}154155type CarouselHook = {156 carouselData: CarouselItem[];157 current: number;158 setCurrent: React.Dispatch<React.SetStateAction<number>>;159};160161const useCarousel = (data: CarouselItem[], duration: number): CarouselHook => {162 const [carouselData, setCarouselData] = useState<CarouselItem[]>(data);163 const [current, setCurrent] = useState<number>(0);164165 useEffect(() => {166 let timeoutId: NodeJS.Timeout;167168 const moveItem = () => {169 if (current === 1) {170 setCarouselData(moveItemToBack(data)); // Move item to the back of the carousel171 setCurrent(0); // Reset the current index172 } else if (current === -1) {173 setCarouselData(moveItemToFront(data)); // Move item to the front of the carousel174 setCurrent(0); // Reset the current index175 }176 };177178 if (current !== 0) {179 timeoutId = setTimeout(moveItem, 500); // Trigger moveItem after the specified duration180 }181182 return () => clearTimeout(timeoutId); // Clear the timeout on cleanup183 }, [current, data, duration]);184185 return {186 carouselData,187 current,188 setCurrent,189 };190};191192export function Testimonials7() {193 const { carouselData, current, setCurrent } = useCarousel(data, 150);194 return (195 <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">196 <div className="relative flex h-[300px] items-center justify-between gap-x-20">197 <button198 onClick={() => setCurrent(current - 1)}199 className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-full border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100 max-lg:hidden"200 >201 <ChevronLeftIcon className="h-full w-full fill-sky-600" />202 </button>203204 {carouselData.map(({ testimonial, person, Logo }, index: number) => {205 const selected = carouselData[index] === carouselData[0];206207 return (208 <div209 className={`${210 current === 0211 ? !selected212 ? "opacity-0"213 : ""214 : current === 1215 ? "-translate-x-1/4 opacity-0"216 : "translate-x-1/4 opacity-0"217 } absolute inset-0 mx-auto h-fit w-full max-w-4xl duration-500`}218 >219 <Logo className="mx-auto mb-6 h-12 fill-current" />220 <div>221 <p className="mb-10 line-clamp-5 text-center text-xl italic tracking-wide text-slate-900 [text-wrap:balance]">222 "{testimonial}"223 </p>224 <div className="flex items-center justify-center gap-x-5">225 <div className="h-12 w-12 shrink-0 overflow-hidden rounded-full">226 <img227 src={person.image.src}228 alt={person.image.alt}229 onError={(e) => {230 const image = e.target as HTMLImageElement;231 image.src = "onerrorimg";232 }}233 className="h-full w-full object-cover"234 />235 </div>236 <div className="min-w-0">237 <p className="truncate text-lg font-semibold capitalize text-slate-900">238 {person.name}239 <span className="mx-3 text-base font-normal text-slate-600">240 /241 </span>242 <span className="text-base font-normal text-slate-600">243 {person.position}244 </span>245 </p>246 </div>247 </div>248 </div>249 </div>250 );251 })}252253 <button254 onClick={() => setCurrent(current + 1)}255 className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-full border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100 max-lg:hidden"256 >257 <ChevronRightIcon className="h-full w-full fill-sky-600" />258 </button>259 </div>260 </div>261 );262}263
"After integrating Jettwave's Advanced Suite into our development cycle, we experienced a profound enhancement in our project output. The tools and assets provided by Jettwave have been nothing short of transformational, enabling us to push the boundaries of what's possible in web design."
Alexander Hamilton/Product Developer at QuantumWeb
"Jettwave, with its unparalleled suite of modular components, has been a beacon of inspiration for our design team. It's liberated us from the routine technical challenges, allowing us to focus solely on pioneering unique and captivating web experiences."
Elizabeth Turner/Lead Designer at Ethereal
Three-column
0import React from "react";12const QuoteIcon = ({ className }) => {3 return (4 <svg5 width="140"6 height="100"7 viewBox="0 0 140 100"8 xmlns="http://www.w3.org/2000/svg"9 className={className}10 >11 <path12 fillRule="evenodd"13 clipRule="evenodd"14 d="M27.9834 1.05947C21.5254 2.92547 17.3754 5.28047 12.2984 9.96047C2.03742 19.4185 0.025412 27.1785 0.00041203 57.3845C-0.020588 83.3755 0.743417 87.6785 6.38042 93.3325C11.9344 98.9015 16.1754 99.9095 32.3684 99.5085C47.6704 99.1295 51.5694 97.7145 56.4834 90.7585L59.4834 86.5115V69.6835V52.8555L56.4834 48.6085C51.6054 41.7025 47.6344 40.2395 32.7334 39.8545C18.3674 39.4825 18.5014 39.5835 21.4324 31.3675C24.0574 24.0055 28.6834 20.8985 38.9094 19.6305C44.1724 18.9775 45.9184 18.2975 47.7274 16.1945C50.8194 12.6005 50.7704 6.70947 47.6184 3.04547C45.5614 0.653473 44.4214 0.260475 38.8684 0.0274749C35.3564 -0.120525 30.4584 0.344473 27.9834 1.05947ZM107.983 1.05947C101.525 2.92547 97.3754 5.28047 92.2984 9.96047C82.0374 19.4185 80.0254 27.1785 80.0004 57.3845C79.9794 83.3755 80.7434 87.6785 86.3804 93.3325C91.9344 98.9015 96.1754 99.9095 112.368 99.5085C127.67 99.1295 131.569 97.7145 136.483 90.7585L139.483 86.5115V69.6835V52.8555L136.483 48.6085C131.605 41.7025 127.634 40.2395 112.733 39.8545C98.3674 39.4825 98.5014 39.5835 101.432 31.3675C104.057 24.0055 108.683 20.8985 118.909 19.6305C124.172 18.9775 125.918 18.2975 127.727 16.1945C130.819 12.6005 130.77 6.70947 127.618 3.04547C125.561 0.653473 124.421 0.260475 118.868 0.0274749C115.356 -0.120525 110.458 0.344473 107.983 1.05947Z"15 />16 </svg>17 );18};1920const data = {21 subHeading: "Voices of Innovation",22 title: "What Our Tech Leaders Are Saying",23 paragraph:24 "At CodeStream, innovation doesn't just start with technology; it starts with our people. Hear from our skilled team about how CodeStream’s culture and solutions enable them to drive technological advancement and business growth.",25 items: [26 {27 name: "Laura Williams",28 testimonial:29 "CodeStream's cloud architecture is a game-changer. It enables me to deploy scalable applications seamlessly, giving me the freedom to focus on code quality rather than infrastructural issues.",30 position: "Cloud Architect",31 image: {32 src: "https://images.unsplash.com/photo-1573497019418-b400bb3ab074?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",33 alt: "Laura Williams",34 },35 },36 {37 name: "John Doe",38 testimonial:39 "The developer experience at CodeStream is unmatched. Their robust APIs and comprehensive documentation make integrating services a walk in the park.",40 position: "Frontend Engineer",41 image: {42 src: "https://images.unsplash.com/photo-1573497491765-dccce02b29df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",43 alt: "John Doe",44 },45 },46 {47 name: "Jane Smith",48 testimonial:49 "CodeStream's commitment to data security is commendable. Their security protocols make me confident that our data assets are always in safe hands.",50 position: "Cybersecurity Analyst",51 image: {52 src: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80",53 alt: "Jane Smith",54 },55 },56 ],57};5859export function Testimonials8() {60 return (61 <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">62 <div className="mx-auto mb-12 max-w-3xl text-center">63 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">64 {data.subHeading}65 </p>66 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">67 {data.title}68 </h2>69 <p className="text-lg text-slate-600 [text-wrap:balance]">70 {data.paragraph}71 </p>72 </div>73 <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">74 {data.items.map(75 ({ image, name, testimonial, position }, index: number) => {76 return (77 <div78 key={index}79 className="mx-auto flex w-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white ring-4 ring-slate-50 max-lg:max-w-sm"80 >81 <div className="aspect-[7/6] w-full">82 <img83 src={image.src}84 alt={image.alt}85 onError={(e) => {86 const image = e.target as HTMLImageElement;87 image.src = "onerrorimg";88 }}89 className="aspect-[7/6] h-full w-full object-cover"90 />91 </div>9293 <div className="flex h-full flex-col justify-between gap-y-8 p-8">94 <div>95 <QuoteIcon className="mb-5 h-8 w-8 fill-sky-600" />9697 <p className="text-base text-slate-600">{testimonial}</p>98 </div>99100 <div className="min-w-0">101 <p className="truncate text-base font-medium capitalize text-slate-900">102 {name}103 </p>104 <p className="truncate text-sm text-slate-600">105 {position}106 </p>107 </div>108 </div>109 </div>110 );111 }112 )}113 </div>114 </div>115 );116}117
Voices of Innovation
What Our Tech Leaders Are Saying
At CodeStream, innovation doesn't just start with technology; it starts with our people. Hear from our skilled team about how CodeStream’s culture and solutions enable them to drive technological advancement and business growth.
CodeStream's cloud architecture is a game-changer. It enables me to deploy scalable applications seamlessly, giving me the freedom to focus on code quality rather than infrastructural issues.
Laura Williams
Cloud Architect
The developer experience at CodeStream is unmatched. Their robust APIs and comprehensive documentation make integrating services a walk in the park.
John Doe
Frontend Engineer
CodeStream's commitment to data security is commendable. Their security protocols make me confident that our data assets are always in safe hands.
Jane Smith
Cybersecurity Analyst
Two-column simple with rating stars
0import React from "react";12const StarIcon = ({ className }) => (3 <svg4 className={className}5 aria-hidden="true"6 viewBox="0 0 24 24"7 xmlns="http://www.w3.org/2000/svg"8 >9 <path10 fillRule="evenodd"11 clipRule="evenodd"12 d="M10.7881 3.2108C11.2365 2.13286 12.7635 2.13286 13.2119 3.2108L15.2939 8.21652L20.6979 8.64976C21.8617 8.74306 22.3336 10.1953 21.4469 10.9549L17.3296 14.4818L18.5875 19.7553C18.8584 20.8909 17.623 21.7884 16.6267 21.1799L12 18.354L7.37335 21.1799C6.37703 21.7884 5.14164 20.8909 5.41252 19.7553L6.67044 14.4818L2.55309 10.9549C1.66645 10.1953 2.13833 8.74306 3.30206 8.64976L8.70615 8.21652L10.7881 3.2108Z"13 />14 </svg>15);1617const StarHalfIcon = ({ className }) => (18 <svg19 className={className}20 aria-hidden="true"21 viewBox="0 0 24 24"22 xmlns="http://www.w3.org/2000/svg"23 >24 <path25 fillRule="evenodd"26 clipRule="evenodd"27 d="M10.7881 3.2108C11.0123 2.67181 11.5062 2.40232 12.0001 2.40234L12 18.354L7.37335 21.1799C6.37703 21.7884 5.14164 20.8909 5.41252 19.7553L6.67044 14.4818L2.55309 10.9549C1.66645 10.1953 2.13833 8.74306 3.30206 8.64976L8.70615 8.21652L10.7881 3.2108Z"28 />29 </svg>30);3132const AdobeLogo = ({ className }) => (33 <svg34 className={className}35 aria-hidden="true"36 viewBox="0 0 133 48"37 xmlns="http://www.w3.org/2000/svg"38 >39 <path d="M14.653 6H0V41L14.653 6Z" fill="#FA0C00" />40 <path d="M24.9628 6H39.5967V41L24.9628 6Z" fill="#FA0C00" />41 <path42 d="M19.808 18.8998L29.1344 41H23.0154L20.228 33.9638H13.4027L19.808 18.8998Z"43 fill="#FA0C00"44 />45 <path46 d="M63.5016 28.2578L65.2294 33.206C65.2867 33.3299 65.3726 33.3872 65.5254 33.3872H68.8473C69.0287 33.3872 69.0574 33.3013 69.0287 33.1202L62.1652 14.0804C62.1366 13.9279 62.1079 13.8993 61.9552 13.8993H57.8313C57.7168 13.8993 57.65 13.9851 57.65 14.109C57.5927 15.1101 57.5068 15.4152 57.3827 15.7108L51.2637 33.0916C51.2351 33.3013 51.3019 33.3872 51.4738 33.3872H54.4425C54.6239 33.3872 54.7098 33.3299 54.7766 33.1488L56.409 28.2578H63.5016ZM57.3541 25.0257C58.2514 22.318 59.4351 18.8475 59.9124 16.8644H59.941C60.5328 18.9429 61.9265 23.0616 62.5566 25.0257H57.3541Z"47 fill="#FA0C00"48 />49 <path50 d="M77.8524 33.6827C79.6375 33.6827 81.5371 33.3585 83.4654 32.5291C83.6181 32.4719 83.6468 32.4051 83.6468 32.2621C83.5895 31.7282 83.5227 30.9559 83.5227 30.3648V12.4405C83.5227 12.3261 83.5227 12.2689 83.3795 12.2689H80.1434C80.0193 12.2689 79.962 12.3261 79.962 12.4787V18.552C79.4561 18.4947 79.1029 18.4661 78.6829 18.4661C73.4613 18.4661 70.2538 21.908 70.2538 26.2079C70.2538 31.1943 73.5472 33.6827 77.8524 33.6827ZM79.962 30.3648C79.4275 30.5364 78.8356 30.6032 78.2342 30.6032C75.8668 30.6032 73.929 29.2684 73.929 26.0268C73.929 23.157 75.9241 21.4599 78.5683 21.4599C79.1029 21.4599 79.5707 21.5171 79.962 21.6696V30.3648Z"51 fill="#FA0C00"52 />53 <path54 d="M93.9703 18.4661C89.5124 18.4661 86.7536 21.8794 86.7536 26.0935C86.7536 29.8595 88.9492 33.6827 93.9035 33.6827C98.0942 33.6827 101.034 30.6032 101.034 25.9982C101.034 21.9366 98.5428 18.4661 93.9703 18.4661ZM93.789 21.4599C96.3091 21.4599 97.3782 23.6241 97.3782 26.0935C97.3782 29.1444 95.8031 30.6604 93.9703 30.6604C91.7079 30.6604 90.3715 28.7631 90.3715 26.0268C90.3715 23.2142 91.7939 21.4599 93.789 21.4599Z"55 fill="#FA0C00"56 />57 <path58 d="M104.38 12.2689C104.256 12.2689 104.17 12.3261 104.17 12.4787V32.7674C104.17 32.8532 104.256 33.0058 104.38 33.0344C105.802 33.4729 107.291 33.6827 108.828 33.6827C113.229 33.6827 117.506 30.9559 117.506 25.4642C117.506 21.4885 114.775 18.4661 110.499 18.4661C109.516 18.4661 108.599 18.6187 107.797 18.8856L107.759 12.5073C107.759 12.2975 107.702 12.2689 107.492 12.2689H104.38ZM113.85 25.8265C113.85 29.1158 111.597 30.6604 109.162 30.6604C108.657 30.6604 108.208 30.6318 107.797 30.5078V21.8508C108.265 21.6696 108.828 21.5171 109.869 21.5171C112.217 21.5171 113.85 23.0044 113.85 25.8265Z"59 fill="#FA0C00"60 />61 <path62 d="M129.583 26.8944C131.034 26.8944 132.227 26.8658 132.637 26.7704C132.79 26.7418 132.847 26.6846 132.876 26.5607C132.962 26.2365 133 25.5596 133 24.7301C133 21.908 131.301 18.4661 126.91 18.4661C122.423 18.4661 119.932 22.1177 119.932 26.2365C119.932 29.8881 121.86 33.6827 127.263 33.6827C129.287 33.6827 130.594 33.3585 131.721 32.8246C131.835 32.7674 131.893 32.6721 131.893 32.5005V30.0311C131.893 29.8881 131.807 29.8595 131.721 29.9167C130.594 30.3934 129.373 30.6318 128.036 30.6318C125.01 30.6318 123.635 28.9633 123.55 26.8944H129.583ZM123.55 24.3392C123.788 22.89 124.705 21.3169 126.757 21.3169C129.019 21.3169 129.611 23.2142 129.611 24.0722C129.611 24.1008 129.611 24.2248 129.611 24.3106C129.487 24.3392 129.105 24.3392 127.979 24.3392H123.55Z"63 fill="#FA0C00"64 />65 </svg>66);6768const CanvaLogo = ({ className }) => (69 <svg70 className={className}71 aria-hidden="true"72 viewBox="0 0 100 48"73 xmlns="http://www.w3.org/2000/svg"74 >75 <path76 fillRule="evenodd"77 clipRule="evenodd"78 d="M22.1929 41.7819C24.1234 40.5836 25.7459 39.1214 27.1187 37.5988C28.1016 39.606 30.0739 40.9761 32.1654 40.9761C33.7771 40.9761 35.3888 40.1702 36.4969 38.6592C36.8998 40.0695 37.9071 40.9761 39.6196 40.9761C40.9047 40.9761 43.7062 39.6646 46.2464 37.7212L45.9656 39.1629C45.8649 39.5658 45.8649 39.868 45.8649 40.0694C45.9656 40.6738 46.3685 40.976 46.9729 40.976C48.1817 40.976 49.8942 39.868 50.2971 38.0548L50.9015 35.5365C51.6066 32.3131 56.341 27.4779 57.6505 27.4779C57.7513 27.4779 57.9527 27.5787 57.9527 27.7801C57.9927 28.1 57.7629 28.7054 57.4271 29.5902C56.9169 30.9347 56.1619 32.9242 55.7366 35.5365C55.5352 36.3424 55.5352 37.1482 55.6359 37.7526C55.8374 39.6665 56.9454 40.976 59.0608 40.976C60.871 40.976 64.7959 39.4308 67.5468 36.3402C67.7541 38.0178 68.1089 39.4447 68.6304 40.3717C68.8319 40.7746 69.3355 40.8754 69.8392 40.8754C70.4436 40.8754 71.2494 40.6739 72.156 40.1702C74.2714 39.0622 76.9912 36.4431 79.6102 32.6153C80.0131 32.716 80.3153 32.716 80.6175 32.716C81.6627 32.716 82.8309 32.3472 83.9155 31.6944C83.4648 33.0557 83.289 34.4459 83.4381 35.738C83.841 38.7599 86.3593 41.0768 89.0791 41.0768C90.5901 41.0768 92.2018 40.1702 93.3098 38.7599C93.7128 40.6738 94.9215 42.6885 97.9435 43.8973C98.145 43.998 98.3464 43.998 98.5479 43.998C99.1523 43.998 99.5552 43.5951 99.4545 43.0914C99.4545 42.8899 99.3537 42.5877 99.0516 42.3863C98.3464 41.7819 97.5406 40.6738 97.3391 38.9614C97.2384 38.1555 97.2384 37.1482 97.742 36.1409C98.3464 33.4211 98.4472 32.6153 98.4472 32.3131C98.3464 31.6079 97.8428 31.3057 97.2384 31.3057C96.0296 31.3057 94.3171 32.5145 93.9142 34.227C93.2091 36.846 91.3959 38.5585 90.1871 38.5585C88.6761 38.5585 87.8703 36.9467 87.6688 35.2343C87.1652 31.0035 89.7842 25.8662 93.7128 25.8662C94.8208 25.8662 96.1303 26.2691 96.2311 27.4779C96.3548 28.592 95.68 28.8694 95.1646 29.0813C94.8412 29.2143 94.5805 29.3214 94.6193 29.5933C94.7201 30.3992 96.0296 30.6006 96.9362 30.6006C97.742 30.6006 100.361 29.9962 99.9581 27.075C99.6559 24.7582 97.1376 23.6501 94.3171 23.6501C90.9501 23.6501 88.0845 25.3549 86.1331 27.714C85.8633 27.8732 85.5785 28.158 85.2512 28.4853C84.6468 29.1904 83.438 29.8955 81.927 29.8955C81.7256 29.8955 81.3226 29.7948 81.3226 29.7948C82.33 27.8809 83.0351 25.8663 83.0351 24.1538C83.0351 21.3333 81.3226 19.9231 79.4087 19.9231C76.9912 19.9231 74.4729 22.0384 74.4729 26.2692C74.4729 28.7875 75.4802 30.8021 77.1926 31.9102C75.178 35.1336 72.4582 37.8534 72.0553 37.8534C71.9162 37.8534 71.8731 37.7093 71.8266 37.5538C71.8058 37.4841 71.7843 37.4121 71.7531 37.3497C71.4509 36.2417 71.1487 34.0256 71.1487 32.716C71.1487 30.2985 71.5516 27.8809 72.4582 25.3626C72.559 25.0604 72.6597 24.7582 72.6597 24.5567C72.6597 23.8516 72.156 23.5494 71.5516 23.5494C70.3428 23.5494 68.4289 24.9597 67.9253 26.4706C67.5223 27.8809 67.3209 29.8955 67.3209 32.3131C67.3209 32.7565 67.328 33.1962 67.3426 33.6293C64.9386 36.8699 61.9722 37.9541 61.0754 37.9541C59.9674 37.9541 59.7659 36.9467 59.9674 36.5438C60.6725 33.6226 61.5791 30.2984 62.3849 27.9816C62.7879 26.8735 62.9893 25.8662 62.8886 25.2618C62.6871 24.1538 61.982 23.6501 60.9747 23.6501C58.5571 23.6501 54.7293 26.0677 52.211 29.3918L53.0169 25.7655C53.1176 25.3625 53.1176 25.0603 53.1176 24.8589C53.0169 24.1538 52.6139 23.8516 52.0095 23.8516C49.189 23.8516 48.6854 25.2618 48.3832 26.6721C48.3248 27.0221 47.5232 31.1564 46.8587 34.5741C44.7092 36.5469 42.3007 37.8534 41.6342 37.8534C40.8284 37.8534 40.5262 37.249 40.5262 36.7453C40.5262 36.3975 40.7264 35.449 40.9155 34.5528C41.055 33.892 41.1885 33.2595 41.2313 32.9175C41.332 32.5146 41.332 32.2124 41.332 32.0109C41.2313 31.4065 40.7276 31.1043 40.1232 31.1043C38.9145 31.1043 37.202 32.3131 36.7991 34.0256C36.1947 36.6446 34.3815 38.357 33.1727 38.357C31.6617 38.357 30.8559 36.7453 30.6544 35.1336C30.1508 31.5073 32.4676 25.6648 36.6983 25.6648C37.9071 25.6648 39.1159 26.0677 39.2166 27.2765C39.3386 28.4353 38.722 28.7079 38.2389 28.9214C37.9241 29.0606 37.6659 29.1747 37.7057 29.4926C37.8064 30.2985 39.1159 30.4999 39.9218 30.4999C40.8284 30.4999 43.3467 29.8955 42.9437 26.9743C42.6415 24.6575 40.224 23.4487 37.3027 23.4487C30.5277 23.4487 26.0192 30.1499 26.5065 35.4621C24.7859 37.4755 23.0669 38.6862 19.9768 40.2709C18.2643 41.1775 16.2497 41.6812 14.4365 41.6812C8.79548 41.6812 6.07571 36.5438 5.57205 32.1116C4.1618 20.8296 14.235 5.21611 21.1855 5.21611C22.7973 5.21611 24.2075 6.62636 24.5097 8.84247C24.9126 12.2674 24.8119 14.6849 21.2863 17.6062C20.8833 17.9084 20.7826 18.412 20.9841 18.7142C21.2863 19.1171 22.2936 19.2179 24.2075 18.2106C28.0353 16.2966 29.3448 13.3754 28.9419 9.95052C28.539 6.1227 25.2148 3 20.7826 3C18.5665 3 16.2497 3.60439 14.1343 4.91391C4.96766 10.5549 -0.975543 23.2472 0.132511 32.9175C0.53544 36.0402 1.84496 39.3643 4.26253 41.6812C5.87425 43.1921 8.79548 45.0053 12.3211 45.0053C16.1489 45.0053 19.3724 43.5951 22.1929 41.7819ZM78.8043 28.4853C77.797 27.3772 76.9912 25.6648 76.9912 24.0531C76.9912 23.1465 77.2934 22.1392 77.9985 22.1392C78.6029 22.1392 79.4087 23.0458 79.4087 25.1611C79.4087 26.2692 79.2073 27.3772 78.8043 28.4853Z"79 fill="#24BECA"80 />81 </svg>82);8384const data = {85 subHeading: "Unveiling New Possibilities",86 title: "Revolutionize Web Development with Jettwave",87 paragraph:88 "Jettwave's reusable components and advanced features empower web developers to break free from the constraints of traditional frameworks. Experience limitless creativity and efficiency.",89 items: [90 {91 rating: 9.5,92 Logo: AdobeLogo,93 testimonial:94 "Jettwave has been a transformative experience for our team. Its highly reusable components enable us to focus on what really matters: delivering cutting-edge user experiences.",95 person: {96 name: "Emily D.",97 position: "VisionaryWeb",98 image: {99 src: "https://randomuser.me/api/portraits/women/35.jpg",100 alt: "Emily D.",101 },102 },103 },104 {105 rating: 9.8,106 Logo: CanvaLogo,107 testimonial:108 "Adapting to Jettwave was seamless. Its components are so versatile that they easily integrate into our existing architecture without compromising performance or security.",109 person: {110 name: "Alex J.",111 position: "InnovateTech",112 image: {113 src: "https://randomuser.me/api/portraits/men/28.jpg",114 alt: "Alex J.",115 },116 },117 },118 ],119};120121export function Testimonials9() {122 return (123 <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">124 <div className="mx-auto mb-12 max-w-3xl text-center">125 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">126 {data.subHeading}127 </p>128 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">129 {data.title}130 </h2>131 <p className="text-lg text-slate-600 [text-wrap:balance]">132 {data.paragraph}133 </p>134 </div>135 <div className="grid grid-cols-1 mx-auto max-w-5xl gap-8 md:grid-cols-2">136 {data.items.map(137 ({ rating, Logo, testimonial, person }, index: number) => {138 let starRating;139 if (rating > 10) {140 starRating = 5;141 } else if (rating < 1) {142 starRating = 0.5;143 } else {144 starRating = rating / 2;145 }146 const fullStars = Math.floor(starRating);147 const halfStar = starRating - fullStars === 0.5;148149 return (150 <div151 key={index}152 className="flex flex-col justify-between gap-y-8 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"153 >154 <div>155 <div className="mb-4 flex gap-x-0.5">156 {[...Array(fullStars)].map((_, starIndex) => (157 <StarIcon158 key={starIndex}159 className="h-6 w-6 fill-sky-600"160 />161 ))}162 {halfStar && (163 <StarHalfIcon className="h-6 w-6 fill-sky-600" />164 )}165 </div>166 <p className="text-base text-slate-900 first-letter:uppercase">167 {testimonial}168 </p>169 </div>170 <div className="flex flex-wrap items-center justify-between gap-8">171 <div className="min-w-0">172 <p className="truncate text-base font-medium capitalize text-slate-900">173 {person.name}174 </p>175 <p className="truncate text-sm text-slate-600">176 {person.position}177 </p>178 </div>179 <Logo className="h-10 shrink-0 fill-current" />180 </div>181 </div>182 );183 }184 )}185 </div>186 </div>187 );188}189
Unveiling New Possibilities
Revolutionize Web Development with Jettwave
Jettwave's reusable components and advanced features empower web developers to break free from the constraints of traditional frameworks. Experience limitless creativity and efficiency.
Jettwave has been a transformative experience for our team. Its highly reusable components enable us to focus on what really matters: delivering cutting-edge user experiences.
Emily D.
VisionaryWeb
Adapting to Jettwave was seamless. Its components are so versatile that they easily integrate into our existing architecture without compromising performance or security.
Alex J.
InnovateTech
Horizontal card cluster
0import React from "react";12const ZoomLogo = ({ className }) => {3 return (4 <svg5 xmlns="http://www.w3.org/2000/svg"6 viewBox="0 0 98 48"7 preserveAspectRatio="xMidYMid meet"8 className={className}9 >10 <path11 fillRule="evenodd"12 clipRule="evenodd"13 d="M79.7073 20.5972C80.0815 21.2429 80.2039 21.9774 80.2443 22.8032L80.2975 23.9039V31.6007L80.3517 32.7025C80.4603 34.502 81.7874 35.8325 83.6007 35.9457L84.6968 36V23.9039L84.751 22.8032C84.7961 21.9867 84.9174 21.2382 85.2974 20.588C85.6846 19.921 86.2404 19.3677 86.9091 18.9835C87.5778 18.5993 88.3358 18.3978 89.107 18.3992C89.8782 18.4006 90.6355 18.6049 91.3028 18.9915C91.97 19.3781 92.5239 19.9335 92.9086 20.6018C93.2829 21.2475 93.3995 21.9959 93.4446 22.8032L93.4988 23.9005V31.6007L93.5531 32.7025C93.6663 34.5112 94.983 35.8418 96.8021 35.9457L97.8981 36V22.8032C97.8981 20.4697 96.9714 18.2317 95.3216 16.5813C93.6719 14.9309 91.4342 14.0032 89.1007 14.0023C87.8517 14.001 86.6168 14.2662 85.4786 14.7803C84.3403 15.2944 83.3248 16.0454 82.5 16.9833C81.6748 16.0458 80.6593 15.2949 79.5211 14.7807C78.3829 14.2665 77.1482 14.0007 75.8993 14.0012C74.0721 14.0012 72.3766 14.5555 70.9722 15.513C70.1152 14.5567 68.1979 14.0012 67.0972 14.0012V36L68.1979 35.9457C70.039 35.8244 71.3695 34.5297 71.4411 32.7025L71.5 31.6007V23.9039L71.5543 22.8032C71.6005 21.9728 71.716 21.2429 72.0913 20.5926C72.4789 19.9261 73.0345 19.3728 73.7027 18.9882C74.3709 18.6035 75.1283 18.4009 75.8993 18.4005C76.6709 18.4006 77.4289 18.6037 78.0973 18.9893C78.7656 19.3748 79.3209 19.9294 79.7073 20.5972V20.5972ZM4.39931 35.9469L5.5 36H21.9988L21.9446 34.9028C21.7956 33.0941 20.5147 31.7728 18.7002 31.655L17.5995 31.6007H7.70139L20.8982 18.3993L20.8439 17.3032C20.7584 15.4761 19.4232 14.1559 17.5995 14.0554L16.4988 14.0058L0 14.0012L0.0542839 15.1019C0.198656 16.8932 1.498 18.2422 3.29746 18.3462L4.39931 18.4005H14.2975L1.10069 31.6018L1.15498 32.7025C1.26354 34.5159 2.57213 35.8291 4.39931 35.9457V35.9469ZM62.7788 17.2212C63.8004 18.2426 64.6107 19.4552 65.1636 20.7898C65.7165 22.1244 66.0011 23.5548 66.0011 24.9994C66.0011 26.444 65.7165 27.8744 65.1636 29.209C64.6107 30.5436 63.8004 31.7562 62.7788 32.7776C60.7148 34.8399 57.9165 35.9983 54.9988 35.9983C52.0812 35.9983 49.2829 34.8399 47.2189 32.7776C42.9236 28.4823 42.9236 21.5166 47.2189 17.2212C48.2396 16.2002 49.4513 15.3902 50.785 14.8375C52.1187 14.2848 53.5482 14.0002 54.9919 14C56.4379 13.999 57.87 14.2831 59.2061 14.836C60.5423 15.3889 61.7563 16.1999 62.7788 17.2224V17.2212ZM59.6661 20.3362C60.9033 21.5744 61.5983 23.2531 61.5983 25.0035C61.5983 26.7538 60.9033 28.4326 59.6661 29.6707C58.4279 30.908 56.7492 31.6029 54.9988 31.6029C53.2485 31.6029 51.5697 30.908 50.3316 29.6707C49.0944 28.4326 48.3994 26.7538 48.3994 25.0035C48.3994 23.2531 49.0944 21.5744 50.3316 20.3362C51.5697 19.099 53.2485 18.404 54.9988 18.404C56.7492 18.404 58.4279 19.099 59.6661 20.3362V20.3362ZM31.9062 14C33.35 14.0004 34.7795 14.2851 36.1132 14.8381C37.4469 15.391 38.6587 16.2012 39.6792 17.2224C43.9757 21.5166 43.9757 28.4834 39.6792 32.7776C37.6153 34.8399 34.817 35.9983 31.8993 35.9983C28.9816 35.9983 26.1833 34.8399 24.1194 32.7776C19.824 28.4823 19.824 21.5166 24.1194 17.2212C25.14 16.2002 26.3518 15.3902 27.6855 14.8375C29.0192 14.2848 30.4487 14.0002 31.8924 14H31.9062ZM36.5666 20.3339C37.8041 21.5721 38.4994 23.2511 38.4994 25.0017C38.4994 26.7524 37.8041 28.4314 36.5666 29.6696C35.3284 30.9068 33.6497 31.6018 31.8993 31.6018C30.1489 31.6018 28.4702 30.9068 27.232 29.6696C25.9948 28.4314 25.2998 26.7527 25.2998 25.0023C25.2998 23.252 25.9948 21.5732 27.232 20.335C28.4702 19.0978 30.1489 18.4028 31.8993 18.4028C33.6497 18.4028 35.3284 19.0978 36.5666 20.335V20.3339Z"14 fill="#2D8CFF"15 />16 </svg>17 );18};1920const StripeLogo = ({ className }) => {21 return (22 <svg23 xmlns="http://www.w3.org/2000/svg"24 viewBox="0 0 80 48"25 preserveAspectRatio="xMidYMid meet"26 className={className}27 >28 <path29 fillRule="evenodd"30 clipRule="evenodd"31 d="M79.3058 25.8169C79.3058 20.1774 76.5741 15.7274 71.3532 15.7274C66.1102 15.7274 62.938 20.1774 62.938 25.7728C62.938 32.4037 66.6829 35.7521 72.0581 35.7521C74.6796 35.7521 76.6622 35.1573 78.1602 34.3202V29.9143C76.6622 30.6633 74.9439 31.126 72.763 31.126C70.6262 31.126 68.7317 30.377 68.4893 27.7775H79.2617C79.2617 27.4911 79.3058 26.3456 79.3058 25.8169ZM68.4233 23.7241C68.4233 21.2348 69.9433 20.1994 71.3311 20.1994C72.6749 20.1994 74.1068 21.2348 74.1068 23.7241H68.4233Z"32 fill="#635BFF"33 />34 <path35 fillRule="evenodd"36 clipRule="evenodd"37 d="M54.4345 15.7274C52.2756 15.7274 50.8877 16.7408 50.1167 17.4457L49.8303 16.0799H44.9839V41.7661L50.4912 40.5986L50.5132 34.3643C51.3063 34.937 52.4738 35.7521 54.4124 35.7521C58.3557 35.7521 61.9465 32.5799 61.9465 25.5966C61.9244 19.2081 58.2896 15.7274 54.4345 15.7274ZM53.1127 30.9056C51.813 30.9056 51.0419 30.443 50.5132 29.8703L50.4912 21.6974C51.064 21.0585 51.857 20.6179 53.1127 20.6179C55.1174 20.6179 56.5052 22.8649 56.5052 25.7508C56.5052 28.7027 55.1394 30.9056 53.1127 30.9056Z"38 fill="#635BFF"39 />40 <path41 fillRule="evenodd"42 clipRule="evenodd"43 d="M37.4057 14.4277L42.935 13.2381V8.76611L37.4057 9.93367V14.4277Z"44 fill="#635BFF"45 />46 <path47 d="M42.935 16.1019H37.4057V35.3776H42.935V16.1019Z"48 fill="#635BFF"49 />50 <path51 fillRule="evenodd"52 clipRule="evenodd"53 d="M31.4795 17.7321L31.1271 16.1019H26.3687V35.3776H31.8761V22.3142C33.1758 20.6179 35.3787 20.9263 36.0617 21.1686V16.1019C35.3567 15.8375 32.7793 15.3529 31.4795 17.7321Z"54 fill="#635BFF"55 />56 <path57 fillRule="evenodd"58 clipRule="evenodd"59 d="M20.465 11.3215L15.0899 12.467L15.0679 30.1125C15.0679 33.3729 17.5131 35.7741 20.7735 35.7741C22.5799 35.7741 23.9016 35.4436 24.6286 35.0471V30.5751C23.9237 30.8615 20.443 31.8749 20.443 28.6145V20.7941H24.6286V16.1019H20.443L20.465 11.3215Z"60 fill="#635BFF"61 />62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M5.57342 21.6974C5.57342 20.8383 6.27836 20.5078 7.44592 20.5078C9.12015 20.5078 11.235 21.0145 12.9092 21.9177V16.7408C11.0808 16.0138 9.27435 15.7274 7.44592 15.7274C2.97396 15.7274 0 18.0626 0 21.9618C0 28.0419 8.37115 27.0726 8.37115 29.6941C8.37115 30.7074 7.48998 31.0378 6.25633 31.0378C4.4279 31.0378 2.09279 30.2888 0.242322 29.2755V34.5185C2.29105 35.3996 4.36181 35.7742 6.25633 35.7742C10.8384 35.7742 13.9886 33.5051 13.9886 29.5619C13.9666 22.9971 5.57342 24.1647 5.57342 21.6974Z"66 fill="#635BFF"67 />68 </svg>69 );70};7172const DropboxLogo = ({ className }) => {73 return (74 <svg75 xmlns="http://www.w3.org/2000/svg"76 viewBox="0 0 163 48"77 preserveAspectRatio="xMidYMid meet"78 className={className}79 >80 <path81 d="M45.0503 14.0131H52.6724C57.5318 14.0131 61.546 16.8247 61.546 23.2442V24.5931C61.546 31.0613 57.7918 33.9704 52.8187 33.9704H45.0503V14.0131ZM49.3083 17.6373V30.33H52.5749C55.3377 30.33 57.1905 28.526 57.1905 24.5118V23.4555C57.1905 19.4412 55.2402 17.6373 52.4287 17.6373H49.3083ZM63.805 17.8323H67.2179L67.7705 21.5865C68.4205 19.0349 70.0782 17.6698 73.0848 17.6698H74.1412V21.9765H72.386C68.9243 21.9765 68.0792 23.1792 68.0792 26.5921V34.0192H63.87V17.8323H63.805ZM74.9863 26.2508V25.7957C74.9863 20.3838 78.448 17.426 83.161 17.426C87.9716 17.426 91.3357 20.3838 91.3357 25.7957V26.2508C91.3357 31.5652 88.0691 34.4255 83.161 34.4255C77.9441 34.3767 74.9863 31.5814 74.9863 26.2508ZM87.029 26.202V25.7957C87.029 22.7891 85.5175 20.9852 83.1123 20.9852C80.7557 20.9852 79.1955 22.6429 79.1955 25.7957V26.202C79.1955 29.1111 80.707 30.7688 83.1123 30.7688C85.5175 30.7201 87.029 29.1111 87.029 26.202ZM93.546 17.8323H97.0564L97.4627 20.8877C98.3078 18.8399 100.112 17.426 102.777 17.426C106.889 17.426 109.603 20.3838 109.603 25.8607V26.3158C109.603 31.6302 106.596 34.4417 102.777 34.4417C100.226 34.4417 98.4703 33.2879 97.6089 31.4351V39.6098H93.4972L93.546 17.8323ZM105.329 26.202V25.8445C105.329 22.6266 103.671 21.0339 101.461 21.0339C99.1041 21.0339 97.5439 22.8379 97.5439 25.8445V26.1533C97.5439 29.0136 99.0554 30.8176 101.412 30.8176C103.833 30.7688 105.329 29.2249 105.329 26.202ZM115.827 31.0288L115.47 33.9867H111.862V12.4204H115.974V20.6926C116.884 18.5799 118.688 17.426 121.239 17.426C125.107 17.4748 127.968 20.1401 127.968 25.5032V26.007C127.968 31.3701 125.253 34.4417 121.142 34.4417C118.428 34.3767 116.672 33.1253 115.827 31.0288ZM123.645 26.007V25.6007C123.645 22.6429 122.036 20.9852 119.777 20.9852C117.469 20.9852 115.86 22.8379 115.86 25.6495V26.007C115.86 29.0136 117.42 30.7688 119.728 30.7688C122.198 30.7688 123.645 29.2249 123.645 26.007ZM129.771 26.2508V25.7957C129.771 20.3838 133.233 17.426 137.946 17.426C142.757 17.426 146.121 20.3838 146.121 25.7957V26.2508C146.121 31.5652 142.806 34.4255 137.946 34.4255C132.729 34.3767 129.771 31.5814 129.771 26.2508ZM141.847 26.202V25.7957C141.847 22.7891 140.335 20.9852 137.93 20.9852C135.573 20.9852 134.013 22.6429 134.013 25.7957V26.202C134.013 29.1111 135.525 30.7688 137.93 30.7688C140.351 30.7201 141.847 29.1111 141.847 26.202ZM151.63 25.6007L145.958 17.8323H150.818L154.084 22.6916L157.4 17.8323H162.21L156.457 25.5519L162.519 33.9867H157.757L154.052 28.6236L150.444 33.9867H145.471L151.63 25.6007Z"82 fill="black"83 />84 <path85 d="M18.8522 14.0132L9.42611 20.0264L18.8522 26.0396L9.42611 32.0528L0 26.0071L9.42611 19.9939L0 14.0132L9.42611 8L18.8522 14.0132ZM9.37735 33.9868L18.8035 27.9736L28.2296 33.9868L18.8035 40L9.37735 33.9868ZM18.8522 26.0071L28.2783 19.9939L18.8522 14.0132L28.2296 8L37.6557 14.0132L28.2296 20.0264L37.6557 26.0396L28.2296 32.0528L18.8522 26.0071Z"86 fill="#0061FF"87 />88 </svg>89 );90};9192const data = {93 subHeading: "Testimonials",94 title: "What our clients are saying",95 paragraph:96 "Jettwave introduces a groundbreaking approach to web development, combining cutting-edge design assets with stellar performance, empowering creators to realize their vision effortlessly.",97 items: [98 {99 testimonial:100 "After integrating Jettwave's Advanced Suite into our development cycle, we experienced a profound enhancement in our project output. The tools and assets provided by Jettwave have been nothing short of transformational, enabling us to push the boundaries of what's possible in web design.",101 person: {102 name: "Alexander Hamilton",103 position: "Product Developer at QuantumWeb",104 image: {105 src: "https://randomuser.me/api/portraits/men/60.jpg",106 alt: "",107 },108 },109 Logo: ZoomLogo,110 },111 {112 testimonial:113 "Jettwave, with its unparalleled suite of modular components, has been a beacon of inspiration for our design team. It's liberated us from the routine technical challenges, allowing us to focus solely on pioneering unique and captivating web experiences.",114 person: {115 name: "Elizabeth Turner",116 position: "Lead Designer at Ethereal",117 image: {118 src: "https://randomuser.me/api/portraits/women/40.jpg",119 alt: "",120 },121 },122 Logo: StripeLogo,123 },124 {125 testimonial:126 "In the ever-evolving domain of web development, Jettwave has consistently proven itself as an indispensable asset. Its vast array of design elements and tools adapt seamlessly to any project requirement, consistently delivering results that exceed our expectations.",127 person: {128 name: "Nathan Drake",129 position: "Frontend Specialist at ByteCrafters",130 image: {131 src: "https://randomuser.me/api/portraits/men/15.jpg",132 alt: "",133 },134 },135 Logo: DropboxLogo,136 },137 ],138};139140export function Testimonials10() {141 return (142 <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">143 <div className="mb-12 max-w-3xl lg:w-1/2 lg:pr-6">144 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">145 {data.subHeading}146 </p>147 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">148 {data.title}149 </h2>150 <p className="text-lg text-slate-600">{data.paragraph}</p>151 </div>152 <div className="grid grid-cols-1 gap-12 lg:-mt-[20%] lg:grid-cols-2 lg:[grid-auto-rows:1fr] xl:-mt-[15%]">153 {data.items.map(({ testimonial, person, Logo }, index: number) => {154 return (155 <div156 key={index}157 className="flex items-center rounded-3xl border border-slate-200 bg-white p-8 ring-4 ring-slate-50 lg:first:translate-y-[calc(50%+24px)] lg:last:col-start-2"158 >159 <div>160 <Logo className="mb-4 h-10 fill-slate-700" />161 <p className="mb-8 line-clamp-[10] text-base text-slate-900 first-letter:uppercase">162 {testimonial}163 </p>164 <div className="flex items-center gap-x-4">165 <div className="h-12 w-12 shrink-0 overflow-hidden rounded-full">166 <img167 src={person.image.src}168 alt={person.image.alt}169 onError={(e) => {170 const image = e.target as HTMLImageElement;171 image.src = "onerrorimg";172 }}173 className="aspect-square h-full w-full object-cover"174 />175 </div>176 <div className="min-w-0">177 <p className="truncate text-base font-medium capitalize text-slate-900">178 {person.name}179 </p>180 <p className="truncate text-sm text-slate-600">181 {person.position}182 </p>183 </div>184 </div>185 </div>186 </div>187 );188 })}189 </div>190 </div>191 );192}193
Testimonials
What our clients are saying
Jettwave introduces a groundbreaking approach to web development, combining cutting-edge design assets with stellar performance, empowering creators to realize their vision effortlessly.
After integrating Jettwave's Advanced Suite into our development cycle, we experienced a profound enhancement in our project output. The tools and assets provided by Jettwave have been nothing short of transformational, enabling us to push the boundaries of what's possible in web design.
Alexander Hamilton
Product Developer at QuantumWeb
Jettwave, with its unparalleled suite of modular components, has been a beacon of inspiration for our design team. It's liberated us from the routine technical challenges, allowing us to focus solely on pioneering unique and captivating web experiences.
Elizabeth Turner
Lead Designer at Ethereal
In the ever-evolving domain of web development, Jettwave has consistently proven itself as an indispensable asset. Its vast array of design elements and tools adapt seamlessly to any project requirement, consistently delivering results that exceed our expectations.
Nathan Drake
Frontend Specialist at ByteCrafters