CTAs

0import React from "react";
1import Link from "next/link";
2
3const data = {
4  subHeading: "Revolutionize Code Quality",
5  title: "Master DevOps and Cloud Native Technologies for a Competitive Edge",
6  paragraph:
7    "Tap into the full potential of DevOps and cloud-native technologies. From container orchestration to immutable infrastructure, we'll guide you through best practices that drive efficiency and reliability. Let's build tomorrow's software, today.",
8  button: { label: "Join Now", link: "#" },
9};
10
11export function Ctas1() {
12  return (
13    <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">
14      <div className="rounded-3xl bg-slate-800 p-8 sm:p-12">
15        <div className="mx-auto max-w-3xl text-center">
16          <p className="mb-1 truncate text-base font-semibold capitalize text-sky-400 sm:text-lg">
17            {data.subHeading}
18          </p>
19          <h2 className="mb-4 text-3xl font-extrabold tracking-tight text-slate-50 [text-wrap:balance] sm:text-4xl">
20            {data.title}
21          </h2>
22          <p className="mb-8 text-base text-slate-400 [text-wrap:balance] sm:text-lg">
23            {data.paragraph}
24          </p>
25          <Link
26            role="button"
27            href={data.button.link}
28            className="mx-auto block h-fit w-fit select-none whitespace-nowrap rounded-lg bg-sky-600 px-6 py-2.5 text-base text-slate-50 duration-75 hover:bg-sky-700 active:scale-95"
29          >
30            {data.button.label}
31          </Link>
32        </div>
33      </div>
34    </div>
35  );
36}
37

0import React from "react";
1import Link from "next/link";
2
3export function Ctas2() {
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 justify-center gap-y-8 rounded-3xl border border-slate-200 bg-slate-100 p-12 sm:min-h-[320px] lg:p-14">
7        <div className="max-w-3xl">
8          <h2 className="text-4xl font-bold tracking-tight text-slate-900">
9            Seize Success <br />
10            <span className="text-sky-600">
11              Ignite Your Journey with Jettwave
12            </span>
13          </h2>
14        </div>
15
16        <div className="flex w-fit gap-4">
17          <Link
18            href="#"
19            className="h-fit w-fit select-none rounded-lg bg-sky-600 px-5 py-2.5 text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
20          >
21            start now
22          </Link>
23          <Link
24            href="#"
25            className="h-fit w-fit select-none rounded-lg bg-slate-50 px-5 py-2.5 text-sm font-medium lowercase text-slate-900 outline-1 outline-sky-600 ring-1 ring-slate-200 duration-75 first-letter:uppercase hover:bg-slate-100 hover:text-sky-600 active:scale-95 disabled:pointer-events-none disabled:text-slate-900/25 disabled:ring-slate-200/50"
26          >
27            learn more
28          </Link>
29        </div>
30      </div>
31    </div>
32  );
33}
34

0import React from "react";
1import Link from "next/link";
2
3export function Ctas3() {
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 justify-between gap-x-16 gap-y-8 max-lg:flex-col lg:items-center">
7        <div className="max-w-3xl">
8          <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
9            Empower Your Future With Jettwave
10          </h2>
11          <p className="text-lg text-slate-600">
12            Empower your future and unleash unprecedented success with Jettwave.
13            Our innovative solutions drive growth, optimize efficiency, and
14            propel businesses to new heights. Join us on a transformative
15            journey and redefine what's possible. Ignite your success with
16            Jettwave today.
17          </p>
18        </div>
19
20        <Link
21          href="#"
22          className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 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"
23        >
24          start now
25        </Link>
26      </div>
27    </div>
28  );
29}
30

0import React from "react";
1import Link from "next/link";
2
3export function Ctas4() {
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 justify-between gap-x-16 gap-y-8 rounded-3xl bg-sky-100 p-12 max-lg:flex-col sm:min-h-[320px] lg:items-center lg:p-14">
7        <div className="max-w-3xl">
8          <h2 className="mb-4 text-4xl font-bold tracking-tight text-sky-700">
9            Propel Your Business with Jettwave
10          </h2>
11          <p className="text-lg text-slate-600">
12            Unlock a world of possibilities and propel your business to new
13            horizons with Jettwave. Our dynamic solutions are designed to fuel
14            growth, optimize operations, and drive meaningful results.
15            Experience the limitless potential and embark on a transformative
16            journey with Jettwave.
17          </p>
18        </div>
19
20        <div className="flex flex-col gap-4 sm:max-lg:flex-row lg:w-full lg:max-w-xs">
21          <Link
22            href="#"
23            className="h-fit w-full select-none whitespace-nowrap rounded-lg bg-sky-700 px-5 py-2.5 text-center text-sm lowercase text-slate-100 outline-sky-700 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-700/50"
24          >
25            start now
26          </Link>
27          <Link
28            href="#"
29            className="h-fit w-full select-none rounded-lg bg-slate-50 px-5 py-2.5 text-center text-sm font-medium lowercase text-slate-900 outline-1 outline-sky-700 ring-1 ring-slate-200 duration-75 first-letter:uppercase hover:bg-slate-100 hover:text-sky-700 active:scale-95 disabled:pointer-events-none disabled:text-slate-900/25 disabled:ring-slate-200/50"
30          >
31            learn more
32          </Link>
33        </div>
34      </div>
35    </div>
36  );
37}
38

