52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const PRODUCT_CATEGORIES = {
|
|
title: "اکسسوری",
|
|
summary: "اکسسوریهای شیک و کاربردی برای تکمیل استایل شما",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/ecommerce/accessories/Gold-Heart-Earrings-2.png",
|
|
alt: "اکسسوری",
|
|
},
|
|
};
|
|
|
|
interface ProductCategories3Props {
|
|
title: string;
|
|
summary: string;
|
|
image: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
className?: string;
|
|
}
|
|
|
|
const ProductCategories3 = ({
|
|
title = PRODUCT_CATEGORIES.title,
|
|
summary = PRODUCT_CATEGORIES.summary,
|
|
image = PRODUCT_CATEGORIES.image,
|
|
className,
|
|
}: ProductCategories3Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="relative flex min-h-75 items-center justify-center overflow-hidden rounded-xl before:absolute before:inset-0 before:z-20 before:size-full before:bg-black/30">
|
|
<div className="relative z-30 flex size-full flex-col gap-3 px-6 py-8 md:px-10 lg:px-20">
|
|
<h1 className="text-center text-xl font-medium text-white sm:text-2xll">
|
|
{title}
|
|
</h1>
|
|
<p className="text-center text-lg text-white">{summary}</p>
|
|
</div>
|
|
<div className="absolute inset-0 animate-in duration-700 zoom-in-150">
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { ProductCategories3 };
|