Components/Feature Sections

Feature Sections

Centered with middle image

0import React from "react";
1
2const AnalyticsIcon = ({ 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
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
14      />
15    </svg>
16  );
17};
18
19const ChartIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
31      />
32      <path
33        fillRule="evenodd"
34        clipRule="evenodd"
35        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
36      />
37    </svg>
38  );
39};
40
41const PresentationIcon = ({ className }) => {
42  return (
43    <svg
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      preserveAspectRatio="xMidYMid meet"
47      className={className}
48    >
49      <path
50        fillRule="evenodd"
51        clipRule="evenodd"
52        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
53      />
54    </svg>
55  );
56};
57
58const BriefcaseIcon = ({ className }) => {
59  return (
60    <svg
61      xmlns="http://www.w3.org/2000/svg"
62      viewBox="0 0 24 24"
63      preserveAspectRatio="xMidYMid meet"
64      className={className}
65    >
66      <path
67        fillRule="evenodd"
68        clipRule="evenodd"
69        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
70      />
71      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
72    </svg>
73  );
74};
75
76const data = {
77  subHeading: "Unlock Your Potential",
78  title: "Elevate Your Online Presence",
79  paragraph:
80    "At Jettwave, we specialize in maximizing your online presence and delivering tangible results. Our team of experts understands the importance of a strong digital presence in today's competitive landscape.",
81  image: {
82    src: "https://images.unsplash.com/photo-1575318634028-6a0cfcb60c59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1972&q=80",
83    alt: "",
84  },
85  items: [
86    {
87      name: "Enhanced Analytics",
88      description:
89        "Unlock deep insights and gain a competitive edge in real-time analysis.",
90      Icon: AnalyticsIcon,
91    },
92    {
93      name: "Interactive Charts",
94      description:
95        "Visualize data with interactive charts that bring your numbers to life.",
96      Icon: ChartIcon,
97    },
98    {
99      name: "Collaborative Analytics",
100      description:
101        "Work together seamlessly and share valuable data with your team effortlessly.",
102      Icon: PresentationIcon,
103    },
104    {
105      name: "Advanced Reporting",
106      description:
107        "Generate comprehensive reports with advanced analytics and data visualization.",
108      Icon: BriefcaseIcon,
109    },
110  ],
111};
112
113export function FeatureSections1() {
114  return (
115    <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">
116      <div className="mx-auto mb-12 max-w-3xl text-center">
117        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
118          {data.subHeading}
119        </p>
120        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
121          {data.title}
122        </h2>
123        <p className="text-lg text-slate-600 [text-wrap:balance]">
124          {data.paragraph}
125        </p>
126      </div>
127      <div className="mx-auto grid max-w-6xl grid-cols-1 place-items-center gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
128        {data.items.map(({ name, description, Icon }, index: number) => {
129          return (
130            <div key={index} className="flex flex-col items-center gap-y-5">
131              <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
132                <Icon className="h-full w-full fill-sky-600" />
133              </div>
134              <div className="text-center">
135                <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
136                  {name}
137                </p>
138                <p className="text-base text-slate-600 [text-wrap:balance]">
139                  {description}
140                </p>
141              </div>
142            </div>
143          );
144        })}
145        <div className="row-span-2 row-start-1 h-full max-h-[576px] w-full overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 sm:max-sm:col-span-2 lg:col-start-2">
146          <img
147            src={data.image.src}
148            alt={data.image.alt}
149            onError={(e) => {
150              const image = e.target as HTMLImageElement;
151              image.src = "onerrorimg";
152            }}
153            className="h-full w-full object-cover"
154          />
155        </div>
156      </div>
157    </div>
158  );
159}
160

Unlock Your Potential

Elevate Your Online Presence

At Jettwave, we specialize in maximizing your online presence and delivering tangible results. Our team of experts understands the importance of a strong digital presence in today's competitive landscape.

Enhanced Analytics

Unlock deep insights and gain a competitive edge in real-time analysis.

Interactive Charts

Visualize data with interactive charts that bring your numbers to life.

Collaborative Analytics

Work together seamlessly and share valuable data with your team effortlessly.

Advanced Reporting

Generate comprehensive reports with advanced analytics and data visualization.

Split image with list

0import React from "react";
1
2const AnalyticsIcon = ({ 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
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
14      />
15    </svg>
16  );
17};
18
19const ChartIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
31      />
32      <path
33        fillRule="evenodd"
34        clipRule="evenodd"
35        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
36      />
37    </svg>
38  );
39};
40
41const PresentationIcon = ({ className }) => {
42  return (
43    <svg
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      preserveAspectRatio="xMidYMid meet"
47      className={className}
48    >
49      <path
50        fillRule="evenodd"
51        clipRule="evenodd"
52        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
53      />
54    </svg>
55  );
56};
57
58const BriefcaseIcon = ({ className }) => {
59  return (
60    <svg
61      xmlns="http://www.w3.org/2000/svg"
62      viewBox="0 0 24 24"
63      preserveAspectRatio="xMidYMid meet"
64      className={className}
65    >
66      <path
67        fillRule="evenodd"
68        clipRule="evenodd"
69        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
70      />
71      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
72    </svg>
73  );
74};
75
76const data = {
77  subHeading: "Empowering Your Success",
78  title: "Unleash Your Brand's Potential",
79  paragraph:
80    "At Jettwave, we specialize in delivering impactful results for our clients through an innovative digital approach. We take the time to understand your brand, your target audience, and your goals.",
81  image: {
82    src: "https://cdn.dribbble.com/users/37385/screenshots/2877055/media/c5bff626e551d322808260e135549f42.jpg?resize=800x600&vertical=center",
83    alt: "",
84  },
85  items: [
86    {
87      name: "Enhanced Analytics",
88      description:
89        "Unlock deep insights and gain a competitive edge in real-time analysis.",
90      Icon: AnalyticsIcon,
91    },
92    {
93      name: "Interactive Charts",
94      description:
95        "Visualize data with interactive charts that bring your numbers to life.",
96      Icon: ChartIcon,
97    },
98    {
99      name: "Collaborative Analytics",
100      description:
101        "Work together seamlessly and share valuable data with your team effortlessly.",
102      Icon: PresentationIcon,
103    },
104    {
105      name: "Advanced Reporting",
106      description:
107        "Generate comprehensive reports with advanced analytics and data visualization.",
108      Icon: BriefcaseIcon,
109    },
110  ],
111};
112
113export function FeatureSections2() {
114  return (
115    <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">
116      <div className="mb-12 max-w-3xl">
117        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
118          {data.subHeading}
119        </p>
120        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
121          {data.title}
122        </h2>
123        <p className="text-lg text-slate-600 [text-wrap:balance]">
124          {data.paragraph}
125        </p>
126      </div>
127      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">
128        <div className="shrink-0 space-y-12 lg:max-w-md">
129          {data.items.map(({ name, description, Icon }, index: number) => {
130            return (
131              <div key={index} className="flex gap-x-5">
132                <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
133                  <Icon className="h-full w-full fill-sky-600" />
134                </div>
135                <div>
136                  <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
137                    {name}
138                  </p>
139                  <p className="text-base text-slate-600 [text-wrap:balance]">
140                    {description}
141                  </p>
142                </div>
143              </div>
144            );
145          })}
146        </div>
147        <div className="relative w-full max-lg:h-96">
148          <div className="h-full w-full overflow-hidden rounded-3xl lg:absolute lg:inset-0">
149            <img
150              src={data.image.src}
151              alt={data.image.alt}
152              onError={(e) => {
153                const image = e.target as HTMLImageElement;
154                image.src = "onerrorimg";
155              }}
156              className="h-full w-full object-cover"
157            />
158          </div>
159        </div>
160      </div>
161    </div>
162  );
163}
164

Empowering Your Success

Unleash Your Brand's Potential

At Jettwave, we specialize in delivering impactful results for our clients through an innovative digital approach. We take the time to understand your brand, your target audience, and your goals.

Enhanced Analytics

Unlock deep insights and gain a competitive edge in real-time analysis.

Interactive Charts

Visualize data with interactive charts that bring your numbers to life.

Collaborative Analytics

Work together seamlessly and share valuable data with your team effortlessly.

Advanced Reporting

Generate comprehensive reports with advanced analytics and data visualization.

Split with sticky image and grid

