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

18
components/Stats.tsx
View File

@@ -2,14 +2,14 @@ import { tools } from '@/lib/tools';
import { Box, Code2, Shield } from 'lucide-react';
const stats = [
{ value: tools.length, label: 'Tools', icon: Box },
{ value: '100%', label: 'Open Source', icon: Code2 },
{ value: '∞', label: 'Privacy First', icon: Shield },
{ value: tools.length, label: 'Tools available', icon: Box },
{ value: '100%', label: 'Open source', icon: Code2 },
{ value: '0', label: 'Data collected', icon: Shield },
];
export default function Stats() {
return (
<section className="relative py-8 px-6">
<section className="relative py-4 px-6">
<div className="max-w-5xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{stats.map((stat, i) => {
@@ -17,14 +17,16 @@ export default function Stats() {
return (
<div
key={stat.label}
className="glass rounded-xl p-5 flex items-center gap-4"
className="glass rounded-2xl p-5 flex items-center gap-4 border border-white/[0.06]"
style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
>
<div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
<Icon className="w-4 h-4 text-primary" />
<div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/15 flex items-center justify-center shrink-0">
<Icon className="w-4.5 h-4.5 text-primary" />
</div>
<div>
<span className="text-2xl font-bold tabular-nums text-foreground block leading-none">{stat.value}</span>
<span className="text-2xl font-bold tabular-nums text-foreground block leading-none">
{stat.value}
</span>
<span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1 block">
{stat.label}
</span>