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>
82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { Toolbox } from 'lucide-react';
|
|
import Logo from './Logo';
|
|
|
|
export default function Hero() {
|
|
const scrollToTools = () => {
|
|
document.getElementById('tools')?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex flex-col items-center justify-center px-6 py-24">
|
|
<div className="flex flex-col items-center text-center max-w-2xl mx-auto">
|
|
|
|
{/* Logo */}
|
|
<div style={{ animation: 'fadeIn 0.6s ease-out both' }}>
|
|
<Logo size={64} />
|
|
</div>
|
|
|
|
{/* Badge */}
|
|
<div
|
|
className="mt-8 flex items-center gap-2 px-3 py-1 glass rounded-full"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.2s both' }}
|
|
>
|
|
<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
|
|
<span className="text-[10px] font-mono text-muted-foreground/60 tracking-widest uppercase">
|
|
Browser-first toolkit
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1
|
|
className="mt-5 text-6xl md:text-8xl font-bold text-foreground tracking-tight leading-none"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.3s both' }}
|
|
>
|
|
Kit
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p
|
|
className="mt-5 text-sm text-muted-foreground/60 max-w-sm leading-relaxed"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.4s both' }}
|
|
>
|
|
A curated collection of browser-based tools for developers and creators.
|
|
Everything runs locally — no uploads, no tracking.
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div
|
|
className="mt-8"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.5s both' }}
|
|
>
|
|
<button
|
|
onClick={scrollToTools}
|
|
className="flex items-center gap-2 px-5 py-2.5 glass rounded-lg border border-primary/30 hover:border-primary/60 hover:bg-primary/10 text-sm font-medium text-foreground/70 hover:text-foreground transition-all duration-200"
|
|
>
|
|
<Toolbox className="w-3.5 h-3.5 text-primary" />
|
|
Explore Tools
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<button
|
|
onClick={scrollToTools}
|
|
className="mt-20 flex flex-col items-center gap-2 group"
|
|
style={{ animation: 'fadeIn 0.5s ease-out 0.9s both' }}
|
|
>
|
|
<span className="text-[9px] font-mono text-muted-foreground/25 uppercase tracking-widest group-hover:text-muted-foreground/50 transition-colors">
|
|
Scroll
|
|
</span>
|
|
<div className="w-4 h-7 border border-muted-foreground/15 rounded-full flex items-start justify-center pt-1.5 group-hover:border-primary/30 transition-colors">
|
|
<div
|
|
className="w-0.5 h-1.5 bg-primary/50 rounded-full"
|
|
style={{ animation: 'float 1.5s ease-in-out infinite' }}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|