Teams

6x2 grid

0import React from "react";
1
2const 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};
106
107export 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                <img
127                  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";
1
2const 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};
74
75export 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                <img
95                  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";
2
3const TwitterLogo = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      viewBox="0 0 243 198"
8      fill="none"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path
12        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};
19
20const FacebookLogo = ({ className }) => {
21  return (
22    <svg
23      className={className}
24      viewBox="0 0 512 514"
25      fill="none"
26      xmlns="http://www.w3.org/2000/svg"
27    >
28      <path
29        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};
36
37const InstagramLogo = ({ className }) => {
38  return (
39    <svg
40      className={className}
41      viewBox="0 0 512 512"
42      fill="none"
43      xmlns="http://www.w3.org/2000/svg"
44    >
45      <path
46        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};
53
54const LinkedInLogo = ({ className }) => {
55  return (
56    <svg
57      className={className}
58      viewBox="0 0 512 512"
59      fill="none"
60      xmlns="http://www.w3.org/2000/svg"
61    >
62      <path
63        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};
70
71const 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};
187
188export 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            <div
206              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                <img
211                  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.

Alexa Brooks

Software Engineer

Benjamin Thompson

Data Analyst

Dylan Hughes

Marketing Specialist

Claire Foster

Product Manager

Emma Wright

UX/UI Designer

Finn Spencer

DevOps Engineer

3x2 grid with left-aligned cards

0import React from "react";
1import Link from "next/link";
2
3const TwitterLogo = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      viewBox="0 0 243 198"
8      fill="none"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path
12        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};
19
20const FacebookLogo = ({ className }) => {
21  return (
22    <svg
23      className={className}
24      viewBox="0 0 512 514"
25      fill="none"
26      xmlns="http://www.w3.org/2000/svg"
27    >
28      <path
29        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};
36
37const InstagramLogo = ({ className }) => {
38  return (
39    <svg
40      className={className}
41      viewBox="0 0 512 512"
42      fill="none"
43      xmlns="http://www.w3.org/2000/svg"
44    >
45      <path
46        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};
53
54const LinkedInLogo = ({ className }) => {
55  return (
56    <svg
57      className={className}
58      viewBox="0 0 512 512"
59      fill="none"
60      xmlns="http://www.w3.org/2000/svg"
61    >
62      <path
63        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};
70
71const 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};
196
197export 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              <div
216                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                    <img
222                      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                      <Link
247                        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.

Alexa Brooks

Software Engineer

Expert in developing scalable software solutions

Benjamin Thompson

Data Analyst

Specializes in predictive modeling and data visualization

Dylan Hughes

Marketing Specialist

Experienced in leading cross-functional teams to deliver successful products

Claire Foster

Product Manager

Excels at creating strategic marketing plans

Emma Wright

UX/UI Designer

Dedicated to creating user-friendly and aesthetically pleasing designs

Finn Spencer

DevOps Engineer

Focuses on improving communication between development and IT operations

Carousel with background images

0import React, { useState, useEffect } from "react";
1
2const ChevronRightIcon = ({ className }) => {
3  return (
4    <svg
5      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};
14
15const ChevronLeftIcon = ({ className }) => {
16  return (
17    <svg
18      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};
27
28const 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};
116
117interface CarouselItem {
118  name: string;
119  position: string;
120  image: {
121    src: string;
122    alt: string;
123  };
124}
125
126function moveItemToBack(arr: CarouselItem[]): CarouselItem[] {
127  if (arr.length <= 1) {
128    // No need to move if array has 0 or 1 item
129    return arr;
130  }
131  const firstItem: CarouselItem = arr.shift()!; // Remove the first item from the array
132  arr.push(firstItem); // Append the first item to the end of the array
133  return arr;
134}
135
136function moveItemToFront(arr: CarouselItem[]): CarouselItem[] {
137  if (arr.length <= 1) {
138    // No need to move if array has 0 or 1 item
139    return arr;
140  }
141  const lastItem: CarouselItem = arr.pop()!; // Remove the last item from the array
142  arr.unshift(lastItem); // Add the last item to the front of the array
143  return arr;
144}
145
146type CarouselHook = {
147  carouselData: CarouselItem[];
148  current: number;
149  setCurrent: React.Dispatch<React.SetStateAction<number>>;
150};
151
152const findData = data.items;
153
154const useCarousel = (
155  findData: CarouselItem[],
156  duration: number
157): CarouselHook => {
158  const [carouselData, setCarouselData] = useState<CarouselItem[]>(findData);
159  const [current, setCurrent] = useState<number>(0);
160
161  useEffect(() => {
162    let timeoutId: NodeJS.Timeout;
163
164    const moveItem = () => {
165      if (current === 1) {
166        setCarouselData(moveItemToBack(findData)); // Move item to the back of the carousel
167        setCurrent(0); // Reset the current index
168      } else if (current === -1) {
169        setCarouselData(moveItemToFront(findData)); // Move item to the front of the carousel
170        setCurrent(0); // Reset the current index
171      }
172    };
173
174    if (current !== 0) {
175      timeoutId = setTimeout(moveItem, 300); // Trigger moveItem after the specified duration
176    }
177
178    return () => clearTimeout(timeoutId); // Clear the timeout on cleanup
179  }, [current, data, duration]);
180
181  return {
182    carouselData,
183    current,
184    setCurrent,
185  };
186};
187
188export 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          <button
208            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          <button
216            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        <div
225          className={
226            current === 0
227              ? "flex w-max -translate-x-[624px] gap-x-8"
228              : current === 1
229              ? "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                  <img
238                    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

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";
1
2const 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};
34
35export 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            <div
53              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                <img
58                  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";
1
2const 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};
82
83export 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            <div
101              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                <img
106                  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";
2
3const TwitterLogo = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      viewBox="0 0 243 198"
8      fill="none"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path
12        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};
19
20const FacebookLogo = ({ className }) => {
21  return (
22    <svg
23      className={className}
24      viewBox="0 0 512 514"
25      fill="none"
26      xmlns="http://www.w3.org/2000/svg"
27    >
28      <path
29        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};
36
37const InstagramLogo = ({ className }) => {
38  return (
39    <svg
40      className={className}
41      viewBox="0 0 512 512"
42      fill="none"
43      xmlns="http://www.w3.org/2000/svg"
44    >
45      <path
46        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};
53
54const LinkedInLogo = ({ className }) => {
55  return (
56    <svg
57      className={className}
58      viewBox="0 0 512 512"
59      fill="none"
60      xmlns="http://www.w3.org/2000/svg"
61    >
62      <path
63        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};
70
71const 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",
80
81      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",
99
100      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",
122
123      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",
137
138      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",
156
157      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",
179
180      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};
194
195export 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          <Link
212            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                    <img
226                      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                    />
234                  </div>
235                  <div className="flex min-w-0 grow flex-col justify-between">
236                    <div>
237                      <p className="mb-1 truncate text-lg font-bold capitalize text-slate-900">
238                        {name}
239                      </p>
240                      <p className="line-clamp-2 text-base text-slate-600 [text-wrap:balance]">
241                        {position}
242                      </p>
243                    </div>
244                    <div className="flex flex-wrap gap-5">
245                      {socials.map(({ link, Icon }, index: number) => {
246                        return (
247                          <Link
248                            key={index}
249                            href={link}
250                            className="h-6 w-6 shrink-0"
251                          >
252                            <Icon className="h-full w-full fill-sky-600 duration-150 hover:fill-sky-700" />
253                          </Link>
254                        );
255                      })}
256                    </div>
257                  </div>
258                </div>
259              );
260            }
261          )}
262        </div>
263      </div>
264    </div>
265  );
266}
267

