Hero Sections

Simple centered with background image

0import Link from "next/link";
1import React from "react";
2
3export function HeroSections1() {
4  return (
5    <>
6      {/* HeroSections Wrapper */}
7      <div className="relative flex h-screen max-h-[1000px] w-full items-center justify-center portrait:h-[750px]">
8        <img
9          src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"
10          className="absolute h-full w-full bg-slate-200 object-cover grayscale"
11        />
12        <div className="absolute inset-0 bg-sky-200 mix-blend-multiply backdrop-opacity-50" />
13        {/* Spacing/Positioning Wrapper */}
14        <div className="mx-auto w-full max-w-[1440px] px-4">
15          {/* Parent Element */}
16          <div className="relative flex flex-col items-center gap-y-8">
17            {/* Heading */}
18            <div className="flex max-w-4xl flex-col gap-y-1 sm:gap-y-2">
19              <p className="truncate text-center text-base font-bold capitalize text-sky-700 sm:text-lg lg:text-xl">
20                Ignite Your Potential, Soar with Jettwave
21              </p>
22              <div className="flex flex-col gap-y-4">
23                <h3 className="text-center text-4xl font-bold capitalize text-slate-900 first-letter:uppercase sm:text-5xl lg:text-6xl">
24                  Revolutionizing the Tech Industry
25                </h3>
26                <p className="text-center text-sm text-slate-700 first-letter:uppercase sm:text-base lg:text-lg">
27                  Jettwave redefines tech solutions with innovation and
28                  expertise. Our team creates groundbreaking software, hardware,
29                  and services that empower businesses and individuals in the
30                  digital age. From AI applications to cloud computing, we shape
31                  the future.
32                </p>
33              </div>
34            </div>
35            {/* Buttons */}
36            <div className="flex w-fit gap-4">
37            <Link
38              href="#"
39              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"
40            >
41              start now
42            </Link>
43            <Link
44              href="#"
45              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-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"
46            >
47              learn more
48            </Link>
49            </div>
50          </div>
51        </div>
52      </div>
53    </>
54  );
55}
56

Ignite Your Potential, Soar with Jettwave

Revolutionizing the Tech Industry

Jettwave redefines tech solutions with innovation and expertise. Our team creates groundbreaking software, hardware, and services that empower businesses and individuals in the digital age. From AI applications to cloud computing, we shape the future.

start now learn more

Simple centered with background image and logos

0import Link from "next/link";
1import React from "react";
2
3const Logo = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 132 35"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"></path>
12      <path d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"></path>
13    </svg>
14  );
15};
16
17const data = [{ src: "" }, { src: "" }, { src: "" }, { src: "" }, { src: "" }];
18
19export function HeroSections2() {
20  return (
21    <>
22      {/* HeroSections Wrapper */}
23      <div className="relative flex max-h-[1000px] w-full items-center justify-center py-24 md:h-screen md:p-0 md:portrait:h-[750px]">
24        <img
25          src="https://solutions.rent/wp-content/uploads/2019/07/spotkanie-biznesowe.jpg"
26          className="absolute h-full w-full bg-slate-200 object-cover"
27        />
28        <div className="absolute inset-0 bg-gradient-to-t from-[#000000] via-[#000000]/90 via-10% to-[#000000]/70" />
29        {/* Parent Element */}
30        <div className="relative inset-x-0 bottom-[10%] mx-auto flex max-w-[1440px] flex-col gap-y-20 px-4 md:absolute md:gap-y-32 lg:bottom-[15%]">
31          <div className="flex flex-col items-center gap-y-8">
32            {/* Heading */}
33            <div className="flex max-w-4xl flex-col gap-y-4">
34              <h3 className="text-center text-4xl font-bold capitalize text-slate-50 first-letter:uppercase sm:text-5xl lg:text-6xl">
35                Discover the Power of Jettwave
36              </h3>
37              <p className="text-center text-sm text-slate-200 first-letter:uppercase sm:text-base lg:text-lg">
38                Experience the transformative power of Jettwave's cutting-edge
39                tech solutions. Our team is dedicated to pushing boundaries and
40                delivering innovative software, hardware, and services. Whether
41                you're a business or an individual, we empower you to thrive in
42                the digital landscape.
43              </p>
44            </div>
45            {/* Button */}
46            <Link
47              href="#"
48              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"
49            >
50              start now
51            </Link>
52          </div>
53          <div className="flex flex-col items-center gap-y-6">
54            <p className="truncate text-center text-base font-medium capitalize text-slate-50">
55              we have <span className="font-bold text-sky-600">240+ </span>
56              satisfied clients
57            </p>
58            <div className="grid w-fit grid-cols-2 flex-wrap gap-x-8 gap-y-6 sm:flex sm:w-full sm:justify-center sm:gap-x-12 xl:justify-between">
59              {data.map(({ src }, index: number) => {
60                return (
61                  <div
62                    key={index}
63                    className="flex justify-center last:col-span-2"
64                  >
65                    <Logo className={"h-10 fill-slate-50/50 md:h-12"} />
66                  </div>
67                );
68              })}
69            </div>
70          </div>
71        </div>
72      </div>
73    </>
74  );
75}
76

Discover the Power of Jettwave

Experience the transformative power of Jettwave's cutting-edge tech solutions. Our team is dedicated to pushing boundaries and delivering innovative software, hardware, and services. Whether you're a business or an individual, we empower you to thrive in the digital landscape.

start now

we have 240+ satisfied clients

Two-column with newsletter signup

