Statistics

0import React from "react";
1
2const data = {
3  subHeading: "Exponential Growth",
4  title: "Harnessing the Power of Digital Transformation",
5  paragraph:
6    "Our dynamic team of tech visionaries and industry experts is dedicated to driving innovation and shaping the future of technology.",
7  image: {
8    src: "https://images.unsplash.com/photo-1584291527908-033f4d6542c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80",
9    alt: "",
10  },
11  items: [
12    {
13      stat: "$1 million",
14      name: "Track key metrics, analyze trends, and make informed decisions.",
15    },
16    {
17      stat: "5,000+",
18      name: "Transform complex data into intuitive visualizations.",
19    },
20    {
21      stat: "10+",
22      name: "Promote seamless collaboration among your team members.",
23    },
24    {
25      stat: "95%",
26      name: "Communicate your achievements and progress effectively.",
27    },
28  ],
29};
30
31export function Statistics1() {
32  return (
33    <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">
34      <div className="grid grid-cols-1 gap-x-20 gap-y-12 lg:grid-cols-2">
35        <div className="max-w-3xl">
36          <div className="mb-8">
37            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
38              {data.subHeading}
39            </p>
40            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
41              {data.title}
42            </h2>
43            <p className="text-lg text-slate-600">{data.paragraph}</p>
44          </div>
45          <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2">
46            {data.items.map(({ stat, name }, index: number) => {
47              return (
48                <div key={index}>
49                  <p className="mb-2 text-3xl font-bold text-slate-900">
50                    {stat}
51                  </p>
52                  <p className="text-base text-slate-600">{name}</p>
53                </div>
54              );
55            })}
56          </div>
57        </div>
58        <div className="relative w-full max-lg:h-96 lg:order-first">
59          <div className="h-full w-full overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 lg:absolute lg:inset-0">
60            <img
61              src={data.image.src}
62              alt={data.image.alt}
63              onError={(e) => {
64                const image = e.target as HTMLImageElement;
65                image.src = "onerrorimg";
66              }}
67              className="h-full w-full object-cover"
68            />
69          </div>
70        </div>
71      </div>
72    </div>
73  );
74}
75

0import React from "react";
1
2const data = {
3  subHeading: "Exponential Growth",
4  title: "The Power of Digital Transformation",
5  paragraph:
6    "Our dynamic team of tech visionaries and industry experts is dedicated to driving innovation and shaping the future of technology.",
7  items: [
8    {
9      stat: "$1 million",
10      name: "Track key metrics, analyze trends, and make informed decisions.",
11    },
12    {
13      stat: "5,000+",
14      name: "Transform complex data into intuitive visualizations.",
15    },
16    {
17      stat: "10+",
18      name: "Promote seamless collaboration among your team members.",
19    },
20    {
21      stat: "95%",
22      name: "Communicate your achievements and progress effectively.",
23    },
24  ],
25};
26
27export function Statistics2() {
28  return (
29    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
30      <div className="mb-12 max-w-3xl max-sm:text-center">
31        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
32          {data.subHeading}
33        </p>
34        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
35          {data.title}
36        </h2>
37        <p className="text-lg text-slate-600 [text-wrap:balance]">
38          {data.paragraph}
39        </p>
40      </div>
41      <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
42        {data.items.map(({ stat, name }, index: number) => {
43          return (
44            <div key={index} className="max-sm:text-center">
45              <p className="mb-2 text-3xl font-bold text-sky-600">
46                {stat}
47              </p>
48              <p className="text-base text-slate-600 [text-wrap:balance]">
49                {name}
50              </p>
51            </div>
52          );
53        })}
54      </div>
55    </div>
56  );
57}
58

0import React from "react";
1
2const data = {
3  subHeading: "Valuable Metrics",
4  title: "Embrace the Power of Data",
5  paragraph1:
6    "We provide comprehensive data management and analysis services to businesses of all sizes. From transaction volumes to credit card processor utilization, we offer real-time visibility into key metrics that matter most to your success.",
7  paragraph2:
8    "Unlock valuable insights and drive business growth with data-driven solutions. Our team of experts leverages advanced analytics and cutting-edge technology to help you make informed decisions and stay ahead of the competition.",
9  image: {
10    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",
11    alt: "",
12  },
13  items: [
14    {
15      name: "Total Sales",
16      stat: "$1.5 million",
17    },
18
19    {
20      name: "Years of Experience",
21      stat: "20+",
22    },
23    {
24      name: "Website Traffic",
25      stat: "500,000",
26    },
27  ],
28};
29
30export function Statistics3() {
31  return (
32    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
33      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">
34        <div className="max-w-3xl">
35          <div className="mb-8 border-b border-slate-200 pb-8">
36            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
37              {data.subHeading}
38            </p>
39            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
40              {data.title}
41            </h2>
42            <p className="mb-4 text-lg text-slate-600">{data.paragraph1}</p>
43            <p className="text-lg text-slate-600">{data.paragraph2}</p>
44          </div>
45          <div className="flex flex-wrap justify-between gap-12">
46            {data.items.map(({ name, stat }, index: number) => {
47              return (
48                <div key={index}>
49                  <p className="mb-1.5 text-base font-medium text-sky-600">
50                    {name}
51                  </p>
52                  <p className="text-3xl font-bold text-slate-900">
53                    {stat}
54                  </p>
55                </div>
56              );
57            })}
58          </div>
59        </div>
60        <div className="sticky top-12 h-fit w-full shrink-0 overflow-hidden rounded-3xl border border-sky-200 ring-4 ring-sky-100 lg:order-first lg:max-w-xs xl:max-w-md">
61          <img
62            src={data.image.src}
63            alt={data.image.alt}
64            onError={(e) => {
65              const image = e.target as HTMLImageElement;
66              image.src = "onerrorimg";
67            }}
68            className="aspect-square h-full w-full object-cover"
69          />
70          <div className="absolute inset-0 bg-sky-600 mix-blend-color backdrop-brightness-50" />
71        </div>
72      </div>
73    </div>
74  );
75}
76

0import React from "react";
1
2const data = [
3  {
4    name: "Average Daily Sales",
5    value: "$10,000",
6  },
7
8  {
9    name: "Website Uptime",
10    value: "99.99%",
11  },
12  {
13    name: "Total Customers",
14    value: "350,000",
15  },
16];
17
18export function Statistics4() {
19  return (
20    <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">
21      <div className="mx-auto mb-12 max-w-3xl text-center">
22        <h2 className="mb-4 text-4xl font-bold tracking-tight text-slate-900">
23          Unleashing Innovation
24        </h2>
25        <p className="text-lg text-slate-600">
26          We actively harness the dynamic intellectual capital of others through
27          unique web services. Our commitment is to innovate methodologies.
28        </p>
29      </div>
30
31      <dl className="mx-auto grid w-fit grid-cols-1 place-items-center gap-x-6 gap-y-8 sm:grid-cols-2 sm:max-xl:gap-16 xl:min-w-[896px] xl:grid-cols-3">
32        {data.map(({ name, value }, index: number) => {
33          return (
34            <div key={index} className="flex w-full flex-col text-center">
35              <dt className="truncate text-lg text-slate-600">{name}</dt>
36              <dd className="order-first mb-4 truncate text-5xl font-semibold text-slate-900">
37                {value}
38              </dd>
39            </div>
40          );
41        })}
42      </dl>
43    </div>
44  );
45}
46

0import React from "react";
1
2const data = {
3  subHeading: "Exponential Growth",
4  title: "Harnessing the Power of Data",
5  paragraph:
6    "We firmly believe in the transformative potential of data. Through interactive utilization of dynamic intellectual capital and unique web services.",
7  items: [
8    {
9      stat: "$5.7 million",
10      name: "Total Revenue",
11    },
12    {
13      stat: "95%",
14      name: "Customer Satisfaction",
15    },
16    {
17      stat: "10,000+",
18      name: "Active Users",
19    },
20    {
21      stat: "50,000",
22      name: "Number of Downloads",
23    },
24  ],
25};
26
27export function Statistics5() {
28  return (
29    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
30      <div className="mx-auto mb-12 max-w-3xl text-center">
31        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
32          {data.subHeading}
33        </p>
34        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
35          {data.title}
36        </h2>
37        <p className="text-lg text-slate-600 [text-wrap:balance]">
38          {data.paragraph}
39        </p>
40      </div>
41      <div className="grid grid-cols-1 gap-[1px] overflow-hidden rounded-3xl border border-slate-200 bg-slate-200 ring-4 ring-slate-50 md:grid-cols-2 xl:grid-cols-4">
42        {data.items.map(({ stat, name }, index: number) => {
43          return (
44            <div key={index} className="bg-white px-6 py-10 text-center">
45              <p className="mb-3 text-4xl font-bold text-slate-900">{stat}</p>
46              <p className="text-lg text-slate-600 [text-wrap:balance]">
47                {name}
48              </p>
49            </div>
50          );
51        })}
52      </div>
53    </div>
54  );
55}
56

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
12        fillRule="evenodd"
13        clipRule="evenodd"
14        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"
15      />
16    </svg>
17  );
18};
19
20const ChartIcon = ({ className }) => {
21  return (
22    <svg
23      xmlns="http://www.w3.org/2000/svg"
24      viewBox="0 0 24 24"
25      preserveAspectRatio="xMidYMid meet"
26      className={className}
27    >
28      <path
29        fillRule="evenodd"
30        clipRule="evenodd"
31        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"
32      />
33      <path
34        fillRule="evenodd"
35        clipRule="evenodd"
36        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"
37      />
38    </svg>
39  );
40};
41
42const PresentationIcon = ({ className }) => {
43  return (
44    <svg
45      xmlns="http://www.w3.org/2000/svg"
46      viewBox="0 0 24 24"
47      preserveAspectRatio="xMidYMid meet"
48      className={className}
49    >
50      <path
51        fillRule="evenodd"
52        clipRule="evenodd"
53        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"
54      />
55    </svg>
56  );
57};
58
59const BriefcaseIcon = ({ className }) => {
60  return (
61    <svg
62      xmlns="http://www.w3.org/2000/svg"
63      viewBox="0 0 24 24"
64      preserveAspectRatio="xMidYMid meet"
65      className={className}
66    >
67      <path
68        fillRule="evenodd"
69        clipRule="evenodd"
70        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"
71      />
72      <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" />
73    </svg>
74  );
75};
76
77const data = {
78  title: "Boost Your Brand's Presence",
79  paragraph:
80    "Through our strategic and results-driven approach, we aim to transform your brand into a true success story. By effectively leveraging dynamic intellectual capital and providing unique web services.",
81  items: [
82    {
83      stat: "1.2 million",
84      name: "Monthly visitors",
85      Icon: AnalyticsIcon,
86    },
87    {
88      stat: "3.8%",
89      name: "Conversion rate",
90      Icon: ChartIcon,
91    },
92    {
93      stat: "50,000+",
94      name: "Social media followers",
95      Icon: PresentationIcon,
96    },
97    {
98      stat: "10,000",
99      name: "Email subscribers",
100      Icon: BriefcaseIcon,
101    },
102  ],
103  button: { label: "Learn more", link: "#" },
104};
105
106export function Statistics6() {
107  return (
108    <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">
109      <div className="flex gap-x-20 gap-y-12 max-xl:flex-col xl:items-center">
110        <div className="flex shrink-0 flex-col gap-y-6 xl:max-w-md">
111          <div className="max-w-3xl">
112            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
113              {data.title}
114            </h2>
115            <p className="text-lg text-slate-600 [text-wrap:balance]">
116              {data.paragraph}
117            </p>
118          </div>
119          <Link
120            role="button"
121            href={data.button.link}
122            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"
123          >
124            {data.button.label}
125          </Link>
126        </div>
127        <div className="grid w-full grid-cols-1 gap-6 max-md:mx-2 md:my-3 md:grid-cols-2">
128          {data.items.map(({ stat, name, Icon }, index: number) => {
129            return (
130              <div
131                key={index}
132                className="flex items-center gap-x-6 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"
133              >
134                <div className="m-1 h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-3 ring-4 ring-sky-100">
135                  <Icon className="h-full w-full fill-sky-600" />
136                </div>
137                <div className="w-full min-w-0">
138                  <p className="truncate text-3xl font-extrabold text-slate-900">
139                    {stat}
140                  </p>
141                  <p className="truncate text-base font-medium text-slate-600">
142                    {name}
143                  </p>
144                </div>
145              </div>
146            );
147          })}
148        </div>
149      </div>
150    </div>
151  );
152}
153

