97 lines
3.7 KiB
JavaScript
97 lines
3.7 KiB
JavaScript
import { counterItems } from "@/data/facts";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
export default function Achievements() {
|
|
return (
|
|
<section
|
|
className="achivements-section fix section-bg-2 section-padding bg-cover"
|
|
style={{ backgroundImage: 'url("/assets/img/achivements-bg-shape.png")' }}
|
|
>
|
|
<div className="container">
|
|
<div className="achivements-wrapper">
|
|
<div className="row g-4 justify-content-between">
|
|
<div className="col-xxl-6 col-xl-7 col-lg-8">
|
|
<div className="achivements-content">
|
|
<div className="section-title">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
ACHIVEMENTS
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<AnimatedText text="Let's Get Started We Are" /> <br />
|
|
<AnimatedText text="Now Constructing A Dream." />
|
|
</h2>
|
|
</div>
|
|
<p className="mt-3 mt-md-0 wow fadeInUp">
|
|
It is a long established fact that a reader will be distracted
|
|
the readable content of a page when looking at layout the
|
|
point of using lorem the is Ipsum less Xbuild normal
|
|
distribution of letters.
|
|
</p>
|
|
<div className="row">
|
|
{counterItems.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay={item.delay}
|
|
>
|
|
<div className="counter-items">
|
|
<div className="content">
|
|
<div
|
|
className="icon "
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Image
|
|
src={item.iconSrc}
|
|
style={{ objectFit: "contain" }}
|
|
width={36}
|
|
height={36}
|
|
alt="icon"
|
|
/>
|
|
</div>
|
|
<h2>
|
|
<span className="count">{item.count}</span>
|
|
{item.suffix}
|
|
</h2>
|
|
<p>{item.label}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-xxl-4 col-xl-5 col-lg-6 wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
<div className="achivements-image">
|
|
<Image
|
|
src="/assets/img/achivements-image.jpg"
|
|
width={373}
|
|
height={556}
|
|
alt="img"
|
|
/>
|
|
<div className="achivements-image-2 float-bob-y">
|
|
<Image
|
|
src="/assets/img/achivements-image-2.jpg"
|
|
width={238}
|
|
height={343}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|