Newsletter Signups

0import Link from "next/link";
1import React from "react";
2
3export function NewsletterSignups1() {
4  return (
5    <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">
6      <div className="flex flex-col items-center justify-center gap-y-6 rounded-2xl bg-sky-700 p-8 sm:min-h-[320px] sm:rounded-3xl sm:p-10 lg:px-16">
7        <div className="flex w-full max-w-5xl flex-col items-center gap-y-2">
8          <h3 className="text-center text-3xl font-bold text-slate-50 first-letter:uppercase lg:text-4xl">
9            Stay Connected with Jettwave's Newsletter
10          </h3>
11          <p className="max-w-4xl text-center text-sm text-slate-300 first-letter:uppercase lg:text-base">
12            Join our newsletter community and stay connected with the latest
13            updates, insights, and innovations from Jettwave. Be the first to
14            know about our groundbreaking advancements, industry trends, and
15            exclusive events.
16          </p>
17        </div>
18        {/* Form */}
19        <div className="flex w-full max-w-md flex-col gap-4 md:flex-row">
20          <input
21            className="placeholder:text-slate-600 h-full w-full focus:border-sky-900/50 border-2 md:max-w-sm rounded-md bg-slate-200 px-6 py-3 text-slate-700 caret-slate-700 focus:outline-none"
22            placeholder="Search..."
23          />
24          <Link
25            href="/"
26            className="h-fit md:w-fit whitespace-nowrap rounded-lg bg-slate-200 px-6 py-3 text-center text-sm font-medium capitalize text-sky-700 hover:bg-slate-300"
27          >
28            Get Started
29          </Link>
30        </div>
31      </div>
32    </div>
33  );
34}
35

0import Link from "next/link";
1import React from "react";
2
3export function NewsletterSignups2() {
4  return (
5    <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">
6      <div className="overflow-hidden rounded-2xl bg-[#D5E6F1] sm:rounded-3xl">
7        <div className="flex flex-col items-center justify-between gap-x-12 gap-y-8 p-8 sm:min-h-[225px] sm:p-10 lg:flex-row lg:px-16">
8          <h3 className="text-center text-3xl font-bold capitalize text-sky-700 first-letter:uppercase sm:text-4xl lg:w-[512px] lg:min-w-[512px] lg:text-left">
9            Ready to dive in? <br />
10            <span className="text-sky-900">Start your free trial today.</span>
11          </h3>
12
13          <div className="flex w-full max-w-md flex-col gap-y-2">
14            <div className="flex w-full flex-col gap-4 md:flex-row">
15              <input
16                className="placeholder:text-gray h-full w-full rounded-md bg-slate-200 px-6  py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 md:max-w-sm"
17                placeholder="Search..."
18              />
19              <Link
20                href="#"
21                className="h-fit select-none whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-center text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50 md:w-fit"
22              >
23                start now
24              </Link>
25            </div>
26          </div>
27        </div>
28      </div>
29    </div>
30  );
31}
32

0import Link from "next/link";
1import React from "react";
2
3export function NewsletterSignups3() {
4  return (
5    <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">
6      <div className="flex flex-col items-center justify-center gap-y-6 rounded-2xl border border-slate-200 p-8 sm:min-h-[320px] sm:rounded-3xl sm:p-10 lg:px-16">
7        <div className="flex w-full max-w-5xl flex-col items-center gap-y-2">
8          <h3 className="text-center text-3xl font-bold text-slate-900 first-letter:uppercase lg:text-4xl">
9            Subscribe to Jettwave's Newsletter
10          </h3>
11          <p className="max-w-4xl text-center text-sm text-slate-600 first-letter:uppercase lg:text-base">
12            Subscribe to our newsletter and never miss out on the latest news
13            and updates from Jettwave. Stay informed about our cutting-edge
14            technologies, thought leadership articles, and industry insights.
15            Join our community of tech enthusiasts and be part of the
16            conversation driving the future of innovation.
17          </p>
18        </div>
19        <div className="flex w-full max-w-sm flex-col justify-center gap-4 md:max-w-2xl  md:flex-row">
20          <input
21            className="placeholder:text-gray h-full w-full md:max-w-sm rounded-md bg-slate-100  px-6 py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 "
22            placeholder="Search..."
23          />
24          <Link
25            href="#"
26            className="h-fit md:w-fit select-none text-center whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
27          >
28            start now
29          </Link>
30        </div>
31      </div>
32    </div>
33  );
34}
35