0import Link from "next/link";
1import React from "react";
2
3export function Ctas5() {
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="relative flex justify-between gap-x-16 gap-y-8 overflow-hidden rounded-3xl p-12 max-lg:flex-col sm:min-h-[224px] lg:items-center lg:p-14">
7        <img
8          src="https://images.unsplash.com/photo-1578589591337-864142c03335?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
9          className="absolute inset-0 -z-10 h-full w-full bg-sky-100 object-cover"
10        />
11        <div className="absolute inset-0 -z-10 bg-sky-400 mix-blend-color backdrop-brightness-[.45]" />
12
13        <div className="max-w-3xl">
14          <h2 className="text-4xl font-bold tracking-tight text-slate-100">
15            Elevate Your Business <br />
16            <span className="text-sky-300">Embrace Success with Jettwave</span>
17          </h2>
18        </div>
19
20        <div className="flex w-fit gap-4">
21          <Link
22            href="#"
23            className="h-fit w-full select-none rounded-lg bg-sky-600 px-5 py-2.5 text-center text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
24          >
25            start now
26          </Link>
27          <Link
28            href="#"
29            className="h-fit w-full select-none whitespace-nowrap rounded-lg bg-slate-50 px-5 py-2.5 text-center text-sm font-medium lowercase text-slate-900 outline-1 outline-sky-600 ring-1 ring-slate-200 duration-75 first-letter:uppercase hover:bg-slate-100 hover:text-sky-600 active:scale-95 disabled:pointer-events-none disabled:text-slate-900/25 disabled:ring-slate-200/50"
30          >
31            learn more
32          </Link>
33        </div>
34      </div>
35    </div>
36  );
37}
38