0import Link from "next/link";
1import React from "react";
2
3export function HeroSections3() {
4  return (
5    <div className="overflow-hidden">
6      <div className="mx-auto max-h-[1024px] w-full max-w-md px-4 max-lg:mt-32 sm:max-w-2xl md:max-w-3xl lg:h-[calc(100vh-80px)] lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1440px]">
7        {/* Parent Element */}
8        <div className="relative h-full grid-cols-2 lg:grid">
9          {/* Col 1 */}
10          <div className="my-auto max-w-3xl">
11            {/* Heading */}
12            <div className="mb-6">
13              <p className="mb-3 truncate text-lg font-bold capitalize text-sky-700 xl:text-xl">
14                Zero Dependencies
15              </p>
16              <h3 className="mb-4 hyphens-manual text-5xl font-extrabold capitalize text-slate-900 first-letter:uppercase xl:mb-6 xl:text-6xl">
17                Speed up your develop&shy;ment process
18              </h3>
19              <p className="text-lg text-slate-600 first-letter:uppercase xl:text-xl">
20                put aside the complex dependencies and focus on crafting elegant
21                designs and powerful solutions. Our range of zero-compromise
22                tools are designed to speed up your development process, helping
23                you move from concept to creation in record time.
24              </p>
25            </div>
26            {/* Buttons */}
27            <div className="flex flex-col gap-y-4">
28              <div className="flex gap-4">
29                {/* <input
30                  className="placeholder:text-gray h-full w-full max-w-sm rounded-md bg-slate-200  px-4 py-2.5 text-slate-700 caret-slate-700 focus:outline-none focus:ring-0 "
31                  placeholder="Search..."
32                /> */}
33                <Link
34                  href="/"
35                  className="h-fit w-fit whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
36                >
37                  Get Started
38                </Link>
39              </div>
40              {/* <p className="text-xs text-slate-400 first-letter:uppercase md:text-sm">
41                Proactively build visionary systems without innovative core
42                competencies. Seamlessly provide accessyeye tactical
43                methodologies with innovative best practices.
44              </p> */}
45            </div>
46          </div>
47          {/* Col 2 */}
48          <div className="relative h-full w-full max-lg:hidden max-lg:overflow-hidden max-lg:rounded-3xl">
49            <div className="inset-0 left-16 overflow-hidden rounded-bl-3xl lg:absolute lg:w-[50vw]">
50              <img
51                src="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/ibA0x8NRTa3Q/v0/1200x-1.jpg"
52                className="h-full w-full bg-sky-100 object-cover object-left grayscale"
53              />
54              <div className="absolute inset-0 bg-sky-500 mix-blend-multiply" />
55            </div>
56          </div>
57        </div>
58      </div>
59    </div>
60  );
61}
62

Zero Dependencies

Speed up your development process

put aside the complex dependencies and focus on crafting elegant designs and powerful solutions. Our range of zero-compromise tools are designed to speed up your development process, helping you move from concept to creation in record time.

Get Started

