118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import { CardSpotlight } from "@/components/aceternity/card-spotlight";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ToolItem {
|
|
id: string;
|
|
category: string;
|
|
name: string;
|
|
logo: string;
|
|
imageAlt: string;
|
|
}
|
|
|
|
const TOOLS: ToolItem[] = [
|
|
{
|
|
id: "astro",
|
|
category: "ترافیک ارگانیک",
|
|
name: "Astro",
|
|
logo: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
|
|
imageAlt: "داشبورد SEO",
|
|
},
|
|
{
|
|
id: "gatsby",
|
|
category: "رتبه‌بندی",
|
|
name: "Gatsby",
|
|
logo: "/block-media/shadcnblocks/block/logos/gatsby-icon-black.svg",
|
|
imageAlt: "تحلیل کلمات کلیدی",
|
|
},
|
|
{
|
|
id: "github",
|
|
category: "محتوای SEO",
|
|
name: "GitHub",
|
|
logo: "/block-media/shadcnblocks/block/logos/github-icon-black.svg",
|
|
imageAlt: "گزارش رتبه جستجو",
|
|
},
|
|
{
|
|
id: "nextjs",
|
|
category: "بهینه‌سازی جستجو",
|
|
name: "Next.js",
|
|
logo: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
|
|
imageAlt: "داشبورد SEO",
|
|
},
|
|
{
|
|
id: "figma",
|
|
category: "ترافیک ارگانیک",
|
|
name: "Figma",
|
|
logo: "/block-media/shadcnblocks/block/logos/figma.svg",
|
|
imageAlt: "تحلیل کلمات کلیدی",
|
|
},
|
|
{
|
|
id: "remix",
|
|
category: "رتبه‌بندی",
|
|
name: "Remix",
|
|
logo: "/block-media/shadcnblocks/block/logos/remix-icon-black.svg",
|
|
imageAlt: "گزارش رتبه جستجو",
|
|
},
|
|
{
|
|
id: "vercel",
|
|
category: "محتوای SEO",
|
|
name: "Vercel",
|
|
logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
|
|
imageAlt: "داشبورد SEO",
|
|
},
|
|
{
|
|
id: "tailwind",
|
|
category: "رتبه کلمات کلیدی را پیگیری کنید",
|
|
name: "بهینه‌سازی جستجو",
|
|
logo: "/block-media/shadcnblocks/block/logos/tailwind-icon-black.svg",
|
|
imageAlt: "تحلیل کلمات کلیدی",
|
|
},
|
|
];
|
|
|
|
interface Feature257Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ToolCard = ({ tool }: { tool: ToolItem }) => (
|
|
<CardSpotlight className="group flex h-96 min-w-0 flex-col items-start justify-between overflow-hidden rounded-md border border-border bg-background p-2 text-start transition-all duration-300 hover:bg-black hover:text-white md:p-4">
|
|
<div className="z-10 max-w-full rounded-md border border-border px-2 py-1 text-xs font-medium text-balance transition-colors duration-300 group-hover:border-white md:px-4 md:py-2 md:text-sm">
|
|
{tool.category}
|
|
</div>
|
|
<img
|
|
src={tool.logo}
|
|
alt={tool.imageAlt}
|
|
className="mx-auto mb-4 h-24 max-w-full object-contain [filter:brightness(0)] transition-all duration-300 group-hover:[filter:brightness(1)_invert(1)] dark:invert"
|
|
/>
|
|
<h2 className="z-10 max-w-full text-xl font-normal text-balance transition-colors duration-300 lg:text-3xl">
|
|
{tool.name}
|
|
</h2>
|
|
</CardSpotlight>
|
|
);
|
|
|
|
const Feature257 = ({ className }: Feature257Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative w-full overflow-hidden bg-muted py-16 sm:py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2">
|
|
{TOOLS.slice(0, 2).map((tool) => (
|
|
<ToolCard key={tool.id} tool={tool} />
|
|
))}
|
|
</div>
|
|
<div className="mt-4 grid min-w-0 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{TOOLS.slice(2, 9).map((tool) => (
|
|
<ToolCard key={tool.id} tool={tool} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature257 };
|