From a4cc53d774dfa288467c5bd2ed0a5fcd5dde2ac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 1 Mar 2026 09:41:32 +0100
Subject: [PATCH] polish: make tool cards and landing page more prominent

ToolCard: larger icon (w-11 h-11) with violet glow on hover, top shimmer
accent line, primary-tinted badges, arrow in glass pill, stronger border/
shadow on hover, all badges shown, overflow-hidden for clean rendering

ToolsGrid: gap-4, section heading with module count callout, max-w-5xl

Stats: align to max-w-5xl, horizontal layout per stat (icon + value/label),
rounder icon container w-9 h-9

Hero: warm up CTA button with ambient bg-primary/[0.07] fill at rest

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Hero.tsx      |  2 +-
 components/Stats.tsx     | 20 +++++++++++---------
 components/ToolCard.tsx  | 23 ++++++++++++++---------
 components/ToolsGrid.tsx | 19 ++++++++++++-------
 4 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/components/Hero.tsx b/components/Hero.tsx
index 6403614..f274f9d 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -52,7 +52,7 @@ export default function Hero() {
         >
           <button
             onClick={scrollToTools}
-            className="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="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"
           >
             <Toolbox className="w-3.5 h-3.5 text-primary" />
             Explore Tools
diff --git a/components/Stats.tsx b/components/Stats.tsx
index 7e839bb..80b5ee8 100644
--- a/components/Stats.tsx
+++ b/components/Stats.tsx
@@ -10,23 +10,25 @@ const stats = [
 export default function Stats() {
   return (
     <section className="relative py-8 px-6">
-      <div className="max-w-xl mx-auto">
-        <div className="grid grid-cols-3 gap-3">
+      <div className="max-w-5xl mx-auto">
+        <div className="grid grid-cols-3 gap-4">
           {stats.map((stat, i) => {
             const Icon = stat.icon;
             return (
               <div
                 key={stat.label}
-                className="glass rounded-xl p-5 flex flex-col items-center text-center"
+                className="glass rounded-xl p-5 flex items-center gap-4"
                 style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
               >
-                <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center mb-3">
-                  <Icon className="w-3.5 h-3.5 text-primary" />
+                <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>
+                <div>
+                  <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>
                 </div>
-                <span className="text-2xl font-bold tabular-nums text-foreground">{stat.value}</span>
-                <span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1">
-                  {stat.label}
-                </span>
               </div>
             );
           })}
diff --git a/components/ToolCard.tsx b/components/ToolCard.tsx
index df8ab47..8138752 100644
--- a/components/ToolCard.tsx
+++ b/components/ToolCard.tsx
@@ -15,32 +15,35 @@ export default function ToolCard({ title, description, icon: Icon, url, index, b
   return (
     <Link
       href={url}
-      className="group glass rounded-xl p-4 flex flex-col h-full transition-all duration-200 hover:border-primary/30 hover:bg-primary/3"
+      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"
       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" />
+
       {/* Icon */}
-      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center mb-3 shrink-0 group-hover:bg-primary/15 transition-colors">
-        <Icon className="w-4 h-4 text-primary" />
+      <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)]">
+        <Icon className="w-5 h-5 text-primary" />
       </div>
 
       {/* Title */}
-      <h3 className="text-sm font-semibold text-foreground/80 group-hover:text-foreground transition-colors mb-1.5">
+      <h3 className="text-[15px] font-semibold text-foreground/80 group-hover:text-foreground transition-colors duration-200 mb-2 leading-tight">
         {title}
       </h3>
 
       {/* Description */}
-      <p className="text-[11px] text-muted-foreground/50 leading-relaxed flex-1 mb-3">
+      <p className="text-xs text-muted-foreground/55 leading-relaxed flex-1 mb-4">
         {description}
       </p>
 
-      {/* Footer: badges + arrow */}
+      {/* Footer: badges + arrow pill */}
       <div className="flex items-end justify-between gap-2">
         {badges && badges.length > 0 ? (
           <div className="flex flex-wrap gap-1">
-            {badges.slice(0, 2).map((badge) => (
+            {badges.map((badge) => (
               <span
                 key={badge}
-                className="text-[9px] font-mono px-1.5 py-0.5 rounded border border-border/30 text-muted-foreground/35"
+                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"
               >
                 {badge}
               </span>
@@ -49,7 +52,9 @@ export default function ToolCard({ title, description, icon: Icon, url, index, b
         ) : (
           <span />
         )}
-        <ArrowRight className="w-3 h-3 text-muted-foreground/25 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200 shrink-0" />
+        <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>
       </div>
     </Link>
   );
diff --git a/components/ToolsGrid.tsx b/components/ToolsGrid.tsx
index 4deb9e5..06ac4b6 100644
--- a/components/ToolsGrid.tsx
+++ b/components/ToolsGrid.tsx
@@ -8,19 +8,24 @@ export default function ToolsGrid() {
 
         {/* Section heading */}
         <div
-          className="mb-8"
+          className="flex items-end justify-between mb-8"
           style={{ animation: 'fadeIn 0.5s ease-out both' }}
         >
-          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-1">
-            Available Tools
+          <div>
+            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-1">
+              Available Tools
+            </span>
+            <p className="text-xs text-muted-foreground/40">
+              {tools.length} tools — everything runs in your browser
+            </p>
+          </div>
+          <span className="text-[9px] font-mono text-muted-foreground/25 tabular-nums hidden sm:block">
+            {tools.length.toString().padStart(2, '0')} modules
           </span>
-          <p className="text-xs text-muted-foreground/40">
-            Carefully crafted tools for your workflow
-          </p>
         </div>
 
         {/* Tools grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
           {tools.map((tool, index) => (
             <ToolCard
               key={tool.href}