0import React from "react";
1
2const data = {
3  subHeading: "Our culture",
4  title: "Unleash Your Potential",
5  paragraph:
6    "Harness the power of dynamic intellectual capital through interactive utilization and unique web services. We are committed to conveniently innovating intermandated methodologies aligned with process-centric best practices.",
7  aside: {
8    name: "Embrace Diversity and Foster Inclusion for a Dynamic Workplace",
9    description:
10      "We believe in celebrating diversity and fostering inclusion within our organization. Our focus is on creating a dynamic workplace where everyone can thrive and contribute their unique perspectives. Through interactive utilization of dynamic intellectual capital and unique web services, we conveniently innovate intermandated methodologies to drive meaningful outcomes.",
11  },
12  items: [
13    {
14      stat: "10+",
15      name: "Promote seamless collaboration among your team members.",
16    },
17    {
18      stat: "95%",
19      name: "Communicate your achievements and progress effectively.",
20    },
21  ],
22};
23
24export function Statistics7() {
25  return (
26    <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">
27      <div className="flex gap-x-20 max-lg:flex-col">
28        <div className="max-w-3xl border-slate-200 max-lg:mb-8 max-lg:border-b max-lg:pb-8">
29          <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
30            {data.subHeading}
31          </p>
32          <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
33            {data.title}
34          </h2>
35          <p className="mb-8 text-lg text-slate-600">{data.paragraph}</p>
36
37          <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2">
38            {data.items.map(({ name, stat }, index: number) => {
39              return (
40                <div key={index}>
41                  <p className="mb-2 text-3xl font-bold text-sky-600">{stat}</p>
42                  <p className="text-base text-slate-600 [text-wrap:balance]">
43                    {name}
44                  </p>
45                </div>
46              );
47            })}
48          </div>
49        </div>
50        <div className="max-w-3xl lg:order-first lg:max-w-xs xl:max-w-sm">
51          <p className="mb-4 text-base text-slate-500">{data.aside.name}</p>
52          <p className="text-base text-slate-600 [text-wrap:balance]">
53            {data.aside.description}
54          </p>
55        </div>
56      </div>
57    </div>
58  );
59}
60

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: "Empowering Digital Presence",
91  title: "Accelerate Your Growth",
92  paragraph:
93    "With a collective passion for pushing boundaries and a relentless pursuit of excellence, our team stands at the forefront of cutting-edge advancements.",
94  items: [
95    {
96      stat: "1 Million",
97      name: "Years of Industry-Leading Expertise Providing Exceptional Services",
98      Icon: AnalyticsIcon,
99    },
100    {
101      stat: "500+",
102      name: "Countless Satisfied Clients Benefiting from Our Outstanding Solutions",
103      Icon: ChartIcon,
104    },
105    {
106      stat: "12,000",
107      name: "Achieving Millions+ of Impressive Results with Our Innovative Approach",
108      Icon: PresentationIcon,
109    },
110    {
111      stat: "10%",
112      name: "Global Presence in Over 50 Countries, Delivering Success Globally",
113      Icon: BriefcaseIcon,
114    },
115  ],
116  button1: { label: "Begin your journey", link: "#" },
117  button2: { label: "Visit our stat page", link: "#" },
118};
119
120export function Statistics8() {
121  return (
122    <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">
123      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col lg:items-center">
124        <div className="lg:max-w-xs xl:max-w-md">
125          <div className="mb-8 max-w-3xl border-b border-slate-200 pb-8">
126            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
127              {data.subHeading}
128            </p>
129            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
130              {data.title}
131            </h2>
132            <p className="text-lg text-slate-600 [text-wrap:balance]">
133              {data.paragraph}
134            </p>
135          </div>
136          <div className="flex flex-col gap-y-6">
137            <Link
138              href={data.button1.link}
139              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"
140            >
141              {data.button1.label}
142              <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
143            </Link>
144            <Link
145              href={data.button2.link}
146              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"
147            >
148              {data.button2.label}
149              <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
150            </Link>
151          </div>
152        </div>
153        <div className="grid w-full grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2">
154          {data.items.map(({ stat, name, Icon }, index: number) => {
155            return (
156              <div
157                key={index}
158                className="mx-auto flex w-full flex-col gap-y-5 max-lg:max-w-md"
159              >
160                <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">
161                  <Icon className="h-full w-full fill-sky-600" />
162                </div>
163                <div>
164                  <p className="mb-2 text-3xl font-bold text-slate-900">
165                    {stat}
166                  </p>
167                  <p className="text-base text-slate-600 [text-wrap:balance]">
168                    {name}
169                  </p>
170                </div>
171              </div>
172            );
173          })}
174        </div>
175      </div>
176    </div>
177  );
178}
179