Bold card with device showcase

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://screenlane.com/media/screenshots/spotify-ios-app-screenshot-thumbnail-6112.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
254export function HeroSections4() {
255  return (
256    <>
257      {/* Spacing/Positioning Wrapper */}
258      <div className="mx-auto w-full max-w-[1440px] px-4">
259        {/* Parent Element */}
260
261        <div className="relative flex min-h-[768px] flex-col gap-y-16 overflow-hidden rounded-2xl bg-sky-700 p-8 sm:p-12 md:min-h-[576px] md:flex-row lg:rounded-3xl lg:p-16">
262          <div className="flex w-full flex-col items-center justify-center gap-y-8 md:max-w-lg md:items-start lg:max-w-[640px]">
263            <div className="flex flex-col gap-y-4">
264              <h3 className="text-center text-4xl font-bold capitalize text-slate-50 first-letter:uppercase sm:text-5xl md:text-left lg:text-5xl">
265                Unleash Your Tech Potential with Jettwave
266              </h3>
267              <p className="text-center text-sm text-slate-200 first-letter:uppercase sm:text-base md:text-left lg:text-lg">
268                Jettwave is your gateway to the future of technology. We
269                revolutionize industries with innovative solutions, from
270                cutting-edge software to advanced hardware. Our mission is to
271                empower businesses and individuals, helping them thrive in the
272                digital age. Join us and experience the limitless potential of
273                Jettwave's transformative tech.
274              </p>
275            </div>
276            {/* Buttons */}
277            <div className="flex w-fit gap-4">
278              <Link
279                href="/"
280                className="h-fit w-fit rounded-lg bg-slate-50 px-6 py-3 text-center text-sm font-medium capitalize text-sky-700"
281              >
282                app store
283              </Link>
284              <Link
285                href="/"
286                className="h-fit w-fit rounded-lg bg-slate-50 px-6 py-3 text-center text-sm font-medium capitalize text-sky-700"
287              >
288                google play
289              </Link>
290            </div>
291          </div>
292
293          {/* Col 2 */}
294
295          {/* <div className="relative md:static lg:relative lg:w-1/2">
296            <Phone className="md:w-[446px] lg:w-full md:left-[600px] lg:inset-0 absolute lg:pl-24" />
297            
298          </div> */}
299
300          <div className="relative md:static lg:w-1/2">
301            <Phone className="absolute md:left-[600px] md:top-16 md:w-[446px] lg:left-[768px] lg:w-[576px]" />
302          </div>
303        </div>
304      </div>
305    </>
306  );
307}
308
309// import Link from "next/link";
310// import React from "react";
311
312// const Logo = ({ className }) => {
313//   return (
314//     <svg
315//       id="logo-80"
316//       className={className}
317//       width="167"
318//       height="41"
319//       viewBox="0 0 167 41"
320//       fill="none"
321//       xmlns="http://www.w3.org/2000/svg"
322//     >
323//       <path d="M48.6307 28.7936H60.5827V25.1936H52.8787V11.6336H48.6307V28.7936Z"></path>
324//       <path d="M67.6639 26.3936C65.9599 26.3936 65.0719 24.9056 65.0719 22.6736C65.0719 20.4416 65.9599 18.9296 67.6639 18.9296C69.3679 18.9296 70.2799 20.4416 70.2799 22.6736C70.2799 24.9056 69.3679 26.3936 67.6639 26.3936ZM67.6879 29.1776C71.6479 29.1776 74.2399 26.3696 74.2399 22.6736C74.2399 18.9776 71.6479 16.1696 67.6879 16.1696C63.7519 16.1696 61.1119 18.9776 61.1119 22.6736C61.1119 26.3696 63.7519 29.1776 67.6879 29.1776Z"></path>
325//       <path d="M81.0943 33.0416C82.9183 33.0416 84.5263 32.6336 85.6063 31.6736C86.5903 30.7856 87.2383 29.4416 87.2383 27.5936V16.5056H83.4943V17.8256H83.4463C82.7263 16.7936 81.6223 16.1456 79.9903 16.1456C76.9423 16.1456 74.8303 18.6896 74.8303 22.2896C74.8303 26.0576 77.3983 28.1216 80.1583 28.1216C81.6463 28.1216 82.5823 27.5216 83.3023 26.7056H83.3983V27.9296C83.3983 29.4176 82.7023 30.2816 81.0463 30.2816C79.7503 30.2816 79.1023 29.7296 78.8863 29.0816H75.0943C75.4783 31.6496 77.7103 33.0416 81.0943 33.0416ZM81.0703 25.2176C79.6063 25.2176 78.6463 24.0176 78.6463 22.1696C78.6463 20.2976 79.6063 19.0976 81.0703 19.0976C82.7023 19.0976 83.5663 20.4896 83.5663 22.1456C83.5663 23.8736 82.7743 25.2176 81.0703 25.2176Z"></path>
326//       <path d="M94.9367 26.3936C93.2327 26.3936 92.3447 24.9056 92.3447 22.6736C92.3447 20.4416 93.2327 18.9296 94.9367 18.9296C96.6407 18.9296 97.5527 20.4416 97.5527 22.6736C97.5527 24.9056 96.6407 26.3936 94.9367 26.3936ZM94.9607 29.1776C98.9207 29.1776 101.513 26.3696 101.513 22.6736C101.513 18.9776 98.9207 16.1696 94.9607 16.1696C91.0247 16.1696 88.3847 18.9776 88.3847 22.6736C88.3847 26.3696 91.0247 29.1776 94.9607 29.1776Z"></path>
327//       <path d="M102.655 28.7936H106.567V16.5056H102.655V28.7936ZM102.655 14.8016H106.567V11.6336H102.655V14.8016Z"></path>
328//       <path d="M108.264 32.8496H112.176V27.5216H112.224C112.992 28.5536 114.12 29.1776 115.704 29.1776C118.92 29.1776 121.056 26.6336 121.056 22.6496C121.056 18.9536 119.064 16.1456 115.8 16.1456C114.12 16.1456 112.92 16.8896 112.08 17.9936H112.008V16.5056H108.264V32.8496ZM114.696 26.1536C113.016 26.1536 112.056 24.7856 112.056 22.7936C112.056 20.8016 112.92 19.2896 114.624 19.2896C116.304 19.2896 117.096 20.6816 117.096 22.7936C117.096 24.8816 116.184 26.1536 114.696 26.1536Z"></path>
329//       <path d="M127.426 29.1776C130.642 29.1776 133.018 27.7856 133.018 25.0976C133.018 21.9536 130.474 21.4016 128.314 21.0416C126.754 20.7536 125.362 20.6336 125.362 19.7696C125.362 19.0016 126.106 18.6416 127.066 18.6416C128.146 18.6416 128.89 18.9776 129.034 20.0816H132.634C132.442 17.6576 130.57 16.1456 127.09 16.1456C124.186 16.1456 121.786 17.4896 121.786 20.0816C121.786 22.9616 124.066 23.5376 126.202 23.8976C127.834 24.1856 129.322 24.3056 129.322 25.4096C129.322 26.2016 128.578 26.6336 127.402 26.6336C126.106 26.6336 125.29 26.0336 125.146 24.8096H121.45C121.57 27.5216 123.826 29.1776 127.426 29.1776Z"></path>
330//       <path d="M138.331 29.1536C140.035 29.1536 141.115 28.4816 142.003 27.2816H142.075V28.7936H145.819V16.5056H141.907V23.3696C141.907 24.8336 141.091 25.8416 139.747 25.8416C138.499 25.8416 137.899 25.0976 137.899 23.7536V16.5056H134.011V24.5696C134.011 27.3056 135.499 29.1536 138.331 29.1536Z"></path>
331//       <path d="M147.521 28.7936H151.433V21.9056C151.433 20.4416 152.153 19.4096 153.377 19.4096C154.553 19.4096 155.105 20.1776 155.105 21.4976V28.7936H159.017V21.9056C159.017 20.4416 159.713 19.4096 160.961 19.4096C162.137 19.4096 162.689 20.1776 162.689 21.4976V28.7936H166.601V20.8016C166.601 18.0416 165.209 16.1456 162.425 16.1456C160.841 16.1456 159.521 16.8176 158.561 18.3056H158.513C157.889 16.9856 156.665 16.1456 155.057 16.1456C153.281 16.1456 152.105 16.9856 151.337 18.2576H151.265V16.5056H147.521V28.7936Z"></path>
332//       <path
333//         fillRule="evenodd"
334//         clipRule="evenodd"
335//         d="M8.65417 3.89149C7.22351 4.89185 5.92981 6.0746 4.80676 7.40602C9.39606 6.97995 15.2266 7.67567 21.9958 11.0603C29.2244 14.6745 35.0452 14.7967 39.0962 14.0153C38.7286 12.9024 38.2658 11.8328 37.7177 10.816C33.0804 11.3051 27.1354 10.6577 20.207 7.1936C15.8074 4.9938 11.9292 4.08763 8.65417 3.89149ZM35.0088 6.96027C31.3467 2.86862 26.0248 0.293625 20.1014 0.293625C18.3619 0.293625 16.6741 0.515732 15.0651 0.933105C17.2443 1.52771 19.5593 2.39761 21.9958 3.61589C27.0684 6.15215 31.4478 6.96878 35.0088 6.96027ZM39.9623 17.9217C35.0683 18.8881 28.3102 18.6896 20.207 14.638C12.6314 10.8502 6.60187 10.8979 2.53534 11.8016C2.32544 11.8482 2.12048 11.8972 1.92047 11.9482C1.38806 13.1061 0.963074 14.3237 0.658142 15.5881C0.983826 15.5011 1.32037 15.4184 1.6676 15.3412C6.60101 14.2449 13.5715 14.2925 21.9958 18.5047C29.5715 22.2925 35.601 22.2448 39.6676 21.3411C39.8069 21.3102 39.9442 21.2782 40.0792 21.2452C40.094 20.9299 40.1014 20.6126 40.1014 20.2936C40.1014 19.4911 40.0542 18.6996 39.9623 17.9217ZM39.4262 25.4659C34.5797 26.3132 28.0184 25.988 20.207 22.0824C12.6314 18.2946 6.60187 18.3423 2.53534 19.246C1.63269 19.4465 0.820679 19.6908 0.10437 19.9487C0.102417 20.0634 0.10144 20.1784 0.10144 20.2936C0.10144 31.3393 9.05573 40.2936 20.1014 40.2936C29.3585 40.2936 37.1467 34.0045 39.4262 25.4659Z"
336//       ></path>
337//     </svg>
338//   );
339// };
340
341// const logo = [
342//   { src: "" },
343//   { src: "" },
344//   { src: "" },
345//   { src: "" },
346//   { src: "" },
347//   { src: "" },
348//   { src: "" },
349// ];
350
351// function HeroSections4() {
352//   return (
353//     <>
354//       {/* Spacing/Positioning Wrapper */}
355//       <div className="mx-auto w-full max-w-[1440px] px-4">
356//         {/* Parent Element */}
357//         <div className="flex flex-col gap-y-10">
358//           <div className="flex min-h-[400px] flex-col overflow-hidden rounded-xl bg-sky-700 sm:rounded-2xl md:flex-none lg:grid lg:grid-cols-2 lg:grid-rows-1">
359//             {/* Col 1 */}
360//             <div className="flex flex-col justify-center gap-y-6 p-8 pb-10 sm:p-14">
361//               {/* Heading */}
362//               <div className="flex w-full flex-col gap-2">
363//                 <h2 className="text-left text-3xl font-bold text-slate-50 first-letter:uppercase md:text-6xl">
364//                   better banking for you and your loved ones
365//                 </h2>
366//                 <p className="line-clamp-3 text-left text-sm text-slate-300 first-letter:uppercase md:text-base lg:line-clamp-5">
367//                   Progressively aggregate virtual processes via seamless
368//                   information. Phosfluorescently fashion distinctive
369//                   functionalities before fully tested leadership skills.
370//                 </p>
371//               </div>
372
373//               <div className="flex gap-4">
374//                 <Link
375//                   href="/"
376//                   className="w-fit rounded-lg bg-slate-50 px-6 py-3 text-center text-sm capitalize text-sky-700"
377//                 >
378//                   app store
379//                 </Link>
380
381//                 <Link
382//                   href="/"
383//                   className="w-fit rounded-lg bg-slate-50 px-6 py-3 text-center text-sm capitalize text-sky-700"
384//                 >
385//                   google play
386//                 </Link>
387//               </div>
388//             </div>
389//             {/* Col 2 */}
390//             <div className="relative flex h-full w-full justify-center pt-10">
391//               <div className="mt-2 h-full w-[200px] overflow-hidden rounded-t-[50px] bg-red-500 lg:w-[390px]">
392//                 <img
393//                   src="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/ibA0x8NRTa3Q/v0/1200x-1.jpg"
394//                   className="object-cover"
395//                 />
396//               </div>
397
398//               <img src="../Phone.png" className="absolute h-full" />
399//             </div>
400//           </div>
401
402//           <div className="flex w-full justify-between gap-x-6 gap-y-6">
403//             {logo.map(({ src }) => {
404//               return (
405//                 <>
406//                   <Logo className={" fill-slate-700 sm:w-20 lg:w-32"} />
407//                 </>
408//               );
409//             })}
410//           </div>
411//         </div>
412//       </div>
413//     </>
414//   );
415// }
416
417// export default HeroSections4;
418