0import React from "react";
1
2const AnalyticsIcon = ({ 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
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
14      />
15    </svg>
16  );
17};
18
19const ChartIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
31      />
32      <path
33        fillRule="evenodd"
34        clipRule="evenodd"
35        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
36      />
37    </svg>
38  );
39};
40
41const PresentationIcon = ({ className }) => {
42  return (
43    <svg
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      preserveAspectRatio="xMidYMid meet"
47      className={className}
48    >
49      <path
50        fillRule="evenodd"
51        clipRule="evenodd"
52        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
53      />
54    </svg>
55  );
56};
57
58const BriefcaseIcon = ({ className }) => {
59  return (
60    <svg
61      xmlns="http://www.w3.org/2000/svg"
62      viewBox="0 0 24 24"
63      preserveAspectRatio="xMidYMid meet"
64      className={className}
65    >
66      <path
67        fillRule="evenodd"
68        clipRule="evenodd"
69        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
70      />
71      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
72    </svg>
73  );
74};
75
76const data = {
77  subHeading: "Empowering Your Success",
78  title: "Accelerate Your Growth",
79  paragraph:
80    "At Jettwave, our dynamic team is a formidable force, leveraging their combined expertise to drive innovation and shape the future of technology.",
81  image: {
82    src: "https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80",
83    alt: "",
84  },
85  items: [
86    {
87      name: "Enhanced Analytics",
88      description:
89        "Unlock deep insights and gain a competitive edge in real-time analysis.",
90      Icon: AnalyticsIcon,
91    },
92    {
93      name: "Interactive Charts",
94      description:
95        "Visualize data with interactive charts that bring your numbers to life.",
96      Icon: ChartIcon,
97    },
98    {
99      name: "Collaborative Analytics",
100      description:
101        "Work together seamlessly and share valuable data with your team effortlessly.",
102      Icon: PresentationIcon,
103    },
104    {
105      name: "Advanced Reporting",
106      description:
107        "Generate comprehensive reports with advanced analytics and data visualization.",
108      Icon: BriefcaseIcon,
109    },
110  ],
111};
112
113export function FeatureSections3() {
114  return (
115    <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">
116      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">
117        <div className="max-w-3xl">
118          <div className="mb-8">
119            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
120              {data.subHeading}
121            </p>
122            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
123              {data.title}
124            </h2>
125            <p className="text-lg text-slate-600 [text-wrap:balance]">
126              {data.paragraph}
127            </p>
128          </div>
129          <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2">
130            {data.items.map(({ name, description, Icon }, index: number) => {
131              return (
132                <div key={index} className="flex flex-col gap-y-5">
133                  <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
134                    <Icon className="h-full w-full fill-sky-600" />
135                  </div>
136                  <div>
137                    <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
138                      {name}
139                    </p>
140                    <p className="text-base text-slate-600">{description}</p>
141                  </div>
142                </div>
143              );
144            })}
145          </div>
146        </div>
147        <div className="sticky top-12 h-fit w-full shrink-0 overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 max-lg:h-96 lg:order-first lg:aspect-square lg:max-w-xs xl:max-w-md">
148          <img
149            src={data.image.src}
150            alt={data.image.alt}
151            onError={(e) => {
152              const image = e.target as HTMLImageElement;
153              image.src = "onerrorimg";
154            }}
155            className="h-full w-full object-cover max-lg:aspect-square"
156          />
157          <div className="absolute inset-0 bg-sky-600 mix-blend-color backdrop-brightness-50" />
158        </div>
159      </div>
160    </div>
161  );
162}
163

Empowering Your Success

Accelerate Your Growth

At Jettwave, our dynamic team is a formidable force, leveraging their combined expertise to drive innovation and shape the future of technology.

Enhanced Analytics

Unlock deep insights and gain a competitive edge in real-time analysis.

Interactive Charts

Visualize data with interactive charts that bring your numbers to life.

Collaborative Analytics

Work together seamlessly and share valuable data with your team effortlessly.

Advanced Reporting

Generate comprehensive reports with advanced analytics and data visualization.

Simple side-by-side

0import React from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
11    </svg>
12  );
13};
14
15const AnalyticsIcon = ({ className }) => {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      viewBox="0 0 24 24"
20      preserveAspectRatio="xMidYMid meet"
21      className={className}
22    >
23      <path
24        fillRule="evenodd"
25        clipRule="evenodd"
26        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
27      />
28    </svg>
29  );
30};
31
32const ChartIcon = ({ className }) => {
33  return (
34    <svg
35      xmlns="http://www.w3.org/2000/svg"
36      viewBox="0 0 24 24"
37      preserveAspectRatio="xMidYMid meet"
38      className={className}
39    >
40      <path
41        fillRule="evenodd"
42        clipRule="evenodd"
43        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
44      />
45      <path
46        fillRule="evenodd"
47        clipRule="evenodd"
48        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
49      />
50    </svg>
51  );
52};
53
54const data = {
55  title: "Unlock Your Brand's Potential",
56  paragraph:
57    "Whether you're looking to enhance your online presence, optimize your digital marketing strategy, or streamline your business operations, Jettwave has the solutions you need.",
58  items: [
59    {
60      name: "Enhanced Analytics",
61      description:
62        "Unlock deep insights and gain a competitive edge in real-time analysis.",
63      button: { label: "Explore Features", link: "#" },
64      Icon: AnalyticsIcon,
65    },
66    {
67      name: "Interactive Charts ",
68      description:
69        "Visualize data with interactive charts that bring your numbers to life.",
70      button: { label: "Learn More", link: "#" },
71      Icon: ChartIcon,
72    },
73  ],
74  button: { label: "Learn more", link: "#" },
75};
76
77export function FeatureSections4() {
78  return (
79    <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">
80      <div className="flex gap-x-20 gap-y-12 max-xl:flex-col xl:items-center">
81        <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">
82          <div className="max-w-3xl">
83            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
84              {data.title}
85            </h2>
86            <p className="text-lg text-slate-600 [text-wrap:balance]">
87              {data.paragraph}
88            </p>
89          </div>
90          <Link
91            role="button"
92            href={data.button.link}
93            className="h-fit w-fit select-none whitespace-nowrap rounded-lg bg-slate-800 px-6 py-2.5 text-base text-slate-100 outline-sky-700 duration-75 hover:bg-slate-900 active:scale-95 disabled:pointer-events-none disabled:bg-sky-800/50"
94          >
95            {data.button.label}
96          </Link>
97        </div>
98        <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2">
99          {data.items.map(
100            ({ name, description, button, Icon }, index: number) => {
101              return (
102                <div key={index} className="flex flex-col gap-y-5">
103                  <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
104                    <Icon className="h-full w-full fill-sky-600" />
105                  </div>
106                  <div className="flex grow flex-col justify-between gap-y-6">
107                    <div>
108                      <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
109                        {name}
110                      </p>
111                      <p className="text-base text-slate-600">{description}</p>
112                    </div>
113                    <Link
114                      href={button.link}
115                      className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"
116                    >
117                      {button.label}
118                      <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
119                    </Link>
120                  </div>
121                </div>
122              );
123            }
124          )}
125        </div>
126      </div>
127    </div>
128  );
129}
130

Unlock Your Brand's Potential

Whether you're looking to enhance your online presence, optimize your digital marketing strategy, or streamline your business operations, Jettwave has the solutions you need.

Learn more

Enhanced Analytics

Unlock deep insights and gain a competitive edge in real-time analysis.

Explore Features

Interactive Charts

Visualize data with interactive charts that bring your numbers to life.

Learn More

Split with heading and card cluster

