133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { CardSpotlight } from "@/components/aceternity/card-spotlight";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const TOOLS = [
|
|
{
|
|
id: "shadcn-ui",
|
|
name: "فروش آنلاین",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
|
|
className: "h-20",
|
|
},
|
|
{
|
|
id: "tailwind",
|
|
name: "فروشگاه",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
|
|
className: "h-14",
|
|
},
|
|
{
|
|
id: "v0",
|
|
name: "V0",
|
|
image: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
|
|
className: "h-20",
|
|
},
|
|
{
|
|
id: "react",
|
|
name: "React",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/react-icon-black.svg",
|
|
className: "h-20",
|
|
},
|
|
{
|
|
id: "astro",
|
|
name: "Astro",
|
|
image: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
|
|
className: "h-20",
|
|
},
|
|
{
|
|
id: "nextjs",
|
|
name: "Next.js",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
|
|
className: "h-19",
|
|
},
|
|
] as const;
|
|
|
|
const GUIDES = [
|
|
{
|
|
id: "platform",
|
|
name: "تبدیل خرید",
|
|
title: "موجودی انبار",
|
|
},
|
|
{
|
|
id: "ui-framework",
|
|
name: "مدیریت سفارش",
|
|
title: "بازگشت مشتری",
|
|
},
|
|
{
|
|
id: "icons",
|
|
name: "فروش آنلاین",
|
|
title: "صفحه فرود",
|
|
},
|
|
{
|
|
id: "tooling",
|
|
name: "فروشگاه",
|
|
title: "گزارش فروش",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature256Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature256 = ({ className }: Feature256Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("py-16 sm:py-20 md:py-32", className)}
|
|
>
|
|
<div className="container flex flex-col gap-16 sm:gap-20 md:gap-24">
|
|
<section>
|
|
<div className="flex flex-col items-start gap-8 text-start md:justify-between lg:flex-row">
|
|
<h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
|
|
فروش آنلاین را مقیاسپذیر کنید
|
|
</h2>
|
|
<div className="grid w-full grid-cols-2 gap-4 lg:w-2/3 lg:grid-cols-3">
|
|
{TOOLS.map((logo) => (
|
|
<CardSpotlight
|
|
key={logo.id}
|
|
className="group flex h-40 w-full items-center justify-center rounded-md border-muted bg-accent transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-44 md:h-48"
|
|
>
|
|
<img
|
|
src={logo.image}
|
|
alt={`لوگوی ${logo.name}`}
|
|
className={cn(
|
|
"object-contain transition-all duration-300 group-hover:brightness-0 group-hover:invert",
|
|
logo.className,
|
|
)}
|
|
/>
|
|
</CardSpotlight>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="flex flex-col gap-8 text-start md:items-start md:justify-between lg:flex-row">
|
|
<h2 className="text-3xl font-light tracking-wide text-balance sm:text-xl md:text-2xll lg:w-1/3">
|
|
تجربه خرید را روانتر بسازید
|
|
</h2>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:w-2/3">
|
|
{GUIDES.map((item) => (
|
|
<CardSpotlight
|
|
className="group flex h-52 flex-col justify-between rounded-md border-muted bg-accent p-6 text-start transition-all duration-300 hover:border-white/20 hover:bg-black sm:h-64"
|
|
key={item.id}
|
|
>
|
|
<div className="w-fit rounded-2xl border border-border px-4 py-2 text-center text-sm transition-all duration-300 group-hover:border-white/30 group-hover:text-white">
|
|
{item.name}
|
|
</div>
|
|
<div className="text-xl font-medium text-balance transition-all duration-300 group-hover:text-white sm:text-xl">
|
|
{item.title}
|
|
</div>
|
|
</CardSpotlight>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature256 };
|