Unleash Your Tech Potential with Jettwave

Jettwave is your gateway to the future of technology. We revolutionize industries with innovative solutions, from cutting-edge software to advanced hardware. Our mission is to empower businesses and individuals, helping them thrive in the digital age. Join us and experience the limitless potential of Jettwave's transformative tech.

app store google play

Split with image and offset background

0import Link from "next/link";
1import React from "react";
2
3const Triangle = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      preserveAspectRatio="none"
8      viewBox="0 0 300 600"
9      fill="none"
10      xmlns="http://www.w3.org/2000/svg"
11    >
12      <g filter="url(#filter0_i_287_18947)">
13        <path d="M99.5157 0L0 600H300V0H99.5157Z" fill="white" />
14      </g>
15      <defs>
16        <filter
17          id="filter0_i_287_18947"
18          x="0"
19          y="0"
20          width="315"
21          height="620"
22          filterUnits="userSpaceOnUse"
23          colorInterpolationFilters="sRGB"
24        >
25          <feFlood floodOpacity="0" result="BackgroundImageFix" />
26          <feBlend
27            mode="normal"
28            in="SourceGraphic"
29            in2="BackgroundImageFix"
30            result="shape"
31          />
32          <feColorMatrix
33            in="SourceAlpha"
34            type="matrix"
35            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
36            result="hardAlpha"
37          />
38          <feOffset dx="15" dy="20" />
39          <feGaussianBlur stdDeviation="12.5" />
40          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
41          <feColorMatrix
42            type="matrix"
43            values="0 0 0 0 0.278431 0 0 0 0 0.333333 0 0 0 0 0.411765 0 0 0 0.25 0"
44          />
45          <feBlend
46            mode="normal"
47            in2="shape"
48            result="effect1_innerShadow_287_18947"
49          />
50        </filter>
51      </defs>
52    </svg>
53  );
54};
55
56export function HeroSections5() {
57  return (
58    <>
59      {/* HeroSections Wrapper */}
60      <div className="relative flex w-full items-center justify-center overflow-hidden lg:h-screen lg:max-h-[1000px] lg:portrait:h-[750px]">
61        {/* Parent Element */}
62        <div className="flex h-full max-w-[1440px] flex-col gap-y-12 px-4 lg:grid lg:grid-cols-2 lg:grid-rows-1">
63          {/* Col 1 */}
64          <div className="flex flex-col items-center justify-center gap-y-8 lg:items-start lg:pr-10">
65            {/* Heading */}
66            <div className="flex max-w-4xl flex-col gap-y-4">
67              <h3 className="text-center text-4xl font-bold capitalize text-slate-900 first-letter:uppercase sm:text-5xl lg:text-left lg:text-6xl">
68                Embrace the Tech Renaissance with Jettwave
69              </h3>
70              <p className="text-center text-sm text-slate-700 first-letter:uppercase sm:text-base lg:text-left lg:text-lg">
71                Jettwave is ushering in a new era of tech renaissance, where
72                innovation knows no bounds. With our state-of-the-art AI
73                solutions and cutting-edge hardware, we empower businesses to
74                flourish in the digital landscape.
75              </p>
76            </div>
77            {/* Button */}
78            <Link
79              href="/"
80              className="h-fit w-fit rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
81            >
82              request a demo
83            </Link>
84          </div>
85          {/* Col 2 */}
86          <div className="relative flex items-center justify-center">
87            <div className="absolute inset-0 hidden h-full justify-end lg:flex lg:w-[50vw]">
88              <Triangle className="h-full w-full fill-slate-200 shadow-[inset_10px_10px_10_10px_#000000] lg:w-3/4" />
89            </div>
90            <div className="relative h-[512px] lg:aspect-square lg:h-auto lg:w-3/4 xl:w-2/3">
91              <img
92                src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"
93                className="h-full w-full rounded-xl object-cover sm:rounded-2xl"
94              />
95            </div>
96          </div>
97        </div>
98      </div>
99    </>
100  );
101}
102

