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

21
components/ToolCard.tsx
View File

@@ -15,35 +15,38 @@ export default function ToolCard({ title, description, icon: Icon, url, index, b
return (
<Link
href={url}
className="group relative glass rounded-xl p-5 flex flex-col h-full transition-all duration-300 hover:border-primary/40 hover:shadow-[0_8px_32px_rgba(139,92,246,0.08)] overflow-hidden"
className="group relative glass rounded-2xl p-6 flex flex-col h-full transition-all duration-300 border border-white/[0.06] hover:border-primary/35 hover:shadow-[0_12px_48px_rgba(139,92,246,0.11)] overflow-hidden"
style={{ animation: `slideUp 0.5s ease-out ${0.05 * index}s both` }}
>
{/* Top shimmer accent on hover */}
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-primary/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-primary/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
{/* Radial glow on hover */}
<div className="absolute top-0 left-0 w-36 h-36 rounded-full bg-primary/[0.07] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none -translate-x-6 -translate-y-6" />
{/* Icon */}
<div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center mb-4 shrink-0 transition-all duration-300 group-hover:bg-primary/[0.18] group-hover:shadow-[0_0_20px_rgba(139,92,246,0.18)]">
<div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/15 flex items-center justify-center mb-5 shrink-0 transition-all duration-300 group-hover:bg-primary/20 group-hover:border-primary/30 group-hover:shadow-[0_0_24px_rgba(139,92,246,0.22)]">
<Icon className="w-5 h-5 text-primary" />
</div>
{/* Title */}
<h3 className="text-[15px] font-semibold text-foreground/80 group-hover:text-foreground transition-colors duration-200 mb-2 leading-tight">
<h3 className="text-base font-semibold text-foreground/80 group-hover:text-foreground transition-colors duration-200 mb-2 leading-snug">
{title}
</h3>
{/* Description */}
<p className="text-xs text-muted-foreground/55 leading-relaxed flex-1 mb-4">
<p className="text-[13px] text-muted-foreground/50 leading-relaxed flex-1 mb-5">
{description}
</p>
{/* Footer: badges + arrow pill */}
{/* Footer: badges + arrow */}
<div className="flex items-end justify-between gap-2">
{badges && badges.length > 0 ? (
<div className="flex flex-wrap gap-1">
{badges.map((badge) => (
<span
key={badge}
className="text-[9px] font-mono px-1.5 py-0.5 rounded-md bg-primary/[0.07] border border-primary/20 text-primary/55 transition-colors duration-200 group-hover:border-primary/30 group-hover:text-primary/70"
className="text-[9px] font-mono px-1.5 py-0.5 rounded-md bg-primary/[0.07] border border-primary/20 text-primary/55 transition-colors duration-200 group-hover:border-primary/35 group-hover:text-primary/75"
>
{badge}
</span>
@@ -52,8 +55,8 @@ export default function ToolCard({ title, description, icon: Icon, url, index, b
) : (
<span />
)}
<div className="w-6 h-6 rounded-lg glass flex items-center justify-center shrink-0 transition-all duration-200 group-hover:border-primary/30 group-hover:bg-primary/10">
<ArrowRight className="w-3 h-3 text-muted-foreground/30 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200" />
<div className="w-7 h-7 rounded-xl glass border border-white/[0.06] flex items-center justify-center shrink-0 transition-all duration-200 group-hover:border-primary/30 group-hover:bg-primary/10">
<ArrowRight className="w-3.5 h-3.5 text-muted-foreground/30 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200" />
</div>
</div>
</Link>