valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
443b87f97b19bcb0e28f18adb92b5bf65d8087aa
kit-ui/app/icon.svg

56 lines
1.9 KiB
XML
Raw Normal View History

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>
2025-11-07 12:30:08 +01:00
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
<!-- Background -->
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
design: simplify logo to suitcase with single brush Logo Redesign: - Simplified from toolbox with 3 tools to clean suitcase with 1 brush - Purple gradient suitcase with handle and latch detail - Single colorful brush inside (orange-to-red handle, green-to-cyan bristles) - Smoother animations with reduced complexity - Better visual clarity and brand identity Favicon Update: - Matching simplified design scaled for 64x64 - Clear icon that works at small sizes - Consistent with main logo design Visual Elements: - Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient - Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Animated entrance with subtle scale and fade 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 19:20:39 +01:00
design: finalize logo and update Pastel to palette icon Logo Updates: - Using authentic Lucide brush and wrench icons - Wrench vertical, brush horizontal (90° rotation) - Aligned bottom edges for visual balance - Scaled up to 5x for better visibility - Removed center dot for cleaner look Pastel Icon: - Changed from paintbrush to proper palette icon - Palette with thumb hole and color dots - Better represents color manipulation tool Visual improvements: - Clean, professional crossed tools design - Proper alignment and spacing - Large, visible icons at all sizes - Consistent with Lucide icon library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 16:08:28 +01:00
<!-- Wrench (Lucide) - vertical -->
<g transform="translate(32, 32) rotate(0) scale(2.4) translate(-12, -12)">
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
<path
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
stroke="url(#wrench)"
stroke-width="1.5"
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
stroke-linecap="round"
stroke-linejoin="round"
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
fill="none"
vector-effect="non-scaling-stroke"
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
/>
design: update logo to crossed wrench and brush Logo Redesign: - Simple, beautiful crossed design (wrench × brush in X formation) - Wrench: Bottom-left to top-right with purple gradient - Brush: Top-left to bottom-right with orange-red gradient - Center circle at intersection with purple-to-cyan gradient - Clean, minimal aesthetic with smooth animations Favicon Update: - Matching crossed design scaled for 64x64 - Clear visibility at small sizes - Professional and memorable icon Visual Elements: - Wrench: Indigo (#667eea) to Purple (#a855f7) gradient - Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient - Brush ferrule: Gray metal finish - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Center: Purple to Cyan radial gradient Animations: - Initial rotation animation on logo - Progressive drawing of wrench and brush - Bristles expand effect - Center circle pops in with spring animation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:49:32 +01:00
</g>
design: simplify logo to suitcase with single brush Logo Redesign: - Simplified from toolbox with 3 tools to clean suitcase with 1 brush - Purple gradient suitcase with handle and latch detail - Single colorful brush inside (orange-to-red handle, green-to-cyan bristles) - Smoother animations with reduced complexity - Better visual clarity and brand identity Favicon Update: - Matching simplified design scaled for 64x64 - Clear icon that works at small sizes - Consistent with main logo design Visual Elements: - Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient - Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Animated entrance with subtle scale and fade 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 19:20:39 +01:00
design: finalize logo and update Pastel to palette icon Logo Updates: - Using authentic Lucide brush and wrench icons - Wrench vertical, brush horizontal (90° rotation) - Aligned bottom edges for visual balance - Scaled up to 5x for better visibility - Removed center dot for cleaner look Pastel Icon: - Changed from paintbrush to proper palette icon - Palette with thumb hole and color dots - Better represents color manipulation tool Visual improvements: - Clean, professional crossed tools design - Proper alignment and spacing - Large, visible icons at all sizes - Consistent with Lucide icon library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 16:08:28 +01:00
<!-- Brush (Lucide) - horizontal flipped -->
<g transform="translate(32, 31) rotate(90) scale(2.4) translate(-12, -12)">
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
<path
design: finalize logo and update Pastel to palette icon Logo Updates: - Using authentic Lucide brush and wrench icons - Wrench vertical, brush horizontal (90° rotation) - Aligned bottom edges for visual balance - Scaled up to 5x for better visibility - Removed center dot for cleaner look Pastel Icon: - Changed from paintbrush to proper palette icon - Palette with thumb hole and color dots - Better represents color manipulation tool Visual improvements: - Clean, professional crossed tools design - Proper alignment and spacing - Large, visible icons at all sizes - Consistent with Lucide icon library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 16:08:28 +01:00
d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
stroke="url(#brush)"
stroke-width="1.5"
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
vector-effect="non-scaling-stroke"
/>
<path
design: finalize logo and update Pastel to palette icon Logo Updates: - Using authentic Lucide brush and wrench icons - Wrench vertical, brush horizontal (90° rotation) - Aligned bottom edges for visual balance - Scaled up to 5x for better visibility - Removed center dot for cleaner look Pastel Icon: - Changed from paintbrush to proper palette icon - Palette with thumb hole and color dots - Better represents color manipulation tool Visual improvements: - Clean, professional crossed tools design - Proper alignment and spacing - Large, visible icons at all sizes - Consistent with Lucide icon library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 16:08:28 +01:00
d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
stroke="url(#brush)"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
design: finalize logo and update Pastel to palette icon Logo Updates: - Using authentic Lucide brush and wrench icons - Wrench vertical, brush horizontal (90° rotation) - Aligned bottom edges for visual balance - Scaled up to 5x for better visibility - Removed center dot for cleaner look Pastel Icon: - Changed from paintbrush to proper palette icon - Palette with thumb hole and color dots - Better represents color manipulation tool Visual improvements: - Clean, professional crossed tools design - Proper alignment and spacing - Large, visible icons at all sizes - Consistent with Lucide icon library 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 16:08:28 +01:00
fill="none"
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
vector-effect="non-scaling-stroke"
design: redesign logo with clean Lucide-style icons Logo Redesign: - Clean, minimal circular badge design - Beautiful gradient background (indigo → purple → cyan) - White outlined icons in Lucide/Heroicons style - Wrench and paintbrush side-by-side - Professional and modern aesthetic Icon Design: - Wrench: Simple outline with open-end head - Paintbrush: Clean brush with bristles and handle - Both icons use consistent 6px stroke width - Smooth entrance animations (slide in from sides) Favicon Update: - Matching circular badge design for 64x64 - Clear visibility at small sizes - Consistent white icons on gradient background - Professional brand identity Colors: - Background gradient: #667eea → #8b5cf6 → #06b6d4 - Icons: Pure white (#ffffff) for maximum contrast - Clean, modern, accessible design Animations: - Background circle scales in - Wrench slides in from left - Paintbrush slides in from right - Smooth, subtle entrance effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:54:15 +01:00
/>
design: update logo to crossed wrench and brush Logo Redesign: - Simple, beautiful crossed design (wrench × brush in X formation) - Wrench: Bottom-left to top-right with purple gradient - Brush: Top-left to bottom-right with orange-red gradient - Center circle at intersection with purple-to-cyan gradient - Clean, minimal aesthetic with smooth animations Favicon Update: - Matching crossed design scaled for 64x64 - Clear visibility at small sizes - Professional and memorable icon Visual Elements: - Wrench: Indigo (#667eea) to Purple (#a855f7) gradient - Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient - Brush ferrule: Gray metal finish - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Center: Purple to Cyan radial gradient Animations: - Initial rotation animation on logo - Progressive drawing of wrench and brush - Bristles expand effect - Center circle pops in with spring animation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:49:32 +01:00
</g>
design: simplify logo to suitcase with single brush Logo Redesign: - Simplified from toolbox with 3 tools to clean suitcase with 1 brush - Purple gradient suitcase with handle and latch detail - Single colorful brush inside (orange-to-red handle, green-to-cyan bristles) - Smoother animations with reduced complexity - Better visual clarity and brand identity Favicon Update: - Matching simplified design scaled for 64x64 - Clear icon that works at small sizes - Consistent with main logo design Visual Elements: - Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient - Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Animated entrance with subtle scale and fade 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 19:20:39 +01:00
<!-- Gradients -->
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>
2025-11-07 12:30:08 +01:00
<defs>
design: simplify logo to suitcase with single brush Logo Redesign: - Simplified from toolbox with 3 tools to clean suitcase with 1 brush - Purple gradient suitcase with handle and latch detail - Single colorful brush inside (orange-to-red handle, green-to-cyan bristles) - Smoother animations with reduced complexity - Better visual clarity and brand identity Favicon Update: - Matching simplified design scaled for 64x64 - Clear icon that works at small sizes - Consistent with main logo design Visual Elements: - Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient - Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Animated entrance with subtle scale and fade 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 19:20:39 +01:00
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
<stop offset="0%" stop-color="#1a1a2e"/>
<stop offset="100%" stop-color="#0f0f1a"/>
</linearGradient>
<linearGradient id="wrench" x1="0%" y1="0%" x2="100%" y2="100%">
design: update logo to crossed wrench and brush Logo Redesign: - Simple, beautiful crossed design (wrench × brush in X formation) - Wrench: Bottom-left to top-right with purple gradient - Brush: Top-left to bottom-right with orange-red gradient - Center circle at intersection with purple-to-cyan gradient - Clean, minimal aesthetic with smooth animations Favicon Update: - Matching crossed design scaled for 64x64 - Clear visibility at small sizes - Professional and memorable icon Visual Elements: - Wrench: Indigo (#667eea) to Purple (#a855f7) gradient - Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient - Brush ferrule: Gray metal finish - Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient - Center: Purple to Cyan radial gradient Animations: - Initial rotation animation on logo - Progressive drawing of wrench and brush - Bristles expand effect - Center circle pops in with spring animation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:49:32 +01:00
<stop offset="0%" stop-color="#667eea"/>
design: use authentic Lucide icons (brush × wrench) crossed Logo Update: - Using official Lucide SVG paths for brush and wrench icons - Crossed in X formation (45° and -45° rotation) - Professional, recognizable design from established icon library Icon Details: - Wrench (Lucide): Purple gradient (#667eea → #a855f7) - Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899) - Brush bristles: Green-cyan fill with transparency - Center circle: Purple-to-cyan gradient accent Animations: - Wrench draws in with path animation - Brush draws in with delay - Center circle pops in with spring effect - Smooth, professional entrance Favicon: - Matching crossed Lucide icons for 64x64 - Scaled appropriately for small sizes - Dark background with gradient icons Benefits: - Authentic, recognizable icons from Lucide library - Professional design language - Consistent with modern UI/UX standards - Clear symbolism: utility (wrench) + creativity (brush) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 15:56:57 +01:00
<stop offset="100%" stop-color="#a855f7"/>
</linearGradient>
<linearGradient id="brush" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f59e0b"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
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>
2025-11-07 12:30:08 +01:00
</defs>
</svg>
Reference in New Issue Copy Permalink