From c7373430f922398eadfd0b61ba30a4bbf50f2c86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Fri, 7 Nov 2025 12:30:08 +0100 Subject: [PATCH] polish: Priority 1 improvements - gradients, stats, metadata, footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ 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 --- app/globals.css | 12 +++++++ app/icon.svg | 18 ++++++++++ app/layout.tsx | 45 ++++++++++++++++++++++-- app/page.tsx | 2 ++ components/Footer.tsx | 76 +++++++++++++++++++++++++++++++--------- components/Stats.tsx | 69 ++++++++++++++++++++++++++++++++++++ components/ToolsGrid.tsx | 6 ++-- 7 files changed, 206 insertions(+), 22 deletions(-) create mode 100644 app/icon.svg create mode 100644 components/Stats.tsx diff --git a/app/globals.css b/app/globals.css index 8d71ccb..a6269c1 100644 --- a/app/globals.css +++ b/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%); +} diff --git a/app/icon.svg b/app/icon.svg new file mode 100644 index 0000000..7df1b1f --- /dev/null +++ b/app/icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/layout.tsx b/app/layout.tsx index cefeb4a..7f6ea93 100644 --- a/app/layout.tsx +++ b/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 ( + + + + {children} diff --git a/app/page.tsx b/app/page.tsx index 3f470f5..c393279 100644 --- a/app/page.tsx +++ b/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() {
+
diff --git a/components/Footer.tsx b/components/Footer.tsx index 629aabe..2d2d967 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -3,38 +3,80 @@ import { motion } from 'framer-motion'; export default function Footer() { + const currentYear = new Date().getFullYear(); + return ( -