0import React from "react";
1import Link from "next/link";
2
3const LogoIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 175 40"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        d="M170.394 7.66415L174.568 11.8668C174.714 11.9829 174.822 12.1396 174.878 12.3171C174.963 13.3515 174.18 13.4081 173.38 13.4659C173.034 13.4909 172.685 13.5162 172.402 13.621C170.998 14.0009 169.746 14.8033 168.815 15.9193C167.883 17.0353 167.318 18.4109 167.195 19.8593C167.105 20.0266 166.969 20.1643 166.802 20.2558C166.636 20.3474 166.447 20.3888 166.257 20.3753C166.037 20.3558 165.831 20.2595 165.675 20.1032L164.305 18.7238C164.315 18.8182 164.315 18.9117 164.315 18.9869V19.8968C164.315 19.9543 164.317 20.0097 164.31 20.065C164.301 20.127 164.28 20.1888 164.231 20.2532V20.3377C164.231 20.3808 164.236 20.4209 164.241 20.4616C164.251 20.5449 164.262 20.6307 164.231 20.7505C164.201 20.8622 164.198 20.9925 164.194 21.1088C164.193 21.1779 164.191 21.2421 164.184 21.2945C164.174 21.3672 164.174 21.4448 164.168 21.5223C164.162 21.5949 164.15 21.6674 164.118 21.7354C164.074 21.8306 164.059 21.9215 164.055 22.0139C164.052 22.0581 164.052 22.1026 164.052 22.1482L163.996 22.439L161.867 32.5891L161.698 33.3489L161.632 34.4559L160.694 39.2495L160.544 40H84.6248L84.2589 39.6341L84.1932 39.9531H76.0694L71.5478 35.4034L71.9793 33.3489H69.4277L67.8424 31.7448C65.8749 33.1775 63.4934 33.9285 61.06 33.8837C58.4442 33.9866 55.8941 33.0488 53.9681 31.2758L51.5009 28.7899L50.9662 31.2851C50.9006 31.6416 50.8161 31.9794 50.7223 32.3077L50.6379 32.6173L50.4972 33.0675C50.4856 33.1066 50.4699 33.1444 50.4503 33.1801C50.3106 33.5937 50.1446 33.9979 49.9531 34.3902C49.9581 34.4054 49.9581 34.4219 49.9531 34.4371C49.9285 34.4891 49.9003 34.5392 49.8686 34.5872C49.727 34.8675 49.5705 35.1399 49.3996 35.4034C49.3679 35.4513 49.3397 35.5015 49.3152 35.5535L49.212 35.666C48.9827 35.9949 48.732 36.3082 48.4615 36.6041C48.3873 36.6783 48.3131 36.748 48.2377 36.8164C48.1607 36.8864 48.0825 36.9551 48.0018 37.0262L47.7955 37.2232C47.6654 37.3313 47.5323 37.4356 47.3964 37.5361C47.2843 37.619 47.1703 37.6992 47.0544 37.7767C45.1211 38.9222 42.891 39.4674 40.6473 39.3433C37.5516 39.3433 35.075 38.4427 33.5084 36.8668L29.0994 32.4296C27.3383 33.4262 25.3442 33.9377 23.3208 33.9118C20.7129 33.9925 18.1782 33.042 16.2664 31.2664L13.7993 28.7805L13.0019 32.6173L12.8424 33.3771H4.54036L0 28.7992L0.234521 27.6923L5.22515 3.72418L5.37521 2.97372H13.7054L13.9212 3.18013V2.97372H70.0469L70.2533 3.18013V2.97372H78.3771L82.9174 7.55158L82.6923 8.64913L82.4484 9.8499H84.7842L85.1501 10.2158C86.1779 9.61344 87.3453 9.29005 88.5366 9.27769C89.4126 9.26039 90.2825 9.42678 91.0903 9.76608C91.8982 10.1054 92.626 10.61 93.227 11.2476L93.105 11.1069L95.3095 13.3302C96.651 10.8068 99.6622 9.27769 103.752 9.27769C106.923 9.27769 109.259 10.0844 110.675 11.5478L112.27 13.152L112.805 10.5722L112.964 9.82173H121.097L123.424 12.1576L123.752 10.5816L123.912 9.83112H139.916L140.347 10.2627C141.431 9.62306 142.672 9.29818 143.931 9.32458C144.688 9.29503 145.442 9.43365 146.14 9.73047C146.837 10.0273 147.46 10.475 147.964 11.0413C147.938 11.0118 147.913 10.9823 147.888 10.9533C147.843 10.8995 147.798 10.847 147.75 10.7984L148.565 11.6135C149.275 10.8782 150.129 10.2959 151.072 9.90235C152.016 9.50877 153.03 9.3121 154.052 9.32458C154.595 9.2912 155.137 9.3374 155.663 9.46033L154.775 8.56473C154.654 8.43528 154.572 8.27421 154.539 8.10021C154.506 7.92621 154.523 7.74631 154.587 7.58147C154.652 7.41657 154.762 7.27343 154.905 7.16854C155.048 7.06365 155.217 7.00129 155.394 6.98875H156.107C156.299 6.97043 156.49 6.94226 156.679 6.9043C157.676 6.69474 158.614 6.26624 159.425 5.6497C160.237 5.03323 160.901 4.24418 161.37 3.33959C161.411 3.26962 161.448 3.19765 161.482 3.12384V3.07695C161.805 2.38215 162.001 1.63581 162.064 0.872416C162.08 0.635203 162.187 0.413106 162.361 0.251186C162.535 0.0892079 162.764 -0.00056984 163.002 2.72188e-06H163.077C163.219 0.0135152 163.357 0.0594347 163.479 0.134211C163.601 0.209045 163.704 0.310732 163.781 0.431543C164.456 1.08821 168.208 4.90617 168.208 4.90617C168.521 5.24238 168.498 5.67885 168.474 6.12046C168.459 6.39352 168.444 6.66858 168.508 6.92308C168.679 6.95371 168.852 6.9769 169.024 6.99259C169.19 7.00753 169.356 7.01566 169.522 7.01687C169.716 7.02093 169.905 7.0854 170.061 7.2014C170.217 7.31735 170.334 7.4791 170.394 7.66415Z"
13        fill="black"
14      ></path>
15      <path
16        d="M42.9361 10.7505H48.8648L45.544 26.5009C44.9343 29.484 43.771 31.1914 42.0074 32.4015C40.2236 33.4366 38.1753 33.9258 36.1163 33.8086C32.1951 33.8086 28.4333 32.167 28.0581 28.1801H34.0243C34.2119 29.1182 35.075 29.6529 36.3883 29.6529C38.1613 29.6529 38.9774 28.5835 39.3433 26.9043L39.6997 25.1688H39.5684C39.0449 25.7443 38.4099 26.2073 37.702 26.5298C36.994 26.8523 36.228 27.0276 35.4502 27.045C31.9981 27.045 29.2588 24.2964 29.3151 20.272C29.3902 15.5816 32.4483 10.2533 37.5797 10.2533C38.5521 10.1878 39.5229 10.4021 40.3774 10.8709C41.2319 11.3396 41.9342 12.0433 42.4014 12.8987H42.5046L42.9361 10.7505ZM37.8423 22.6454C40.1219 22.6454 41.3883 20.0188 41.4258 17.758C41.4258 16.2477 40.8348 14.6998 39.09 14.6998C36.7072 14.6998 35.4971 17.3546 35.4596 19.6341C35.4596 21.1726 36.0506 22.6454 37.7954 22.6454M104.4 23.152C104.4 24.1557 103.536 24.5591 102.401 24.5591C100.525 24.5591 99.8967 23.621 99.8873 22.3077H93.9868C93.8836 27.2045 98.2551 28.4146 102.139 28.4146C107.101 28.4146 110.319 26.2664 110.385 21.9794C110.385 18.5553 107.467 17.5141 104.597 16.848C102.392 16.3415 101.426 15.9756 101.435 15.1407C101.445 14.3058 102.43 13.9681 103.396 13.9681C104.606 13.9681 105.431 14.3996 105.516 15.5066H111.248C111.182 11.4165 107.495 10.2158 103.743 10.2158C99.1838 10.2158 95.6284 12.2889 95.5721 16.2101C95.5721 19.2964 97.6547 20.4315 100.797 21.2383C102.814 21.773 104.418 21.9418 104.4 23.152ZM148.236 13.2927H148.133C147.878 12.3689 147.314 11.5602 146.536 11.0005C145.758 10.4409 144.812 10.164 143.855 10.2158C141.304 10.2158 139.747 11.4822 138.274 13.3959H138.171L138.715 10.7505H132.748L129.174 27.8424H135.413L137.289 18.621C137.72 16.6135 138.743 15.2064 140.291 15.2064C141.839 15.2064 142.045 16.4446 141.726 17.955L139.662 27.8424H145.9L147.777 18.621C148.208 16.4822 149.231 15.2064 150.778 15.2064C152.326 15.2064 152.533 16.379 152.214 17.955L150.15 27.8424H156.388L158.621 17.6829C159.559 13.3959 158.124 10.1782 154.006 10.1782C152.86 10.1735 151.732 10.4561 150.724 11.0002C149.716 11.5443 148.861 12.3325 148.236 13.2927ZM1.14441 27.8424H7.58906L12.5703 3.8743H6.13503L1.14441 27.8424ZM20.544 10.2439C24.8967 10.2439 29.0525 12.6266 28.9868 18.0206C28.9305 23.9212 24.9155 28.3396 18.7804 28.3396C14.559 28.3396 10.3377 25.9944 10.4127 20.6285C10.5159 14.8687 14.4746 10.2439 20.544 10.2439ZM18.9587 24.1557C21.7073 24.1557 22.711 20.1688 22.711 17.8236C22.711 16.1445 22.1951 14.5028 20.3845 14.5028C17.6641 14.5028 16.7354 18.7242 16.7354 20.9006C16.7354 22.6454 17.2232 24.1557 18.9962 24.1557M14.7185 3.8743L13.7804 8.66792H67.8986L68.8367 3.8743H14.7185ZM58.2457 10.2439C62.5984 10.2439 66.7541 12.6266 66.6885 18.0206C66.6322 23.9212 62.6078 28.3396 56.4727 28.3396C52.2513 28.3396 48.0299 25.9944 48.1144 20.6285C48.2457 14.8687 52.2044 10.2439 58.2457 10.2439ZM56.6885 24.1557C59.4371 24.1557 60.4408 20.1688 60.4408 17.8236C60.4408 16.1445 59.9155 14.5028 58.105 14.5028C55.3939 14.5028 54.4558 18.7242 54.4558 20.9006C54.4558 22.6454 54.9436 24.1557 56.726 24.1557M71.0506 3.8743L70.1125 8.66792H76.3414L77.2795 3.8743H71.0506ZM66.06 27.8424H72.2982L75.8723 10.7505H69.5965L66.06 27.8424ZM85.9661 28.4146C84.9733 28.4851 83.9804 28.2776 83.0988 27.8153C82.2173 27.353 81.482 26.6542 80.9755 25.7974H80.8723L78.9962 34.4465H72.6828L77.7485 10.7505H83.6772L83.2082 13.03C83.8273 12.188 84.6293 11.4973 85.5538 11.0098C86.4783 10.5224 87.5013 10.2509 88.5459 10.2158C92.2982 10.2158 94.5027 13.4334 94.4371 17.6173C94.3526 22.8799 91.6228 28.4146 85.9286 28.4146H85.9661ZM85.7222 15.0563C83.3114 15.0563 81.8292 18.1426 81.7917 20.516C81.7917 22.167 82.3733 24.0056 84.3526 24.0056C86.9324 24.0056 87.9924 20.591 88.0205 18.3114C88.0205 16.7636 87.5703 15.0563 85.7222 15.0563ZM121.792 25.1501H121.895L121.351 27.8612H127.279L130.854 10.7692H124.625L122.636 20.3189C122.233 22.2983 121.013 23.3396 119.475 23.3396C117.936 23.3396 117.598 21.8949 117.908 20.3846L119.925 10.7692H113.696L111.491 21.3227C110.553 25.9193 112.692 28.3959 116.276 28.3959C117.401 28.3849 118.504 28.0774 119.472 27.5042C120.44 26.931 121.241 26.1125 121.792 25.1313V25.1501ZM155.253 34.531L156.191 29.7373H82.2138L81.2757 34.531H155.253Z"
17        fill="white"
18      ></path>
19      <path
20        d="M161.96 15.4409C161.899 15.4362 161.839 15.4193 161.784 15.3912C161.728 15.3632 161.679 15.3245 161.639 15.2774C161.599 15.2303 161.569 15.1758 161.55 15.1169C161.531 15.058 161.524 14.996 161.529 14.9343C161.607 14.0989 161.508 13.2563 161.238 12.4619C160.968 11.6675 160.533 10.939 159.961 10.3244C159.39 9.70976 158.695 9.22274 157.923 8.89524C157.15 8.56775 156.317 8.40717 155.478 8.42403C155.354 8.42403 155.235 8.37462 155.147 8.28665C155.059 8.19869 155.009 8.07938 155.009 7.95498C155.009 7.83058 155.059 7.71129 155.147 7.62333C155.235 7.53536 155.354 7.48594 155.478 7.48594C155.703 7.50048 155.929 7.50048 156.154 7.48594C157.82 7.30843 159.372 6.55564 160.543 5.35711C161.715 4.15858 162.431 2.58928 162.57 0.919337C162.58 0.801554 162.633 0.691688 162.72 0.611685C162.807 0.531683 162.921 0.487447 163.039 0.487826C163.101 0.492561 163.161 0.509449 163.216 0.53751C163.271 0.565571 163.32 0.604254 163.36 0.651335C163.401 0.698417 163.431 0.752963 163.45 0.811839C163.469 0.870715 163.476 0.932751 163.471 0.994386C163.393 1.82905 163.492 2.6708 163.761 3.46458C164.031 4.25835 164.465 4.98628 165.035 5.60078C165.606 6.21527 166.299 6.70249 167.07 7.03058C167.842 7.35867 168.674 7.52023 169.512 7.5047C169.636 7.5047 169.756 7.55413 169.844 7.64209C169.932 7.73005 169.981 7.84935 169.981 7.97375C169.981 8.09815 169.932 8.21746 169.844 8.30542C169.756 8.39338 169.636 8.44279 169.512 8.44279C167.73 8.47223 166.021 9.15877 164.714 10.3707C163.407 11.5826 162.593 13.2345 162.43 15.0094C162.42 15.1272 162.367 15.2371 162.28 15.3171C162.193 15.3971 162.079 15.4413 161.96 15.4409Z"
21        fill="white"
22      ></path>
23    </svg>
24  );
25};
26
27export function Ctas6() {
28  return (
29    <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">
30      <div className="relative flex flex-col items-center justify-center gap-y-8 overflow-hidden rounded-3xl p-12 sm:min-h-[384px] lg:p-14">
31        <img
32          src="https://images.unsplash.com/photo-1578637387939-43c525550085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
33          className="absolute inset-0 -z-10 h-full w-full bg-sky-100 object-cover"
34        />
35        <div className="absolute inset-0 -z-10 bg-sky-400 mix-blend-color backdrop-brightness-[.45]" />
36
37        <div className="flex flex-col gap-y-6">
38          <LogoIcon className="h-8" />
39          <div className="mx-auto max-w-3xl text-center">
40            <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-100">
41              Success Starts with Jettwave
42            </h2>
43            <p className="text-lg text-slate-300">
44              Our skilled team uses advanced tech and industry know-how to
45              provide customized strategies that fuel growth and propel your
46              business to new heights.
47            </p>
48          </div>
49        </div>
50
51        <Link
52          href="#"
53          className="h-fit w-fit select-none rounded-lg bg-sky-700 px-5 py-2.5 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"
54        >
55          start now
56        </Link>
57      </div>
58    </div>
59  );
60}
61

