135 lines
7.2 KiB
JavaScript
135 lines
7.2 KiB
JavaScript
import Counter from "@/components/common/Counter";
|
|
import { facts } from "@/data/facts";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
export default function About2() {
|
|
return (
|
|
<section id="snippet-2" 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-[-35px] lg:mx-[-20px] !mt-[-70px] items-center">
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[70px] !relative">
|
|
<div
|
|
className="btn btn-circle btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] pointer-events-none !absolute counter-wrapper flex-col max-md:!hidden xl:!flex lg:!flex md:!flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] z-10"
|
|
style={{
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 170,
|
|
height: 170,
|
|
}}
|
|
>
|
|
<h3 className="!text-white !mb-1 !mt-[-0.5rem] relative z-[3]">
|
|
<span className="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] leading-none !mb-2 xl:!text-[2.2rem] ">
|
|
<Counter max={20} />+
|
|
</span>
|
|
</h3>
|
|
<p className="!text-[0.8rem] font-medium !mb-0">
|
|
Year Experience
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap mx-[-12.5px] !mt-[-25px] items-center">
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
|
|
<div className="xl:w-10/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[16.66666667%] md:w-10/12 md:!ml-[16.66666667%] w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
className="rounded-[0.4rem]"
|
|
srcSet="/assets/img/photos/ab1@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/ab1.jpg"
|
|
width="240"
|
|
height="245"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
className="rounded-[0.4rem]"
|
|
srcSet="/assets/img/photos/ab2@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/ab2.jpg"
|
|
width="290"
|
|
height="225"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !mt-[25px]">
|
|
<figure className="rounded-[0.4rem]">
|
|
<Image
|
|
className="rounded-[0.4rem]"
|
|
srcSet="/assets/img/photos/ab3@2x.jpg 2x"
|
|
alt="image"
|
|
src="/assets/img/photos/ab3.jpg"
|
|
width="290"
|
|
height="440"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 390.3"
|
|
data-inject-url="https://jsite.jingrow.com/assets/img/icons/lineal/handshake.svg"
|
|
className="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4"
|
|
>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M508.4 133.5L378.5 3.7c-4.9-4.9-12.8-4.9-17.6 0l-73.1 73.1-14.4-14.4c-4.9-4.9-12.8-4.9-17.6 0l-22.9 22.9-81.8-81.6c-4.9-4.9-12.8-4.9-17.6 0L3.7 133.5c-4.9 4.9-4.9 12.8 0 17.6L85.6 233c4.9 4.9 12.8 4.9 17.6 0l52.1-52.1 26.5 26.5c.3.3.6.6 1 .9 5 4 12.2 3.7 16.7-.9L256 151l120.7 120.6-13 13-103.6-103.4c-4.9-4.9-12.8-4.9-17.6 0-.3.3-.6.6-.9 1-4 5-3.7 12.2.9 16.7l123.8 123.8-13 13-123.8-123.9c-5-4.7-12.9-4.6-17.6.4-4.6 4.8-4.6 12.4 0 17.2L315.3 333l-13 13-7.7-7.7-95.9-95.8c-4.5-4.5-11.7-4.9-16.7-.9-.4.3-.7.5-1 .9-1.2 1.2-2.1 2.6-2.7 4.1-.3.7-.5 1.5-.7 2.3-.1.4-.1.8-.2 1.2-.4 3.7 1 7.4 3.6 10l43.5 43.5 43.5 43.5-13 13-115-115c-4.9-4.9-12.8-4.9-17.6 0-4.9 4.9-4.9 12.8 0 17.6l123.8 123.9c4.9 4.9 12.8 4.9 17.6 0l21.9-21.9 7.7 7.7c4.8 4.9 12.7 4.9 17.6 0l21.9-21.9 11.5 11.5c4.9 4.9 12.8 4.9 17.6 0l30.7-30.7c4.9-4.9 4.9-12.8 0-17.6l-11.5-11.5 21.9-21.9c4.9-4.9 4.9-12.8 0-17.6L264.8 124.5c-4.9-4.9-12.8-4.9-17.6 0l-56.6 56.6-9.2-9.2 83.1-83.1 14.4 14.4 3.1 3.2.4.4 126.3 126.3c4.9 4.9 12.8 4.9 17.6 0l81.9-81.9c5-4.9 5-12.8.2-17.7z"
|
|
/>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M30.106 142.324L142.323 30.107 206.6 94.382 94.382 206.6zm275.29-47.939l64.276-64.276 112.216 112.217-64.275 64.276z"
|
|
/>
|
|
</svg>
|
|
<h3 className="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-5">
|
|
We are a creative company that focuses on establishing long-term
|
|
relationships with customers.
|
|
</h3>
|
|
<p className="!mb-7">
|
|
Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum
|
|
nulla sed consectetur. Integer posuere erat a ante venenatis
|
|
dapibus posuere velit aliquet. Vestibulum id ligula porta felis
|
|
euismod semper. Vestibulum id ligula.
|
|
</p>
|
|
<div className="flex flex-wrap mx-[-15px] counter-wrapper !mt-[-30px]">
|
|
{facts.slice(0, 3).map((elm, i) => (
|
|
<div
|
|
key={i}
|
|
className="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"
|
|
>
|
|
<h3 className="counter !text-[#1fc76f] xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">
|
|
<Counter max={7518} />
|
|
</h3>
|
|
<p className="!text-[0.8rem] font-medium !mb-0">
|
|
{elm.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|