0import React from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
11    </svg>
12  );
13};
14
15const AnalyticsIcon = ({ className }) => {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      viewBox="0 0 24 24"
20      preserveAspectRatio="xMidYMid meet"
21      className={className}
22    >
23      <path
24        fillRule="evenodd"
25        clipRule="evenodd"
26        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
27      />
28    </svg>
29  );
30};
31
32const ChartIcon = ({ className }) => {
33  return (
34    <svg
35      xmlns="http://www.w3.org/2000/svg"
36      viewBox="0 0 24 24"
37      preserveAspectRatio="xMidYMid meet"
38      className={className}
39    >
40      <path
41        fillRule="evenodd"
42        clipRule="evenodd"
43        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
44      />
45      <path
46        fillRule="evenodd"
47        clipRule="evenodd"
48        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
49      />
50    </svg>
51  );
52};
53
54const PresentationIcon = ({ className }) => {
55  return (
56    <svg
57      xmlns="http://www.w3.org/2000/svg"
58      viewBox="0 0 24 24"
59      preserveAspectRatio="xMidYMid meet"
60      className={className}
61    >
62      <path
63        fillRule="evenodd"
64        clipRule="evenodd"
65        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
66      />
67    </svg>
68  );
69};
70
71const BriefcaseIcon = ({ className }) => {
72  return (
73    <svg
74      xmlns="http://www.w3.org/2000/svg"
75      viewBox="0 0 24 24"
76      preserveAspectRatio="xMidYMid meet"
77      className={className}
78    >
79      <path
80        fillRule="evenodd"
81        clipRule="evenodd"
82        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
83      />
84      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
85    </svg>
86  );
87};
88
89const data = {
90  subHeading: "Elevate Your Brand",
91  title: "Take Your Brand's Presence to New Heights",
92  paragraph:
93    "Discover our comprehensive range of products and services to enhance your brand's online presence. Whether you're looking to create an account, explore our offerings, or seek a customized solution, we're here to help. Let us take your brand to new heights and connect with your audience effectively.",
94  paragraph2:
95    "I've had the pleasure of partnering with this team for our online branding needs, and I must say the experience has been transformative.",
96  items: [
97    {
98      name: "Intelligent Data Insights",
99      description:
100        "Optimize your team's performance and drive business growth.",
101      button: { label: "Learn more", link: "#" },
102      Icon: AnalyticsIcon,
103    },
104    {
105      name: "Real-time Performance Tracking",
106      description: "Unlock intelligent data insights.",
107      button: { label: "Explore features", link: "#" },
108      Icon: ChartIcon,
109    },
110    {
111      name: "Streamlined Team Collaboration",
112      description: "Streamline collaboration and enhance communication.",
113      button: { label: "Get started", link: "#" },
114      Icon: PresentationIcon,
115    },
116    {
117      name: "Robust Data Security",
118      description: "Ensure the security of your valuable data.",
119      button: { label: "Begin your journey", link: "#" },
120      Icon: BriefcaseIcon,
121    },
122  ],
123};
124
125export function FeatureSections5() {
126  return (
127    <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">
128      <div className="flex gap-x-20 gap-y-12 max-xl:flex-col xl:items-center">
129        <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">
130          <div className="max-w-3xl">
131            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
132              {data.subHeading}
133            </p>
134            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
135              {data.title}
136            </h2>
137            <p className="mb-4 border-b border-slate-200 pb-4 text-lg text-slate-600 [text-wrap:balance]">
138              {data.paragraph}
139            </p>
140            <p className="text-lg italic text-slate-500 [text-wrap:balance]">
141              "{data.paragraph2}"
142            </p>
143          </div>
144        </div>
145        <div className="grid w-full grid-cols-1 gap-6 max-md:mx-2 md:my-3 md:grid-cols-2">
146          {data.items.map(
147            ({ name, description, button, Icon }, index: number) => {
148              return (
149                <div
150                  key={index}
151                  className="flex flex-col gap-y-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-md:odd:-translate-x-2 max-md:even:translate-x-2 md:odd:-translate-y-3 md:even:translate-y-3"
152                >
153                  <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
154                    <Icon className="h-full w-full fill-sky-600" />
155                  </div>
156                  <div className="flex grow flex-col justify-between gap-y-6">
157                    <div>
158                      <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
159                        {name}
160                      </p>
161                      <p className="text-base text-slate-600">{description}</p>
162                    </div>
163                    <Link
164                      href={button.link}
165                      className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"
166                    >
167                      {button.label}
168                      <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
169                    </Link>
170                  </div>
171                </div>
172              );
173            }
174          )}
175        </div>
176      </div>
177    </div>
178  );
179}
180

Elevate Your Brand

Take Your Brand's Presence to New Heights

Discover our comprehensive range of products and services to enhance your brand's online presence. Whether you're looking to create an account, explore our offerings, or seek a customized solution, we're here to help. Let us take your brand to new heights and connect with your audience effectively.

"I've had the pleasure of partnering with this team for our online branding needs, and I must say the experience has been transformative."

Intelligent Data Insights

Optimize your team's performance and drive business growth.

Learn more

Real-time Performance Tracking

Unlock intelligent data insights.

Explore features

Streamlined Team Collaboration

Streamline collaboration and enhance communication.

Get started

Robust Data Security

Ensure the security of your valuable data.

Begin your journey

Four-column simple

0import React from "react";
1
2const AnalyticsIcon = ({ 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
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
14      />
15    </svg>
16  );
17};
18
19const ChartIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
31      />
32      <path
33        fillRule="evenodd"
34        clipRule="evenodd"
35        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
36      />
37    </svg>
38  );
39};
40
41const PresentationIcon = ({ className }) => {
42  return (
43    <svg
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      preserveAspectRatio="xMidYMid meet"
47      className={className}
48    >
49      <path
50        fillRule="evenodd"
51        clipRule="evenodd"
52        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
53      />
54    </svg>
55  );
56};
57
58const BriefcaseIcon = ({ className }) => {
59  return (
60    <svg
61      xmlns="http://www.w3.org/2000/svg"
62      viewBox="0 0 24 24"
63      preserveAspectRatio="xMidYMid meet"
64      className={className}
65    >
66      <path
67        fillRule="evenodd"
68        clipRule="evenodd"
69        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
70      />
71      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
72    </svg>
73  );
74};
75
76const data = [
77  {
78    name: "Seamless Integrations",
79    description:
80      "Easily integrate with your favorite tools and services to streamline your workflow and enhance productivity.",
81    Icon: AnalyticsIcon,
82  },
83  {
84    name: "Mobile Accessibility",
85    description:
86      "Stay connected and manage your tasks on the go with our mobile-friendly platform and dedicated apps.",
87    Icon: ChartIcon,
88  },
89  {
90    name: "24/7 Customer Support",
91    description:
92      "Get round-the-clock support from our dedicated team to address any queries or issues you may have.",
93    Icon: PresentationIcon,
94  },
95  {
96    name: "Data Security",
97    description:
98      "Rest assured knowing your sensitive information is safeguarded with our robust data security measures.",
99    Icon: BriefcaseIcon,
100  },
101];
102
103export function FeatureSections6() {
104  return (
105    <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">
106      <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 xl:grid-cols-4">
107        {data.map(({ name, description, Icon }, index: number) => {
108          return (
109            <div
110              key={index}
111              className="flex max-w-sm flex-col items-center gap-y-5"
112            >
113              <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
114                <Icon className="h-full w-full fill-sky-600" />
115              </div>
116              <div className="text-center">
117                <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
118                  {name}
119                </p>
120                <p className="text-base text-slate-600 [text-wrap:balance]">
121                  {description}
122                </p>
123              </div>
124            </div>
125          );
126        })}
127      </div>
128    </div>
129  );
130}
131

Seamless Integrations

Easily integrate with your favorite tools and services to streamline your workflow and enhance productivity.

Mobile Accessibility

Stay connected and manage your tasks on the go with our mobile-friendly platform and dedicated apps.

24/7 Customer Support

Get round-the-clock support from our dedicated team to address any queries or issues you may have.

Data Security

Rest assured knowing your sensitive information is safeguarded with our robust data security measures.

Three-column centered