0import React from "react";
1import Link from "next/link";
2
3export function Ctas7() {
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 overflow-hidden rounded-3xl bg-sky-600 max-lg:flex-col sm:min-h-[384px]">
7        <div className="flex w-full flex-col justify-center gap-y-8 p-12 lg:p-14 lg:py-20">
8          <div>
9            <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-100">
10              Experience The Difference
11            </h2>
12            <p className="text-lg text-slate-300">
13              At Jettwave, we believe in unlocking the full potential of
14              businesses like yours. Our innovative solutions pave the way for
15              growth, efficiency, and success. We empower you to thrive in
16              today's competitive landscape.
17            </p>
18          </div>
19
20          <Link
21            href="#"
22            className="h-fit w-fit select-none rounded-lg bg-slate-50 px-5 py-2.5 text-sm font-medium lowercase text-slate-900 outline-1 outline-sky-600 ring-1 ring-slate-200 duration-75 first-letter:uppercase hover:bg-slate-100 hover:text-sky-600 active:scale-95 disabled:pointer-events-none disabled:text-slate-900/25 disabled:ring-slate-200/50"
23          >
24            learn more
25          </Link>
26        </div>
27
28        <div className="relative max-lg:ml-12 max-lg:h-64 lg:order-first lg:mt-12 lg:w-full">
29          <img
30            src="https://horizon-ui.com/static/media/main-hero-image.c18f68e8fec5f9091e4c.png"
31            className="absolute inset-0 h-full w-full bg-sky-100 object-cover max-lg:rounded-tl-3xl lg:rounded-tr-3xl"
32          />
33        </div>
34      </div>
35    </div>
36  );
37}
38

