108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const IconElem = ({ image, title }: { image: string; title: string }) => (
|
|
<div className="flex flex-col items-center">
|
|
<img
|
|
src={image}
|
|
alt={`لوگوی ${title}`}
|
|
className="mb-3 hidden h-14 w-14 rounded-lg object-cover p-2 shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] md:block dark:invert"
|
|
/>
|
|
<Badge variant="secondary" className="font-mono text-xs font-semibold">
|
|
{title}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
|
|
interface Feature152Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature152 = ({ className }: Feature152Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mb-16 flex flex-col items-center md:mb-6">
|
|
<Badge variant="secondary" className="mb-6 bg-muted">
|
|
فروش آنلاین
|
|
</Badge>
|
|
<h1 className="mb-3 max-w-md text-center text-xl font-medium md:text-xl">
|
|
تجربه خرید را روان‌تر بسازید
|
|
</h1>
|
|
<p className="mb-3 max-w-80 text-center">
|
|
هر سفارش را از انبار تا تحویل ببینید
|
|
</p>
|
|
<Button variant="link" asChild className="text-blue-700">
|
|
<a href="#">
|
|
نرخ تبدیل فروشگاه را بالا ببرید
|
|
<ArrowRight className="ms-2 size-4 rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<div className="relative mx-auto flex max-w-3xl flex-col gap-5 overflow-hidden pb-8 md:gap-0">
|
|
<div className="flex justify-around md:mb-[-30px]">
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-1.svg"
|
|
title="فروش آنلاین را مقیاس‌پذیر کنید"
|
|
/>
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-2.svg"
|
|
title="تجربه خرید را روان‌تر بسازید"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-center md:mb-[-30px]">
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-3.svg"
|
|
title="هر سفارش را از انبار تا تحویل ببینید"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-evenly md:mb-[-30px]">
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-4.svg"
|
|
title="نرخ تبدیل فروشگاه را بالا ببرید"
|
|
/>
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-5.svg"
|
|
title="موجودی و سفارش را یکجا مدیریت کنید"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-6.svg"
|
|
title="مشتری را به خرید دوباره برگردانید"
|
|
/>
|
|
<IconElem
|
|
image="/block-media/shadcnblocks/block/block-1.svg"
|
|
title="فروش آنلاین را مقیاس‌پذیر کنید"
|
|
/>
|
|
</div>
|
|
|
|
{[...Array(11)].map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="absolute -bottom-2 start-1/2 z-[-2] aspect-square rounded-full border border-indigo-200"
|
|
style={{
|
|
width: 60 + 80 * index + "px",
|
|
opacity: 0.5,
|
|
filter: "saturate(10%)",
|
|
transform: "translateX(-50%) translateY(50%)",
|
|
}}
|
|
/>
|
|
))}
|
|
<div className="absolute inset-0 z-[-1] bg-linear-to-b from-background via-transparent to-transparent" />
|
|
<div className="absolute inset-0 z-[-1] bg-linear-to-s from-background via-transparent to-transparent" />
|
|
<div className="absolute inset-0 z-[-1] bg-linear-to-e from-background via-transparent to-transparent" />
|
|
<div className="absolute bottom-0 start-0 z-[-2] h-px w-full bg-indigo-200 opacity-50" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature152 };
|