76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { ArrowDown } 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 */}
|
|
<Logo size={72} />
|
|
|
|
{/* Badge */}
|
|
<div
|
|
className="mt-8 flex items-center gap-2 px-3 py-1.5 glass rounded-full border border-white/[0.06]"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.2s both' }}
|
|
>
|
|
<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse shrink-0" />
|
|
<span className="text-[10px] font-mono text-muted-foreground/55 tracking-widest uppercase">
|
|
Browser-first
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1
|
|
className="mt-6 font-bold tracking-tight leading-none"
|
|
style={{ animation: 'slideUp 0.5s ease-out 0.3s both' }}
|
|
>
|
|
<span className="text-6xl md:text-8xl text-foreground">Kit</span>
|
|
<span className="text-6xl md:text-8xl text-primary">.</span>
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p
|
|
className="mt-6 text-sm text-muted-foreground/55 max-w-xs 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 data leaves your machine.
|
|
</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-6 py-2.5 rounded-xl border border-primary/30 bg-primary/[0.07] hover:border-primary/55 hover:bg-primary/[0.13] text-sm font-medium text-foreground/70 hover:text-foreground transition-all duration-200"
|
|
>
|
|
Explore Tools
|
|
<ArrowDown className="w-3.5 h-3.5 text-primary" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<button
|
|
onClick={scrollToTools}
|
|
className="mt-24 flex flex-col items-center gap-2 group"
|
|
style={{ animation: 'fadeIn 0.5s ease-out 0.9s both' }}
|
|
>
|
|
<div className="w-px h-8 bg-gradient-to-b from-transparent via-primary/30 to-primary/60 group-hover:via-primary/50 group-hover:to-primary transition-colors duration-300" />
|
|
<span className="text-[9px] font-mono text-muted-foreground/25 uppercase tracking-widest group-hover:text-muted-foreground/50 transition-colors">
|
|
Scroll
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|