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

24
app/not-found.tsx
View File

@@ -11,27 +11,31 @@ export default function NotFound() {
<div className="flex-1 flex flex-col items-center justify-center px-6 py-20 relative z-10 text-center">
{/* Logo */}
<div style={{ animation: 'fadeIn 0.5s ease-out both' }}>
<Logo size={52} />
</div>
<Logo size={52} />
{/* 404 */}
<div
className="mt-8"
className="mt-10"
style={{ animation: 'slideUp 0.5s ease-out 0.15s both' }}
>
<span className="text-[80px] md:text-[120px] font-bold font-mono text-primary leading-none tabular-nums block">
<span className="text-[80px] md:text-[120px] font-bold font-mono leading-none tabular-nums block bg-gradient-to-b from-foreground to-foreground/25 bg-clip-text text-transparent">
404
</span>
</div>
{/* Divider */}
<div
className="mt-6 w-12 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
style={{ animation: 'fadeIn 0.5s ease-out 0.3s both' }}
/>
{/* Message */}
<div
className="mt-4 space-y-1"
style={{ animation: 'slideUp 0.5s ease-out 0.3s both' }}
className="mt-6 space-y-2"
style={{ animation: 'slideUp 0.5s ease-out 0.35s both' }}
>
<p className="text-sm font-medium text-foreground/70">Page not found</p>
<p className="text-[11px] text-muted-foreground/50 font-mono max-w-xs mx-auto leading-relaxed">
<p className="text-[11px] text-muted-foreground/45 font-mono max-w-xs mx-auto leading-relaxed">
The tool or page you&apos;re looking for doesn&apos;t exist or has been moved.
</p>
</div>
@@ -39,11 +43,11 @@ export default function NotFound() {
{/* CTA */}
<div
className="mt-8"
style={{ animation: 'slideUp 0.5s ease-out 0.45s both' }}
style={{ animation: 'slideUp 0.5s ease-out 0.5s both' }}
>
<Link
href="/"
className="inline-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"
className="inline-flex items-center gap-2 px-5 py-2.5 glass rounded-xl border border-white/[0.06] hover:border-primary/40 hover:bg-primary/[0.07] text-sm font-medium text-foreground/60 hover:text-foreground transition-all duration-200"
>
<ArrowLeft className="w-3.5 h-3.5 text-primary" />
Back to Home