0import Link from "next/link";
1import React from "react";
2
3const Phone = ({ className }) => {
4  return (
5    <svg
6      preserveAspectRatio="xMidYMid meet"
7      className={className}
8      viewBox="0 0 443 874"
9      xmlns="http://www.w3.org/2000/svg"
10      xlinkHref="http://www.w3.org/1999/xlink"
11    >
12      <path
13        fillRule="evenodd"
14        clipRule="evenodd"
15        d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
16        fill="#334155"
17      />
18      <mask
19        id="mask0_53972_10215"
20        style={{ maskType: "alpha" }}
21        maskUnits="userSpaceOnUse"
22        x="0"
23        y="0"
24        width="443"
25        height="874"
26      >
27        <path
28          fillRule="evenodd"
29          clipRule="evenodd"
30          d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
31          fill="#FF0000"
32        />
33      </mask>
34      <g mask="url(#mask0_53972_10215)">
35        <g style={{ mixBlendMode: "overlay" }} opacity="0.4">
36          <path
37            fillRule="evenodd"
38            clipRule="evenodd"
39            d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
40            fill="url(#paint0_radial_53972_10215)"
41          />
42        </g>
43        <g style={{ mixBlendMode: "overlay" }} opacity="0.2">
44          <path
45            fillRule="evenodd"
46            clipRule="evenodd"
47            d="M75 8H368C403.346 8 432 36.6538 432 72V802C432 837.346 403.346 866 368 866H75C39.6538 866 11 837.346 11 802V72C11 36.6538 39.6538 8 75 8ZM75 9C40.2061 9 12 37.2061 12 72V802C12 836.794 40.2061 865 75 865H368C402.794 865 431 836.794 431 802V72C431 37.2061 402.794 9 368 9H75Z"
48            fill="url(#paint1_radial_53972_10215)"
49          />
50        </g>
51        <g style={{ mixBlendMode: "overlay" }} opacity="0.2">
52          <path
53            fillRule="evenodd"
54            clipRule="evenodd"
55            d="M75 8H368C403.346 8 432 36.6538 432 72V802C432 837.346 403.346 866 368 866H75C39.6538 866 11 837.346 11 802V72C11 36.6538 39.6538 8 75 8ZM75 9C40.2061 9 12 37.2061 12 72V802C12 836.794 40.2061 865 75 865H368C402.794 865 431 836.794 431 802V72C431 37.2061 402.794 9 368 9H75Z"
56            fill="url(#paint2_linear_53972_10215)"
57          />
58        </g>
59      </g>
60      <g style={{ mixBlendMode: "overlay" }}>
61        <path
62          d="M443 201C443 199.895 442.105 199 441 199H440V295H441C442.105 295 443 294.105 443 293V201Z"
63          fill="url(#paint3_linear_53972_10215)"
64          fillOpacity="0.3"
65        />
66        <path
67          d="M443 201C443 199.895 442.105 199 441 199H440V295H441C442.105 295 443 294.105 443 293V201Z"
68          fill="url(#paint4_linear_53972_10215)"
69          fillOpacity="0.3"
70        />
71        <path
72          d="M0 258C0 256.895 0.895431 256 2 256H3V314H2C0.895431 314 0 313.105 0 312V258Z"
73          fill="url(#paint5_linear_53972_10215)"
74          fillOpacity="0.3"
75        />
76        <path
77          d="M0 258C0 256.895 0.895431 256 2 256H3V314H2C0.895431 314 0 313.105 0 312V258Z"
78          fill="url(#paint6_linear_53972_10215)"
79          fillOpacity="0.3"
80        />
81        <path
82          d="M0 182C0 180.895 0.895431 180 2 180H3V238H2C0.895431 238 0 237.105 0 236V182Z"
83          fill="url(#paint7_linear_53972_10215)"
84          fillOpacity="0.3"
85        />
86        <path
87          d="M0 182C0 180.895 0.895431 180 2 180H3V238H2C0.895431 238 0 237.105 0 236V182Z"
88          fill="url(#paint8_linear_53972_10215)"
89          fillOpacity="0.3"
90        />
91        <path
92          d="M0 121C0 119.895 0.895431 119 2 119H3V152H2C0.895431 152 0 151.105 0 150V121Z"
93          fill="url(#paint9_linear_53972_10215)"
94          fillOpacity="0.3"
95        />
96        <path
97          d="M0 121C0 119.895 0.895431 119 2 119H3V152H2C0.895431 152 0 151.105 0 150V121Z"
98          fill="url(#paint10_linear_53972_10215)"
99          fillOpacity="0.3"
100        />
101      </g>
102      <clipPath id="mask1_53972_10215" x="34" y="31" width="375" height="812">
103        <path
104          d="M77 31C51.5948 31 34 47.595 34 73V801C34 826.405 51.5948 843 77 843H365C390.405 843 409 826.405 409 801V73C409 47.595 390.405 31 365 31H77Z"
105          fill="black"
106        />
107      </clipPath>
108      <g clipPath="url(#mask1_53972_10215)">
109        <image
110          x="34"
111          y="31"
112          width="375"
113          height="812"
114          rx="4"
115          xlinkHref="https://www.dignited.com/wp-content/uploads/2022/11/wp-1669829829091.jpg"
116          preserveAspectRatio="xMinYMin slice"
117        />
118      </g>
119      <defs>
120        <radialGradient
121          id="paint0_radial_53972_10215"
122          cx="0"
123          cy="0"
124          r="1"
125          gradientUnits="userSpaceOnUse"
126          gradientTransform="translate(376.086 167.456) rotate(119.959) scale(975.544 1097.2)"
127        >
128          <stop offset="0.00728192" stopOpacity="0" />
129          <stop offset="1" />
130        </radialGradient>
131        <radialGradient
132          id="paint1_radial_53972_10215"
133          cx="0"
134          cy="0"
135          r="1"
136          gradientUnits="userSpaceOnUse"
137          gradientTransform="translate(432 158.559) rotate(156.827) scale(438.817 950.352)"
138        >
139          <stop stopColor="#636363" />
140          <stop offset="1" />
141        </radialGradient>
142        <linearGradient
143          id="paint2_linear_53972_10215"
144          x1="227.781"
145          y1="193.634"
146          x2="431.778"
147          y2="157.948"
148          gradientUnits="userSpaceOnUse"
149        >
150          <stop stopColor="#636363" stopOpacity="0" />
151          <stop offset="1" />
152        </linearGradient>
153        <linearGradient
154          id="paint3_linear_53972_10215"
155          x1="440"
156          y1="210.883"
157          x2="443"
158          y2="210.883"
159          gradientUnits="userSpaceOnUse"
160        >
161          <stop />
162          <stop offset="1" stopColor="white" />
163        </linearGradient>
164        <linearGradient
165          id="paint4_linear_53972_10215"
166          x1="441.5"
167          y1="199"
168          x2="441.5"
169          y2="295"
170          gradientUnits="userSpaceOnUse"
171        >
172          <stop />
173          <stop offset="0.10159" stopOpacity="0" />
174          <stop offset="0.890418" stopOpacity="0" />
175          <stop offset="1" />
176        </linearGradient>
177        <linearGradient
178          id="paint5_linear_53972_10215"
179          x1="3"
180          y1="276.886"
181          x2="-8.85722e-08"
182          y2="276.886"
183          gradientUnits="userSpaceOnUse"
184        >
185          <stop />
186          <stop offset="1" stopColor="white" />
187        </linearGradient>
188        <linearGradient
189          id="paint6_linear_53972_10215"
190          x1="1.5"
191          y1="256"
192          x2="1.5"
193          y2="314"
194          gradientUnits="userSpaceOnUse"
195        >
196          <stop />
197          <stop offset="0.10159" stopOpacity="0" />
198          <stop offset="0.890418" stopOpacity="0" />
199          <stop offset="1" />
200        </linearGradient>
201        <linearGradient
202          id="paint7_linear_53972_10215"
203          x1="3"
204          y1="200.886"
205          x2="-8.85722e-08"
206          y2="200.886"
207          gradientUnits="userSpaceOnUse"
208        >
209          <stop />
210          <stop offset="1" stopColor="white" />
211        </linearGradient>
212        <linearGradient
213          id="paint8_linear_53972_10215"
214          x1="1.5"
215          y1="180"
216          x2="1.5"
217          y2="238"
218          gradientUnits="userSpaceOnUse"
219        >
220          <stop />
221          <stop offset="0.10159" stopOpacity="0" />
222          <stop offset="0.890418" stopOpacity="0" />
223          <stop offset="1" />
224        </linearGradient>
225        <linearGradient
226          id="paint9_linear_53972_10215"
227          x1="3"
228          y1="130.883"
229          x2="-8.85722e-08"
230          y2="130.883"
231          gradientUnits="userSpaceOnUse"
232        >
233          <stop />
234          <stop offset="1" stopColor="white" />
235        </linearGradient>
236        <linearGradient
237          id="paint10_linear_53972_10215"
238          x1="1.5"
239          y1="119"
240          x2="1.5"
241          y2="152"
242          gradientUnits="userSpaceOnUse"
243        >
244          <stop />
245          <stop offset="0.10159" stopOpacity="0" />
246          <stop offset="0.890418" stopOpacity="0" />
247          <stop offset="1" />
248        </linearGradient>
249      </defs>
250    </svg>
251  );
252};
253
254const Phone2 = ({ className }) => {
255  return (
256    <svg
257      preserveAspectRatio="xMidYMid meet"
258      className={className}
259      viewBox="0 0 443 874"
260      xmlns="http://www.w3.org/2000/svg"
261      xlinkHref="http://www.w3.org/1999/xlink"
262    >
263      <path
264        fillRule="evenodd"
265        clipRule="evenodd"
266        d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
267        fill="#334155"
268      />
269      <mask
270        id="mask0_53972_10215"
271        style={{ maskType: "alpha" }}
272        maskUnits="userSpaceOnUse"
273        x="0"
274        y="0"
275        width="443"
276        height="874"
277      >
278        <path
279          fillRule="evenodd"
280          clipRule="evenodd"
281          d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
282          fill="#FF0000"
283        />
284      </mask>
285      <g mask="url(#mask0_53972_10215)">
286        <g style={{ mixBlendMode: "overlay" }} opacity="0.4">
287          <path
288            fillRule="evenodd"
289            clipRule="evenodd"
290            d="M3 68C3 30.4446 33.4446 0 71 0H372C409.555 0 440 30.4446 440 68V199H441C442.105 199 443 199.895 443 201V293C443 294.105 442.105 295 441 295H440V806C440 843.555 409.555 874 372 874H71C33.4446 874 3 843.555 3 806V314H2C0.895431 314 0 313.105 0 312V258C0 256.895 0.895431 256 2 256H3V238H2C0.895431 238 0 237.105 0 236V182C0 180.895 0.895431 180 2 180H3V152H2C0.895431 152 0 151.105 0 150V121C0 119.895 0.895431 119 2 119H3V68Z"
291            fill="url(#paint0_radial_53972_10215)"
292          />
293        </g>
294        <g style={{ mixBlendMode: "overlay" }} opacity="0.2">
295          <path
296            fillRule="evenodd"
297            clipRule="evenodd"
298            d="M75 8H368C403.346 8 432 36.6538 432 72V802C432 837.346 403.346 866 368 866H75C39.6538 866 11 837.346 11 802V72C11 36.6538 39.6538 8 75 8ZM75 9C40.2061 9 12 37.2061 12 72V802C12 836.794 40.2061 865 75 865H368C402.794 865 431 836.794 431 802V72C431 37.2061 402.794 9 368 9H75Z"
299            fill="url(#paint1_radial_53972_10215)"
300          />
301        </g>
302        <g style={{ mixBlendMode: "overlay" }} opacity="0.2">
303          <path
304            fillRule="evenodd"
305            clipRule="evenodd"
306            d="M75 8H368C403.346 8 432 36.6538 432 72V802C432 837.346 403.346 866 368 866H75C39.6538 866 11 837.346 11 802V72C11 36.6538 39.6538 8 75 8ZM75 9C40.2061 9 12 37.2061 12 72V802C12 836.794 40.2061 865 75 865H368C402.794 865 431 836.794 431 802V72C431 37.2061 402.794 9 368 9H75Z"
307            fill="url(#paint2_linear_53972_10215)"
308          />
309        </g>
310      </g>
311      <g style={{ mixBlendMode: "overlay" }}>
312        <path
313          d="M443 201C443 199.895 442.105 199 441 199H440V295H441C442.105 295 443 294.105 443 293V201Z"
314          fill="url(#paint3_linear_53972_10215)"
315          fillOpacity="0.3"
316        />
317        <path
318          d="M443 201C443 199.895 442.105 199 441 199H440V295H441C442.105 295 443 294.105 443 293V201Z"
319          fill="url(#paint4_linear_53972_10215)"
320          fillOpacity="0.3"
321        />
322        <path
323          d="M0 258C0 256.895 0.895431 256 2 256H3V314H2C0.895431 314 0 313.105 0 312V258Z"
324          fill="url(#paint5_linear_53972_10215)"
325          fillOpacity="0.3"
326        />
327        <path
328          d="M0 258C0 256.895 0.895431 256 2 256H3V314H2C0.895431 314 0 313.105 0 312V258Z"
329          fill="url(#paint6_linear_53972_10215)"
330          fillOpacity="0.3"
331        />
332        <path
333          d="M0 182C0 180.895 0.895431 180 2 180H3V238H2C0.895431 238 0 237.105 0 236V182Z"
334          fill="url(#paint7_linear_53972_10215)"
335          fillOpacity="0.3"
336        />
337        <path
338          d="M0 182C0 180.895 0.895431 180 2 180H3V238H2C0.895431 238 0 237.105 0 236V182Z"
339          fill="url(#paint8_linear_53972_10215)"
340          fillOpacity="0.3"
341        />
342        <path
343          d="M0 121C0 119.895 0.895431 119 2 119H3V152H2C0.895431 152 0 151.105 0 150V121Z"
344          fill="url(#paint9_linear_53972_10215)"
345          fillOpacity="0.3"
346        />
347        <path
348          d="M0 121C0 119.895 0.895431 119 2 119H3V152H2C0.895431 152 0 151.105 0 150V121Z"
349          fill="url(#paint10_linear_53972_10215)"
350          fillOpacity="0.3"
351        />
352      </g>
353      <clipPath id="mask1_53972_10215" x="34" y="31" width="375" height="812">
354        <path
355          d="M77 31C51.5948 31 34 47.595 34 73V801C34 826.405 51.5948 843 77 843H365C390.405 843 409 826.405 409 801V73C409 47.595 390.405 31 365 31H77Z"
356          fill="black"
357        />
358      </clipPath>
359      <g clipPath="url(#mask1_53972_10215)">
360        <image
361          x="34"
362          y="31"
363          width="375"
364          height="812"
365          rx="4"
366          xlinkHref="https://cdn.wallpapersafari.com/88/60/KEZf5q.jpg"
367          preserveAspectRatio="xMinYMin slice"
368        />
369      </g>
370      <defs>
371        <radialGradient
372          id="paint0_radial_53972_10215"
373          cx="0"
374          cy="0"
375          r="1"
376          gradientUnits="userSpaceOnUse"
377          gradientTransform="translate(376.086 167.456) rotate(119.959) scale(975.544 1097.2)"
378        >
379          <stop offset="0.00728192" stopOpacity="0" />
380          <stop offset="1" />
381        </radialGradient>
382        <radialGradient
383          id="paint1_radial_53972_10215"
384          cx="0"
385          cy="0"
386          r="1"
387          gradientUnits="userSpaceOnUse"
388          gradientTransform="translate(432 158.559) rotate(156.827) scale(438.817 950.352)"
389        >
390          <stop stopColor="#636363" />
391          <stop offset="1" />
392        </radialGradient>
393        <linearGradient
394          id="paint2_linear_53972_10215"
395          x1="227.781"
396          y1="193.634"
397          x2="431.778"
398          y2="157.948"
399          gradientUnits="userSpaceOnUse"
400        >
401          <stop stopColor="#636363" stopOpacity="0" />
402          <stop offset="1" />
403        </linearGradient>
404        <linearGradient
405          id="paint3_linear_53972_10215"
406          x1="440"
407          y1="210.883"
408          x2="443"
409          y2="210.883"
410          gradientUnits="userSpaceOnUse"
411        >
412          <stop />
413          <stop offset="1" stopColor="white" />
414        </linearGradient>
415        <linearGradient
416          id="paint4_linear_53972_10215"
417          x1="441.5"
418          y1="199"
419          x2="441.5"
420          y2="295"
421          gradientUnits="userSpaceOnUse"
422        >
423          <stop />
424          <stop offset="0.10159" stopOpacity="0" />
425          <stop offset="0.890418" stopOpacity="0" />
426          <stop offset="1" />
427        </linearGradient>
428        <linearGradient
429          id="paint5_linear_53972_10215"
430          x1="3"
431          y1="276.886"
432          x2="-8.85722e-08"
433          y2="276.886"
434          gradientUnits="userSpaceOnUse"
435        >
436          <stop />
437          <stop offset="1" stopColor="white" />
438        </linearGradient>
439        <linearGradient
440          id="paint6_linear_53972_10215"
441          x1="1.5"
442          y1="256"
443          x2="1.5"
444          y2="314"
445          gradientUnits="userSpaceOnUse"
446        >
447          <stop />
448          <stop offset="0.10159" stopOpacity="0" />
449          <stop offset="0.890418" stopOpacity="0" />
450          <stop offset="1" />
451        </linearGradient>
452        <linearGradient
453          id="paint7_linear_53972_10215"
454          x1="3"
455          y1="200.886"
456          x2="-8.85722e-08"
457          y2="200.886"
458          gradientUnits="userSpaceOnUse"
459        >
460          <stop />
461          <stop offset="1" stopColor="white" />
462        </linearGradient>
463        <linearGradient
464          id="paint8_linear_53972_10215"
465          x1="1.5"
466          y1="180"
467          x2="1.5"
468          y2="238"
469          gradientUnits="userSpaceOnUse"
470        >
471          <stop />
472          <stop offset="0.10159" stopOpacity="0" />
473          <stop offset="0.890418" stopOpacity="0" />
474          <stop offset="1" />
475        </linearGradient>
476        <linearGradient
477          id="paint9_linear_53972_10215"
478          x1="3"
479          y1="130.883"
480          x2="-8.85722e-08"
481          y2="130.883"
482          gradientUnits="userSpaceOnUse"
483        >
484          <stop />
485          <stop offset="1" stopColor="white" />
486        </linearGradient>
487        <linearGradient
488          id="paint10_linear_53972_10215"
489          x1="1.5"
490          y1="119"
491          x2="1.5"
492          y2="152"
493          gradientUnits="userSpaceOnUse"
494        >
495          <stop />
496          <stop offset="0.10159" stopOpacity="0" />
497          <stop offset="0.890418" stopOpacity="0" />
498          <stop offset="1" />
499        </linearGradient>
500      </defs>
501    </svg>
502  );
503};
504
505export function NewsletterSignups4() {
506  return (
507    <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">
508      <div className="relative flex min-h-[672px] flex-col gap-y-16 overflow-hidden rounded-2xl bg-sky-700 p-8 sm:rounded-3xl sm:p-10 md:min-h-[384px] md:flex-row lg:rounded-3xl lg:p-16">
509        <div className="flex w-full flex-col items-center justify-center gap-y-6 md:max-w-lg md:items-start lg:max-w-[640px]">
510          <div className="flex flex-col gap-y-2">
511            <h3 className="text-center text-3xl font-bold capitalize text-slate-50 first-letter:uppercase sm:text-4xl md:text-left">
512              Join Jettwave's Newsletter for Tech Insights
513            </h3>
514            <p className="text-center text-sm text-slate-300 first-letter:uppercase md:text-left lg:text-base">
515              Don't miss a beat in the world of technology. Sign up for
516              Jettwave's newsletter to receive exclusive insights, trends, and
517              updates straight to your inbox. Stay ahead of the curve with our
518              thought-provoking articles, expert analysis, and exciting
519              announcements.
520            </p>
521          </div>
522
523          <div className="flex w-full max-w-md flex-col gap-4 md:flex-row">
524            <input
525            className="placeholder:text-slate-600 h-full w-full focus:border-sky-900/50 border-2 md:max-w-sm rounded-md bg-slate-200 px-6 py-3 text-slate-700 caret-slate-700 focus:outline-none"
526            placeholder="Search..."
527            />
528            <Link
529              href="/"
530              className="h-fit md:w-fit whitespace-nowrap rounded-lg bg-slate-200 px-6 py-3 text-center text-sm font-medium capitalize text-sky-700 hover:bg-slate-300"
531            >
532              Get Started
533            </Link>
534          </div>
535        </div>
536
537        <div className="relative md:static lg:w-1/2">
538          {/* 1svg... pass thru img, color would be cool too */}
539          <Phone2 className="absolute top-16 origin-top-left scale-[.6] md:left-[600px] md:top-40 md:w-[446px] lg:left-[768px] lg:w-[576px]" />
540          <Phone className="absolute origin-top-right scale-[.6] md:left-[600px] md:top-16 md:w-[446px] lg:left-[768px] lg:w-[576px]" />
541        </div>
542      </div>
543    </div>
544  );
545}
546

0import Link from "next/link";
1import React from "react";
2
3const data = [
4  {
5    name: "product tracking",
6    desc: "time to kick off",
7  },
8  {
9    name: "Insights",
10    desc: "design experience",
11  },
12  {
13    name: "auonymous get ti",
14    desc: "succesful projects",
15  },
16];
17
18const Checkmark = ({ className }) => {
19  return (
20    <svg
21      xmlns="http://www.w3.org/2000/svg"
22      viewBox="0 0 24 24"
23      className={className}
24    >
25      <path d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" />
26    </svg>
27  );
28};
29
30export function NewsletterSignups5() {
31  return (
32    <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">
33      <div className="flex flex-col items-center gap-y-12">
34        <div className="flex w-full flex-col items-center gap-y-6">
35          <div className="flex w-full flex-col items-center gap-y-2 sm:max-w-md">
36            <h3 className="text-center text-3xl mb-4 font-bold text-slate-900 first-letter:uppercase sm:text-4xl">
37              ready to start tracking?
38            </h3>
39           
40          </div>
41
42          {/* Features*/}
43          <div className="flex flex-wrap justify-center gap-x-8 gap-y-6 divide-slate-200 md:gap-0 md:divide-x-2">
44            {data.map(({ name, desc }, index: number) => {
45              return (
46                <div
47                  key={index}
48                  className="flex gap-x-2 md:first:pr-8 md:last:pl-8 md:even:px-8"
49                >
50                  <div>
51                    <Checkmark className="h-8 w-8 fill-sky-700" />
52                  </div>
53                  <div className="flex flex-col">
54                    <p className="text-lg font-bold text-slate-900 first-letter:uppercase">
55                      {name}
56                    </p>
57                    <p className="text-base font-medium text-slate-900 first-letter:uppercase">
58                      {desc}
59                    </p>
60                  </div>
61                </div>
62              );
63            })}
64          </div>
65        </div>
66        {/* Form */}
67        <div className="flex w-full max-w-md flex-col gap-4 md:flex-row">
68          <input
69            className="placeholder:text-gray h-full w-full md:max-w-sm rounded-md bg-slate-100  px-6 py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 "
70            placeholder="Search..."
71          />
72          <Link
73            href="#"
74            className="h-fit md:w-fit text-center select-none whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
75          >
76            start now
77          </Link>
78        </div>
79      </div>
80    </div>
81  );
82}
83

