polish: Priority 1 improvements - gradients, stats, metadata, footer

✨ Visual Enhancements:
- Unique gradients per tool (green-teal for Vert, orange-pink for Paint, indigo-purple for Pastel)
- Added new gradient utilities for better color differentiation

📊 Stats Section:
- New animated stats component showing "3 Tools, 100% Open Source, ∞ Privacy First"
- Glassmorphism cards with hover effects
- Icon badges for each stat

🔍 Enhanced Metadata:
- Comprehensive Open Graph tags for social sharing
- Twitter Card support
- Enhanced SEO with detailed keywords (vert, paint, pastel)
- Added SVG favicon with gradient toolbox icon
- Viewport meta tag and preconnect optimization

🔗 Improved Footer:
- 3-column responsive layout
- GitHub repository link with icon
- Quick links to all tools (Vert, Paint, Pastel)
- Tool count badge
- Updated tech stack mention (Next.js 16 & Tailwind CSS 4)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/globals.css

@@ -68,3 +68,15 @@ body {
 @utility gradient-cyan-purple {
   background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
 }
+
+@utility gradient-orange-pink {
+  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
+}
+
+@utility gradient-green-teal {
+  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
+}
+
+@utility gradient-indigo-purple {
+  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+}

app/icon.svg

@@ -0,0 +1,18 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" rx="12" fill="url(#gradient)"/>
+  <path d="M20 28 L20 42 L34 42 L34 28 Z" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M24 28 Q 27 18, 30 28" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>
+  <line x1="22" y1="34" x2="22" y2="39" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+  <circle cx="22" cy="32" r="1.5" fill="white"/>
+  <line x1="27" y1="34" x2="27" y2="40" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M24 34 L 27 32 L 30 34" fill="white" stroke="none"/>
+  <rect x="31" y="34" width="2" height="6" fill="white" rx="1"/>
+  <path d="M29 34 L 33 32 L 35 34" fill="white" stroke="none"/>
+  <defs>
+    <linearGradient id="gradient" x1="0" y1="0" x2="64" y2="64">
+      <stop offset="0%" stop-color="#667eea"/>
+      <stop offset="50%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+  </defs>
+</svg>

app/layout.tsx

@@ -3,8 +3,45 @@ import './globals.css';
 
 export const metadata: Metadata = {
   title: 'Kit - Your Creative Toolkit',
-  description: 'A curated collection of creative and utility tools for developers and creators',
-  keywords: ['tools', 'utilities', 'pastebin', 'paint', 'creative toolkit'],
+  description: 'A curated collection of creative and utility tools for developers and creators. Features file conversion, image editing, and color manipulation.',
+  keywords: ['tools', 'utilities', 'file converter', 'image editor', 'color palette', 'creative toolkit', 'vert', 'paint', 'pastel', 'open source'],
+  authors: [{ name: 'pivoine.art' }],
+  creator: 'pivoine.art',
+  publisher: 'pivoine.art',
+  metadataBase: new URL('https://kit.pivoine.art'),
+  openGraph: {
+    title: 'Kit - Your Creative Toolkit',
+    description: 'A curated collection of creative and utility tools for developers and creators. Privacy-first, open source, and free to use.',
+    url: 'https://kit.pivoine.art',
+    siteName: 'Kit',
+    locale: 'en_US',
+    type: 'website',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'Kit - Your Creative Toolkit',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Kit - Your Creative Toolkit',
+    description: 'A curated collection of creative and utility tools for developers and creators.',
+    images: ['/og-image.png'],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
 };
 
 export default function RootLayout({
@@ -14,6 +51,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://kit.pivoine.art" />
+      </head>
       <body className="antialiased">
         {children}
       </body>

app/page.tsx

@@ -1,5 +1,6 @@
 import AnimatedBackground from '@/components/AnimatedBackground';
 import Hero from '@/components/Hero';
+import Stats from '@/components/Stats';
 import ToolsGrid from '@/components/ToolsGrid';
 import Footer from '@/components/Footer';
 
@@ -8,6 +9,7 @@ export default function Home() {
     <main className="relative min-h-screen">
       <AnimatedBackground />
       <Hero />
+      <Stats />
       <ToolsGrid />
       <Footer />
     </main>