48 lines
2.2 KiB
TypeScript
48 lines
2.2 KiB
TypeScript
import { Container } from "@/components/Container";
|
|
import { GlassBox } from "@/components/GlassBox";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { customerPortalUrl } from "@/lib/config";
|
|
import { sampleProducts } from "@/lib/data";
|
|
|
|
export function ProductStrip() {
|
|
return (
|
|
<section className="py-20 sm:py-24">
|
|
<Container>
|
|
<div className="mb-10 flex items-end justify-between gap-4">
|
|
<div>
|
|
<p className="section-kicker">Catalog</p>
|
|
<h2 className="mt-3 text-3xl font-extrabold">نمونه قطعات</h2>
|
|
<p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
|
|
تصاویر فروشگاه روی پسزمینه سفید از بکاند خوانده میشوند. تا اتصال، همین گروهها بهعنوان نمونه آمدهاند.
|
|
</p>
|
|
</div>
|
|
<a href={customerPortalUrl} className="hidden rounded-xl bg-ink px-5 py-3 text-[13px] text-white hover:bg-brand sm:inline-flex">
|
|
ورود به فروشگاه
|
|
</a>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 lg:gap-5">
|
|
{sampleProducts.map((product) => (
|
|
<a key={product.id} href={customerPortalUrl} className="group relative block">
|
|
<div className="relative aspect-[4/5] overflow-hidden rounded-2xl">
|
|
<Placeholder
|
|
src={product.image}
|
|
alt={product.title}
|
|
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
<GlassBox
|
|
frostSrc={product.image}
|
|
className="absolute inset-x-0 bottom-0 z-10 !rounded-none !rounded-b-2xl px-3 py-2.5 text-right"
|
|
>
|
|
<h3 className="truncate text-[12px] font-bold leading-5 sm:text-[13px]">{product.title}</h3>
|
|
<p className="mt-0.5 font-latin text-[9px] tracking-[0.2em] text-muted uppercase">Coming soon</p>
|
|
</GlassBox>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|