0import Link from "next/link";
1import React from "react";
2
3const CheckmarkIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        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"
14        clipRule="evenodd"
15      />
16    </svg>
17  );
18};
19
20const data = [
21  {
22    name: "Intuitive Interface",
23  },
24  {
25    name: "Responsive Design",
26  },
27  {
28    name: "Customization Options",
29  },
30];
31
32export function Ctas8() {
33  return (
34     <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">
35      <div className="flex flex-col gap-y-8">
36        <div>
37          <div className="mx-auto mb-6 max-w-3xl text-center">
38            <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
39              Unleash the Power of Our Team
40            </h2>
41            <p className="text-lg text-slate-600">
42              Our dynamic team at Jettwave is a force to be reckoned with,
43              harnessing their collective expertise to drive innovation and
44              shape the future of technology.
45            </p>
46          </div>
47
48          <div className="flex flex-wrap justify-center gap-x-8 gap-y-4">
49            {data.map(({ name }, index: number) => {
50              return (
51                <div key={index} className="flex gap-x-2">
52                  <CheckmarkIcon className="h-7 w-7 flex-shrink-0 fill-sky-600" />
53
54                  <p className="text-lg font-medium text-slate-800">{name}</p>
55                </div>
56              );
57            })}
58          </div>
59        </div>
60
61        <div className="mx-auto flex w-fit flex-col items-center gap-4">
62          <Link
63            href="#"
64            className="h-fit w-fit select-none rounded-lg bg-sky-600 px-5 py-2.5 text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
65          >
66            start now
67          </Link>
68          <p className="max-w-sm truncate text-sm text-slate-600">
69            no credit card. cancel anytime.
70          </p>
71        </div>
72      </div>
73    </div>
74  );
75}
76

