43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import ToolCard from './ToolCard';
|
|
import { tools } from '@/lib/tools';
|
|
|
|
export default function ToolsGrid() {
|
|
return (
|
|
<section id="tools" className="relative py-16 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
|
|
{/* Section heading */}
|
|
<div
|
|
className="mb-10"
|
|
style={{ animation: 'fadeIn 0.5s ease-out both' }}
|
|
>
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
|
|
Available{' '}
|
|
<span className="bg-gradient-to-r from-primary via-violet-400 to-pink-400 bg-clip-text text-transparent">
|
|
Tools
|
|
</span>
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground/40 mt-2">
|
|
{tools.length} tools — everything runs in your browser, no data leaves your machine
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tools grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
{tools.map((tool, index) => (
|
|
<ToolCard
|
|
key={tool.href}
|
|
title={tool.title}
|
|
description={tool.summary}
|
|
icon={tool.icon}
|
|
url={tool.href}
|
|
badges={tool.badges}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|