0import Link from "next/link";
1import React from "react";
2
3export function NewsletterSignups6() {
4  return (
5    <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">
6      {/* Parent Element */}
7      <div className="grid min-h-[384px] grid-rows-2 overflow-hidden rounded-2xl bg-slate-200 sm:rounded-3xl lg:grid-cols-5 lg:grid-rows-1 xl:grid-cols-2">
8        {/* Col 1 */}
9        {/* shadow is tenative */}
10        <div className="relative row-start-2 flex items-center justify-center overflow-hidden bg-sky-700 py-10 lg:col-span-2 lg:row-start-1 xl:col-span-1">
11          <img
12            src="https://lookinar.com/wp-content/uploads/2020/03/cosmo-2.png"
13            className="aspect-[2/1] w-10/12 object-contain"
14          />
15        </div>
16        {/* Col 2 */}
17        <div className="flex flex-col items-center justify-center gap-y-6 p-8 sm:p-12 lg:col-span-3 lg:items-start lg:px-16 lg:py-12 xl:col-span-1">
18          {/* Heading */}
19          <div className="flex flex-col gap-y-2">
20            <h3 className="text-center text-3xl font-bold capitalize text-slate-900 first-letter:uppercase sm:text-4xl lg:text-left">
21              Join Jettwave's Tech Community through Our Newsletter
22            </h3>
23            <p className="text-center text-sm text-slate-600 first-letter:uppercase lg:text-left lg:text-base">
24              Become part of Jettwave's vibrant tech community by subscribing to
25              our newsletter. Stay connected with the latest industry insights,
26              cutting-edge advancements, and exclusive updates from our team.
27            </p>
28          </div>
29          {/* Form */}
30          <div className="flex w-full max-w-md flex-col gap-4 md:flex-row">
31            <input
32              className="placeholder:text-gray h-full w-full rounded-md bg-slate-100 px-6  py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 md:max-w-sm "
33              placeholder="Search..."
34            />
35            <Link
36              href="#"
37              className="h-fit select-none whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-center text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50 md:w-fit"
38            >
39              start now
40            </Link>
41          </div>
42        </div>
43      </div>
44    </div>
45  );
46}
47

