129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
|
||
const items = [
|
||
{
|
||
title: "Next.js",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg"
|
||
alt="گزارش مالی یکپارچه"
|
||
className="mt-2.5 max-h-12 lg:mt-0 dark:invert"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: "React",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/react-wordmark.svg"
|
||
alt="داشبورد ERP"
|
||
className="mt-2.5 max-h-9 lg:mt-0 lg:max-h-12"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: "Shadcn/ui",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
|
||
alt="مدیریت عملیات"
|
||
className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-7 dark:invert"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: "Supabase",
|
||
image: (
|
||
<>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/supabase-wordmark.svg"
|
||
alt="گزارش مالی یکپارچه"
|
||
className="mt-2.5 max-h-6 lg:mt-0 lg:max-h-9 dark:hidden"
|
||
/>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/supabase-wordmark-dark.svg"
|
||
alt="داشبورد ERP"
|
||
className="mt-2.5 hidden max-h-6 lg:mt-0 lg:max-h-9 dark:block"
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Vercel",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/vercel-wordmark.svg"
|
||
className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-8 dark:invert"
|
||
alt="مدیریت عملیات"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: "Tailwind",
|
||
image: (
|
||
<>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-light.svg"
|
||
alt="گزارش مالی یکپارچه"
|
||
className="mt-2.5 max-h-5 lg:mt-0 lg:max-h-6 dark:hidden"
|
||
/>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/tailwind-wordmark-dark.svg"
|
||
alt="داشبورد ERP"
|
||
className="mt-2.5 hidden max-h-5 lg:mt-0 lg:max-h-6 dark:block"
|
||
/>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "Astro",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/astro-wordmark.svg"
|
||
alt="مدیریت عملیات"
|
||
className="mt-2.5 max-h-7 lg:mt-0 lg:max-h-9 dark:invert"
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: "GitHub",
|
||
image: (
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/github-wordmark.svg"
|
||
alt="گزارش مالی یکپارچه"
|
||
className="mt-2.5 max-h-6 lg:mt-0 lg:max-h-9 dark:invert"
|
||
/>
|
||
),
|
||
},
|
||
];
|
||
|
||
interface Feature53Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Feature53 = ({ className }: Feature53Props) => {
|
||
return (
|
||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||
<div className="container">
|
||
<div className="grid grid-cols-2 gap-px border border-border bg-border md:grid-cols-4">
|
||
{items.map((item, index) => (
|
||
<div key={index} className="bg-background">
|
||
<div className="relative mx-4 flex min-h-[150px] flex-col items-center justify-center lg:min-h-[280px]">
|
||
<p className="absolute top-4 inset-s-0 font-mono text-xs">
|
||
<span>
|
||
{(index + 1).toLocaleString("fa-IR").padStart(2, "۰")}
|
||
</span>
|
||
<span className="ms-2">{item.title}</span>
|
||
</p>
|
||
{item.image}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Feature53 };
|