Sebastian Krüger
9126589de3
- Hero: remove framer-motion, CSS stagger animations, glass pill CTA button, refined typography and scroll indicator - Stats: remove framer-motion, Lucide icons, tighter glass cards with mono labels - ToolsGrid: remove framer-motion, editorial section heading, 4-col xl grid - ToolCard: replace framer-motion motion.Link with plain Link + CSS hover, compact layout (icon→title→desc→badges+arrow), ElementType icon prop - Footer: remove framer-motion, matches sidebar footer style - BackToTop: remove framer-motion, JS scroll progress bar (1px primary line), compact glass button - not-found: remove framer-motion and shadcn Button, glass pill CTA, 120px mono 404, CSS stagger - page.tsx: remove unnecessary 'use client' directive Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 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 glass rounded-xl p-4 flex flex-col h-full transition-all duration-200 hover:border-primary/30 hover:bg-primary/3"
|
|
style={{ animation: `slideUp 0.5s ease-out ${0.05 * index}s both` }}
|
|
>
|
|
{/* Icon */}
|
|
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center mb-3 shrink-0 group-hover:bg-primary/15 transition-colors">
|
|
<Icon className="w-4 h-4 text-primary" />
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-sm font-semibold text-foreground/80 group-hover:text-foreground transition-colors mb-1.5">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="text-[11px] text-muted-foreground/50 leading-relaxed flex-1 mb-3">
|
|
{description}
|
|
</p>
|
|
|
|
{/* Footer: badges + arrow */}
|
|
<div className="flex items-end justify-between gap-2">
|
|
{badges && badges.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{badges.slice(0, 2).map((badge) => (
|
|
<span
|
|
key={badge}
|
|
className="text-[9px] font-mono px-1.5 py-0.5 rounded border border-border/30 text-muted-foreground/35"
|
|
>
|
|
{badge}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<ArrowRight className="w-3 h-3 text-muted-foreground/25 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200 shrink-0" />
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|