84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
import { Banknote, Repeat, ShoppingBag, ShoppingCart } from "lucide-react";
|
|
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero125Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero125 = ({ className }: Hero125Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative overflow-hidden py-20 font-sans after:absolute after:bottom-0 after:left-0 after:block after:h-20 after:w-full after:bg-[linear-gradient(var(--color-transparent),var(--color-white))] after:content-[''] md:py-40",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative container">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/patterns/circles.svg"
|
|
alt=""
|
|
className="absolute top-[-68.75rem] right-[-86.25rem] z-[-1] block aspect-square h-auto w-[181.25rem] max-w-none"
|
|
/>
|
|
<div className="grid grid-cols-1 items-center justify-center gap-16 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<ShoppingCart className="h-6 w-6 fill-primary stroke-primary" />
|
|
<p className="text-lg font-semibold">مرجوعیها</p>
|
|
</div>
|
|
<h1 className="text-2xll leading-tight! font-semibold xl:text-2xll">
|
|
فرایند مرجوعی کالا را هوشمند و قابل مدیریت کنید.
|
|
</h1>
|
|
<p className="text-xl leading-snug text-muted-foreground">
|
|
قوانین بازگشت کالا، تعویض و بازپرداخت را متناسب با سیاستهای فروش خود مدیریت کنید.
|
|
</p>
|
|
<Button
|
|
asChild
|
|
variant="default"
|
|
className="block h-fit w-fit rounded-full px-6 py-2 text-base leading-loose font-semibold"
|
|
>
|
|
<a href="#">رزرو دمو</a>
|
|
</Button>
|
|
</div>
|
|
<div className="justify-self-center lg:justify-self-end">
|
|
<div className="flex aspect-[0.955145119/1] flex-col rounded-xl border bg-background p-3 shadow-xl sm:w-[22.625rem]">
|
|
<AspectRatio
|
|
ratio={1.110367893 / 1}
|
|
className="w-full overflow-hidden rounded-lg bg-muted"
|
|
>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر نمونه"
|
|
className="block h-full w-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
<div className="m-auto flex w-full items-center justify-between">
|
|
<div className="flex items-center gap-1 rounded-md bg-black/5 px-2 py-1">
|
|
<Repeat className="h-4" />
|
|
<p className="text-xs font-semibold sm:text-sm">تعویض</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 rounded-md bg-background px-2 py-1">
|
|
<ShoppingBag className="h-4 stroke-black/40" />
|
|
<p className="text-xs font-semibold text-black/40 sm:text-sm">
|
|
شروع رایگان
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 rounded-md bg-background px-2 py-1">
|
|
<Banknote className="h-4 stroke-black/40" />
|
|
<p className="text-xs font-semibold text-black/40 sm:text-sm">
|
|
بازپرداخت
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero125 };
|