0import React from "react";
1import Link from "next/link";
2
3const data = [
4  "https://images.unsplash.com/photo-1684055733123-6dd0cc5ecda5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIzNHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
5  "https://images.unsplash.com/photo-1682869517198-6545532e1ff6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIzOHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
6  "https://images.unsplash.com/photo-1684110727290-9696b04d3e27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI0MnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
7  "https://images.unsplash.com/photo-1684057044985-6cb9a99b4663?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI0NnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
8  "https://images.unsplash.com/photo-1683730798239-d9ef7fa694f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI2NHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
9  "https://images.unsplash.com/photo-1683730796267-1d6d5ee79ca1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI2NXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
10  "https://images.unsplash.com/photo-1683490486118-f62a0c623025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5M3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
11  "https://images.unsplash.com/photo-1683490486053-317d549a5d06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5MnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
12  "https://images.unsplash.com/photo-1683475165689-0b1b59e7cfc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDI5NHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
13  "https://images.unsplash.com/photo-1683380381447-ea8502b8d9af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwMHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
14  "https://images.unsplash.com/photo-1683010450724-6a881d875d4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwMXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
15  "https://images.unsplash.com/photo-1683395494140-57c4c9f9bdcb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwNnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
16  "https://images.unsplash.com/photo-1683436491260-37c6c692cf51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwN3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
17  "https://images.unsplash.com/photo-1683304685733-fc952b516192?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMxMXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
18  "https://images.unsplash.com/photo-1683319573803-7eb4628fdeed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMxM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
19  "https://images.unsplash.com/photo-1683351488105-7c89b7e86b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMxNnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
20  "https://images.unsplash.com/photo-1683319913316-9951585dd781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMyM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
21  "https://images.unsplash.com/photo-1683313152291-30957ea515f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMzMXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
22  "https://images.unsplash.com/photo-1683130990764-40d92b8caa51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM0OXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
23  "https://images.unsplash.com/photo-1684140044332-8b5285c699f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1MnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
24];
25
26export function Ctas9() {
27  return (
28     <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">
29      <div className="relative flex overflow-hidden rounded-3xl bg-slate-200 max-lg:flex-col sm:min-h-[448px]">
30        <div className="flex flex-col justify-center gap-y-8 p-12 lg:min-w-[576px] lg:max-w-xl lg:p-14 lg:py-20 xl:min-w-[768px] xl:max-w-3xl">
31          <div>
32            <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
33              Revamp And Transform Your Online Presence
34            </h2>
35            <p className="text-lg text-slate-600">
36              Our team specializes in creating captivating designs and seamless
37              user experiences that will leave a lasting impact on your
38              audience.
39            </p>
40          </div>
41
42          <Link
43            href="#"
44            className="h-fit w-fit select-none rounded-lg bg-sky-600 px-5 py-2.5 text-sm lowercase text-slate-100 outline-1 outline-sky-600 duration-75 first-letter:uppercase hover:bg-sky-800 active:scale-95 disabled:pointer-events-none disabled:bg-sky-600/50"
45          >
46            get started
47          </Link>
48        </div>
49        <div className="relative w-full max-lg:h-96">
50          <div className="absolute left-0 grid h-[448px] w-[576px] origin-top -rotate-12 scale-125 grid-cols-5 grid-rows-4 gap-4 sm:translate-x-[12%] sm:scale-150 lg:origin-top-left lg:-translate-x-6 lg:-translate-y-[10%]">
51            {data.map((src, index: number) => {
52              return (
53                <div key={index} className="aspect-square h-full w-full">
54                  <img
55                    src={src}
56                    className="h-full w-full rounded-xl bg-sky-100 object-cover"
57                  />
58                </div>
59              );
60            })}
61          </div>
62        </div>
63      </div>
64    </div>
65  );
66}
67

