147 lines
4.5 KiB
TypeScript
147 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import {
|
|
BrushCleaning,
|
|
Clock,
|
|
CodeXml,
|
|
Plug2,
|
|
Snowflake,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import React, { useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "plug-play",
|
|
title: "مدیریت محصول",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
icon: Plug2,
|
|
},
|
|
{
|
|
id: "customizable",
|
|
title: "پرداخت امن",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
icon: CodeXml,
|
|
},
|
|
{
|
|
id: "design-control",
|
|
title: "ردیابی سفارش",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
icon: Snowflake,
|
|
},
|
|
{
|
|
id: "updates",
|
|
title: "تخفیف هوشمند",
|
|
description:
|
|
"کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
|
|
icon: Clock,
|
|
},
|
|
{
|
|
id: "clean-code",
|
|
title: "موجودی انبار",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
icon: BrushCleaning,
|
|
},
|
|
{
|
|
id: "performance",
|
|
title: "بازگشت مشتری",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
icon: Zap,
|
|
},
|
|
] as const;
|
|
|
|
interface Feature276Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature276 = ({ className }: Feature276Props) => {
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container flex w-full flex-col items-center justify-center px-4">
|
|
<p className="rounded-full bg-muted px-4 py-1 text-xs">
|
|
فروش آنلاین
|
|
</p>
|
|
<h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
|
|
فروشگاه
|
|
</h2>
|
|
<p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
|
|
مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
|
|
</p>
|
|
|
|
<div className="relative mt-10 grid w-full max-w-4xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
|
{FEATURES.map((item, idx) => (
|
|
<div
|
|
key={item.id}
|
|
className="group relative block h-full w-full p-2"
|
|
onMouseEnter={() => setHoveredIndex(idx)}
|
|
onMouseLeave={() => setHoveredIndex(null)}
|
|
>
|
|
<AnimatePresence mode="wait" initial={false}>
|
|
{hoveredIndex === idx && (
|
|
<motion.span
|
|
className="absolute inset-0 block h-full w-full rounded-2xl bg-muted-foreground/20"
|
|
layoutId="hoverBackground"
|
|
key={item.id}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<Card
|
|
title={item.title}
|
|
description={item.description}
|
|
icon={item.icon}
|
|
className="flex flex-col items-center justify-center"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature276 };
|
|
|
|
const Card = ({
|
|
className,
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
}: {
|
|
className?: string;
|
|
title: string;
|
|
description: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative z-20 flex h-full flex-col items-center justify-center gap-4 rounded-2xl bg-muted p-5 text-center",
|
|
className,
|
|
)}
|
|
>
|
|
<Icon className="mt-3 size-8 stroke-1 text-muted-foreground" />
|
|
<h3 className="text-xl font-semibold tracking-tight">{title}</h3>
|
|
<p className="text-pretty text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
);
|
|
};
|