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>
This commit is contained in:
70
app/icon.svg
70
app/icon.svg
@@ -1,56 +1,44 @@
|
|||||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<!-- Background -->
|
<!-- Background circle -->
|
||||||
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
|
<circle cx="32" cy="32" r="27" fill="url(#bg)"/>
|
||||||
|
|
||||||
<!-- Wrench (bottom-left to top-right) -->
|
<!-- Wrench icon -->
|
||||||
<g>
|
<g>
|
||||||
<!-- Wrench handle -->
|
<path
|
||||||
<line x1="19" y1="45" x2="37" y2="27" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
|
d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
|
||||||
<!-- Wrench head -->
|
stroke="white"
|
||||||
<path d="M 37 27 L 40 24 M 37 27 L 40 30" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- Brush (top-left to bottom-right) -->
|
<!-- Paintbrush icon -->
|
||||||
<g>
|
<g>
|
||||||
<!-- Brush handle -->
|
<path
|
||||||
<line x1="24" y1="19" x2="37" y2="32" stroke="url(#brushGrad)" stroke-width="2.5" stroke-linecap="round"/>
|
d="M37 29V35M37 35L34 40L37 42L40 40L37 35Z"
|
||||||
<!-- Brush ferrule -->
|
stroke="white"
|
||||||
<ellipse cx="38.5" cy="33.5" rx="2.5" ry="4" fill="url(#ferrule)" transform="rotate(45 38.5 33.5)"/>
|
stroke-width="2"
|
||||||
<!-- Brush bristles -->
|
stroke-linecap="round"
|
||||||
<line x1="39.5" y1="34.5" x2="43" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
|
stroke-linejoin="round"
|
||||||
<line x1="40.5" y1="35.5" x2="45" y2="40" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
|
/>
|
||||||
<line x1="41.5" y1="36.5" x2="46" y2="41" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
|
<rect
|
||||||
<line x1="38.5" y1="35.5" x2="41" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
|
x="35"
|
||||||
<line x1="37.5" y1="36.5" x2="39.5" y2="38.5" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
|
y="27"
|
||||||
|
width="4"
|
||||||
|
height="5"
|
||||||
|
rx="1"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="2"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- Center circle -->
|
|
||||||
<circle cx="32" cy="32" r="4" fill="url(#center)"/>
|
|
||||||
|
|
||||||
<!-- Gradients -->
|
<!-- Gradients -->
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stop-color="#1a1a2e"/>
|
|
||||||
<stop offset="100%" stop-color="#0f0f1a"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="wrenchGrad" x1="19" y1="45" x2="40" y2="24">
|
|
||||||
<stop offset="0%" stop-color="#667eea"/>
|
<stop offset="0%" stop-color="#667eea"/>
|
||||||
<stop offset="100%" stop-color="#a855f7"/>
|
<stop offset="50%" stop-color="#8b5cf6"/>
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="brushGrad" x1="24" y1="19" x2="37" y2="32">
|
|
||||||
<stop offset="0%" stop-color="#f59e0b"/>
|
|
||||||
<stop offset="100%" stop-color="#ef4444"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="ferrule" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stop-color="#94a3b8"/>
|
|
||||||
<stop offset="100%" stop-color="#64748b"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="bristles" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stop-color="#10b981"/>
|
|
||||||
<stop offset="100%" stop-color="#06b6d4"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stop-color="#a855f7"/>
|
|
||||||
<stop offset="100%" stop-color="#06b6d4"/>
|
<stop offset="100%" stop-color="#06b6d4"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -11,105 +11,66 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
|
|||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
className={className}
|
className={className}
|
||||||
initial={{ opacity: 0, rotate: -45 }}
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
animate={{ opacity: 1, rotate: 0 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||||
>
|
>
|
||||||
{/* Wrench (bottom-left to top-right) */}
|
{/* Background circle */}
|
||||||
<motion.g
|
|
||||||
initial={{ pathLength: 0, opacity: 0 }}
|
|
||||||
animate={{ pathLength: 1, opacity: 1 }}
|
|
||||||
transition={{ duration: 1.2, ease: 'easeInOut' }}
|
|
||||||
>
|
|
||||||
{/* Wrench handle */}
|
|
||||||
<motion.line
|
|
||||||
x1="60"
|
|
||||||
y1="140"
|
|
||||||
x2="115"
|
|
||||||
y2="85"
|
|
||||||
stroke="url(#wrenchGradient)"
|
|
||||||
strokeWidth="8"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
{/* Wrench head (open end) */}
|
|
||||||
<motion.path
|
|
||||||
d="M 115 85 L 125 75 M 115 85 L 125 95"
|
|
||||||
stroke="url(#wrenchGradient)"
|
|
||||||
strokeWidth="8"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
</motion.g>
|
|
||||||
|
|
||||||
{/* Brush (top-left to bottom-right) */}
|
|
||||||
<motion.g
|
|
||||||
initial={{ pathLength: 0, opacity: 0 }}
|
|
||||||
animate={{ pathLength: 1, opacity: 1 }}
|
|
||||||
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
|
|
||||||
>
|
|
||||||
{/* Brush handle */}
|
|
||||||
<motion.line
|
|
||||||
x1="75"
|
|
||||||
y1="60"
|
|
||||||
x2="115"
|
|
||||||
y2="100"
|
|
||||||
stroke="url(#brushHandleGradient)"
|
|
||||||
strokeWidth="6"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
{/* Brush ferrule (metal part) */}
|
|
||||||
<motion.ellipse
|
|
||||||
cx="120"
|
|
||||||
cy="105"
|
|
||||||
rx="6"
|
|
||||||
ry="10"
|
|
||||||
fill="url(#ferruleGradient)"
|
|
||||||
transform="rotate(45 120 105)"
|
|
||||||
/>
|
|
||||||
{/* Brush bristles */}
|
|
||||||
<motion.g
|
|
||||||
initial={{ scaleY: 0.5, opacity: 0 }}
|
|
||||||
animate={{ scaleY: 1, opacity: 1 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.8, ease: 'easeOut' }}
|
|
||||||
>
|
|
||||||
<motion.line x1="123" y1="108" x2="135" y2="120" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
|
|
||||||
<motion.line x1="126" y1="111" x2="140" y2="125" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
|
|
||||||
<motion.line x1="129" y1="114" x2="143" y2="128" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
|
|
||||||
<motion.line x1="120" y1="111" x2="130" y2="121" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
|
|
||||||
<motion.line x1="117" y1="114" x2="125" y2="122" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
|
|
||||||
</motion.g>
|
|
||||||
</motion.g>
|
|
||||||
|
|
||||||
{/* Center circle (intersection) */}
|
|
||||||
<motion.circle
|
<motion.circle
|
||||||
cx="100"
|
cx="100"
|
||||||
cy="100"
|
cy="100"
|
||||||
r="12"
|
r="85"
|
||||||
fill="url(#centerGradient)"
|
fill="url(#bgGradient)"
|
||||||
initial={{ scale: 0 }}
|
initial={{ scale: 0 }}
|
||||||
animate={{ scale: 1 }}
|
animate={{ scale: 1 }}
|
||||||
transition={{ duration: 0.5, delay: 1, type: 'spring', stiffness: 200 }}
|
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Wrench icon (Lucide style) */}
|
||||||
|
<motion.g
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M75 90L85 80M85 80L95 90M85 80V110M70 110H100"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="6"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</motion.g>
|
||||||
|
|
||||||
|
{/* Paintbrush icon (Lucide style) */}
|
||||||
|
<motion.g
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M115 90V110M115 110L108 125L115 130L122 125L115 110Z"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="6"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x="110"
|
||||||
|
y="85"
|
||||||
|
width="10"
|
||||||
|
height="15"
|
||||||
|
rx="2"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="6"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</motion.g>
|
||||||
|
|
||||||
{/* Gradient definitions */}
|
{/* Gradient definitions */}
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="wrenchGradient" x1="60" y1="140" x2="125" y2="75">
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" stopColor="#667eea" />
|
<stop offset="0%" stopColor="#667eea" />
|
||||||
<stop offset="100%" stopColor="#a855f7" />
|
<stop offset="50%" stopColor="#8b5cf6" />
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="brushHandleGradient" x1="75" y1="60" x2="115" y2="100">
|
|
||||||
<stop offset="0%" stopColor="#f59e0b" />
|
|
||||||
<stop offset="100%" stopColor="#ef4444" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="ferruleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stopColor="#94a3b8" />
|
|
||||||
<stop offset="100%" stopColor="#64748b" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="bristlesGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stopColor="#10b981" />
|
|
||||||
<stop offset="100%" stopColor="#06b6d4" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stopColor="#a855f7" />
|
|
||||||
<stop offset="100%" stopColor="#06b6d4" />
|
<stop offset="100%" stopColor="#06b6d4" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
|
|||||||
Reference in New Issue
Block a user