0import React from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
11    </svg>
12  );
13};
14
15const AnalyticsIcon = ({ className }) => {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      viewBox="0 0 24 24"
20      preserveAspectRatio="xMidYMid meet"
21      className={className}
22    >
23      <path
24        fillRule="evenodd"
25        clipRule="evenodd"
26        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
27      />
28    </svg>
29  );
30};
31
32const ChartIcon = ({ className }) => {
33  return (
34    <svg
35      xmlns="http://www.w3.org/2000/svg"
36      viewBox="0 0 24 24"
37      preserveAspectRatio="xMidYMid meet"
38      className={className}
39    >
40      <path
41        fillRule="evenodd"
42        clipRule="evenodd"
43        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
44      />
45      <path
46        fillRule="evenodd"
47        clipRule="evenodd"
48        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
49      />
50    </svg>
51  );
52};
53
54const PresentationIcon = ({ className }) => {
55  return (
56    <svg
57      xmlns="http://www.w3.org/2000/svg"
58      viewBox="0 0 24 24"
59      preserveAspectRatio="xMidYMid meet"
60      className={className}
61    >
62      <path
63        fillRule="evenodd"
64        clipRule="evenodd"
65        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
66      />
67    </svg>
68  );
69};
70
71const data = {
72  subHeading: "Empowering Your Success",
73  title: "Ignite Your Brand's Potential",
74  paragraph:
75    "At Jettwave, we are dedicated to making your brand shine in the digital realm. Our result-oriented approach combines organic digital strategies with a deep understanding of your brand and target audience.",
76  items: [
77    {
78      name: "Scalable Infrastructure",
79      description:
80        "Scale your operations seamlessly as your business grows, with our flexible and scalable infrastructure.",
81      button: { label: "Learn more", link: "#" },
82      Icon: AnalyticsIcon,
83    },
84    {
85      name: "Automated Workflows",
86      description:
87        "Automate repetitive tasks and streamline your workflows for increased efficiency and time savings.",
88      button: { label: "Explore features", link: "#" },
89      Icon: ChartIcon,
90    },
91    {
92      name: "Customizable Solutions",
93      description:
94        "Tailor our solutions to meet your specific business needs with customizable features and configurations.",
95      button: { label: "Customize Now", link: "#" },
96      Icon: PresentationIcon,
97    },
98  ],
99};
100
101export function FeatureSections7() {
102  return (
103    <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">
104      <div className="mx-auto mb-12 max-w-3xl text-center">
105        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
106          {data.subHeading}
107        </p>
108        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
109          {data.title}
110        </h2>
111        <p className="text-lg text-slate-600 [text-wrap:balance]">
112          {data.paragraph}
113        </p>
114      </div>
115      <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-3">
116        {data.items.map(
117          ({ name, description, button, Icon }, index: number) => {
118            return (
119              <div
120                key={index}
121                className="flex max-w-sm flex-col items-center gap-y-5"
122              >
123                <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
124                  <Icon className="h-full w-full fill-sky-600" />
125                </div>
126                <div className="flex grow flex-col justify-between gap-y-6">
127                  <div className="text-center">
128                    <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
129                      {name}
130                    </p>
131                    <p className="text-base text-slate-600 [text-wrap:balance]">
132                      {description}
133                    </p>
134                  </div>
135                  <Link
136                    href={button.link}
137                    className="group inline-flex items-center justify-center gap-x-0.5 whitespace-nowrap text-center text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"
138                  >
139                    {button.label}
140                    <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
141                  </Link>
142                </div>
143              </div>
144            );
145          }
146        )}
147      </div>
148    </div>
149  );
150}
151

Empowering Your Success

Ignite Your Brand's Potential

At Jettwave, we are dedicated to making your brand shine in the digital realm. Our result-oriented approach combines organic digital strategies with a deep understanding of your brand and target audience.

Scalable Infrastructure

Scale your operations seamlessly as your business grows, with our flexible and scalable infrastructure.

Learn more

Automated Workflows

Automate repetitive tasks and streamline your workflows for increased efficiency and time savings.

Explore features

Customizable Solutions

Tailor our solutions to meet your specific business needs with customizable features and configurations.

Customize Now

Three-column left-aligned

0import React from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
11    </svg>
12  );
13};
14
15const AnalyticsIcon = ({ className }) => {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      viewBox="0 0 24 24"
20      preserveAspectRatio="xMidYMid meet"
21      className={className}
22    >
23      <path
24        fillRule="evenodd"
25        clipRule="evenodd"
26        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
27      />
28    </svg>
29  );
30};
31
32const ChartIcon = ({ className }) => {
33  return (
34    <svg
35      xmlns="http://www.w3.org/2000/svg"
36      viewBox="0 0 24 24"
37      preserveAspectRatio="xMidYMid meet"
38      className={className}
39    >
40      <path
41        fillRule="evenodd"
42        clipRule="evenodd"
43        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
44      />
45      <path
46        fillRule="evenodd"
47        clipRule="evenodd"
48        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
49      />
50    </svg>
51  );
52};
53
54const PresentationIcon = ({ className }) => {
55  return (
56    <svg
57      xmlns="http://www.w3.org/2000/svg"
58      viewBox="0 0 24 24"
59      preserveAspectRatio="xMidYMid meet"
60      className={className}
61    >
62      <path
63        fillRule="evenodd"
64        clipRule="evenodd"
65        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
66      />
67    </svg>
68  );
69};
70
71const data = [
72  {
73    name: "Dedicated Customer Support",
74    description:
75      "Receive dedicated customer support from our knowledgeable team whenever you need assistance.",
76    button: { label: "Learn more", link: "#" },
77    Icon: AnalyticsIcon,
78  },
79  {
80    name: "Flexible and Scalable Architecture",
81    description:
82      "Adapt and scale your architecture to meet the evolving needs of your growing business.",
83    button: { label: "Explore features", link: "#" },
84    Icon: ChartIcon,
85  },
86  {
87    name: "Workflow Automation",
88    description:
89      "Automate repetitive tasks and streamline your workflows for enhanced productivity and efficiency.",
90    button: { label: "Customize Now", link: "#" },
91    Icon: PresentationIcon,
92  },
93];
94
95export function FeatureSections8() {
96  return (
97    <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">
98      <div className="mx-auto grid w-fit grid-cols-1 gap-x-8 gap-y-12 xl:grid-cols-3">
99        {data.map(({ name, description, button, Icon }, index: number) => {
100          return (
101            <div key={index} className="flex max-w-sm gap-x-5">
102              <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
103                <Icon className="h-full w-full fill-sky-600" />
104              </div>
105              <div className="flex h-full flex-col justify-between gap-y-4">
106                <div>
107                  <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
108                    {name}
109                  </p>
110                  <p className="text-base text-slate-600">{description}</p>
111                </div>
112                <Link
113                  href={button.link}
114                  className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"
115                >
116                  {button.label}
117                  <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
118                </Link>
119              </div>
120            </div>
121          );
122        })}
123      </div>
124    </div>
125  );
126}
127

Dedicated Customer Support

Receive dedicated customer support from our knowledgeable team whenever you need assistance.

Learn more

Flexible and Scalable Architecture

Adapt and scale your architecture to meet the evolving needs of your growing business.

Explore features

Workflow Automation

Automate repetitive tasks and streamline your workflows for enhanced productivity and efficiency.

Customize Now

3x2 grid with overhead image

