106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const IMAGES = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
|
|
alt: "مدیریت سفارش",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/photos/simone-hutsch-fyEcdETa5mc-unsplash.jpg",
|
|
alt: "داشبورد فروش",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
|
|
alt: "پنل فروشگاه آنلاین",
|
|
},
|
|
];
|
|
|
|
interface Feature209Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature209 = ({ className }: Feature209Props) => {
|
|
const [selectedImage, setSelectedImage] = useState(IMAGES[0].src);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("border-border py-32", className)}>
|
|
<div className="border-y">
|
|
<div className="relative container overflow-hidden">
|
|
<div className="border-x border-border">
|
|
<div className="flex h-full flex-col-reverse xl:flex-row">
|
|
<div className="flex items-center bg-background p-8 xl:w-1/2">
|
|
<div className="flex h-fit flex-col gap-6 py-16 ps-16 text-start">
|
|
<h2 className="text-xl font-medium tracking-tight text-balance">
|
|
فروش آنلاین را مقیاسپذیر کنید
|
|
</h2>
|
|
<div className="flex gap-4">
|
|
{IMAGES.map((image) => (
|
|
<button
|
|
key={image.src}
|
|
type="button"
|
|
className={cn(
|
|
"max-h-24 max-w-32 rounded-md border border-transparent p-1 shadow-sm transition-all duration-150",
|
|
selectedImage === image.src &&
|
|
"border border-foreground/10 shadow-md",
|
|
)}
|
|
onClick={() => setSelectedImage(image.src)}
|
|
>
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="size-full rounded-md object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="font-medium text-pretty text-muted-foreground">
|
|
مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا میبرد.
|
|
</p>
|
|
<div className="flex gap-4 font-medium">
|
|
<Button variant="outline" asChild>
|
|
<a href="#" className="group flex items-center gap-1">
|
|
فروش آنلاین
|
|
<ChevronRight className="mt-0.5 size-4 transition-all duration-150 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator
|
|
orientation="vertical"
|
|
className="hidden self-stretch data-[orientation=vertical]:h-auto xl:block"
|
|
/>
|
|
<div className="relative size-full p-8 md:p-16">
|
|
<div className="relative h-[300px] sm:h-[540px]">
|
|
{IMAGES.map((image) => (
|
|
<img
|
|
key={image.src}
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className={cn(
|
|
"absolute inset-0 h-[300px] w-full origin-center scale-[1.05] rounded-lg object-cover opacity-0 shadow-lg transition-none sm:h-[540px]",
|
|
selectedImage === image.src &&
|
|
"scale-100 opacity-100 transition-all duration-500 ease-out",
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 -z-10 h-full w-full bg-[url('/block-media/shadcnblocks/block/patterns/tiny-checkers.svg')] [background-size:4px_4px] bg-repeat opacity-10" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature209 };
|