Driving Transformation

Empower Change with Our Dynamic Team

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.

Learn more

Alexa Brooks

Software Engineer

Benjamin Thompson

Data Analyst

Dylan Hughes

Marketing Specialist

Claire Foster

Product Manager

Emma Wright

UX/UI Designer

Finn Spencer

DevOps Engineer

Centered image cluster

0import React from "react";
1
2const data = {
3  subHeading: "Forging New Horizons",
4  title: "The Innovators at Jettwave",
5  paragraph:
6    "Get acquainted with Jettwave's innovators, a cadre of forward-thinking individuals who are revolutionizing the tech industry. With their unwavering commitment and extensive knowledge, they are continually setting new standards in innovation.",
7  items: [
8    {
9      name: "Michael Scott",
10      position: "Regional Manager",
11      image: {
12        src: "https://images.unsplash.com/photo-1684323808115-0e5d231d6c5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExMXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1684146029921-667f6a98793a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExNXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1684166260533-36271ca192dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEyMHx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1684071270645-c7516acf0bf0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEyOXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1683943889652-9997497b52b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=613&q=80",
45        alt: "",
46      },
47    },
48    {
49      name: "Toby Flenderson",
50      position: "Human Resources Representative",
51      image: {
52        src: "https://images.unsplash.com/photo-1683594582284-11025cb6f39c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1M3x0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1683815251677-8df20f826622?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1Nnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1683513561090-0835f3cb7719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1OXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&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-1683731026299-1e50f81345c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2MXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
77        alt: "",
78      },
79    },
80    {
81      name: "Michael Scott",
82      position: "Regional Manager",
83      image: {
84        src: "https://images.unsplash.com/photo-1684323808115-0e5d231d6c5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExMXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
85        alt: "",
86      },
87    },
88    {
89      name: "Dwight Schrute",
90      position: "Assistant to the Regional Manager",
91      image: {
92        src: "https://images.unsplash.com/photo-1684146029921-667f6a98793a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExNXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
93        alt: "",
94      },
95    },
96
97    {
98      name: "Angela Martin",
99      position: "Accountant",
100      image: {
101        src: "https://images.unsplash.com/photo-1683943889652-9997497b52b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=613&q=80",
102        alt: "",
103      },
104    },
105    {
106      name: "Toby Flenderson",
107      position: "Human Resources Representative",
108      image: {
109        src: "https://images.unsplash.com/photo-1683594582284-11025cb6f39c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1M3x0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
110        alt: "",
111      },
112    },
113    {
114      name: "Darryl Philbin",
115      position: "Warehouse Foreman",
116      image: {
117        src: "https://images.unsplash.com/photo-1683815251677-8df20f826622?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1Nnx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
118        alt: "",
119      },
120    },
121    {
122      name: "Creed Bratton",
123      position: "Quality Assurance",
124      image: {
125        src: "https://images.unsplash.com/photo-1683513561090-0835f3cb7719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE1OXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
126        alt: "",
127      },
128    },
129    {
130      name: "Kevin Malone",
131      position: "Accountant",
132      image: {
133        src: "https://images.unsplash.com/photo-1683731026299-1e50f81345c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2MXx0b3dKWkZza3BHZ3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
134        alt: "",
135      },
136    },
137  ],
138};
139
140export function Teams9() {
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="mx-auto mb-12 max-w-3xl text-center">
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 [text-wrap:balance]">
151          {data.paragraph}
152        </p>
153      </div>
154      <div className="mx-auto grid w-fit grid-cols-6 gap-x-4 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12 lg:[&>*:nth-child(11n+12)]:col-start-2 max-sm:[&>*:nth-child(5n+6)]:col-start-2 sm:max-md:[&>*:nth-child(7n+8)]:col-start-2 md:max-lg:[&>*:nth-child(9n+10)]:col-start-2">
155        {data.items.map(({ image, name, position }, index: number) => (
156          <div
157            key={index}
158            className="group relative col-span-2 aspect-square w-full overflow-hidden rounded-full border border-sky-200 ring-4 ring-sky-100 first:col-start-2"
159          >
160            <img
161              src={image.src}
162              alt={image.alt}
163              onError={(e) => {
164                const image = e.target as HTMLImageElement;
165                image.src = "onerrorimg";
166              }}
167              className="aspect-square h-full w-full object-cover"
168            />
169            <div className="absolute inset-0 flex items-center justify-center bg-slate-900/75 p-6 opacity-0 duration-300 group-hover:opacity-100 max-lg:hidden">
170              <div className="w-full min-w-0 text-center">
171                <p className="truncate text-lg font-bold capitalize text-slate-50">
172                  {name}
173                </p>
174                <p className="line-clamp-2 text-base font-semibold text-sky-600 [text-wrap:balance]">
175                  {position}
176                </p>
177              </div>
178            </div>
179          </div>
180        ))}
181      </div>
182    </div>
183  );
184}
185

Forging New Horizons

The Innovators at Jettwave

Get acquainted with Jettwave's innovators, a cadre of forward-thinking individuals who are revolutionizing the tech industry. With their unwavering commitment and extensive knowledge, they are continually setting new standards in innovation.