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>
This commit is contained in:
2025-11-07 12:30:08 +01:00
parent 9054aa62b8
commit c7373430f9
7 changed files with 206 additions and 22 deletions

18
app/icon.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB