97 lines
4.3 KiB
TypeScript
97 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface BusinessStatsSectionProps {
|
|
className?: string;
|
|
}
|
|
|
|
const statsData = [
|
|
{
|
|
heading: "۱۵+",
|
|
label: "سال تجربه تخصصی",
|
|
text: "تجربه مستمر در طراحی و تولید استند و دکور ویترین ویژه صنف طلا و جواهر.",
|
|
},
|
|
{
|
|
heading: "۳۵۰+",
|
|
label: "پروژه اجراشده",
|
|
text: "همکاری با طلافروشی هایی که دنبال ویترین منظم، حرفه ای و تاثیرگذار برای جذب مشتری هستند.",
|
|
},
|
|
{
|
|
heading: "۹۳٪",
|
|
label: "رضایت مشتریان",
|
|
text: "اعتماد مشتریان ما نتیجه کیفیت ساخت، تحویل دقیق و اثر واقعی روی ظاهر فروشگاه است.",
|
|
},
|
|
{
|
|
heading: "۴۸ ساعت",
|
|
label: "شروع پشتیبانی",
|
|
text: "پس از تحویل پروژه، فرآیند پشتیبانی و پاسخگویی سریع برای حفظ کیفیت اجرا آغاز می شود.",
|
|
},
|
|
];
|
|
|
|
const BusinessStatsSection = ({ className }: BusinessStatsSectionProps) => {
|
|
return (
|
|
<section
|
|
className={cn("section-blur-separator relative py-16 md:py-24", className)}
|
|
dir="rtl"
|
|
aria-labelledby="business-stats-heading"
|
|
>
|
|
<div
|
|
className="pointer-events-none absolute left-1/2 top-1/2 flex h-full min-h-[28rem] w-full min-w-0 -translate-x-1/2 -translate-y-1/2 items-center justify-center"
|
|
aria-hidden
|
|
>
|
|
<div
|
|
className="aspect-square w-[min(125vmin,58rem)] max-w-[200%] shrink-0 rounded-full bg-[radial-gradient(circle_at_center,color-mix(in_srgb,var(--primary)_22%,transparent)_0%,transparent_72%)] blur-[4.5rem] md:blur-[6rem]"
|
|
/>
|
|
</div>
|
|
<div className="relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6">
|
|
<div className="relative isolate">
|
|
<div className="relative overflow-hidden rounded-3xl border border-primary/30 bg-overlay/25 px-5 py-8 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 sm:px-8 sm:py-10">
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -right-24 -top-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
|
|
/>
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute -bottom-24 -left-24 z-0 h-80 w-80 rounded-full bg-primary/8 blur-3xl sm:h-[24rem] sm:w-[24rem]"
|
|
/>
|
|
<div className="relative z-10">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<p className="text-caption font-medium text-muted-foreground">مستر دکور در یک نگاه</p>
|
|
<h2 id="business-stats-heading" className="mt-3 text-heading-2 font-semibold text-foreground">
|
|
عملکرد ما با مشتریان
|
|
</h2>
|
|
<div className="mt-3">
|
|
<div className="tone-gradient-line" aria-hidden />
|
|
</div>
|
|
<p className="mt-4 text-body text-muted-foreground">
|
|
این آمار نشان می دهد اجرای اصولی استند و دکور ویترین چطور به جذابیت فروشگاه، تجربه خرید بهتر و فروش موثرتر
|
|
کمک می کند.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-1 gap-4 sm:mt-10 sm:gap-5 md:grid-cols-2 lg:grid-cols-4">
|
|
{statsData.map((stat) => (
|
|
<Card
|
|
key={stat.label}
|
|
className="section-unified-block frosted-panel h-full rounded-2xl bg-card/70 transition-transform duration-300 hover:-translate-y-1"
|
|
>
|
|
<CardContent className="flex h-full flex-col p-6 sm:p-7">
|
|
<p className="text-heading-2 font-bold leading-none text-primary">{stat.heading}</p>
|
|
<p className="mt-3 text-heading-5 font-medium text-foreground">{stat.label}</p>
|
|
<p className="mt-2 text-caption font-normal text-primary">{stat.text}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { BusinessStatsSection };
|