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

46 lines
1.0 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: 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
<!-- Background circle -->
<circle cx="32" cy="32" r="27" 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: 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
<!-- Wrench icon -->
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: 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
d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
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: 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
<!-- Paintbrush icon -->
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: 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
d="M37 29V35M37 35L34 40L37 42L40 40L37 35Z"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<rect
x="35"
y="27"
width="4"
height="5"
rx="1"
stroke="white"
stroke-width="2"
fill="none"
/>
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: 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: 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
<stop offset="50%" stop-color="#8b5cf6"/>
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="100%" stop-color="#06b6d4"/>
</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