Embrace the Tech Renaissance with Jettwave

Jettwave is ushering in a new era of tech renaissance, where innovation knows no bounds. With our state-of-the-art AI solutions and cutting-edge hardware, we empower businesses to flourish in the digital landscape.

request a demo

Two-column with device showcase

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://screenlane.com/media/screenshots/spotify-ios-app-screenshot-thumbnail-f1d1.jpg"
116        />
117      </g>
118      <defs>
119        <radialGradient
120          id="paint0_radial_53972_10215"
121          cx="0"
122          cy="0"
123          r="1"
124          gradientUnits="userSpaceOnUse"
125          gradientTransform="translate(376.086 167.456) rotate(119.959) scale(975.544 1097.2)"
126        >
127          <stop offset="0.00728192" stopOpacity="0" />
128          <stop offset="1" />
129        </radialGradient>
130        <radialGradient
131          id="paint1_radial_53972_10215"
132          cx="0"
133          cy="0"
134          r="1"
135          gradientUnits="userSpaceOnUse"
136          gradientTransform="translate(432 158.559) rotate(156.827) scale(438.817 950.352)"
137        >
138          <stop stopColor="#636363" />
139          <stop offset="1" />
140        </radialGradient>
141        <linearGradient
142          id="paint2_linear_53972_10215"
143          x1="227.781"
144          y1="193.634"
145          x2="431.778"
146          y2="157.948"
147          gradientUnits="userSpaceOnUse"
148        >
149          <stop stopColor="#636363" stopOpacity="0" />
150          <stop offset="1" />
151        </linearGradient>
152        <linearGradient
153          id="paint3_linear_53972_10215"
154          x1="440"
155          y1="210.883"
156          x2="443"
157          y2="210.883"
158          gradientUnits="userSpaceOnUse"
159        >
160          <stop />
161          <stop offset="1" stopColor="white" />
162        </linearGradient>
163        <linearGradient
164          id="paint4_linear_53972_10215"
165          x1="441.5"
166          y1="199"
167          x2="441.5"
168          y2="295"
169          gradientUnits="userSpaceOnUse"
170        >
171          <stop />
172          <stop offset="0.10159" stopOpacity="0" />
173          <stop offset="0.890418" stopOpacity="0" />
174          <stop offset="1" />
175        </linearGradient>
176        <linearGradient
177          id="paint5_linear_53972_10215"
178          x1="3"
179          y1="276.886"
180          x2="-8.85722e-08"
181          y2="276.886"
182          gradientUnits="userSpaceOnUse"
183        >
184          <stop />
185          <stop offset="1" stopColor="white" />
186        </linearGradient>
187        <linearGradient
188          id="paint6_linear_53972_10215"
189          x1="1.5"
190          y1="256"
191          x2="1.5"
192          y2="314"
193          gradientUnits="userSpaceOnUse"
194        >
195          <stop />
196          <stop offset="0.10159" stopOpacity="0" />
197          <stop offset="0.890418" stopOpacity="0" />
198          <stop offset="1" />
199        </linearGradient>
200        <linearGradient
201          id="paint7_linear_53972_10215"
202          x1="3"
203          y1="200.886"
204          x2="-8.85722e-08"
205          y2="200.886"
206          gradientUnits="userSpaceOnUse"
207        >
208          <stop />
209          <stop offset="1" stopColor="white" />
210        </linearGradient>
211        <linearGradient
212          id="paint8_linear_53972_10215"
213          x1="1.5"
214          y1="180"
215          x2="1.5"
216          y2="238"
217          gradientUnits="userSpaceOnUse"
218        >
219          <stop />
220          <stop offset="0.10159" stopOpacity="0" />
221          <stop offset="0.890418" stopOpacity="0" />
222          <stop offset="1" />
223        </linearGradient>
224        <linearGradient
225          id="paint9_linear_53972_10215"
226          x1="3"
227          y1="130.883"
228          x2="-8.85722e-08"
229          y2="130.883"
230          gradientUnits="userSpaceOnUse"
231        >
232          <stop />
233          <stop offset="1" stopColor="white" />
234        </linearGradient>
235        <linearGradient
236          id="paint10_linear_53972_10215"
237          x1="1.5"
238          y1="119"
239          x2="1.5"
240          y2="152"
241          gradientUnits="userSpaceOnUse"
242        >
243          <stop />
244          <stop offset="0.10159" stopOpacity="0" />
245          <stop offset="0.890418" stopOpacity="0" />
246          <stop offset="1" />
247        </linearGradient>
248      </defs>
249    </svg>
250  );
251};
252
253export function HeroSections6() {
254  return (
255    <>
256      {/* HeroSections Wrapper */}
257      <div className="relative flex w-full items-center justify-center overflow-hidden lg:h-screen lg:max-h-[1000px] lg:portrait:h-[750px]">
258        {/* Parent Element */}
259        <div className="flex h-full max-w-[1440px] flex-col gap-y-12 px-4 lg:grid lg:grid-cols-12 lg:grid-rows-1">
260          {/* Col 1 */}
261          <div className="relative flex flex-col items-center justify-center gap-y-6 sm:gap-y-10 lg:col-span-6 lg:items-start lg:pr-20">
262            {/* Heading */}
263            <div className="flex flex-col gap-y-1 sm:gap-y-2">
264              <p className="truncate text-center text-base font-bold capitalize text-sky-700 sm:text-lg lg:text-left xl:text-xl">
265                Ignite. Innovate. Inspire.
266              </p>
267              <div className="flex flex-col gap-y-4">
268                <h3 className="text-center text-4xl font-bold capitalize text-slate-900 first-letter:uppercase sm:text-5xl lg:text-left xl:text-6xl">
269                  Enter the Tech Frontier with Jettwave
270                </h3>
271                <p className="text-center text-sm text-slate-700 first-letter:uppercase sm:text-base lg:text-left xl:text-lg">
272                  Step into the forefront of technology with Jettwave, where
273                  innovation knows no bounds. Our pioneering solutions and
274                  visionary mindset are reshaping industries and driving
275                  progress. From cutting-edge AI breakthroughs to futuristic
276                  hardware designs, Jettwave is propelling the world into the
277                  next era of tech innovation.
278                </p>
279              </div>
280            </div>
281            {/* Buttons */}
282            <div className="flex w-fit gap-4">
283              <Link
284                href="/"
285                className="h-fit w-fit rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
286              >
287                app store
288              </Link>
289              <Link
290                href="/"
291                className="h-fit w-fit rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
292              >
293                google play
294              </Link>
295            </div>
296          </div>
297          {/* Col 2 */}
298          <div className="relative flex items-center justify-center rounded-xl sm:rounded-2xl lg:col-start-7 lg:w-[50vw] lg:rounded-none lg:rounded-bl-3xl lg:bg-sky-700 lg:py-20">
299            <Phone className="h-full w-full max-w-sm lg:w-auto" />
300          </div>
301        </div>
302      </div>
303    </>
304  );
305}
306

