Sebastian Krüger
a4cc53d774
ToolCard: larger icon (w-11 h-11) with violet glow on hover, top shimmer accent line, primary-tinted badges, arrow in glass pill, stronger border/ shadow on hover, all badges shown, overflow-hidden for clean rendering ToolsGrid: gap-4, section heading with module count callout, max-w-5xl Stats: align to max-w-5xl, horizontal layout per stat (icon + value/label), rounder icon container w-9 h-9 Hero: warm up CTA button with ambient bg-primary/[0.07] fill at rest Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
45 lines
1.4 KiB
TypeScript
45 lines
1.4 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="flex items-end justify-between mb-8"
|
|
style={{ animation: 'fadeIn 0.5s ease-out both' }}
|
|
>
|
|
<div>
|
|
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-1">
|
|
Available Tools
|
|
</span>
|
|
<p className="text-xs text-muted-foreground/40">
|
|
{tools.length} tools — everything runs in your browser
|
|
</p>
|
|
</div>
|
|
<span className="text-[9px] font-mono text-muted-foreground/25 tabular-nums hidden sm:block">
|
|
{tools.length.toString().padStart(2, '0')} modules
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tools grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
|
|
{tools.map((tool, index) => (
|
|
<ToolCard
|
|
key={tool.href}
|
|
title={tool.shortTitle}
|
|
description={tool.summary}
|
|
icon={tool.icon}
|
|
url={tool.href}
|
|
badges={tool.badges}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|