Components/Teams
Teams
6x2 grid
0import React from "react";12const data = {3 subHeading: "Fueling Innovation",4 title: "Unleash the Power of Our Team",5 paragraph:6 "Our dynamic team at Jettwave is a force to be reckoned with, harnessing their collective expertise to drive innovation and shape the future of technology.",7 items: [8 {9 name: "Michael Scott",10 position: "Regional Manager",11 image: {12 src: "https://images.unsplash.com/photo-1684461741006-a4a5c5ce1778?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc4fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",13 alt: "",14 },15 },16 {17 name: "Dwight Schrute",18 position: "Assistant to the Regional Manager",19 image: {20 src: "https://images.unsplash.com/photo-1684027948314-e9f64be8670b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDgzfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",21 alt: "",22 },23 },24 {25 name: "Pam Beesly",26 position: "Receptionist",27 image: {28 src: "https://images.unsplash.com/photo-1650563277143-1d1060410864?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",29 alt: "",30 },31 },32 {33 name: "Jim Halpert",34 position: "Sales Representative",35 image: {36 src: "https://images.unsplash.com/photo-1683008549450-8e09478fd8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",37 alt: "",38 },39 },40 {41 name: "Kelly Kapoor",42 position: "Customer Service Representative",43 image: {44 src: "https://images.unsplash.com/photo-1684329391454-18cb99d7aacf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwOHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",45 alt: "",46 },47 },48 {49 name: "Angela Martin",50 position: "Accountant",51 image: {52 src: "https://images.unsplash.com/photo-1684510032703-ed6446f5dd14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDkyfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",53 alt: "",54 },55 },56 {57 name: "Toby Flenderson",58 position: "Human Resources",59 image: {60 src: "https://images.unsplash.com/photo-1684692379523-8e810c8d0342?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",61 alt: "",62 },63 },64 {65 name: "Darryl Philbin",66 position: "Warehouse Foreman",67 image: {68 src: "https://images.unsplash.com/photo-1684293866442-735f6a1b5599?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",69 alt: "",70 },71 },72 {73 name: "Creed Bratton",74 position: "Quality Assurance",75 image: {76 src: "https://images.unsplash.com/photo-1684549742130-c2083354da35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwMnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",77 alt: "",78 },79 },80 {81 name: "Kevin Malone",82 position: "Accountant",83 image: {84 src: "https://images.unsplash.com/photo-1684434832555-082502e1bf7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwNnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",85 alt: "",86 },87 },88 {89 name: "Dr. Jane Orion",90 position: "Chief Astronomer",91 image: {92 src: "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1856&q=80",93 alt: "Dr. Jane Orion",94 },95 },96 {97 name: "Leo Starburst",98 position: "Spacecraft Engineer",99 image: {100 src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80",101 alt: "Leo Starburst",102 },103 },104 ],105};106107export function Teams1() {108 return (109 <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">110 <div className="mx-auto mb-12 max-w-3xl text-center">111 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">112 {data.subHeading}113 </p>114 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">115 {data.title}116 </h2>117 <p className="text-lg text-slate-600 [text-wrap:balance]">118 {data.paragraph}119 </p>120 </div>121 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">122 {data.items.map(({ name, position, image }, index: number) => {123 return (124 <div key={index} className="flex flex-col items-center gap-y-6">125 <div className="max-h-52 max-w-[208px] overflow-hidden rounded-2xl border border-sky-200 ring-4 ring-sky-100 sm:max-h-36 sm:max-w-[144px]">126 <img127 src={image.src}128 alt={image.alt}129 onError={(e) => {130 const image = e.target as HTMLImageElement;131 image.src = "onerrorimg";132 }}133 className="aspect-square h-full w-full object-cover"134 />135 </div>136 <div className="w-full min-w-0 text-center">137 <p className="mb-1 line-clamp-2 text-lg font-bold capitalize text-slate-900 [text-wrap:balance]">138 {name}139 </p>140 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">141 {position}142 </p>143 </div>144 </div>145 );146 })}147 </div>148 </div>149 );150}151
Fueling Innovation
Unleash the Power of Our Team
Our dynamic team at Jettwave is a force to be reckoned with, harnessing their collective expertise to drive innovation and shape the future of technology.
Michael Scott
Regional Manager
Dwight Schrute
Assistant to the Regional Manager
Pam Beesly
Receptionist
Jim Halpert
Sales Representative
Kelly Kapoor
Customer Service Representative
Angela Martin
Accountant
Toby Flenderson
Human Resources
Darryl Philbin
Warehouse Foreman
Creed Bratton
Quality Assurance
Kevin Malone
Accountant
Dr. Jane Orion
Chief Astronomer
Leo Starburst
Spacecraft Engineer
4x2 grid
0import React from "react";12const data = {3 subHeading: "Our Team",4 title: "Unleash the Power of Our Team and Transform Your Business",5 paragraph:6 "At Jettwave, our dynamic team of experts is a force to be reckoned with. With a shared passion for innovation and cutting-edge technology, we continuously push boundaries and shape the future of the industry.",7 items: [8 {9 name: "Michael Scott",10 position: "Regional Manager",11 image: {12 src: "https://images.unsplash.com/photo-1684461741006-a4a5c5ce1778?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc4fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",13 alt: "",14 },15 },16 {17 name: "Dwight Schrute",18 position: "Assistant to the Regional Manager",19 image: {20 src: "https://images.unsplash.com/photo-1684027948314-e9f64be8670b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDgzfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",21 alt: "",22 },23 },24 {25 name: "Pam Beesly",26 position: "Receptionist",27 image: {28 src: "https://images.unsplash.com/photo-1650563277143-1d1060410864?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",29 alt: "",30 },31 },32 {33 name: "Jim Halpert",34 position: "Sales Representative",35 image: {36 src: "https://images.unsplash.com/photo-1683008549450-8e09478fd8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",37 alt: "",38 },39 },40 {41 name: "Angela Martin",42 position: "Accountant",43 image: {44 src: "https://images.unsplash.com/photo-1684510032703-ed6446f5dd14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDkyfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",45 alt: "",46 },47 },48 {49 name: "Toby Flenderson",50 position: "Human Resources",51 image: {52 src: "https://images.unsplash.com/photo-1684692379523-8e810c8d0342?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",53 alt: "",54 },55 },56 {57 name: "Darryl Philbin",58 position: "Warehouse Foreman",59 image: {60 src: "https://images.unsplash.com/photo-1684293866442-735f6a1b5599?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",61 alt: "",62 },63 },64 {65 name: "Creed Bratton",66 position: "Quality Assurance",67 image: {68 src: "https://images.unsplash.com/photo-1684549742130-c2083354da35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwMnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",69 alt: "",70 },71 },72 ],73};7475export function Teams2() {76 return (77 <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">78 <div className="mx-auto mb-12 max-w-3xl text-center">79 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">80 {data.subHeading}81 </p>82 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">83 {data.title}84 </h2>85 <p className="text-lg text-slate-600 [text-wrap:balance]">86 {data.paragraph}87 </p>88 </div>89 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">90 {data.items.map(({ name, position, image }, index: number) => {91 return (92 <div key={index} className="flex flex-col items-center gap-y-7">93 <div className="max-h-60 max-w-[240px] overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100">94 <img95 src={image.src}96 alt={image.alt}97 onError={(e) => {98 const image = e.target as HTMLImageElement;99 image.src = "onerrorimg";100 }}101 className="aspect-square h-full w-full object-cover"102 />103 </div>104 <div className="w-full min-w-0 text-center">105 <p className="mb-1.5 line-clamp-2 text-xl font-bold capitalize text-slate-900 [text-wrap:balance]">106 {name}107 </p>108 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">109 {position}110 </p>111 </div>112 </div>113 );114 })}115 </div>116 </div>117 );118}119
Our Team
Unleash the Power of Our Team and Transform Your Business
At Jettwave, our dynamic team of experts is a force to be reckoned with. With a shared passion for innovation and cutting-edge technology, we continuously push boundaries and shape the future of the industry.
Michael Scott
Regional Manager
Dwight Schrute
Assistant to the Regional Manager
Pam Beesly
Receptionist
Jim Halpert
Sales Representative
Angela Martin
Accountant
Toby Flenderson
Human Resources
Darryl Philbin
Warehouse Foreman
Creed Bratton
Quality Assurance
3x2 grid with profile cards
0import React from "react";1import Link from "next/link";23const TwitterLogo = ({ className }) => {4 return (5 <svg6 className={className}7 viewBox="0 0 243 198"8 fill="none"9 xmlns="http://www.w3.org/2000/svg"10 >11 <path12 fillRule="evenodd"13 clipRule="evenodd"14 d="M154.63 1.05056C147.242 2.89856 137.342 8.97556 131.058 15.5196C120.848 26.1526 116.23 39.0476 117.323 53.8726L117.866 61.2446L110.684 60.5566C78.8396 57.5036 47.9986 42.8166 24.1576 19.3506L13.8136 9.16856L11.4586 14.3346C8.50956 20.8026 6.68856 31.9466 7.50956 38.4996C9.10856 51.2476 15.8126 64.2226 24.8236 72.0086L29.5016 76.0516L25.0016 75.4036C20.9476 74.8196 13.3846 72.5596 8.75156 70.5456C7.27956 69.9066 7.00156 70.3246 7.00156 73.1826C7.00156 78.4056 9.73455 87.7186 13.1456 94.1176C18.8306 104.784 28.2266 112.28 44.0016 118.734C46.3476 119.693 46.2156 119.801 41.8746 120.473C39.3306 120.868 34.4916 121.035 31.1236 120.845C27.7546 120.655 24.9986 120.887 24.9996 121.36C25.0006 121.833 26.4566 124.983 28.2336 128.36C35.1816 141.557 49.0466 151.473 64.5536 154.335L71.4356 155.606L66.9086 158.72C60.4886 163.137 47.6286 169.394 40.0016 171.811C29.1426 175.254 22.0386 176.341 9.88856 176.422C-3.36644 176.511 -3.38744 176.339 10.7356 183.42C21.2786 188.706 33.9256 193.105 46.0016 195.684C58.2316 198.297 92.8956 198.267 104.949 195.633C148.544 186.108 183.262 159.032 202.572 119.5C212.202 99.7846 216.709 82.5116 217.704 61.4996L218.273 49.4996L227.387 40.8846C232.4 36.1456 237.948 30.2446 239.715 27.7716L242.929 23.2746L236.625 25.5626C230.653 27.7306 215.897 31.2276 215.289 30.6196C215.133 30.4636 217.044 28.8726 219.535 27.0826C222.027 25.2936 225.826 21.4976 227.979 18.6466C231.672 13.7546 236.286 4.94956 235.544 4.20856C235.357 4.02156 232.571 5.19556 229.353 6.81656C223.392 9.81956 208.181 14.9996 205.322 14.9996C204.454 14.9996 201.948 13.3766 199.752 11.3926C197.556 9.40856 192.362 6.17256 188.21 4.20056C181.144 0.844556 179.95 0.598556 169.581 0.348556C163.488 0.201556 156.759 0.517556 154.63 1.05056Z"15 />16 </svg>17 );18};1920const FacebookLogo = ({ className }) => {21 return (22 <svg23 className={className}24 viewBox="0 0 512 514"25 fill="none"26 xmlns="http://www.w3.org/2000/svg"27 >28 <path29 fillRule="evenodd"30 clipRule="evenodd"31 d="M53.2927 2.77738C30.7051 8.24518 11.1715 26.058 3.33683 48.3306L0.454855 56.5247L0.142311 253.454C-0.20067 469.431 -0.515559 458.932 6.76196 474.119C14.4866 490.24 30.0905 504.124 47.2782 510.17L55.4723 513.052L135.95 513.391L216.428 513.729V423.567V333.405L183.944 333.094L151.46 332.782L151.151 295.616L150.842 258.45H183.635H216.428V218.253C216.428 181.97 216.655 177.153 218.762 168.795C223.555 149.783 235.108 131.732 249.428 120.88C258.25 114.194 272.923 107.056 283.262 104.422C291.92 102.215 340.196 100.763 358.727 102.153L369.774 102.982V136.669V170.357L350.167 170.949C325.429 171.697 317.973 173.742 308.537 182.366C297.553 192.405 296.789 195.334 296.249 229.478L295.791 258.45H332.197H368.603L368.55 261.084C368.52 262.533 365.734 279.258 362.358 298.25L356.221 332.782L326.124 333.095L296.027 333.408V423.568V513.729L376.505 513.391L456.983 513.052L464.591 510.316C486.083 502.585 502.401 486.166 509.191 465.442L512 456.864V257.28V57.6953L509.129 48.9159C501.842 26.6315 483.07 9.03766 460.395 3.23742C451.543 0.973509 446.956 0.924349 255.747 1.01917C91.1084 1.10111 59.0683 1.3797 53.2927 2.77738Z"32 />33 </svg>34 );35};3637const InstagramLogo = ({ className }) => {38 return (39 <svg40 className={className}41 viewBox="0 0 512 512"42 fill="none"43 xmlns="http://www.w3.org/2000/svg"44 >45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M132.184 0.178038C103.769 3.09194 81.9677 10.9921 60.2455 26.2445C42.2959 38.848 24.9245 58.8789 15.2227 78.1607C9.08245 90.3627 3.48936 108.284 1.18391 123.141C-0.387942 133.271 -0.397756 377.892 1.17328 388.116C6.05814 419.902 20.0045 447.616 42.2836 469.814C65.1017 492.547 91.7807 505.485 125.87 510.349C139.069 512.232 372.193 512.24 385.48 510.358C419.304 505.567 446.346 492.449 469.066 469.814C491.345 447.616 505.292 419.902 510.177 388.116C511.748 377.892 511.738 133.271 510.166 123.141C507.009 102.8 499.54 82.2858 489.778 67.1471C469.255 35.3191 439.58 13.5715 404.257 4.47488C386.741 -0.0362335 394.488 0.201751 259.764 0.0373683C191.169 -0.0468675 133.758 0.0161088 132.184 0.178038ZM401.656 95.6761C410.069 99.5828 416.772 108.721 418.202 118.234C420.66 134.592 408.888 150.457 392.777 152.498C372.739 155.035 355.963 138.047 358.941 118.234C361.923 98.3863 383.245 87.1265 401.656 95.6761ZM272.031 134.671C296.697 138.161 319.733 148.904 337.457 165.184C358.881 184.86 372.538 210.573 376.675 239.02C377.773 246.568 377.776 264.655 376.681 272.237C371.363 309.057 348.985 342.517 317.421 360.848C282.455 381.154 241.154 383.058 203.79 366.087C182.138 356.252 160.985 336.497 148.826 314.754C133.906 288.075 129.761 254.152 137.754 224.132C145.832 193.791 167.149 165.801 193.929 150.371C218.164 136.408 245.485 130.916 272.031 134.671ZM241.047 174.717C234.42 175.895 222.404 180.116 216.419 183.37C198.795 192.949 184.76 209.545 178.316 228.426C174.59 239.341 173.621 246.552 174.109 259.717C174.713 276.026 178.468 287.649 187.531 301.269C198.813 318.226 216.682 330.806 236.231 335.556C244.606 337.591 266.744 337.591 275.119 335.556C294.596 330.824 312.577 318.166 323.814 301.276C329.154 293.251 331.75 287.695 334.774 277.823C336.759 271.341 336.942 269.543 336.993 256.037C337.041 243.035 336.829 240.564 335.18 234.869C326.652 205.419 305.997 184.694 276.731 176.224C269.92 174.252 248.702 173.357 241.047 174.717Z"49 />50 </svg>51 );52};5354const LinkedInLogo = ({ className }) => {55 return (56 <svg57 className={className}58 viewBox="0 0 512 512"59 fill="none"60 xmlns="http://www.w3.org/2000/svg"61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M31.351 1.92325C17.386 6.89125 6.739 17.6712 1.897 31.7452C0.0569999 37.0922 0 43.8353 0 255.945C0 468.959 0.0500001 474.777 1.919 480.21C6.816 494.442 17.527 505.138 31.8 510.048C37.147 511.888 43.89 511.945 256 511.945C469.014 511.945 474.832 511.895 480.265 510.026C494.497 505.129 505.193 494.418 510.103 480.145C511.943 474.798 512 468.055 512 255.945C512 43.8353 511.943 37.0922 510.103 31.7452C505.193 17.4722 494.497 6.76125 480.265 1.86425C474.829 -0.00575399 469.11 -0.052754 255.593 0.018246C45.849 0.088246 36.28 0.169246 31.351 1.92325ZM134.015 60.1502C171.626 73.8662 182.201 120.815 154.018 148.952C132.683 170.251 99.895 170.075 78.417 148.545C70.185 140.293 65.774 132.185 63.403 120.945C57.702 93.9182 76.074 65.4742 103.782 58.4312C111.991 56.3432 125.717 57.1242 134.015 60.1502ZM382.295 186.437C419.18 192.869 442.43 216.499 452.041 257.323C456.855 277.771 457.216 284.725 457.711 366.516C458.227 451.924 458.435 448.881 451.81 452.919C448.664 454.838 446.843 454.937 415 454.935C384.089 454.932 381.283 454.789 378.695 453.082C372.117 448.745 372.557 454.093 371.938 370.945C371.323 288.339 371.556 291.566 365.23 278.109C361.887 270.998 353.912 262.885 347.451 260.023C340.219 256.82 328.558 255.391 320.517 256.724C301.44 259.885 289.68 272.469 282.92 296.956C280.59 305.394 280.573 305.869 280.038 376.445C279.455 453.417 279.734 449.899 273.928 453.329C271.559 454.728 266.843 454.944 238.846 454.941C208.529 454.938 206.299 454.815 203.299 452.985C196.567 448.881 197 457.934 197 321.399C197 208.733 197.145 197.508 198.636 194.985C202.16 189.018 202.647 188.945 238.939 188.945C268.031 188.945 272.377 189.146 274.586 190.593C279.081 193.538 280 196.816 280 209.895C280 216.523 280.337 221.923 280.75 221.897C281.163 221.871 283.3 219.337 285.5 216.267C296.868 200.405 315.813 189.703 339 186.046C348.26 184.586 372.958 184.809 382.295 186.437ZM151.81 190.971C158.35 194.958 158 187.539 158 322.178C158 438.713 157.914 444.637 156.173 447.883C152.498 454.735 151.302 454.945 115.913 454.945C84.657 454.945 84.257 454.919 80.912 452.665C79.052 451.411 76.967 449.273 76.279 447.915C75.3 445.979 75.026 418.554 75.015 321.077L75 196.71L78.882 192.827L82.765 188.945L115.632 188.949C146.835 188.952 148.668 189.055 151.81 190.971Z"66 />67 </svg>68 );69};7071const data = {72 subHeading: "Visionary Innovators",73 title: "Our Exceptional Team of Innovators",74 paragraph:75 "At Jettwave, our team of innovators is at the heart of our success. With their diverse expertise and unwavering dedication, they are driving the forefront of technology.",76 items: [77 {78 name: "Alexa Brooks",79 position: "Software Engineer",80 image: {81 src: "https://images.unsplash.com/photo-1682514267137-a71492a325e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2OXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",82 alt: "",83 },84 socials: [85 {86 link: "#",87 Icon: TwitterLogo,88 },89 {90 link: "#",91 Icon: FacebookLogo,92 },93 ],94 },95 {96 name: "Benjamin Thompson",97 position: "Data Analyst",98 image: {99 src: "https://images.unsplash.com/photo-1683316923910-0b3e963a1f38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE3Nnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",100 alt: "",101 },102 socials: [103 {104 link: "#",105 Icon: FacebookLogo,106 },107 {108 link: "#",109 Icon: TwitterLogo,110 },111 {112 link: "#",113 Icon: LinkedInLogo,114 },115 ],116 },117 {118 name: "Dylan Hughes",119 position: "Marketing Specialist",120 image: {121 src: "https://images.unsplash.com/photo-1553618511-45bd241843fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=856&q=80",122 alt: "",123 },124 socials: [125 {126 link: "#",127 Icon: InstagramLogo,128 },129 ],130 },131 {132 name: "Claire Foster",133 position: "Product Manager",134 image: {135 src: "https://images.unsplash.com/photo-1683128001135-277a32155c51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4Mnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",136 alt: "",137 },138 socials: [139 {140 link: "#",141 Icon: InstagramLogo,142 },143 {144 link: "#",145 Icon: LinkedInLogo,146 },147 ],148 },149 {150 name: "Emma Wright",151 position: "UX/UI Designer",152 image: {153 src: "https://images.unsplash.com/photo-1683011284543-9dd9fe95afec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4M3x0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",154 alt: "",155 },156 socials: [157 {158 link: "#",159 Icon: FacebookLogo,160 },161 {162 link: "#",163 Icon: LinkedInLogo,164 },165 {166 link: "#",167 Icon: InstagramLogo,168 },169 ],170 },171 {172 name: "Finn Spencer",173 position: "DevOps Engineer",174 image: {175 src: "https://images.unsplash.com/photo-1678876462872-b0de9568b2f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",176 alt: "",177 },178 socials: [179 {180 link: "#",181 Icon: TwitterLogo,182 },183 ],184 },185 ],186};187188export function Teams3() {189 return (190 <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">191 <div className="mx-auto mb-12 max-w-3xl text-center">192 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">193 {data.subHeading}194 </p>195 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">196 {data.title}197 </h2>198 <p className="text-lg text-slate-600 [text-wrap:balance]">199 {data.paragraph}200 </p>201 </div>202 <div className="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:grid-cols-3">203 {data.items.map(({ image, name, position, socials }, index: number) => {204 return (205 <div206 key={index}207 className="relative mx-auto mt-16 flex w-full flex-col items-center justify-between gap-y-6 rounded-3xl border border-slate-200 bg-white p-8 pt-20 ring-4 ring-slate-50 max-md:max-w-sm"208 >209 <div className="absolute -top-16 h-32 w-32 overflow-hidden rounded-full border-2 border-slate-200 ring-4 ring-slate-50">210 <img211 src={image.src}212 alt={image.alt}213 onError={(e) => {214 const image = e.target as HTMLImageElement;215 image.src = "onerrorimg";216 }}217 className="aspect-square h-full w-full object-cover"218 />219 </div>220 <div className="mt-2 w-full min-w-0 text-center">221 <p className="mb-1.5 line-clamp-2 text-xl font-bold capitalize text-slate-900 [text-wrap:balance]">222 {name}223 </p>224 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">225 {position}226 </p>227 </div>228 <div className="flex flex-wrap justify-center gap-5">229 {socials.map(({ link, Icon }, index: number) => {230 return (231 <Link key={index} href={link} className="h-6 w-6 shrink-0">232 <Icon className="h-full w-full fill-sky-600 duration-150 hover:fill-sky-700" />233 </Link>234 );235 })}236 </div>237 </div>238 );239 })}240 </div>241 </div>242 );243}244
Visionary Innovators
Our Exceptional Team of Innovators
At Jettwave, our team of innovators is at the heart of our success. With their diverse expertise and unwavering dedication, they are driving the forefront of technology.
3x2 grid with left-aligned cards
0import React from "react";1import Link from "next/link";23const TwitterLogo = ({ className }) => {4 return (5 <svg6 className={className}7 viewBox="0 0 243 198"8 fill="none"9 xmlns="http://www.w3.org/2000/svg"10 >11 <path12 fillRule="evenodd"13 clipRule="evenodd"14 d="M154.63 1.05056C147.242 2.89856 137.342 8.97556 131.058 15.5196C120.848 26.1526 116.23 39.0476 117.323 53.8726L117.866 61.2446L110.684 60.5566C78.8396 57.5036 47.9986 42.8166 24.1576 19.3506L13.8136 9.16856L11.4586 14.3346C8.50956 20.8026 6.68856 31.9466 7.50956 38.4996C9.10856 51.2476 15.8126 64.2226 24.8236 72.0086L29.5016 76.0516L25.0016 75.4036C20.9476 74.8196 13.3846 72.5596 8.75156 70.5456C7.27956 69.9066 7.00156 70.3246 7.00156 73.1826C7.00156 78.4056 9.73455 87.7186 13.1456 94.1176C18.8306 104.784 28.2266 112.28 44.0016 118.734C46.3476 119.693 46.2156 119.801 41.8746 120.473C39.3306 120.868 34.4916 121.035 31.1236 120.845C27.7546 120.655 24.9986 120.887 24.9996 121.36C25.0006 121.833 26.4566 124.983 28.2336 128.36C35.1816 141.557 49.0466 151.473 64.5536 154.335L71.4356 155.606L66.9086 158.72C60.4886 163.137 47.6286 169.394 40.0016 171.811C29.1426 175.254 22.0386 176.341 9.88856 176.422C-3.36644 176.511 -3.38744 176.339 10.7356 183.42C21.2786 188.706 33.9256 193.105 46.0016 195.684C58.2316 198.297 92.8956 198.267 104.949 195.633C148.544 186.108 183.262 159.032 202.572 119.5C212.202 99.7846 216.709 82.5116 217.704 61.4996L218.273 49.4996L227.387 40.8846C232.4 36.1456 237.948 30.2446 239.715 27.7716L242.929 23.2746L236.625 25.5626C230.653 27.7306 215.897 31.2276 215.289 30.6196C215.133 30.4636 217.044 28.8726 219.535 27.0826C222.027 25.2936 225.826 21.4976 227.979 18.6466C231.672 13.7546 236.286 4.94956 235.544 4.20856C235.357 4.02156 232.571 5.19556 229.353 6.81656C223.392 9.81956 208.181 14.9996 205.322 14.9996C204.454 14.9996 201.948 13.3766 199.752 11.3926C197.556 9.40856 192.362 6.17256 188.21 4.20056C181.144 0.844556 179.95 0.598556 169.581 0.348556C163.488 0.201556 156.759 0.517556 154.63 1.05056Z"15 />16 </svg>17 );18};1920const FacebookLogo = ({ className }) => {21 return (22 <svg23 className={className}24 viewBox="0 0 512 514"25 fill="none"26 xmlns="http://www.w3.org/2000/svg"27 >28 <path29 fillRule="evenodd"30 clipRule="evenodd"31 d="M53.2927 2.77738C30.7051 8.24518 11.1715 26.058 3.33683 48.3306L0.454855 56.5247L0.142311 253.454C-0.20067 469.431 -0.515559 458.932 6.76196 474.119C14.4866 490.24 30.0905 504.124 47.2782 510.17L55.4723 513.052L135.95 513.391L216.428 513.729V423.567V333.405L183.944 333.094L151.46 332.782L151.151 295.616L150.842 258.45H183.635H216.428V218.253C216.428 181.97 216.655 177.153 218.762 168.795C223.555 149.783 235.108 131.732 249.428 120.88C258.25 114.194 272.923 107.056 283.262 104.422C291.92 102.215 340.196 100.763 358.727 102.153L369.774 102.982V136.669V170.357L350.167 170.949C325.429 171.697 317.973 173.742 308.537 182.366C297.553 192.405 296.789 195.334 296.249 229.478L295.791 258.45H332.197H368.603L368.55 261.084C368.52 262.533 365.734 279.258 362.358 298.25L356.221 332.782L326.124 333.095L296.027 333.408V423.568V513.729L376.505 513.391L456.983 513.052L464.591 510.316C486.083 502.585 502.401 486.166 509.191 465.442L512 456.864V257.28V57.6953L509.129 48.9159C501.842 26.6315 483.07 9.03766 460.395 3.23742C451.543 0.973509 446.956 0.924349 255.747 1.01917C91.1084 1.10111 59.0683 1.3797 53.2927 2.77738Z"32 />33 </svg>34 );35};3637const InstagramLogo = ({ className }) => {38 return (39 <svg40 className={className}41 viewBox="0 0 512 512"42 fill="none"43 xmlns="http://www.w3.org/2000/svg"44 >45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M132.184 0.178038C103.769 3.09194 81.9677 10.9921 60.2455 26.2445C42.2959 38.848 24.9245 58.8789 15.2227 78.1607C9.08245 90.3627 3.48936 108.284 1.18391 123.141C-0.387942 133.271 -0.397756 377.892 1.17328 388.116C6.05814 419.902 20.0045 447.616 42.2836 469.814C65.1017 492.547 91.7807 505.485 125.87 510.349C139.069 512.232 372.193 512.24 385.48 510.358C419.304 505.567 446.346 492.449 469.066 469.814C491.345 447.616 505.292 419.902 510.177 388.116C511.748 377.892 511.738 133.271 510.166 123.141C507.009 102.8 499.54 82.2858 489.778 67.1471C469.255 35.3191 439.58 13.5715 404.257 4.47488C386.741 -0.0362335 394.488 0.201751 259.764 0.0373683C191.169 -0.0468675 133.758 0.0161088 132.184 0.178038ZM401.656 95.6761C410.069 99.5828 416.772 108.721 418.202 118.234C420.66 134.592 408.888 150.457 392.777 152.498C372.739 155.035 355.963 138.047 358.941 118.234C361.923 98.3863 383.245 87.1265 401.656 95.6761ZM272.031 134.671C296.697 138.161 319.733 148.904 337.457 165.184C358.881 184.86 372.538 210.573 376.675 239.02C377.773 246.568 377.776 264.655 376.681 272.237C371.363 309.057 348.985 342.517 317.421 360.848C282.455 381.154 241.154 383.058 203.79 366.087C182.138 356.252 160.985 336.497 148.826 314.754C133.906 288.075 129.761 254.152 137.754 224.132C145.832 193.791 167.149 165.801 193.929 150.371C218.164 136.408 245.485 130.916 272.031 134.671ZM241.047 174.717C234.42 175.895 222.404 180.116 216.419 183.37C198.795 192.949 184.76 209.545 178.316 228.426C174.59 239.341 173.621 246.552 174.109 259.717C174.713 276.026 178.468 287.649 187.531 301.269C198.813 318.226 216.682 330.806 236.231 335.556C244.606 337.591 266.744 337.591 275.119 335.556C294.596 330.824 312.577 318.166 323.814 301.276C329.154 293.251 331.75 287.695 334.774 277.823C336.759 271.341 336.942 269.543 336.993 256.037C337.041 243.035 336.829 240.564 335.18 234.869C326.652 205.419 305.997 184.694 276.731 176.224C269.92 174.252 248.702 173.357 241.047 174.717Z"49 />50 </svg>51 );52};5354const LinkedInLogo = ({ className }) => {55 return (56 <svg57 className={className}58 viewBox="0 0 512 512"59 fill="none"60 xmlns="http://www.w3.org/2000/svg"61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M31.351 1.92325C17.386 6.89125 6.739 17.6712 1.897 31.7452C0.0569999 37.0922 0 43.8353 0 255.945C0 468.959 0.0500001 474.777 1.919 480.21C6.816 494.442 17.527 505.138 31.8 510.048C37.147 511.888 43.89 511.945 256 511.945C469.014 511.945 474.832 511.895 480.265 510.026C494.497 505.129 505.193 494.418 510.103 480.145C511.943 474.798 512 468.055 512 255.945C512 43.8353 511.943 37.0922 510.103 31.7452C505.193 17.4722 494.497 6.76125 480.265 1.86425C474.829 -0.00575399 469.11 -0.052754 255.593 0.018246C45.849 0.088246 36.28 0.169246 31.351 1.92325ZM134.015 60.1502C171.626 73.8662 182.201 120.815 154.018 148.952C132.683 170.251 99.895 170.075 78.417 148.545C70.185 140.293 65.774 132.185 63.403 120.945C57.702 93.9182 76.074 65.4742 103.782 58.4312C111.991 56.3432 125.717 57.1242 134.015 60.1502ZM382.295 186.437C419.18 192.869 442.43 216.499 452.041 257.323C456.855 277.771 457.216 284.725 457.711 366.516C458.227 451.924 458.435 448.881 451.81 452.919C448.664 454.838 446.843 454.937 415 454.935C384.089 454.932 381.283 454.789 378.695 453.082C372.117 448.745 372.557 454.093 371.938 370.945C371.323 288.339 371.556 291.566 365.23 278.109C361.887 270.998 353.912 262.885 347.451 260.023C340.219 256.82 328.558 255.391 320.517 256.724C301.44 259.885 289.68 272.469 282.92 296.956C280.59 305.394 280.573 305.869 280.038 376.445C279.455 453.417 279.734 449.899 273.928 453.329C271.559 454.728 266.843 454.944 238.846 454.941C208.529 454.938 206.299 454.815 203.299 452.985C196.567 448.881 197 457.934 197 321.399C197 208.733 197.145 197.508 198.636 194.985C202.16 189.018 202.647 188.945 238.939 188.945C268.031 188.945 272.377 189.146 274.586 190.593C279.081 193.538 280 196.816 280 209.895C280 216.523 280.337 221.923 280.75 221.897C281.163 221.871 283.3 219.337 285.5 216.267C296.868 200.405 315.813 189.703 339 186.046C348.26 184.586 372.958 184.809 382.295 186.437ZM151.81 190.971C158.35 194.958 158 187.539 158 322.178C158 438.713 157.914 444.637 156.173 447.883C152.498 454.735 151.302 454.945 115.913 454.945C84.657 454.945 84.257 454.919 80.912 452.665C79.052 451.411 76.967 449.273 76.279 447.915C75.3 445.979 75.026 418.554 75.015 321.077L75 196.71L78.882 192.827L82.765 188.945L115.632 188.949C146.835 188.952 148.668 189.055 151.81 190.971Z"66 />67 </svg>68 );69};7071const data = {72 subHeading: "Forward-Thinking Pioneers",73 title: "Our Remarkable Cohort of Pioneers",74 paragraph:75 "At Jettwave, our exceptional group of pioneers forms the foundation of our achievements. Their broad skillsets and steadfast commitment put us at the cutting-edge of technology.",76 items: [77 {78 name: "Alexa Brooks",79 position: "Software Engineer",80 description: "Expert in developing scalable software solutions",81 image: {82 src: "https://images.unsplash.com/photo-1682514267137-a71492a325e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2OXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",83 alt: "",84 },85 socials: [86 {87 link: "#",88 Icon: TwitterLogo,89 },90 {91 link: "#",92 Icon: FacebookLogo,93 },94 ],95 },96 {97 name: "Benjamin Thompson",98 position: "Data Analyst",99 description: "Specializes in predictive modeling and data visualization",100 image: {101 src: "https://images.unsplash.com/photo-1683316923910-0b3e963a1f38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE3Nnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",102 alt: "",103 },104 socials: [105 {106 link: "#",107 Icon: FacebookLogo,108 },109 {110 link: "#",111 Icon: TwitterLogo,112 },113 {114 link: "#",115 Icon: LinkedInLogo,116 },117 ],118 },119 {120 name: "Dylan Hughes",121 position: "Marketing Specialist",122 description:123 "Experienced in leading cross-functional teams to deliver successful products",124 image: {125 src: "https://images.unsplash.com/photo-1553618511-45bd241843fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=856&q=80",126 alt: "",127 },128 socials: [129 {130 link: "#",131 Icon: InstagramLogo,132 },133 ],134 },135 {136 name: "Claire Foster",137 position: "Product Manager",138 description: "Excels at creating strategic marketing plans",139 image: {140 src: "https://images.unsplash.com/photo-1683128001135-277a32155c51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4Mnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",141 alt: "",142 },143 socials: [144 {145 link: "#",146 Icon: InstagramLogo,147 },148 {149 link: "#",150 Icon: LinkedInLogo,151 },152 ],153 },154 {155 name: "Emma Wright",156 position: "UX/UI Designer",157 description:158 "Dedicated to creating user-friendly and aesthetically pleasing designs",159 image: {160 src: "https://images.unsplash.com/photo-1683011284543-9dd9fe95afec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4M3x0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",161 alt: "",162 },163 socials: [164 {165 link: "#",166 Icon: FacebookLogo,167 },168 {169 link: "#",170 Icon: LinkedInLogo,171 },172 {173 link: "#",174 Icon: InstagramLogo,175 },176 ],177 },178 {179 name: "Finn Spencer",180 position: "DevOps Engineer",181 description:182 "Focuses on improving communication between development and IT operations",183 image: {184 src: "https://images.unsplash.com/photo-1678876462872-b0de9568b2f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",185 alt: "",186 },187 socials: [188 {189 link: "#",190 Icon: TwitterLogo,191 },192 ],193 },194 ],195};196197export function Teams4() {198 return (199 <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">200 <div className="mb-12 max-w-3xl">201 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">202 {data.subHeading}203 </p>204 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">205 {data.title}206 </h2>207 <p className="text-lg text-slate-600 [text-wrap:balance]">208 {data.paragraph}209 </p>210 </div>211 <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">212 {data.items.map(213 ({ image, name, position, description, socials }, index: number) => {214 return (215 <div216 key={index}217 className="flex grow flex-col justify-between gap-y-6"218 >219 <div>220 <div className="mb-5 h-24 w-24 overflow-hidden rounded-full border border-sky-200 ring-[3px] ring-sky-100">221 <img222 src={image.src}223 alt={image.alt}224 onError={(e) => {225 const image = e.target as HTMLImageElement;226 image.src = "onerrorimg";227 }}228 className="aspect-square h-full w-full object-cover"229 />230 </div>231 <div className="w-full min-w-0">232 <p className="mb-1.5 truncate text-xl font-bold capitalize text-slate-900">233 {name}234 </p>235 <p className="mb-1 truncate text-lg font-medium text-sky-600 first-letter:uppercase">236 {position}237 </p>238 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">239 {description}240 </p>241 </div>242 </div>243 <div className="flex flex-wrap gap-5">244 {socials.map(({ link, Icon }, index: number) => {245 return (246 <Link247 key={index}248 href={link}249 className="h-6 w-6 shrink-0"250 >251 <Icon className="h-full w-full fill-sky-600 duration-150 hover:fill-sky-700" />252 </Link>253 );254 })}255 </div>256 </div>257 );258 }259 )}260 </div>261 </div>262 );263}264
Forward-Thinking Pioneers
Our Remarkable Cohort of Pioneers
At Jettwave, our exceptional group of pioneers forms the foundation of our achievements. Their broad skillsets and steadfast commitment put us at the cutting-edge of technology.
Dylan Hughes
Marketing Specialist
Experienced in leading cross-functional teams to deliver successful products
Carousel with background images
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 data = {29 subHeading: "Our Team",30 title: "Unleash the Power of Our Team and Transform Your Business",31 paragraph:32 "At Jettwave, our dynamic team of experts is a force to be reckoned with. With a shared passion for innovation and cutting-edge technology, we continuously push boundaries and shape the future of the industry.",33 items: [34 {35 name: "Alice Thornton",36 position: "Software Engineer",37 image: {38 src: "https://images.unsplash.com/photo-1551361975-61fdff227c70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",39 alt: "",40 },41 },42 {43 name: "Brian Adams",44 position: "DevOps Specialist",45 image: {46 src: "https://images.unsplash.com/photo-1597699639265-bb1b1fd01026?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",47 alt: "",48 },49 },50 {51 name: "Carla Smith",52 position: "UI/UX Designer",53 image: {54 src: "https://images.unsplash.com/photo-1508606572321-901ea443707f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1970&q=80",55 alt: "",56 },57 },58 {59 name: "Irene Watson",60 position: "Mobile App Developer",61 image: {62 src: "https://images.unsplash.com/photo-1535467728855-93fe6218a7b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1970&q=80",63 alt: "",64 },65 },66 {67 name: "Emily Rhodes",68 position: "Product Manager",69 image: {70 src: "https://images.unsplash.com/photo-1548366565-6bbab241282d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",71 alt: "",72 },73 },74 {75 name: "Grace Williams",76 position: "Front-end Developer",77 image: {78 src: "https://images.unsplash.com/photo-1615212079782-15a3ed596838?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",79 alt: "",80 },81 },82 {83 name: "Frank Anderson",84 position: "System Architect",85 image: {86 src: "https://images.unsplash.com/photo-1576577992692-1b78e59b5714?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",87 alt: "",88 },89 },90 {91 name: "Harry Clark",92 position: "Backend Developer",93 image: {94 src: "https://images.unsplash.com/photo-1530452540414-c17a65a637fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2127&q=80",95 alt: "",96 },97 },98 {99 name: "David Miller",100 position: "Data Scientist",101 image: {102 src: "https://images.unsplash.com/photo-1527164561913-76d911aa17ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",103 alt: "",104 },105 },106 {107 name: "Jacob Rodriguez",108 position: "Cybersecurity Analyst",109 image: {110 src: "https://images.unsplash.com/photo-1542124328-5933adedaa61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",111 alt: "",112 },113 },114 ],115};116117interface CarouselItem {118 name: string;119 position: string;120 image: {121 src: string;122 alt: string;123 };124}125126function moveItemToBack(arr: CarouselItem[]): CarouselItem[] {127 if (arr.length <= 1) {128 // No need to move if array has 0 or 1 item129 return arr;130 }131 const firstItem: CarouselItem = arr.shift()!; // Remove the first item from the array132 arr.push(firstItem); // Append the first item to the end of the array133 return arr;134}135136function moveItemToFront(arr: CarouselItem[]): CarouselItem[] {137 if (arr.length <= 1) {138 // No need to move if array has 0 or 1 item139 return arr;140 }141 const lastItem: CarouselItem = arr.pop()!; // Remove the last item from the array142 arr.unshift(lastItem); // Add the last item to the front of the array143 return arr;144}145146type CarouselHook = {147 carouselData: CarouselItem[];148 current: number;149 setCurrent: React.Dispatch<React.SetStateAction<number>>;150};151152const findData = data.items;153154const useCarousel = (155 findData: CarouselItem[],156 duration: number157): CarouselHook => {158 const [carouselData, setCarouselData] = useState<CarouselItem[]>(findData);159 const [current, setCurrent] = useState<number>(0);160161 useEffect(() => {162 let timeoutId: NodeJS.Timeout;163164 const moveItem = () => {165 if (current === 1) {166 setCarouselData(moveItemToBack(findData)); // Move item to the back of the carousel167 setCurrent(0); // Reset the current index168 } else if (current === -1) {169 setCarouselData(moveItemToFront(findData)); // Move item to the front of the carousel170 setCurrent(0); // Reset the current index171 }172 };173174 if (current !== 0) {175 timeoutId = setTimeout(moveItem, 300); // Trigger moveItem after the specified duration176 }177178 return () => clearTimeout(timeoutId); // Clear the timeout on cleanup179 }, [current, data, duration]);180181 return {182 carouselData,183 current,184 setCurrent,185 };186};187188export function Teams5() {189 const { carouselData, current, setCurrent } = useCarousel(findData, 150);190 return (191 <div className="overflow-x-hidden py-12">192 <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">193 <div className="mx-auto mb-12 max-w-3xl text-center">194 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">195 {data.subHeading}196 </p>197 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">198 {data.title}199 </h2>200 <p className="text-lg text-slate-600 [text-wrap:balance]">201 {data.paragraph}202 </p>203 </div>204 </div>205 <div className="relative mx-auto flex w-full max-w-7xl justify-center px-8">206 <div className="absolute inset-0 flex h-[512px] items-center justify-between px-8 sm:px-12 md:px-16">207 <button208 type="button"209 onClick={() => setCurrent(current - 1)}210 disabled={current === 0 ? false : true}211 className="relative z-10 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"212 >213 <ChevronLeftIcon className="h-full w-full fill-sky-600" />214 </button>215 <button216 type="button"217 onClick={() => setCurrent(current + 1)}218 disabled={current === 0 ? false : true}219 className="relative z-10 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"220 >221 <ChevronRightIcon className="h-full w-full fill-sky-600" />222 </button>223 </div>224 <div225 className={226 current === 0227 ? "flex w-max -translate-x-[624px] gap-x-8"228 : current === 1229 ? "flex w-max -translate-x-[1040px] gap-x-8 duration-300"230 : "flex w-max -translate-x-[208px] gap-x-8 duration-300"231 }232 >233 {carouselData.map(({ name, position, image }, index: number) => {234 return (235 <div key={index} className="flex w-[384px] flex-col gap-y-6">236 <div className="aspect-[3/4] overflow-hidden rounded-3xl border border-slate-200 ring-4 ring-slate-50">237 <img238 src={image.src}239 alt={image.alt}240 onError={(e) => {241 const image = e.target as HTMLImageElement;242 image.src = "onerrorimg";243 }}244 className="h-full w-full object-cover"245 />246 </div>247 <div className="w-full min-w-0 text-center">248 <p className="mb-1.5 truncate text-xl font-bold capitalize text-slate-900">249 {name}250 </p>251 <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">252 {position}253 </p>254 </div>255 </div>256 );257 })}258 </div>259 </div>260 </div>261 );262}263
Our Team
Unleash the Power of Our Team and Transform Your Business
At Jettwave, our dynamic team of experts is a force to be reckoned with. With a shared passion for innovation and cutting-edge technology, we continuously push boundaries and shape the future of the industry.
Alice Thornton
Software Engineer
Brian Adams
DevOps Specialist
Carla Smith
UI/UX Designer
Irene Watson
Mobile App Developer
Emily Rhodes
Product Manager
Grace Williams
Front-end Developer
Frank Anderson
System Architect
Harry Clark
Backend Developer
David Miller
Data Scientist
Jacob Rodriguez
Cybersecurity Analyst
Three-column
0import React from "react";12const data = {3 subHeading: "Innovative Leaders of Tomorrow",4 title: "Meet Our Eminent Visionaries",5 paragraph:6 "At BrightTech, we're not just about the present; we're about foreseeing the future. Each of our distinguished members embodies a vision of tomorrow, backed by unmatched prowess and dedication that ensures we remain at the industry's vanguard.",7 items: [8 {9 name: "Oliver Morris",10 position: "Backend Developer",11 image: {12 src: "https://images.unsplash.com/photo-1639149888905-fb39731f2e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",13 alt: "",14 },15 },16 {17 name: "Sophia Hall",18 position: "Data Scientist",19 image: {20 src: "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80",21 alt: "",22 },23 },24 {25 name: "James Bennett",26 position: "Sales Manager",27 image: {28 src: "https://images.unsplash.com/flagged/photo-1573603867003-89f5fd7a7576?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1946&q=80",29 alt: "",30 },31 },32 ],33};3435export function Teams6() {36 return (37 <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">38 <div className="mx-auto mb-12 max-w-3xl text-center">39 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">40 {data.subHeading}41 </p>42 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">43 {data.title}44 </h2>45 <p className="text-lg text-slate-600 [text-wrap:balance]">46 {data.paragraph}47 </p>48 </div>49 <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">50 {data.items.map(({ image, name, position }, index: number) => {51 return (52 <div53 key={index}54 className="mx-auto w-full overflow-hidden rounded-3xl border border-slate-200 bg-white ring-4 ring-slate-50 max-lg:max-w-sm"55 >56 <div className="aspect-[7/8] w-full">57 <img58 src={image.src}59 alt={image.alt}60 onError={(e) => {61 const image = e.target as HTMLImageElement;62 image.src = "onerrorimg";63 }}64 className="aspect-[7/8] h-full w-full object-cover"65 />66 </div>67 <div className="min-w-0 p-8">68 <p className="mb-1 truncate text-xl font-bold capitalize text-slate-900">69 {name}70 </p>71 <p className="truncate text-base font-semibold text-sky-600">72 {position}73 </p>74 </div>75 </div>76 );77 })}78 </div>79 </div>80 );81}82
Innovative Leaders of Tomorrow
Meet Our Eminent Visionaries
At BrightTech, we're not just about the present; we're about foreseeing the future. Each of our distinguished members embodies a vision of tomorrow, backed by unmatched prowess and dedication that ensures we remain at the industry's vanguard.
Oliver Morris
Backend Developer
Sophia Hall
Data Scientist
James Bennett
Sales Manager
3x3grid with compact cards
0import React from "react";12const data = {3 subHeading: "Fueling Innovation",4 title: "Unleash the Power of Our Team",5 paragraph:6 "Our dynamic team at Jettwave is a force to be reckoned with, harnessing their collective expertise to drive innovation and shape the future of technology.",7 items: [8 {9 name: "Michael Scott",10 position: "Regional Manager",11 image: {12 src: "https://images.unsplash.com/photo-1684461741006-a4a5c5ce1778?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc4fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",13 alt: "",14 },15 },16 {17 name: "Dwight Schrute",18 position: "Assistant to the Regional Manager",19 image: {20 src: "https://images.unsplash.com/photo-1684027948314-e9f64be8670b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDgzfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",21 alt: "",22 },23 },24 {25 name: "Pam Beesly",26 position: "Receptionist",27 image: {28 src: "https://images.unsplash.com/photo-1650563277143-1d1060410864?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",29 alt: "",30 },31 },32 {33 name: "Jim Halpert",34 position: "Sales Representative",35 image: {36 src: "https://images.unsplash.com/photo-1683008549450-8e09478fd8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",37 alt: "",38 },39 },40 {41 name: "Angela Martin",42 position: "Accountant",43 image: {44 src: "https://images.unsplash.com/photo-1684510032703-ed6446f5dd14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDkyfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",45 alt: "",46 },47 },48 {49 name: "Toby Flenderson",50 position: "Human Resources",51 image: {52 src: "https://images.unsplash.com/photo-1684692379523-8e810c8d0342?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",53 alt: "",54 },55 },56 {57 name: "Darryl Philbin",58 position: "Warehouse Foreman",59 image: {60 src: "https://images.unsplash.com/photo-1684293866442-735f6a1b5599?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDk5fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",61 alt: "",62 },63 },64 {65 name: "Creed Bratton",66 position: "Quality Assurance",67 image: {68 src: "https://images.unsplash.com/photo-1684549742130-c2083354da35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwMnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",69 alt: "",70 },71 },72 {73 name: "Kevin Malone",74 position: "Accountant",75 image: {76 src: "https://images.unsplash.com/photo-1684434832555-082502e1bf7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEwNnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",77 alt: "",78 },79 },80 ],81};8283export function Teams7() {84 return (85 <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">86 <div className="mx-auto mb-12 max-w-3xl text-center">87 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">88 {data.subHeading}89 </p>90 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">91 {data.title}92 </h2>93 <p className="text-lg text-slate-600 [text-wrap:balance]">94 {data.paragraph}95 </p>96 </div>97 <div className="grid grid-cols-1 gap-6 max-md:mx-auto max-md:w-fit md:grid-cols-2 lg:grid-cols-3">98 {data.items.map(({ image, position, name }, index: number) => {99 return (100 <div101 key={index}102 className="flex items-center gap-x-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"103 >104 <div className="aspect-square h-16 w-16 shrink-0 overflow-hidden rounded-xl">105 <img106 src={image.src}107 alt={image.alt}108 onError={(e) => {109 const image = e.target as HTMLImageElement;110 image.src = "onerrorimg";111 }}112 className="aspect-square h-full w-full object-cover"113 />114 </div>115 <div className="w-full min-w-0">116 <p className="truncate text-lg font-bold capitalize text-slate-900">117 {name}118 </p>119 <p className="truncate text-base text-slate-600">{position}</p>120 </div>121 </div>122 );123 })}124 </div>125 </div>126 );127}128
Fueling Innovation
Unleash the Power of Our Team
Our dynamic team at Jettwave is a force to be reckoned with, harnessing their collective expertise to drive innovation and shape the future of technology.
Michael Scott
Regional Manager
Dwight Schrute
Assistant to the Regional Manager
Pam Beesly
Receptionist
Jim Halpert
Sales Representative
Angela Martin
Accountant
Toby Flenderson
Human Resources
Darryl Philbin
Warehouse Foreman
Creed Bratton
Quality Assurance
Kevin Malone
Accountant
Split with grid and icons
0import React from "react";1import Link from "next/link";23const TwitterLogo = ({ className }) => {4 return (5 <svg6 className={className}7 viewBox="0 0 243 198"8 fill="none"9 xmlns="http://www.w3.org/2000/svg"10 >11 <path12 fillRule="evenodd"13 clipRule="evenodd"14 d="M154.63 1.05056C147.242 2.89856 137.342 8.97556 131.058 15.5196C120.848 26.1526 116.23 39.0476 117.323 53.8726L117.866 61.2446L110.684 60.5566C78.8396 57.5036 47.9986 42.8166 24.1576 19.3506L13.8136 9.16856L11.4586 14.3346C8.50956 20.8026 6.68856 31.9466 7.50956 38.4996C9.10856 51.2476 15.8126 64.2226 24.8236 72.0086L29.5016 76.0516L25.0016 75.4036C20.9476 74.8196 13.3846 72.5596 8.75156 70.5456C7.27956 69.9066 7.00156 70.3246 7.00156 73.1826C7.00156 78.4056 9.73455 87.7186 13.1456 94.1176C18.8306 104.784 28.2266 112.28 44.0016 118.734C46.3476 119.693 46.2156 119.801 41.8746 120.473C39.3306 120.868 34.4916 121.035 31.1236 120.845C27.7546 120.655 24.9986 120.887 24.9996 121.36C25.0006 121.833 26.4566 124.983 28.2336 128.36C35.1816 141.557 49.0466 151.473 64.5536 154.335L71.4356 155.606L66.9086 158.72C60.4886 163.137 47.6286 169.394 40.0016 171.811C29.1426 175.254 22.0386 176.341 9.88856 176.422C-3.36644 176.511 -3.38744 176.339 10.7356 183.42C21.2786 188.706 33.9256 193.105 46.0016 195.684C58.2316 198.297 92.8956 198.267 104.949 195.633C148.544 186.108 183.262 159.032 202.572 119.5C212.202 99.7846 216.709 82.5116 217.704 61.4996L218.273 49.4996L227.387 40.8846C232.4 36.1456 237.948 30.2446 239.715 27.7716L242.929 23.2746L236.625 25.5626C230.653 27.7306 215.897 31.2276 215.289 30.6196C215.133 30.4636 217.044 28.8726 219.535 27.0826C222.027 25.2936 225.826 21.4976 227.979 18.6466C231.672 13.7546 236.286 4.94956 235.544 4.20856C235.357 4.02156 232.571 5.19556 229.353 6.81656C223.392 9.81956 208.181 14.9996 205.322 14.9996C204.454 14.9996 201.948 13.3766 199.752 11.3926C197.556 9.40856 192.362 6.17256 188.21 4.20056C181.144 0.844556 179.95 0.598556 169.581 0.348556C163.488 0.201556 156.759 0.517556 154.63 1.05056Z"15 />16 </svg>17 );18};1920const FacebookLogo = ({ className }) => {21 return (22 <svg23 className={className}24 viewBox="0 0 512 514"25 fill="none"26 xmlns="http://www.w3.org/2000/svg"27 >28 <path29 fillRule="evenodd"30 clipRule="evenodd"31 d="M53.2927 2.77738C30.7051 8.24518 11.1715 26.058 3.33683 48.3306L0.454855 56.5247L0.142311 253.454C-0.20067 469.431 -0.515559 458.932 6.76196 474.119C14.4866 490.24 30.0905 504.124 47.2782 510.17L55.4723 513.052L135.95 513.391L216.428 513.729V423.567V333.405L183.944 333.094L151.46 332.782L151.151 295.616L150.842 258.45H183.635H216.428V218.253C216.428 181.97 216.655 177.153 218.762 168.795C223.555 149.783 235.108 131.732 249.428 120.88C258.25 114.194 272.923 107.056 283.262 104.422C291.92 102.215 340.196 100.763 358.727 102.153L369.774 102.982V136.669V170.357L350.167 170.949C325.429 171.697 317.973 173.742 308.537 182.366C297.553 192.405 296.789 195.334 296.249 229.478L295.791 258.45H332.197H368.603L368.55 261.084C368.52 262.533 365.734 279.258 362.358 298.25L356.221 332.782L326.124 333.095L296.027 333.408V423.568V513.729L376.505 513.391L456.983 513.052L464.591 510.316C486.083 502.585 502.401 486.166 509.191 465.442L512 456.864V257.28V57.6953L509.129 48.9159C501.842 26.6315 483.07 9.03766 460.395 3.23742C451.543 0.973509 446.956 0.924349 255.747 1.01917C91.1084 1.10111 59.0683 1.3797 53.2927 2.77738Z"32 />33 </svg>34 );35};3637const InstagramLogo = ({ className }) => {38 return (39 <svg40 className={className}41 viewBox="0 0 512 512"42 fill="none"43 xmlns="http://www.w3.org/2000/svg"44 >45 <path46 fillRule="evenodd"47 clipRule="evenodd"48 d="M132.184 0.178038C103.769 3.09194 81.9677 10.9921 60.2455 26.2445C42.2959 38.848 24.9245 58.8789 15.2227 78.1607C9.08245 90.3627 3.48936 108.284 1.18391 123.141C-0.387942 133.271 -0.397756 377.892 1.17328 388.116C6.05814 419.902 20.0045 447.616 42.2836 469.814C65.1017 492.547 91.7807 505.485 125.87 510.349C139.069 512.232 372.193 512.24 385.48 510.358C419.304 505.567 446.346 492.449 469.066 469.814C491.345 447.616 505.292 419.902 510.177 388.116C511.748 377.892 511.738 133.271 510.166 123.141C507.009 102.8 499.54 82.2858 489.778 67.1471C469.255 35.3191 439.58 13.5715 404.257 4.47488C386.741 -0.0362335 394.488 0.201751 259.764 0.0373683C191.169 -0.0468675 133.758 0.0161088 132.184 0.178038ZM401.656 95.6761C410.069 99.5828 416.772 108.721 418.202 118.234C420.66 134.592 408.888 150.457 392.777 152.498C372.739 155.035 355.963 138.047 358.941 118.234C361.923 98.3863 383.245 87.1265 401.656 95.6761ZM272.031 134.671C296.697 138.161 319.733 148.904 337.457 165.184C358.881 184.86 372.538 210.573 376.675 239.02C377.773 246.568 377.776 264.655 376.681 272.237C371.363 309.057 348.985 342.517 317.421 360.848C282.455 381.154 241.154 383.058 203.79 366.087C182.138 356.252 160.985 336.497 148.826 314.754C133.906 288.075 129.761 254.152 137.754 224.132C145.832 193.791 167.149 165.801 193.929 150.371C218.164 136.408 245.485 130.916 272.031 134.671ZM241.047 174.717C234.42 175.895 222.404 180.116 216.419 183.37C198.795 192.949 184.76 209.545 178.316 228.426C174.59 239.341 173.621 246.552 174.109 259.717C174.713 276.026 178.468 287.649 187.531 301.269C198.813 318.226 216.682 330.806 236.231 335.556C244.606 337.591 266.744 337.591 275.119 335.556C294.596 330.824 312.577 318.166 323.814 301.276C329.154 293.251 331.75 287.695 334.774 277.823C336.759 271.341 336.942 269.543 336.993 256.037C337.041 243.035 336.829 240.564 335.18 234.869C326.652 205.419 305.997 184.694 276.731 176.224C269.92 174.252 248.702 173.357 241.047 174.717Z"49 />50 </svg>51 );52};5354const LinkedInLogo = ({ className }) => {55 return (56 <svg57 className={className}58 viewBox="0 0 512 512"59 fill="none"60 xmlns="http://www.w3.org/2000/svg"61 >62 <path63 fillRule="evenodd"64 clipRule="evenodd"65 d="M31.351 1.92325C17.386 6.89125 6.739 17.6712 1.897 31.7452C0.0569999 37.0922 0 43.8353 0 255.945C0 468.959 0.0500001 474.777 1.919 480.21C6.816 494.442 17.527 505.138 31.8 510.048C37.147 511.888 43.89 511.945 256 511.945C469.014 511.945 474.832 511.895 480.265 510.026C494.497 505.129 505.193 494.418 510.103 480.145C511.943 474.798 512 468.055 512 255.945C512 43.8353 511.943 37.0922 510.103 31.7452C505.193 17.4722 494.497 6.76125 480.265 1.86425C474.829 -0.00575399 469.11 -0.052754 255.593 0.018246C45.849 0.088246 36.28 0.169246 31.351 1.92325ZM134.015 60.1502C171.626 73.8662 182.201 120.815 154.018 148.952C132.683 170.251 99.895 170.075 78.417 148.545C70.185 140.293 65.774 132.185 63.403 120.945C57.702 93.9182 76.074 65.4742 103.782 58.4312C111.991 56.3432 125.717 57.1242 134.015 60.1502ZM382.295 186.437C419.18 192.869 442.43 216.499 452.041 257.323C456.855 277.771 457.216 284.725 457.711 366.516C458.227 451.924 458.435 448.881 451.81 452.919C448.664 454.838 446.843 454.937 415 454.935C384.089 454.932 381.283 454.789 378.695 453.082C372.117 448.745 372.557 454.093 371.938 370.945C371.323 288.339 371.556 291.566 365.23 278.109C361.887 270.998 353.912 262.885 347.451 260.023C340.219 256.82 328.558 255.391 320.517 256.724C301.44 259.885 289.68 272.469 282.92 296.956C280.59 305.394 280.573 305.869 280.038 376.445C279.455 453.417 279.734 449.899 273.928 453.329C271.559 454.728 266.843 454.944 238.846 454.941C208.529 454.938 206.299 454.815 203.299 452.985C196.567 448.881 197 457.934 197 321.399C197 208.733 197.145 197.508 198.636 194.985C202.16 189.018 202.647 188.945 238.939 188.945C268.031 188.945 272.377 189.146 274.586 190.593C279.081 193.538 280 196.816 280 209.895C280 216.523 280.337 221.923 280.75 221.897C281.163 221.871 283.3 219.337 285.5 216.267C296.868 200.405 315.813 189.703 339 186.046C348.26 184.586 372.958 184.809 382.295 186.437ZM151.81 190.971C158.35 194.958 158 187.539 158 322.178C158 438.713 157.914 444.637 156.173 447.883C152.498 454.735 151.302 454.945 115.913 454.945C84.657 454.945 84.257 454.919 80.912 452.665C79.052 451.411 76.967 449.273 76.279 447.915C75.3 445.979 75.026 418.554 75.015 321.077L75 196.71L78.882 192.827L82.765 188.945L115.632 188.949C146.835 188.952 148.668 189.055 151.81 190.971Z"66 />67 </svg>68 );69};7071const data = {72 subHeading: "Driving Transformation",73 title: "Empower Change with Our Dynamic Team",74 paragraph:75 "The energetic team at Jettwave is a hub of skill and innovation, leveraging their collective insights to foster advancement and pioneer the future of technology.",76 items: [77 {78 name: "Alexa Brooks",79 position: "Software Engineer",8081 image: {82 src: "https://images.unsplash.com/photo-1672072962389-16b0925938b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI3NHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",83 alt: "",84 },85 socials: [86 {87 link: "#",88 Icon: TwitterLogo,89 },90 {91 link: "#",92 Icon: FacebookLogo,93 },94 ],95 },96 {97 name: "Benjamin Thompson",98 position: "Data Analyst",99100 image: {101 src: "https://images.unsplash.com/photo-1681156904917-a2da8014a5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI4MHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",102 alt: "",103 },104 socials: [105 {106 link: "#",107 Icon: FacebookLogo,108 },109 {110 link: "#",111 Icon: TwitterLogo,112 },113 {114 link: "#",115 Icon: LinkedInLogo,116 },117 ],118 },119 {120 name: "Dylan Hughes",121 position: "Marketing Specialist",122123 image: {124 src: "https://images.unsplash.com/photo-1680614038587-9de698612c78?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI4Nnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",125 alt: "",126 },127 socials: [128 {129 link: "#",130 Icon: InstagramLogo,131 },132 ],133 },134 {135 name: "Claire Foster",136 position: "Product Manager",137138 image: {139 src: "https://images.unsplash.com/photo-1679263503091-67a79274bbf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5MHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",140 alt: "",141 },142 socials: [143 {144 link: "#",145 Icon: InstagramLogo,146 },147 {148 link: "#",149 Icon: LinkedInLogo,150 },151 ],152 },153 {154 name: "Emma Wright",155 position: "UX/UI Designer",156157 image: {158 src: "https://images.unsplash.com/photo-1620069088341-2470efccbbec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5NXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",159 alt: "",160 },161 socials: [162 {163 link: "#",164 Icon: FacebookLogo,165 },166 {167 link: "#",168 Icon: LinkedInLogo,169 },170 {171 link: "#",172 Icon: InstagramLogo,173 },174 ],175 },176 {177 name: "Finn Spencer",178 position: "DevOps Engineer",179180 image: {181 src: "https://images.unsplash.com/photo-1629402202312-ac989b9538cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5OHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",182 alt: "",183 },184 socials: [185 {186 link: "#",187 Icon: TwitterLogo,188 },189 ],190 },191 ],192 button: { label: "Learn more", link: "#" },193};194195export function Teams8() {196 return (197 <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">198 <div className="flex gap-x-20 gap-y-12 max-xl:flex-col">199 <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">200 <div className="max-w-3xl">201 <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">202 {data.subHeading}203 </p>204 <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">205 {data.title}206 </h2>207 <p className="text-lg text-slate-600 [text-wrap:balance]">208 {data.paragraph}209 </p>210 </div>211 <Link212 role="button"213 href={data.button.link}214 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"215 >216 {data.button.label}217 </Link>218 </div>219 <div className="grid w-full grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2">220 {data.items.map(221 ({ image, name, position, socials }, index: number) => {222 return (223 <div key={index} className="flex w-full gap-x-6">224 <div className="aspect-square h-28 w-28 shrink-0 overflow-hidden rounded-xl">225 <img226 src={image.src}227 alt={image.alt}228 onError={(e) => {229 const image = e.target as HTMLImageElement;230 image.src = "onerrorimg";231 }}232 className="aspect-square h-full w-full object-cover"233 />