Ignite. Innovate. Inspire.

Enter the Tech Frontier with Jettwave

Step into the forefront of technology with Jettwave, where innovation knows no bounds. Our pioneering solutions and visionary mindset are reshaping industries and driving progress. From cutting-edge AI breakthroughs to futuristic hardware designs, Jettwave is propelling the world into the next era of tech innovation.

app store google play

Bold card with background image

0import Link from "next/link";
1import React from "react";
2
3export function HeroSections7() {
4  return (
5    <>
6      {/* Spacing/Positioning Wrapper */}
7      <div className="mx-auto w-full max-w-[1440px] px-4">
8        {/* Parent Element */}
9        <div className="relative overflow-hidden rounded-2xl lg:rounded-3xl">
10          <img
11            src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80"
12            className="absolute h-full w-full object-cover"
13          />
14          <div className="absolute inset-0 bg-black/75" />
15
16          <div className="relative flex min-h-[576px] items-center p-8 sm:p-12 lg:p-16">
17            <div className="flex flex-col items-center gap-y-8 md:items-start">
18              <div className="flex max-w-5xl flex-col gap-y-4">
19                <h3 className="text-center text-4xl font-bold capitalize text-slate-50 first-letter:uppercase sm:text-5xl md:text-left lg:text-6xl">
20                  Your Potential with Jettwave's Tech Innovations
21                </h3>
22                <p className="text-center text-sm text-slate-200 first-letter:uppercase sm:text-base md:text-left lg:text-lg">
23                  Jettwave is at the forefront of tech innovation, igniting the
24                  potential of industries worldwide. With our advanced AI
25                  solutions and cutting-edge hardware, we empower businesses to
26                  thrive in the digital era.
27                </p>
28              </div>
29              {/* Button */}
30              <Link
31                href="/"
32                className="h-fit w-fit rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
33              >
34                request a demo
35              </Link>
36            </div>
37          </div>
38        </div>
39      </div>
40    </>
41  );
42}
43

Your Potential with Jettwave's Tech Innovations

Jettwave is at the forefront of tech innovation, igniting the potential of industries worldwide. With our advanced AI solutions and cutting-edge hardware, we empower businesses to thrive in the digital era.

request a demo

Centered with image tile pattern