0import Link from "next/link";
1import React from "react";
2
3export const JettWaveLogo = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      viewBox="0 0 84 40"
8      fill="none"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path
12        d="M76.0619 38.9452V39.04C76.0385 39.0936 76.0103 39.1452 75.9776 39.1939C75.9776 39.1939 75.9776 39.1939 75.9776 39.1939L75.8572 39.336L75.7368 39.4426C75.6112 39.5476 75.4688 39.6316 75.3154 39.6912H75.2552C75.1057 39.7499 74.9467 39.782 74.7857 39.786H69.9702C69.8417 39.7901 69.7139 39.7668 69.5954 39.7178C69.477 39.6687 69.3707 39.595 69.284 39.5018L64.023 34.1497L60.5678 39.3123L60.4956 39.407L60.3752 39.5491H60.315H60.2548H60.1705C60.074 39.6301 59.9641 39.6942 59.8455 39.7386L59.7251 39.7978C59.5741 39.8519 59.416 39.8838 59.2556 39.8925H54.44C54.3116 39.8966 54.1837 39.8734 54.0653 39.8243C53.9468 39.7753 53.8406 39.7016 53.7538 39.6083L51.96 37.5836L45.6516 39.7978C45.5041 39.8631 45.3438 39.8954 45.1821 39.8925C44.9635 39.8984 44.7499 39.8269 44.5802 39.6912L44.4838 39.5965L41.4741 36.21C41.3537 36.6126 41.2574 37.0152 41.125 37.3941L41.0528 37.5599C41.032 37.6147 41.0036 37.6665 40.9685 37.7138L40.8963 37.8085L40.7638 37.9506L40.5953 38.1046C40.5022 38.1748 40.4012 38.2344 40.2943 38.2822L39.9452 38.7084C39.7796 38.7695 39.6044 38.8015 39.4275 38.8032H35.4788C35.3511 38.8096 35.2236 38.7885 35.1051 38.7415C34.9866 38.6944 34.8799 38.6226 34.7926 38.5308L33.4924 37.0626L32.9265 38.9097C32.9131 38.9726 32.8886 39.0327 32.8543 39.0874L32.782 39.2413L32.7098 39.336L32.5895 39.4781C32.5393 39.5354 32.4827 39.587 32.4209 39.632C32.3208 39.6982 32.2162 39.7575 32.1079 39.8096L31.9514 39.8925C31.7902 39.956 31.6192 39.9921 31.4457 39.9991H24.2946C24.1642 40.0049 24.034 39.9825 23.9134 39.9334C23.7927 39.8843 23.6845 39.8097 23.5964 39.7149L22.549 38.5308H18.7568L18.6725 38.815C18.6579 38.8759 18.6377 38.9353 18.6123 38.9926C18.5796 39.0414 18.5514 39.0929 18.528 39.1465L18.4558 39.2413L18.3354 39.3834C18.2852 39.4407 18.2287 39.4923 18.1669 39.5373C18.0668 39.6034 17.9622 39.6628 17.8538 39.7149L17.6973 39.7978C17.5362 39.8613 17.3652 39.8973 17.1917 39.9044H12.7253C12.5968 39.9085 12.469 39.8852 12.3505 39.8362C12.2321 39.7871 12.1258 39.7134 12.0391 39.6202L10.6546 38.069H6.52524C6.3976 38.0754 6.27011 38.0544 6.1516 38.0074C6.03308 37.9603 5.92642 37.8884 5.83905 37.7967L0.216875 31.8052C0.261898 31.8499 0.314969 31.8861 0.373386 31.9118C0.26926 31.851 0.182335 31.7655 0.12058 31.6631C0.0413462 31.511 0 31.3426 0 31.1717C0 31.0008 0.0413462 30.8324 0.12058 30.6803C3.30029 24.2563 5.90647 17.5726 7.90974 10.7048V10.6219L7.51244 10.1719C7.51244 10.1719 7.57265 10.1719 7.60877 10.2548C7.47556 10.1345 7.38159 9.97806 7.33873 9.80525C7.29588 9.63243 7.30605 9.45099 7.36798 9.28387L8.68021 4.95012C8.78974 4.62307 8.99609 4.33564 9.27279 4.12468C9.54948 3.91372 9.88391 3.78884 10.2332 3.76603H15.0488L15.8313 1.18471C15.9423 0.858504 16.149 0.571948 16.4254 0.361205C16.7018 0.150462 17.0355 0.0249814 17.3843 0.00062735H21.8869C22.0207 -0.00449731 22.1539 0.0218341 22.2753 0.0774333C22.3968 0.133032 22.5029 0.216303 22.5851 0.320336L24.1261 2.06095L24.2465 1.74124C24.3553 1.41155 24.5631 1.12199 24.8424 0.910645C25.1218 0.699298 25.4597 0.576061 25.8116 0.55715H41.7149C41.8483 0.554799 41.9806 0.582374 42.1016 0.637768C42.2225 0.693161 42.3291 0.774924 42.4132 0.876858L47.2287 6.3355L47.1445 1.78861C47.1512 1.58831 47.1995 1.39147 47.2864 1.21023C47.3734 1.02899 47.4971 0.867174 47.6501 0.734756C47.941 0.437424 48.3383 0.263297 48.7577 0.249294H53.5732C53.7275 0.244624 53.8803 0.280577 54.0158 0.353436C54.1512 0.426295 54.2644 0.533405 54.3437 0.663713V0.663713C54.3228 0.616153 54.2944 0.57218 54.2594 0.533463L57.8711 4.5712L58.4851 2.54643C58.5917 2.21767 58.7973 1.92848 59.0746 1.71706C59.3519 1.50565 59.6878 1.38196 60.0381 1.36234H77.6149C77.7493 1.35674 77.8833 1.38158 78.0065 1.43495C78.1296 1.48833 78.2386 1.56881 78.3252 1.67019V1.67019L83.8149 7.86296L83.8871 7.94586C83.946 8.03496 83.9831 8.13629 83.9955 8.24188C83.9955 8.24188 83.9955 8.24188 83.9955 8.30109C84.0015 8.38782 84.0015 8.47484 83.9955 8.56157C83.9997 8.6286 83.9997 8.69585 83.9955 8.76288L78.4696 26.8676L78.3974 27.0452L78.3131 27.1991C78.3131 27.1991 78.3131 27.2583 78.2409 27.2938L78.1205 27.4359L77.9399 27.5899C77.8436 27.6609 77.7353 27.7083 77.6389 27.7675C77.5426 27.8267 77.5306 27.8385 77.4824 27.8504C77.3192 27.9207 77.143 27.957 76.9648 27.9569H74.557L75.5081 29.0226V29.1055C75.5692 29.2151 75.6061 29.3361 75.6164 29.4607L76.1461 38.3887V38.7084C76.1461 38.7084 76.1461 38.7084 76.1461 38.7913C76.1461 38.8742 76.0619 38.9097 76.0619 38.9452Z"
13        fill="black"
14      ></path>
15      <path
16        d="M1.30035 30.9053C4.51517 24.4076 7.15348 17.649 9.18585 10.7048H12.9299C10.9514 17.6322 8.3986 24.3883 5.29727 30.9053H1.30035ZM25.4985 1.71758L24.1863 6.00399H40.0656L41.3778 1.71758H25.4985ZM13.3152 31.3198H17.7936C20.6025 26.6667 22.8298 21.697 24.427 16.5187H20.4422C18.7876 21.7437 16.3793 26.7083 13.2911 31.2606L13.3152 31.3198ZM21.1284 10.2904L19.8041 14.6478H27.4006L23.1991 28.4424H20.4542L19.1299 32.7643H26.281L31.7949 14.6478H39.1747L40.511 10.2904H21.1284ZM17.7575 13.7361L19.1059 9.31941H21.8869L23.2111 4.98567H20.4542L21.6581 1.23212H17.0713L15.8674 4.98567H9.90815L8.5839 9.31941H14.6033L7.50037 32.788H11.9668L16.1563 19.0289L17.7334 20.5564L19.3346 15.2991L17.7575 13.7361ZM32.4449 16.6608C32.5602 21.6753 31.8612 26.6758 30.3743 31.4737H34.3351C35.8305 26.6694 36.6409 21.6842 36.7428 16.6608H32.4449ZM53.3083 1.39789H48.4326L48.565 8.9642H53.4528L53.3083 1.39789ZM43.1114 11.3324L41.7028 15.974H45.0617L39.9452 32.788L48.5771 29.7568L50.1542 24.5586L46.711 25.7427L51.1052 11.3205L43.1114 11.3324ZM54.0548 32.7643L60.014 23.8482H55.1985L49.179 32.7643H54.0548ZM59.7612 2.52277L54.2113 20.7103H71.788L77.3259 2.52277H59.7612ZM68.5736 16.1753H60.2066L62.9756 7.04597H71.4028L68.6218 16.1753M64.0229 23.8126L64.5527 32.7288H69.3682L68.8265 23.8126H64.0229Z"
17        fill="white"
18      ></path>
19    </svg>
20  );
21};
22
23export function NewsletterSignups7() {
24  return (
25    <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">
26      <div className="overflow-hidden rounded-2xl bg-slate-200 bg-[url(https://images.unsplash.com/photo-1626427223333-183395267453?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80)] bg-cover bg-center bg-no-repeat sm:rounded-3xl">
27        <div className="flex flex-col items-center justify-center gap-y-8 p-8 backdrop-brightness-[0.45] sm:min-h-[384px] sm:p-10 lg:px-16">
28          <div className="flex w-full max-w-5xl flex-col items-center gap-4">
29            <JettWaveLogo className={"h-fit w-24"} />
30
31            <h3 className="text-center text-3xl font-bold capitalize text-slate-50 first-letter:uppercase sm:text-4xl">
32              Stay in the Tech Loop with Jettwave's Newsletter
33            </h3>
34          </div>
35          {/* Form */}
36          <div className="flex w-full max-w-xl flex-col items-center gap-y-4">
37            <div className="flex w-full max-w-6xl flex-col justify-center gap-4 md:flex-row">
38              <input
39            className="placeholder:text-gray h-full w-full md:max-w-sm rounded-md bg-slate-100  px-6 py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 "
40            placeholder="Search..."
41              />
42              <Link
43                href="#"
44                className="h-fit text-center md:w-fit select-none whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
45              >
46                start now
47              </Link>
48            </div>
49          </div>
50        </div>
51      </div>
52    </div>
53  );
54}
55