0import React from "react";
1
2const AnalyticsIcon = ({ 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
11        fillRule="evenodd"
12        clipRule="evenodd"
13        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
14      />
15    </svg>
16  );
17};
18
19const ChartIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      preserveAspectRatio="xMidYMid meet"
25      className={className}
26    >
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
31      />
32      <path
33        fillRule="evenodd"
34        clipRule="evenodd"
35        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
36      />
37    </svg>
38  );
39};
40
41const PresentationIcon = ({ className }) => {
42  return (
43    <svg
44      xmlns="http://www.w3.org/2000/svg"
45      viewBox="0 0 24 24"
46      preserveAspectRatio="xMidYMid meet"
47      className={className}
48    >
49      <path
50        fillRule="evenodd"
51        clipRule="evenodd"
52        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
53      />
54    </svg>
55  );
56};
57
58const BriefcaseIcon = ({ className }) => {
59  return (
60    <svg
61      xmlns="http://www.w3.org/2000/svg"
62      viewBox="0 0 24 24"
63      preserveAspectRatio="xMidYMid meet"
64      className={className}
65    >
66      <path
67        fillRule="evenodd"
68        clipRule="evenodd"
69        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
70      />
71      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
72    </svg>
73  );
74};
75
76const GlobeIcon = ({ className }) => {
77  return (
78    <svg
79      xmlns="http://www.w3.org/2000/svg"
80      viewBox="0 0 24 24"
81      preserveAspectRatio="xMidYMid meet"
82      className={className}
83    >
84      <path
85        fillRule="evenodd"
86        clipRule="evenodd"
87        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM6.262 6.072a8.25 8.25 0 1010.562-.766 4.5 4.5 0 01-1.318 1.357L14.25 7.5l.165.33a.809.809 0 01-1.086 1.085l-.604-.302a1.125 1.125 0 00-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 01-2.288 4.04l-.723.724a1.125 1.125 0 01-1.298.21l-.153-.076a1.125 1.125 0 01-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 01-.21-1.298L9.75 12l-1.64-1.64a6 6 0 01-1.676-3.257l-.172-1.03z"
88      />
89    </svg>
90  );
91};
92
93const CommisionIcon = ({ className }) => {
94  return (
95    <svg
96      xmlns="http://www.w3.org/2000/svg"
97      viewBox="0 0 24 24"
98      preserveAspectRatio="xMidYMid meet"
99      className={className}
100    >
101      <path d="M12 7.5C10.7574 7.5 9.75 8.50736 9.75 9.75C9.75 10.9926 10.7574 12 12 12C13.2426 12 14.25 10.9926 14.25 9.75C14.25 8.50736 13.2426 7.5 12 7.5Z" />
102      <path
103        fillRule="evenodd"
104        clipRule="evenodd"
105        d="M1.5 4.875C1.5 3.83947 2.33947 3 3.375 3H20.625C21.6605 3 22.5 3.83947 22.5 4.875V14.625C22.5 15.6605 21.6605 16.5 20.625 16.5H3.375C2.33947 16.5 1.5 15.6605 1.5 14.625V4.875ZM8.25 9.75C8.25 7.67893 9.92893 6 12 6C14.0711 6 15.75 7.67893 15.75 9.75C15.75 11.8211 14.0711 13.5 12 13.5C9.92893 13.5 8.25 11.8211 8.25 9.75ZM18.75 9C18.3358 9 18 9.33579 18 9.75V9.7575C18 10.1717 18.3358 10.5075 18.75 10.5075H18.7575C19.1717 10.5075 19.5075 10.1717 19.5075 9.7575V9.75C19.5075 9.33579 19.1717 9 18.7575 9H18.75ZM4.5 9.75C4.5 9.33579 4.83579 9 5.25 9H5.2575C5.67171 9 6.0075 9.33579 6.0075 9.75V9.7575C6.0075 10.1717 5.67171 10.5075 5.2575 10.5075H5.25C4.83579 10.5075 4.5 10.1717 4.5 9.7575V9.75Z"
106      />
107      <path d="M2.25 18C1.83579 18 1.5 18.3358 1.5 18.75C1.5 19.1642 1.83579 19.5 2.25 19.5C7.65005 19.5 12.8802 20.2222 17.8498 21.5749C19.0404 21.899 20.25 21.0168 20.25 19.7551V18.75C20.25 18.3358 19.9142 18 19.5 18H2.25Z" />
108    </svg>
109  );
110};
111
112const data = {
113  subHeading: "Results-Oriented Approach",
114  title: "Gain more insight into how people use your software",
115  paragraph:
116    "With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.",
117  items: [
118    {
119      name: "Customizable Templates",
120      description:
121        "Create unique designs with our extensive collection of customizable templates tailored to your specific needs.",
122      Icon: AnalyticsIcon,
123    },
124    {
125      name: "Real-time Collaboration",
126      description:
127        "Collaborate seamlessly with your team in real-time, enabling efficient communication and shared decision-making.",
128      Icon: ChartIcon,
129    },
130    {
131      name: "Automated Workflows",
132      description:
133        "Streamline your workflows and save time with automated processes that simplify repetitive tasks.",
134      Icon: PresentationIcon,
135    },
136    {
137      name: "Intuitive User Interface",
138      description:
139        "Enjoy a user-friendly and intuitive interface that makes navigating our platform effortless and enjoyable.",
140      Icon: BriefcaseIcon,
141    },
142    {
143      name: "Scalable Infrastructure",
144      description:
145        "Rely on our robust and scalable infrastructure to support your growing business needs without compromising performance.",
146      Icon: GlobeIcon,
147    },
148    {
149      name: "Advanced Analytics",
150      description:
151        "Gain valuable insights and make data-driven decisions with our advanced analytics capabilities and reporting tools.",
152      Icon: CommisionIcon,
153    },
154  ],
155};
156
157export function FeatureSections9() {
158  return (
159    <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">
160      <div className="mb-12 grid grid-cols-1 gap-x-20 gap-y-12 md:grid-cols-2">
161        <div className="max-w-3xl">
162          <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
163            {data.subHeading}
164          </p>
165          <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
166            {data.title}
167          </h2>
168          <p className="text-lg text-slate-600 [text-wrap:balance]">
169            {data.paragraph}
170          </p>
171        </div>
172        <div className="relative mt-6 max-md:mr-6 md:max-lg:ml-6">
173          <div className="absolute inset-0 h-full max-h-[320px] w-full -translate-y-6 translate-x-6 rounded-3xl bg-slate-200 md:-translate-x-6 lg:-translate-x-10" />
174          <div className="relative h-full max-h-[320px] w-full overflow-hidden rounded-3xl">
175            <img
176              src="https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
177              alt=""
178              onError={(e) => {
179                const image = e.target as HTMLImageElement;
180                image.src = "onerrorimg";
181              }}
182              className="h-full w-full object-cover"
183            />
184          </div>
185        </div>
186      </div>
187      <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
188        {data.items.map(({ name, description, Icon }, index: number) => {
189          return (
190            <div key={index} className="flex flex-col gap-y-5">
191              <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
192                <Icon className="h-full w-full fill-sky-600" />
193              </div>
194              <div>
195                <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
196                  {name}
197                </p>
198                <p className="text-base text-slate-600">{description}</p>
199              </div>
200            </div>
201          );
202        })}
203      </div>
204    </div>
205  );
206}
207

Results-Oriented Approach

Gain more insight into how people use your software

With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.

Customizable Templates

Create unique designs with our extensive collection of customizable templates tailored to your specific needs.

Real-time Collaboration

Collaborate seamlessly with your team in real-time, enabling efficient communication and shared decision-making.

Automated Workflows

Streamline your workflows and save time with automated processes that simplify repetitive tasks.

Intuitive User Interface

Enjoy a user-friendly and intuitive interface that makes navigating our platform effortless and enjoyable.

Scalable Infrastructure

Rely on our robust and scalable infrastructure to support your growing business needs without compromising performance.

Advanced Analytics

Gain valuable insights and make data-driven decisions with our advanced analytics capabilities and reporting tools.

3x2 card layout