0import Link from "next/link";
1import React from "react";
2
3const data = [
4  {
5    set: [
6      {
7        image: {
8          src: "https://images.unsplash.com/photo-1683319915193-c03a77fcf1ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM4M3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
9          altText: "",
10        },
11      },
12      {
13        image: {
14          src: "https://images.unsplash.com/photo-1683130565572-61af42023da6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM5MXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
15          altText: "",
16        },
17      },
18    ],
19  },
20  {
21    set: [
22      {
23        image: {
24          src: "https://images.unsplash.com/photo-1682543141925-d3c690f91559?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM5NXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
25          altText: "",
26        },
27      },
28      {
29        image: {
30          src: "https://images.unsplash.com/photo-1620330377213-b534343e8da7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM4OXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
31          altText: "",
32        },
33      },
34    ],
35  },
36  {
37    set: [
38      {
39        image: {
40          src: "https://images.unsplash.com/photo-1636627598590-c8faf1cc64e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM5NnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
41          altText: "",
42        },
43      },
44      {
45        image: {
46          src: "https://images.unsplash.com/photo-1682842216789-51b1d3e2cce9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQwM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
47          altText: "",
48        },
49      },
50    ],
51  },
52  {
53    set: [
54      {
55        image: {
56          src: "https://images.unsplash.com/photo-1682958192295-2788c7672119?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQwN3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
57          altText: "",
58        },
59      },
60      {
61        image: {
62          src: "https://images.unsplash.com/photo-1682923875240-3ef0a52a9e7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQwOHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
63          altText: "",
64        },
65      },
66    ],
67  },
68  {
69    set: [
70      {
71        image: {
72          src: "https://images.unsplash.com/photo-1682762216468-f4039320e80b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQxMXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
73          altText: "",
74        },
75      },
76      {
77        image: {
78          src: "https://images.unsplash.com/photo-1682625893942-17f5a812a3a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQxN3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
79          altText: "",
80        },
81      },
82    ],
83  },
84  {
85    set: [
86      {
87        image: {
88          src: "https://images.unsplash.com/photo-1682554587689-439ab29f8f19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQxOXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
89          altText: "",
90        },
91      },
92      {
93        image: {
94          src: "https://images.unsplash.com/photo-1682417282367-7a59c0acdc89?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQyNHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
95          altText: "",
96        },
97      },
98    ],
99  },
100  {
101    set: [
102      {
103        image: {
104          src: "https://images.unsplash.com/photo-1682499105315-dc1289c959a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQzMHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
105          altText: "",
106        },
107      },
108      {
109        image: {
110          src: "https://images.unsplash.com/photo-1681862910875-763927fef7bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDQ0M3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
111          altText: "",
112        },
113      },
114    ],
115  },
116];
117
118export function HeroSections8() {
119  return (
120    <>
121      {/* Parent Element */}
122      <div className="flex flex-col items-center gap-y-20 overflow-hidden px-4">
123        <div className="flex flex-col items-center gap-y-8">
124          {/* Heading */}
125          <div className="flex max-w-4xl flex-col gap-y-4">
126            <h3 className="text-center text-4xl font-bold capitalize text-slate-900 first-letter:uppercase md:text-5xl xl:text-6xl">
127              Explore the Innovation Ecosystem of Jettwave
128            </h3>
129            <p className="text-center text-sm text-slate-700 first-letter:uppercase md:text-base xl:text-lg">
130              Welcome to Jettwave, where innovation thrives and possibilities
131              unfold. We are an ecosystem of forward-thinking minds, pioneering
132              breakthroughs in technology.
133            </p>
134          </div>
135          {/* Button */}
136          <Link
137            href="#"
138            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"
139          >
140            start now
141          </Link>
142        </div>
143        <div className="flex w-[170%] justify-between sm:w-[150%] lg:w-[120%] xl:w-[105%]">
144          {data.map(({ set }, index: number) => {
145            return (
146              <div
147                key={index}
148                className={
149                  index === 1
150                    ? "h-full -translate-y-24"
151                    : index === 5
152                    ? "h-full -translate-y-20"
153                    : index === 0 || index === 6
154                    ? "h-full -translate-y-40"
155                    : index === 2 || index === 4
156                    ? "h-full -translate-y-12"
157                    : "h-full"
158                }
159              >
160                {set.map(({ image }, index2) => {
161                  return (
162                    <div
163                      className={`${
164                        (index === 0 && index2 === 1) ||
165                        (index === 2 && index2 === 0) ||
166                        (index === 4 && index2 === 1) ||
167                        (index === 6 && index2 === 0)
168                          ? "aspect-[2/3]"
169                          : "aspect-square"
170                      } h-full w-full max-w-[250px] p-1.5 sm:p-2 lg:p-3`}
171                      key={index2}
172                    >
173                      <img
174                        src={image.src}
175                        alt={image.altText}
176                        className="h-full w-full rounded-lg object-cover shadow-xl shadow-slate-300 sm:rounded-xl lg:rounded-2xl"
177                      />
178                    </div>
179                  );
180                })}
181              </div>
182            );
183          })}
184        </div>
185      </div>
186    </>
187  );
188}
189

Explore the Innovation Ecosystem of Jettwave

Welcome to Jettwave, where innovation thrives and possibilities unfold. We are an ecosystem of forward-thinking minds, pioneering breakthroughs in technology.

start now

Split with image cluster