0import React from "react";
1
2const TestIcon = ({ className }) => {
3  return (
4    <svg
5      xmlns="http://www.w3.org/2000/svg"
6      viewBox="0 0 24 24"
7      preserveAspectRatio="xMidYMid meet"
8      className={className}
9    >
10      <path d="M11.644 1.59a.75.75 0 01.712 0l9.75 5.25a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.712 0l-9.75-5.25a.75.75 0 010-1.32l9.75-5.25z" />
11      <path d="M3.265 10.602l7.668 4.129a2.25 2.25 0 002.134 0l7.668-4.13 1.37.739a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.71 0l-9.75-5.25a.75.75 0 010-1.32l1.37-.738z" />
12      <path d="M10.933 19.231l-7.668-4.13-1.37.739a.75.75 0 000 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 000-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 01-2.134-.001z" />
13    </svg>
14  );
15};
16
17const data = [
18  {
19    Icon: TestIcon,
20  },
21  {
22    Icon: TestIcon,
23  },
24  {
25    Icon: TestIcon,
26  },
27  {
28    Icon: TestIcon,
29  },
30  {
31    Icon: TestIcon,
32  },
33  {
34    Icon: TestIcon,
35  },
36  {
37    Icon: TestIcon,
38  },
39  {
40    Icon: TestIcon,
41  },
42  {
43    Icon: TestIcon,
44  },
45];
46
47export function Ctas10() {
48  return (
49     <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">
50      <div className="relative lg:mt-6 xl:mt-20 flex gap-x-16 rounded-3xl bg-slate-200 p-12 max-lg:overflow-hidden max-md:flex-col sm:min-h-[224px] lg:p-14">
51        <div className="max-w-3xl">
52          <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
53            Jettwave's Dynamic Team
54          </h2>
55          <p className="text-lg text-slate-600">
56            At Jettwave, our dynamic team is a formidable powerhouse, pooling
57            together their extensive expertise to propel innovation and shape
58            the future of technology.
59          </p>
60        </div>
61
62        <div className="relative max-md:h-[304px] md:order-first md:min-w-[142px] lg:min-w-[320px]">
63          <div className="absolute bottom-0 grid aspect-square w-[320px] origin-top translate-y-12 grid-cols-3 grid-rows-3 gap-4 overflow-hidden max-md:right-[50%] max-sm:translate-x-[50%] sm:max-md:translate-x-[60%] sm:max-md:rotate-12 sm:max-md:scale-125 sm:max-md:overflow-visible md:right-0 md:max-lg:translate-y-20 lg:translate-y-14">
64            {data.map(({ Icon }, index: number) => {
65              return (
66                <Icon
67                  key={index}
68                  className={
69                    index === 1 || index === 4 || index === 7
70                      ? "w-full translate-y-4 rounded-xl bg-sky-600 fill-sky-900 p-4"
71                      : "w-full translate-y-14 rounded-xl bg-sky-600 fill-sky-900 p-4"
72                  }
73                />
74              );
75            })}
76          </div>
77        </div>
78      </div>
79    </div>
80  );
81}
82