0import React, { FC, ReactElement } from "react";
1
2const AnalyticsIcon: FC<{ className: string }> = ({
3  className,
4}): ReactElement => {
5  return (
6    <svg
7      xmlns="http://www.w3.org/2000/svg"
8      viewBox="0 0 24 24"
9      preserveAspectRatio="xMidYMid meet"
10      className={className}
11    >
12      <path
13        fillRule="evenodd"
14        clipRule="evenodd"
15        d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
16      />
17    </svg>
18  );
19};
20
21const ChartIcon: FC<{ className: string }> = ({ className }): ReactElement => {
22  return (
23    <svg
24      xmlns="http://www.w3.org/2000/svg"
25      viewBox="0 0 24 24"
26      preserveAspectRatio="xMidYMid meet"
27      className={className}
28    >
29      <path
30        fillRule="evenodd"
31        clipRule="evenodd"
32        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
33      />
34      <path
35        fillRule="evenodd"
36        clipRule="evenodd"
37        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
38      />
39    </svg>
40  );
41};
42
43const PresentationIcon: FC<{ className: string }> = ({
44  className,
45}): ReactElement => {
46  return (
47    <svg
48      xmlns="http://www.w3.org/2000/svg"
49      viewBox="0 0 24 24"
50      preserveAspectRatio="xMidYMid meet"
51      className={className}
52    >
53      <path
54        fillRule="evenodd"
55        clipRule="evenodd"
56        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
57      />
58    </svg>
59  );
60};
61
62const BriefcaseIcon: FC<{ className: string }> = ({
63  className,
64}): ReactElement => {
65  return (
66    <svg
67      xmlns="http://www.w3.org/2000/svg"
68      viewBox="0 0 24 24"
69      preserveAspectRatio="xMidYMid meet"
70      className={className}
71    >
72      <path
73        fillRule="evenodd"
74        clipRule="evenodd"
75        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
76      />
77      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
78    </svg>
79  );
80};
81
82const GlobeIcon: FC<{ className: string }> = ({ className }): ReactElement => {
83  return (
84    <svg
85      xmlns="http://www.w3.org/2000/svg"
86      viewBox="0 0 24 24"
87      preserveAspectRatio="xMidYMid meet"
88      className={className}
89    >
90      <path
91        fillRule="evenodd"
92        clipRule="evenodd"
93        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM6.262 6.072a8.25 8.25 0 1010.562-.766 4.5 4.5 0 01-1.318 1.357L14.25 7.5l.165.33a.809.809 0 01-1.086 1.085l-.604-.302a1.125 1.125 0 00-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 01-2.288 4.04l-.723.724a1.125 1.125 0 01-1.298.21l-.153-.076a1.125 1.125 0 01-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 01-.21-1.298L9.75 12l-1.64-1.64a6 6 0 01-1.676-3.257l-.172-1.03z"
94      />
95    </svg>
96  );
97};
98
99const CommisionIcon: FC<{ className: string }> = ({
100  className,
101}): ReactElement => {
102  return (
103    <svg
104      xmlns="http://www.w3.org/2000/svg"
105      viewBox="0 0 24 24"
106      preserveAspectRatio="xMidYMid meet"
107      className={className}
108    >
109      <path d="M12 7.5C10.7574 7.5 9.75 8.50736 9.75 9.75C9.75 10.9926 10.7574 12 12 12C13.2426 12 14.25 10.9926 14.25 9.75C14.25 8.50736 13.2426 7.5 12 7.5Z" />
110      <path
111        fillRule="evenodd"
112        clipRule="evenodd"
113        d="M1.5 4.875C1.5 3.83947 2.33947 3 3.375 3H20.625C21.6605 3 22.5 3.83947 22.5 4.875V14.625C22.5 15.6605 21.6605 16.5 20.625 16.5H3.375C2.33947 16.5 1.5 15.6605 1.5 14.625V4.875ZM8.25 9.75C8.25 7.67893 9.92893 6 12 6C14.0711 6 15.75 7.67893 15.75 9.75C15.75 11.8211 14.0711 13.5 12 13.5C9.92893 13.5 8.25 11.8211 8.25 9.75ZM18.75 9C18.3358 9 18 9.33579 18 9.75V9.7575C18 10.1717 18.3358 10.5075 18.75 10.5075H18.7575C19.1717 10.5075 19.5075 10.1717 19.5075 9.7575V9.75C19.5075 9.33579 19.1717 9 18.7575 9H18.75ZM4.5 9.75C4.5 9.33579 4.83579 9 5.25 9H5.2575C5.67171 9 6.0075 9.33579 6.0075 9.75V9.7575C6.0075 10.1717 5.67171 10.5075 5.2575 10.5075H5.25C4.83579 10.5075 4.5 10.1717 4.5 9.7575V9.75Z"
114      />
115      <path d="M2.25 18C1.83579 18 1.5 18.3358 1.5 18.75C1.5 19.1642 1.83579 19.5 2.25 19.5C7.65005 19.5 12.8802 20.2222 17.8498 21.5749C19.0404 21.899 20.25 21.0168 20.25 19.7551V18.75C20.25 18.3358 19.9142 18 19.5 18H2.25Z" />
116    </svg>
117  );
118};
119
120interface FeatureItem {
121  name: string;
122  description: string;
123  Icon: FC<{ className: string }>;
124}
125
126interface FeatureData {
127  subHeading: string;
128  title: string;
129  paragraph: string;
130  items: FeatureItem[];
131}
132
133const data: FeatureData = {
134  subHeading: "Empower Your Brand's Journey",
135  title: "Unleash the Power of Digital Success",
136  paragraph:
137    "Let Jettwave be your partner in making your brand shine. Our expertise lies in delivering result-oriented outcomes through an organic digital approach. Join us on this transformative journey and witness the remarkable success of your brand.",
138  items: [
139    {
140      name: "Efficient Project Management",
141      description:
142        "Streamline your project management process and keep track of tasks, deadlines, and progress with ease.",
143      Icon: AnalyticsIcon,
144    },
145    {
146      name: "Seamless Communication",
147      description:
148        "Facilitate smooth communication within your team and with clients through integrated messaging and collaboration tools.",
149      Icon: ChartIcon,
150    },
151    {
152      name: "Intelligent Automation",
153      description:
154        "Automate repetitive and time-consuming tasks to improve productivity and free up valuable time for more important work.",
155      Icon: PresentationIcon,
156    },
157    {
158      name: "Enhanced Security Measures",
159      description:
160        "Ensure the safety and confidentiality of your data with advanced security features and robust privacy protocols.",
161      Icon: BriefcaseIcon,
162    },
163    {
164      name: "Flexible Customization Options",
165      description:
166        "Tailor the platform to your specific needs with customizable features, layouts, and branding elements.",
167      Icon: GlobeIcon,
168    },
169    {
170      name: "Comprehensive Reporting",
171      description:
172        "Access comprehensive reports and analytics to gain valuable insights into your business performance and make informed decisions.",
173      Icon: CommisionIcon,
174    },
175  ],
176};
177
178export const FeatureSections10: FC<{}> = (): ReactElement => {
179  return (
180    <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">
181      <div className="mx-auto mb-12 max-w-3xl text-center">
182        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
183          {data.subHeading}
184        </p>
185        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
186          {data.title}
187        </h2>
188        <p className="text-lg text-slate-600 [text-wrap:balance]">
189          {data.paragraph}
190        </p>
191      </div>
192      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
193        {data.items.map(
194          (
195            { name, description, Icon }: FeatureItem,
196            index: number
197          ): ReactElement => {
198            return (
199              <div
200                key={index}
201                className="flex flex-col items-center gap-y-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"
202              >
203                <div className="m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl  border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
204                  <Icon className="h-full w-full fill-sky-600" />
205                </div>
206                <div className="text-center">
207                  <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
208                    {name}
209                  </p>
210                  <p className="text-base text-slate-600 [text-wrap:balance]">
211                    {description}
212                  </p>
213                </div>
214              </div>
215            );
216          }
217        )}
218      </div>
219    </div>
220  );
221};
222

Empower Your Brand's Journey

Unleash the Power of Digital Success

Let Jettwave be your partner in making your brand shine. Our expertise lies in delivering result-oriented outcomes through an organic digital approach. Join us on this transformative journey and witness the remarkable success of your brand.

Efficient Project Management

Streamline your project management process and keep track of tasks, deadlines, and progress with ease.

Seamless Communication

Facilitate smooth communication within your team and with clients through integrated messaging and collaboration tools.

Intelligent Automation

Automate repetitive and time-consuming tasks to improve productivity and free up valuable time for more important work.

Enhanced Security Measures

Ensure the safety and confidentiality of your data with advanced security features and robust privacy protocols.

Flexible Customization Options

Tailor the platform to your specific needs with customizable features, layouts, and branding elements.

Comprehensive Reporting

Access comprehensive reports and analytics to gain valuable insights into your business performance and make informed decisions.

Horizontal layout alternating

0import React from "react";
1import Link from "next/link";
2
3const AnalyticsIcon = ({ 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 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" />
12    </svg>
13  );
14};
15
16const ChartIcon = ({ className }) => {
17  return (
18    <svg
19      xmlns="http://www.w3.org/2000/svg"
20      viewBox="0 0 24 24"
21      preserveAspectRatio="xMidYMid meet"
22      className={className}
23    >
24      <path
25        fillRule="evenodd"
26        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
27        clipRule="evenodd"
28      />
29      <path
30        fillRule="evenodd"
31        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
32        clipRule="evenodd"
33      />
34    </svg>
35  );
36};
37
38const PresentationIcon = ({ className }) => {
39  return (
40    <svg
41      xmlns="http://www.w3.org/2000/svg"
42      viewBox="0 0 24 24"
43      preserveAspectRatio="xMidYMid meet"
44      className={className}
45    >
46      <path
47        fillRule="evenodd"
48        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
49        clipRule="evenodd"
50      />
51    </svg>
52  );
53};
54
55const data = [
56  {
57    name: "Real-time Performance Tracking",
58    description:
59      "Promote seamless collaboration and knowledge sharing within your team by securely sharing data and insights. Break down communication barriers and facilitate cross-functional cooperation.",
60    link: { title: "Learn More", href: "#" },
61    Icon: AnalyticsIcon,
62  },
63  {
64    name: "Collaborative Data Sharing",
65    description:
66      "Effortlessly track and monitor your busines in real-time, empowering you to make data-driven decisions with confidence.",
67    link: { title: "Discover Automation", href: "#" },
68    Icon: ChartIcon,
69  },
70  {
71    name: "Data Security and Privacy",
72    description:
73      "Prioritize the security and privacy of your data with robust encryption and access controls.",
74    link: { title: "Customize Now", href: "#" },
75    Icon: PresentationIcon,
76  },
77];
78
79export function FeatureSections11() {
80  return (
81    <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
82      <div className="group grid grid-cols-1 divide-y divide-slate-200">
83        {data.map(({ Icon, name, description, link }, index: number) => {
84          return (
85            <div
86              key={index}
87              className="flex w-full gap-x-6 gap-y-4 py-8 even:text-right max-sm:flex-col max-sm:even:items-end sm:items-center sm:even:flex-row-reverse"
88            >
89              <Icon className="h-12 w-12 flex-shrink-0 rounded-full bg-sky-400/25 fill-sky-600 p-3 sm:h-32 sm:w-32 sm:p-8" />
90
91              <div className="max-w-2xl">
92                <h3 className="mb-2 text-xl font-bold capitalize text-slate-900">
93                  {name}
94                </h3>
95                <p className="mb-4 text-base text-slate-600">{description}</p>
96
97                <Link
98                  href={link.href}
99                  className="text-base font-semibold text-sky-600"
100                >
101                  {link.title} {">"}
102                </Link>
103              </div>
104            </div>
105          );
106        })}
107      </div>
108    </div>
109  );
110}
111

