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>
62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { ElementType } from 'react';
|
|
|
|
interface ToolCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: ElementType;
|
|
url: string;
|
|
index: number;
|
|
badges?: string[];
|
|
}
|
|
|
|
export default function ToolCard({ title, description, icon: Icon, url, index, badges }: ToolCardProps) {
|
|
return (
|
|
<Link
|
|
href={url}
|
|
className="group relative glass rounded-xl p-5 flex flex-col h-full transition-all duration-300 hover:border-primary/40 hover:shadow-[0_8px_32px_rgba(139,92,246,0.08)] overflow-hidden"
|
|
style={{ animation: `slideUp 0.5s ease-out ${0.05 * index}s both` }}
|
|
>
|
|
{/* Top shimmer accent on hover */}
|
|
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-primary/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
|
|
|
{/* Icon */}
|
|
<div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center mb-4 shrink-0 transition-all duration-300 group-hover:bg-primary/[0.18] group-hover:shadow-[0_0_20px_rgba(139,92,246,0.18)]">
|
|
<Icon className="w-5 h-5 text-primary" />
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-[15px] font-semibold text-foreground/80 group-hover:text-foreground transition-colors duration-200 mb-2 leading-tight">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="text-xs text-muted-foreground/55 leading-relaxed flex-1 mb-4">
|
|
{description}
|
|
</p>
|
|
|
|
{/* Footer: badges + arrow pill */}
|
|
<div className="flex items-end justify-between gap-2">
|
|
{badges && badges.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{badges.map((badge) => (
|
|
<span
|
|
key={badge}
|
|
className="text-[9px] font-mono px-1.5 py-0.5 rounded-md bg-primary/[0.07] border border-primary/20 text-primary/55 transition-colors duration-200 group-hover:border-primary/30 group-hover:text-primary/70"
|
|
>
|
|
{badge}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<div className="w-6 h-6 rounded-lg glass flex items-center justify-center shrink-0 transition-all duration-200 group-hover:border-primary/30 group-hover:bg-primary/10">
|
|
<ArrowRight className="w-3 h-3 text-muted-foreground/30 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|