2025-06-17 15:23:37 +08:00

52 lines
2.0 KiB
JavaScript

import ProgressCircle from "@/components/common/CircularProgress";
import { stats2 } from "@/data/progress";
import React from "react";
export default function Facts9() {
return (
<section id="snippet-8" className="section-frame overflow-hidden ">
<div
className="wrapper !bg-[#edf2fc] md:!mb-16 !mb-20"
style={{ borderRadius: "1rem" }}
>
<div className="container py-28">
<div className="flex flex-wrap mx-[-15px] !text-center">
<div className="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2 className="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">
Company Facts
</h2>
<h3 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 lg:!px-40 xl:!px-40">
Save your time and money by choosing our professional team.
</h3>
<div className="flex flex-wrap mx-[-15px] !mt-[-30px] !text-center">
{stats2.map((elm, i) => (
<div
key={i}
className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full"
>
<div
className={
"progressbar semi-circle relative w-[8.5rem] h-[4.25rem] m-[0_auto_1rem] " +
elm.color
}
>
<ProgressCircle max={elm.value} />
</div>
<h4>{elm.title}</h4>
<p className="!mb-0">{elm.description}</p>
</div>
))}
</div>
{/* /.row */}
</div>
{/* /column */}
</div>
{/* /.row */}
</div>
{/* /.container */}
</div>
{/* /.wrapper */}
</section>
);
}