0import Link from "next/link";
1import React from "react";
2
3const data = [
4  {
5    image: {
6      altText: "",
7      src: "https://images.unsplash.com/photo-1679117464529-b1ad1c2e835a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM2MnxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
8    },
9  },
10  {
11    image: {
12      altText: "",
13      src: "https://images.unsplash.com/photo-1683319522052-7ecf311829a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM3NHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
14    },
15  },
16  {
17    image: {
18      altText: "",
19      src: "https://images.unsplash.com/photo-1683319914925-3edbfcf66611?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM3NXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
20    },
21  },
22  {
23    image: {
24      altText: "",
25      src: "https://images.unsplash.com/photo-1683369538156-171ceedee871?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM4MHxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
26    },
27  },
28  {
29    image: {
30      altText: "",
31      src: "https://images.unsplash.com/photo-1683177920180-0175523b0271?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM3OXxNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60",
32    },
33  },
34];
35
36export function HeroSections9() {
37  return (
38    <>
39      {/* Spacing/Positioning Wrapper */}
40      <div className="overflow-x-clip">
41        {/* Parent Element */}
42        <div className="relative mx-auto flex max-w-[1440px] grid-cols-2 grid-rows-1 flex-col gap-y-12 px-4 lg:grid lg:pb-16">
43          {/* Col 1 */}
44          <div className="flex flex-col items-center justify-center gap-y-8 lg:items-start lg:pr-10">
45            {/* Heading */}
46            <div className="flex max-w-4xl flex-col gap-y-4">
47              <h3 className="text-center text-4xl font-bold capitalize text-slate-900 first-letter:uppercase sm:text-5xl lg:text-left lg:text-6xl">
48                Embrace Tech's Future with Jettwave
49              </h3>
50              <p className="text-center text-sm text-slate-700 first-letter:uppercase sm:text-base lg:text-left lg:text-lg">
51                Jettwave is forging a path into the future of technology,
52                empowering industries with groundbreaking innovations. From AI
53                advancements to cutting-edge hardware, we're driving
54                transformative change on a global scale.
55              </p>
56            </div>
57            {/* Button */}
58            <Link
59              href="#"
60              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"
61            >
62              start now
63            </Link>
64          </div>
65          {/* Col 2 */}
66          <div className="sticky top-[104px] flex h-fit justify-center pb-[16%] lg:w-[55vw] lg:justify-end lg:pl-10">
67            <div className="grid w-fit grid-cols-3 grid-rows-2 gap-4 first:col-span-2 sm:gap-6 lg:translate-y-16 [&>*:nth-child(3)]:translate-y-[40%] lg:[&>*:nth-child(3)]:-translate-y-32 [&>*:nth-child(5)]:translate-y-[40%] lg:[&>*:nth-child(5)]:-translate-y-32">
68              {/* Images */}
69              {data.map(({ image }, index: number) => {
70                return (
71                  <div
72                    key={index}
73                    className="flex items-center first:row-span-2 first:-translate-y-[15%] lg:first:translate-y-0"
74                  >
75                    <img
76                      className="aspect-[3/4] w-full max-w-[250px] rounded-lg object-cover sm:rounded-xl lg:rounded-2xl"
77                      src={image.src}
78                      alt={image.altText}
79                    />
80                  </div>
81                );
82              })}
83            </div>
84          </div>
85        </div>
86      </div>
87    </>
88  );
89}
90

Embrace Tech's Future with Jettwave

Jettwave is forging a path into the future of technology, empowering industries with groundbreaking innovations. From AI advancements to cutting-edge hardware, we're driving transformative change on a global scale.

start now

Split with image tiles

0import Link from "next/link";
1import React from "react";
2
3export function HeroSections10() {
4  return (
5    <div className="overflow-hidden">
6      <div className="mx-auto max-h-[1024px] w-full max-w-md px-4 max-lg:mt-32 sm:max-w-2xl md:max-w-3xl lg:h-[calc(100vh-80px)] lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1440px]">
7        {/* Parent Element */}
8        <div className="relative h-full grid-cols-2 lg:grid">
9          {/* Col 1 */}
10          <div className="my-auto max-w-3xl">
11            {/* Heading */}
12            <div className="mb-6">
13              <p className="mb-3 truncate text-lg font-bold capitalize text-sky-700 xl:text-xl">
14                Zero Dependencies
15              </p>
16              <h3 className="mb-4 hyphens-manual text-5xl font-extrabold capitalize text-slate-900 first-letter:uppercase xl:mb-6 xl:text-6xl">
17                Speed up your develop&shy;ment process
18              </h3>
19              <p className="text-lg text-slate-600 first-letter:uppercase xl:text-xl">
20                put aside the complex dependencies and focus on crafting elegant
21                designs and powerful solutions. Our range of zero-compromise
22                tools are designed to speed up your development process, helping
23                you move from concept to creation in record time.
24              </p>
25            </div>
26            {/* Buttons */}
27            <div className="flex flex-col gap-y-4">
28              <div className="flex gap-4">
29                {/* <input
30                  className="placeholder:text-gray h-full w-full max-w-sm rounded-md bg-slate-200  px-4 py-2.5 text-slate-700 caret-slate-700 focus:outline-none focus:ring-0 "
31                  placeholder="Search..."
32                /> */}
33                <Link
34                  href="/"
35                  className="h-fit w-fit whitespace-nowrap rounded-lg bg-sky-700 px-6 py-3 text-center text-sm font-medium capitalize text-slate-50"
36                >
37                  Get Started
38                </Link>
39              </div>
40              {/* <p className="text-xs text-slate-400 first-letter:uppercase md:text-sm">
41                Proactively build visionary systems without innovative core
42                competencies. Seamlessly provide accessyeye tactical
43                methodologies with innovative best practices.
44              </p> */}
45            </div>
46          </div>
47          {/* Col 2 */}
48          <div className="relative h-full w-full max-lg:hidden max-lg:overflow-hidden max-lg:rounded-3xl">
49            <div className="bg-[url(/dot-grid.svg)] bg-slate-100 bg-left-bottom inset-0 left-16 overflow-hidden border border-slate-200 rounded-bl-3xl lg:absolute lg:w-[50vw]">
50             
51              <img
52                src="/TestHero.png"
53                className="h-full w-full z-10 object-cover object-left-top"
54              />
55               {/* <DotGrid className="absolute -z-10 scale-150 inset-0 w-full h-full" /> */}
56              {/* <div className="absolute inset-0 bg-sky-500 mix-blend-multiply" /> */}
57            </div>
58          </div>
59        </div>
60      </div>
61    </div>
62  );
63}
64

Zero Dependencies

Speed up your development process

Get Started

Hero Sections

Simple centered with background image

Revolutionizing the Tech Industry

Simple centered with background image and logos

Discover the Power of Jettwave

Two-column with newsletter signup

Speed up your develop­ment process

Bold card with device showcase

Unleash Your Tech Potential with Jettwave

Split with image and offset background

Embrace the Tech Renaissance with Jettwave

Two-column with device showcase

Enter the Tech Frontier with Jettwave

Bold card with background image

Your Potential with Jettwave's Tech Innovations

Centered with image tile pattern

Explore the Innovation Ecosystem of Jettwave

Split with image cluster

Embrace Tech's Future with Jettwave

Split with image tiles

Speed up your develop­ment process

Speed up your development process

Speed up your development process