0import React from "react";
1
2const TestIcon = ({ className }) => {
3  return (
4    <svg
5      xmlns="http://www.w3.org/2000/svg"
6      viewBox="0 0 24 24"
7      preserveAspectRatio="xMidYMid meet"
8      className={className}
9    >
10      <path d="M11.644 1.59a.75.75 0 01.712 0l9.75 5.25a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.712 0l-9.75-5.25a.75.75 0 010-1.32l9.75-5.25z" />
11      <path d="M3.265 10.602l7.668 4.129a2.25 2.25 0 002.134 0l7.668-4.13 1.37.739a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.71 0l-9.75-5.25a.75.75 0 010-1.32l1.37-.738z" />
12      <path d="M10.933 19.231l-7.668-4.13-1.37.739a.75.75 0 000 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 000-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 01-2.134-.001z" />
13    </svg>
14  );
15};
16
17const data = [
18  {
19    Icon: TestIcon,
20  },
21  {
22    Icon: TestIcon,
23  },
24  {
25    Icon: TestIcon,
26  },
27  {
28    Icon: TestIcon,
29  },
30  {
31    Icon: TestIcon,
32  },
33  {
34    Icon: TestIcon,
35  },
36  {
37    Icon: TestIcon,
38  },
39  {
40    Icon: TestIcon,
41  },
42  {
43    Icon: TestIcon,
44  },
45];
46
47export function Ctas10() {
48  return (
49     <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">
50      <div className="relative lg:mt-6 xl:mt-20 flex gap-x-16 rounded-3xl bg-slate-200 p-12 max-lg:overflow-hidden max-md:flex-col sm:min-h-[224px] lg:p-14">
51        <div className="max-w-3xl">
52          <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
53            Jettwave's Dynamic Team
54          </h2>
55          <p className="text-lg text-slate-600">
56            At Jettwave, our dynamic team is a formidable powerhouse, pooling
57            together their extensive expertise to propel innovation and shape
58            the future of technology.
59          </p>
60        </div>
61
62        <div className="relative max-md:h-[304px] md:order-first md:min-w-[142px] lg:min-w-[320px]">
63          <div className="absolute bottom-0 grid aspect-square w-[320px] origin-top translate-y-12 grid-cols-3 grid-rows-3 gap-4 overflow-hidden max-md:right-[50%] max-sm:translate-x-[50%] sm:max-md:translate-x-[60%] sm:max-md:rotate-12 sm:max-md:scale-125 sm:max-md:overflow-visible md:right-0 md:max-lg:translate-y-20 lg:translate-y-14">
64            {data.map(({ Icon }, index: number) => {
65              return (
66                <Icon
67                  key={index}
68                  className={
69                    index === 1 || index === 4 || index === 7
70                      ? "w-full translate-y-4 rounded-xl bg-sky-600 fill-sky-900 p-4"
71                      : "w-full translate-y-14 rounded-xl bg-sky-600 fill-sky-900 p-4"
72                  }
73                />
74              );
75            })}
76          </div>
77        </div>
78      </div>
79    </div>
80  );
81}
82