128 lines
7.4 KiB
JavaScript
128 lines
7.4 KiB
JavaScript
import Counter from "@/components/common/Counter";
|
|
import React from "react";
|
|
|
|
export default function Facts1() {
|
|
return (
|
|
<section id="snippet-1" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
|
|
<div className="xl:w-6/12 lg:w-6/12 flex-[0_0_auto] xl:px-0 lg:px-0 !px-[15px] !mt-[50px] max-w-full xl:!order-2 xl:!ml-[8.33333333%] lg:!order-2 lg:!ml-[8.33333333%] grid">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] items-center counter-wrapper isotope">
|
|
<div className="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<div className="flex lg:block xl:!flex flex-row">
|
|
<div>
|
|
<div className="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mx-auto !mr-4 lg:!mb-3 xl:!mb-0 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
|
<i className="uil uil-presentation-check before:content-['\ec66']" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="counter !mb-1 xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none">
|
|
<Counter max={7518} />
|
|
</h3>
|
|
<p className="!mb-0">Projects Done</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<div className="flex lg:block xl:!flex flex-row">
|
|
<div>
|
|
<div className="icon btn btn-circle btn-lg btn-soft-red pointer-events-none !mx-auto !mr-4 lg:!mb-3 xl:!mb-0 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
|
<i className="uil uil-users-alt before:content-['\ed70']" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="counter !mb-1 xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none">
|
|
<Counter max={3472} />
|
|
</h3>
|
|
<p className="!mb-0">Happy Customers</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<div className="flex lg:block xl:!flex flex-row">
|
|
<div>
|
|
<div className="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mx-auto !mr-4 lg:!mb-3 xl:!mb-0 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
|
<i className="uil uil-user-check before:content-['\ed65']" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="counter !mb-1 xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none">
|
|
<Counter max={4537} />
|
|
</h3>
|
|
<p className="!mb-0">Expert Employees</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
|
|
<div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<div className="flex lg:block xl:!flex flex-row">
|
|
<div>
|
|
<div className="icon btn btn-circle btn-lg btn-soft-aqua pointer-events-none !mx-auto !mr-4 lg:!mb-3 xl:!mb-0 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
|
<i className="uil uil-trophy before:content-['\ed4f']" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="counter !mb-1 xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none">
|
|
<Counter max={2184} />
|
|
</h3>
|
|
<p className="!mb-0">Awards Won</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:px-0 lg:px-0 !px-[15px] !mt-[50px] max-w-full">
|
|
<h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">
|
|
Join Our Community
|
|
</h2>
|
|
<p className="lead !text-[1.05rem] !leading-[1.6] font-medium">
|
|
We have considered our business solutions to support you on every
|
|
stage of your growth.
|
|
</p>
|
|
<p className="!mb-0">
|
|
Integer posuere erat a ante venenatis dapibus posuere velit
|
|
aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at
|
|
eros. Praesent commodo cursus magna, vel scelerisque nisl
|
|
consectetur.
|
|
</p>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|