valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine: landing page and 404 for clean consistent look

Browse Source 
Hero: Kit. title with primary dot, arrow-down CTA, minimal line scroll
indicator. Stats: rounded-2xl + icon border matching cards. ToolsGrid:
proper h2 with gradient accent word. ToolCard: visible rest border,
radial glow, bigger icon+arrow. Footer: visible Source label, consistent
border. 404: fade gradient number, divider line, rounded-xl CTA.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-01 16:48:04 +01:00
parent 20406c5dcf
commit 075aa0b6c5
7 changed files with 68 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/Hero.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { Toolbox } from 'lucide-react';
import { ArrowDown } from 'lucide-react';
import Logo from './Logo';
export default function Hero() {
@@ -13,36 +13,35 @@ export default function Hero() {
<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>
<Logo size={72} />
{/* Badge */}
<div
className="mt-8 flex items-center gap-2 px-3 py-1 glass rounded-full"
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" />
<span className="text-[10px] font-mono text-muted-foreground/60 tracking-widest uppercase">
Browser-first toolkit
<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 developer toolkit
</span>
</div>
{/* Title */}
<h1
className="mt-5 text-6xl md:text-8xl font-bold text-foreground tracking-tight leading-none"
className="mt-6 font-bold tracking-tight leading-none"
style={{ animation: 'slideUp 0.5s ease-out 0.3s both' }}
>
Kit
<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-5 text-sm text-muted-foreground/60 max-w-sm leading-relaxed"
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.
Everything runs locally — no data leaves your machine.
</p>
{/* CTA */}
@@ -52,28 +51,23 @@ export default function Hero() {
>
<button
onClick={scrollToTools}
className="flex items-center gap-2 px-5 py-2.5 rounded-lg border border-primary/30 bg-primary/[0.07] hover:border-primary/60 hover:bg-primary/[0.14] text-sm font-medium text-foreground/75 hover:text-foreground transition-all duration-200"
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"
>
<Toolbox className="w-3.5 h-3.5 text-primary" />
Explore Tools
<ArrowDown className="w-3.5 h-3.5 text-primary" />
</button>
</div>
{/* Scroll indicator */}
<button
onClick={scrollToTools}
className="mt-20 flex flex-col items-center gap-2 group"
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>
<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>