Real-time Performance Tracking

Promote seamless collaboration and knowledge sharing within your team by securely sharing data and insights. Break down communication barriers and facilitate cross-functional cooperation.

Learn More >

Collaborative Data Sharing

Effortlessly track and monitor your busines in real-time, empowering you to make data-driven decisions with confidence.

Discover Automation >

Data Security and Privacy

Prioritize the security and privacy of your data with robust encryption and access controls.

Customize Now >

Four-column cards with transition

0import React from "react";
1
2const AnalyticsIcon = ({ 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="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" />
11    </svg>
12  );
13};
14
15const ChartIcon = ({ className }) => {
16  return (
17    <svg
18      xmlns="http://www.w3.org/2000/svg"
19      viewBox="0 0 24 24"
20      preserveAspectRatio="xMidYMid meet"
21      className={className}
22    >
23      <path
24        fillRule="evenodd"
25        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
26        clipRule="evenodd"
27      />
28      <path
29        fillRule="evenodd"
30        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
31        clipRule="evenodd"
32      />
33    </svg>
34  );
35};
36
37const PresentationIcon = ({ className }) => {
38  return (
39    <svg
40      xmlns="http://www.w3.org/2000/svg"
41      viewBox="0 0 24 24"
42      preserveAspectRatio="xMidYMid meet"
43      className={className}
44    >
45      <path
46        fillRule="evenodd"
47        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
48        clipRule="evenodd"
49      />
50    </svg>
51  );
52};
53
54const BriefcaseIcon = ({ className }) => {
55  return (
56    <svg
57      xmlns="http://www.w3.org/2000/svg"
58      viewBox="0 0 24 24"
59      preserveAspectRatio="xMidYMid meet"
60      className={className}
61    >
62      <path
63        fillRule="evenodd"
64        d="M7.5 5.25a3 3 0 013-3h3a3 3 0 013 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0112 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 017.5 5.455V5.25zm7.5 0v.09a49.488 49.488 0 00-6 0v-.09a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5zm-3 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
65        clipRule="evenodd"
66      />
67      <path d="M3 18.4v-2.796a4.3 4.3 0 00.713.31A26.226 26.226 0 0012 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 01-6.477-.427C4.047 21.128 3 19.852 3 18.4z" />
68    </svg>
69  );
70};
71
72const Triangle = ({ className }) => {
73  return (
74    <svg
75      xmlns="http://www.w3.org/2000/svg"
76      viewBox="0 0 500 500"
77      preserveAspectRatio="none"
78      className={className}
79    >
80      <path d="M500 0H0V500L500 0Z" />
81    </svg>
82  );
83};
84
85const data = {
86  subHeading: "Unleash the Power of Jettwave",
87  title: "Elevate Your Brand's Digital Presence",
88  paragraph:
89    "Discover the limitless possibilities with Jettwave. Our innovative solutions and strategic approach can propel your brand to new heights in the digital landscape. Get ready to leave a lasting impression and captivate your audience with Jettwave by your side.",
90  items: [
91  {
92    name: "Expert Analytics Support",
93    description:
94      "Get expert support and guidance to maximize the value of your analytics platform.",
95    Icon: AnalyticsIcon,
96  },
97  {
98    name: "Scalable Analytics Infrastructure",
99    description:
100      "Scale your analytics infrastructure to handle growing data volumes and user demands.",
101    Icon: ChartIcon,
102  },
103  {
104    name: "Automated Data Insights",
105    description:
106      "Automate data analysis to gain valuable insights and make data-driven decisions faster.",
107    Icon: PresentationIcon,
108  },
109  {
110    name: "Customizable Analytics Solutions",
111    description:
112      "Tailor your analytics solutions to meet your specific needs and requirements.",
113    Icon: BriefcaseIcon,
114  },
115]};
116
117export function FeatureSections12() {
118  return (
119    <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
120    <div className="mx-auto mb-12 max-w-3xl text-center">
121      <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
122        {data.subHeading}
123      </p>
124      <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
125        {data.title}
126      </h2>
127      <p className="text-lg text-slate-600 [text-wrap:balance]">
128        {data.paragraph}
129      </p>
130    </div>
131      <div className="relative">
132        <div className="mx-auto grid w-full max-w-md grid-cols-1 gap-4 px-4 sm:max-w-3xl sm:grid-cols-2 lg:max-w-5xl xl:max-w-[1440px] xl:grid-cols-4 xl:place-items-start">
133          <div className="absolute inset-0 -z-10 h-1/2 bg-sky-600 max-xl:hidden" />
134          <Triangle
135            className={
136              "absolute inset-0 -z-10 h-1/2 w-full fill-sky-600 sm:h-full xl:hidden"
137            }
138          />
139          {data.items.map(({ Icon, name, description }) => {
140            return (
141              <div
142                key={name}
143                className="flex flex-col gap-y-4 rounded-2xl border border-slate-200 bg-slate-100 p-6"
144              >
145                <Icon className="h-12 w-12 flex-shrink-0 rounded-lg bg-sky-400/25 fill-sky-600 p-3" />
146
147                <div>
148                  <h3 className="mb-2 text-xl font-bold capitalize text-slate-900">
149                    {name}
150                  </h3>
151                  <p className="text-base text-slate-600">{description}</p>
152                </div>
153              </div>
154            );
155          })}
156        </div>
157      </div>
158    </div>
159  );
160}
161

Unleash the Power of Jettwave

Elevate Your Brand's Digital Presence

Discover the limitless possibilities with Jettwave. Our innovative solutions and strategic approach can propel your brand to new heights in the digital landscape. Get ready to leave a lasting impression and captivate your audience with Jettwave by your side.

Expert Analytics Support

Get expert support and guidance to maximize the value of your analytics platform.

Scalable Analytics Infrastructure

Scale your analytics infrastructure to handle growing data volumes and user demands.

Automated Data Insights

Automate data analysis to gain valuable insights and make data-driven decisions faster.

Customizable Analytics Solutions

Tailor your analytics solutions to meet your specific needs and requirements.

Two-column with image and list