0import Link from "next/link";
1import React from "react";
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 socials = [
72  {
73    link: "#",
74    Icon: TwitterLogo,
75  },
76  {
77    link: "#",
78    Icon: FacebookLogo,
79  },
80  {
81    link: "#",
82    Icon: InstagramLogo,
83  },
84  {
85    link: "#",
86    Icon: LinkedInLogo,
87  },
88];
89
90export function NewsletterSignups8() {
91  return (
92    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
93      <div className="flex flex-col gap-x-20 gap-y-12 rounded-2xl bg-slate-200 p-8 sm:min-h-[320px] sm:rounded-3xl sm:p-10 lg:flex-row lg:p-16">
94        <div className="flex w-full flex-col justify-between gap-y-6 lg:w-1/2">
95          {/* Heading */}
96          <div className="flex flex-col gap-y-2">
97            <h3 className="text-2xl font-bold text-slate-900 first-letter:uppercase lg:text-3xl">
98              social media
99            </h3>
100            <p className="text-sm text-slate-600 first-letter:uppercase lg:text-base">
101              Don't miss out on the latest tech trends and innovations. Sign up
102              for Jettwave's newsletter to stay informed and connected. Get
103              exclusive access to industry insights, thought-provoking articles,
104              and updates on our cutting-edge solutions.
105            </p>
106          </div>
107          <div className="flex flex-wrap gap-2">
108            {socials.map(({ Icon }, index: number) => {
109              return (
110                <Icon
111                  key={index}
112                  className="h-12 w-12 rounded-lg bg-sky-700 fill-slate-50 p-3"
113                />
114              );
115            })}
116          </div>
117        </div>
118        <div className="flex w-full flex-col justify-between gap-y-6 lg:w-1/2">
119          {/* Heading */}
120          <div className="flex flex-col gap-y-2">
121            <h3 className="text-2xl font-bold text-slate-900 first-letter:uppercase lg:text-3xl">
122              Get Inspired with Jettwave's Newsletter
123            </h3>
124            <p className="max-w-4xl text-sm text-slate-600 first-letter:uppercase lg:text-base">
125              Paragraph: Dive into the world of tech inspiration by subscribing
126              to Jettwave's newsletter.
127            </p>
128          </div>
129          <div className="flex w-full flex-col gap-4">
130            <input
131              className="placeholder:text-gray h-full w-full rounded-md bg-slate-100  px-6 py-3 text-slate-700 caret-slate-700 ring-1 ring-slate-400 focus:outline-none focus:ring-slate-600 "
132              placeholder="Search..."
133            />
134            <Link
135              href="#"
136              className="h-fit w-full select-none whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-center text-sm lowercase text-slate-100 outline-1 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
137            >
138              start now
139            </Link>
140          </div>
141        </div>
142      </div>
143    </div>
144  );
145}
146