0import React from "react";
1
2const data = {
3  subHeading: "Exponential Growth",
4  title: "Harnessing the Power of Data",
5  paragraph:
6    "We firmly believe in the transformative potential of data. Through interactive utilization of dynamic intellectual capital and unique web services.",
7  items: [
8    {
9      name: "Website Traffic",
10      stat: "10,000",
11      description: "Rapid Growth in Online Presence",
12    },
13    {
14      name: "Conversion Rate",
15      stat: "5%",
16      description: "High Rate of Converting Leads to Customers",
17    },
18    {
19      name: "Social Media followers",
20      stat: "20,000",
21      description: "Strong Audience Interaction and Participation",
22    },
23  ],
24};
25
26export function Statistics9() {
27  return (
28    <div className="pb-12">
29      <div className="w-full bg-slate-800 py-12">
30        <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">
31          <div className="mx-auto max-w-3xl text-center">
32            <p className="mb-1 truncate text-base sm:text-lg font-semibold capitalize text-sky-400">
33              {data.subHeading}
34            </p>
35            <h2 className="mb-4 text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-50 [text-wrap:balance]">
36              {data.title}
37            </h2>
38            <p className="text-base sm:text-lg text-slate-400 [text-wrap:balance]">
39              {data.paragraph}
40            </p>
41          </div>
42        </div>
43      </div>
44      <div className="relative isolate overflow-x-hidden">
45        <div className="absolute inset-x-0 top-0 -z-10 h-1/2 w-screen bg-slate-800" />
46        <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">
47          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
48            {data.items.map(({ name, stat, description }, index: number) => {
49              return (
50                <div
51                  key={index}
52                  className="m-1 mx-auto w-full rounded-3xl border border-sky-600 bg-slate-800 p-6 ring-4 ring-sky-900 max-lg:max-w-md"
53                >
54                  <p className="mb-1.5 text-base font-medium text-sky-400">
55                    {name}
56                  </p>
57                  <p className="mb-2 text-4xl font-bold text-slate-50">
58                    {stat}
59                  </p>
60                  <p className="text-slate-400 text-base [text-wrap:balance]">
61                    {description}
62                  </p>
63                </div>
64              );
65            })}
66          </div>
67        </div>
68      </div>
69    </div>
70  );
71}
72