0import React from "react";
1
2const CheckmarkIcon = ({ 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
11        fillRule="evenodd"
12        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"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const data = [
20  {
21    name: "Customer Engagement Tools",
22    description:
23      "Enhance your customer engagement strategies with a comprehensive set of tools designed to foster meaningful interactions. Build stronger relationships, increase customer satisfaction, and drive loyalty through personalized experiences and targeted communication.",
24    image: {
25      src: "https://i.pinimg.com/originals/e1/c6/72/e1c672de0954214b11319bc31b9fa4c0.png",
26      altText: "Customer Engagement Tools",
27    },
28    list: [
29      "Personalize customer experiences for increased satisfaction",
30      "Deliver targeted communication to foster engagement",
31      "Drive customer loyalty and retention",
32    ],
33  },
34  {
35    name: "Workflow Optimization",
36    description:
37      "Simplify repetitive tasks, reduce manual errors, and increase productivity by automating key processes and creating seamless workflows tailored to your organization's unique needs.",
38    image: {
39      src: "https://peterdraw.studio/wp-content/uploads/2021/04/Fillow-Saas-Admin-Dashboard-UI-3.webp",
40      altText: "Workflow Optimization",
41    },
42    list: [
43      "Automate repetitive tasks for improved efficiency",
44      "Reduce manual errors and ensure accuracy",
45      "Streamline business processes and save time",
46    ],
47  },
48];
49
50export function FeatureSections13() {
51  return (
52    <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
53      <div className="mb-12 max-w-3xl">
54        <h2 className="mb-2 text-lg font-semibold text-sky-600">
55          Results-Oriented Approach
56        </h2>
57        <p className="text-4xl font-bold tracking-tight text-slate-900">
58          Gain more insight
59        </p>
60      </div>
61
62      <div className="grid grid-flow-col gap-x-16 gap-y-8 [grid-template-rows:repeat(6,auto)] sm:[grid-template-rows:repeat(3,auto)]">
63        {data.map(({ name, description, image, list }, index: number) => {
64          return (
65            <div key={index}>
66              <div className="group">
67                <h3 className="mb-2 text-xl font-bold capitalize text-sky-600 max-sm:group-even:mt-8">
68                  {name}
69                </h3>
70                <p className="text-base text-slate-600">{description}</p>
71              </div>
72              <img
73                className="aspect-[2/1] h-full w-full rounded-2xl bg-sky-100 object-cover"
74                alt={image.altText}
75                src={image.src}
76              />
77              <div className="flex flex-col gap-y-4">
78                {list.map((benefit, index2: number) => {
79                  return (
80                    <div key={index2} className="flex gap-x-2">
81                      <CheckmarkIcon className="h-6 w-6 flex-shrink-0 fill-sky-600" />
82
83                      <p className="text-base text-slate-600">{benefit}</p>
84                    </div>
85                  );
86                })}
87              </div>
88            </div>
89          );
90        })}
91      </div>
92    </div>
93  );
94}
95

Results-Oriented Approach

Gain more insight

Customer Engagement Tools

Enhance your customer engagement strategies with a comprehensive set of tools designed to foster meaningful interactions. Build stronger relationships, increase customer satisfaction, and drive loyalty through personalized experiences and targeted communication.

Personalize customer experiences for increased satisfaction

Deliver targeted communication to foster engagement

Drive customer loyalty and retention

Workflow Optimization

Simplify repetitive tasks, reduce manual errors, and increase productivity by automating key processes and creating seamless workflows tailored to your organization's unique needs.

Automate repetitive tasks for improved efficiency

Reduce manual errors and ensure accuracy

Streamline business processes and save time

Three-column with overhead image

0import React from "react";
1import Link from "next/link";
2
3const AnalyticsIcon = ({ 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 d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" />
12    </svg>
13  );
14};
15
16const ChartIcon = ({ className }) => {
17  return (
18    <svg
19      xmlns="http://www.w3.org/2000/svg"
20      viewBox="0 0 24 24"
21      preserveAspectRatio="xMidYMid meet"
22      className={className}
23    >
24      <path
25        fillRule="evenodd"
26        d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
27        clipRule="evenodd"
28      />
29      <path
30        fillRule="evenodd"
31        d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
32        clipRule="evenodd"
33      />
34    </svg>
35  );
36};
37
38const PresentationIcon = ({ className }) => {
39  return (
40    <svg
41      xmlns="http://www.w3.org/2000/svg"
42      viewBox="0 0 24 24"
43      preserveAspectRatio="xMidYMid meet"
44      className={className}
45    >
46      <path
47        fillRule="evenodd"
48        d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.54 15h6.42l.5 1.5H8.29l.5-1.5zm8.085-8.995a.75.75 0 10-.75-1.299 12.81 12.81 0 00-3.558 3.05L11.03 8.47a.75.75 0 00-1.06 0l-3 3a.75.75 0 101.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 001.146-.102 11.312 11.312 0 013.612-3.321z"
49        clipRule="evenodd"
50      />
51    </svg>
52  );
53};
54
55const data = [
56  {
57    name: "Sales Performance Analysis",
58    description:
59      "Gain valuable insights into your sales performance in real-time.",
60    Icon: AnalyticsIcon,
61  },
62  {
63    name: "Team Collaboration Platform",
64    description:
65      "Foster cross-functional cooperation for improved productivity and efficiency.",
66    Icon: ChartIcon,
67  },
68  {
69    name: "Data Privacy Compliance",
70    description:
71      "Implement policies to safeguard sensitive information and meet regulatory requirements.",
72    Icon: PresentationIcon,
73  },
74];
75
76export function FeatureSections14() {
77  return (
78    <div className="overflow-hidden">
79      <div className="mx-auto w-full max-w-md px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
80        <div className="mb-12 grid grid-cols-1 gap-x-16 gap-y-12 md:grid-cols-2">
81          <div className="flex max-w-3xl flex-col gap-y-6">
82            <div>
83              <h2 className="mb-2 text-lg font-semibold text-sky-600">
84                Results-Oriented Approach
85              </h2>
86              <p className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
87                Gain Deeper Insights into User Behavior
88              </p>
89              <p className="text-lg text-slate-600">
90                Our powerful analytics capabilities allow you to track user
91                interactions, identify usage patterns, and understand customer
92                behavior. Gain a competitive edge by gaining deeper insights
93                into user behavior and unlocking the full potential of your
94                software.
95              </p>
96            </div>
97
98            <Link
99              href="#"
100              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"
101            >
102              start now
103            </Link>
104          </div>
105
106          {/* image testing
107          https://unitedentertain.com/wp-content/uploads/2021/12/united-entertain-Display_50-1024x730.png
108          https://2bbd1a7fd9.cbaul-cdnwnd.com/2faabf547e6b6e2b2ca6146a95f9e37b/200000049-db7eddc752/cube.png?ph=2bbd1a7fd9 
109          https://miro.medium.com/v2/resize:fit:1400/1*cJE_PCGk68zKseYlrb7eVw.png
110          https://static.vecteezy.com/system/resources/previews/012/794/016/original/3d-illustration-of-add-image-on-ui-design-view-png.png
111          https://lookinar.com/wp-content/uploads/2020/03/cosmo-2.png
112          https://cdn3d.iconscout.com/3d/premium/thumb/designer-picking-colors-5984575-4971245.png
113          https://cdn3d.iconscout.com/3d/premium/thumb/web-ui-design-5984580-4971250.png?f=webp
114          https://cdn3d.iconscout.com/3d/premium/thumb/web-developer-team-6230318-5107142.png
115          https://cdn3d.iconscout.com/3d/premium/thumb/write-content-on-seo-8192972-6594597.png
116          https://static.vecteezy.com/system/resources/previews/009/418/804/original/analitics-3d-icon-illustration-for-your-website-user-interface-and-presentation-3d-render-illustration-free-png.png
117          */}
118
119          <div className="relative h-96 min-h-[320px] w-full lg:h-[105%]">
120            <img
121              src="https://static.vecteezy.com/system/resources/previews/009/418/804/original/analitics-3d-icon-illustration-for-your-website-user-interface-and-presentation-3d-render-illustration-free-png.png"
122              className="absolute inset-y-0 right-0 h-full w-full scale-110 object-contain max-md:left-0 max-md:mx-auto max-sm:min-w-[640px] max-sm:-translate-x-[18%] sm:object-scale-down md:origin-top md:scale-125 lg:origin-top-right lg:scale-105"
123            />
124          </div>
125        </div>
126
127        <div className="grid max-w-6xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 sm:max-lg:grid-rows-2 lg:grid-cols-3">
128          {data.map(({ Icon, name, description }, index: number) => {
129            return (
130              <div
131                key={index}
132                className="flex max-w-sm flex-col gap-y-4 sm:max-lg:last:col-span-2"
133              >
134                <Icon className="h-10 w-10 fill-sky-600" />
135                <div>
136                  <h3 className="mb-2 text-xl font-bold capitalize text-slate-900">
137                    {name}
138                  </h3>
139                  <p className="text-base text-slate-600">{description}</p>
140                </div>
141              </div>
142            );
143          })}
144        </div>
145      </div>
146    </div>
147  );
148}
149

Results-Oriented Approach

Gain Deeper Insights into User Behavior

Our powerful analytics capabilities allow you to track user interactions, identify usage patterns, and understand customer behavior. Gain a competitive edge by gaining deeper insights into user behavior and unlocking the full potential of your software.

start now

Sales Performance Analysis

Gain valuable insights into your sales performance in real-time.

Team Collaboration Platform

Foster cross-functional cooperation for improved productivity and efficiency.

Data Privacy Compliance

Implement policies to safeguard sensitive information and meet regulatory requirements.