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>
This commit is contained in:
77
app/icon.svg
77
app/icon.svg
@@ -1,44 +1,65 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background circle -->
|
||||
<circle cx="32" cy="32" r="27" fill="url(#bg)"/>
|
||||
<!-- Background -->
|
||||
<rect width="64" height="64" rx="12" fill="url(#bg)"/>
|
||||
|
||||
<!-- Wrench icon -->
|
||||
<g>
|
||||
<!-- Wrench (Lucide) - rotated 45 degrees -->
|
||||
<g transform="translate(32, 32) rotate(45) scale(1.8) translate(-12, -12)">
|
||||
<path
|
||||
d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
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"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Paintbrush icon -->
|
||||
<g>
|
||||
<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"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Brush (Lucide) - rotated -45 degrees -->
|
||||
<g transform="translate(32, 32) rotate(-45) scale(1.8) translate(-12, -12)">
|
||||
<path
|
||||
d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
|
||||
stroke="url(#brush)"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
<path
|
||||
d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
|
||||
stroke="url(#brush)"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="url(#brushFill)"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Center circle -->
|
||||
<circle cx="32" cy="32" r="3" fill="url(#center)"/>
|
||||
|
||||
<!-- Gradients -->
|
||||
<defs>
|
||||
<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="wrench" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#667eea"/>
|
||||
<stop offset="50%" stop-color="#8b5cf6"/>
|
||||
<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>
|
||||
<linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#10b981" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#06b6d4" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#06b6d4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 2.4 KiB |
@@ -15,62 +15,78 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
>
|
||||
{/* Background circle */}
|
||||
{/* Wrench (Lucide) - rotated 45 degrees, bottom-left to top-right */}
|
||||
<motion.g
|
||||
transform="translate(100, 100) rotate(45) translate(-12, -12)"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 1.2, ease: 'easeInOut' }}
|
||||
>
|
||||
<motion.path
|
||||
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(#wrenchGradient)"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
fill="none"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
</motion.g>
|
||||
|
||||
{/* Brush (Lucide) - rotated -45 degrees, top-left to bottom-right */}
|
||||
<motion.g
|
||||
transform="translate(100, 100) rotate(-45) translate(-12, -12)"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
<motion.path
|
||||
d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
|
||||
stroke="url(#brushGradient)"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
fill="none"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
<motion.path
|
||||
d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
|
||||
stroke="url(#brushGradient)"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
fill="url(#brushFill)"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
</motion.g>
|
||||
|
||||
{/* Center circle */}
|
||||
<motion.circle
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="85"
|
||||
fill="url(#bgGradient)"
|
||||
r="8"
|
||||
fill="url(#centerGradient)"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.8, ease: 'easeOut' }}
|
||||
transition={{ duration: 0.5, delay: 0.8, type: 'spring', stiffness: 200 }}
|
||||
/>
|
||||
|
||||
{/* 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 */}
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<linearGradient id="wrenchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#667eea" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" />
|
||||
<stop offset="100%" stopColor="#a855f7" />
|
||||
</linearGradient>
|
||||
<linearGradient id="brushGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#f59e0b" />
|
||||
<stop offset="100%" stopColor="#ec4899" />
|
||||
</linearGradient>
|
||||
<linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#10b981" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#06b6d4" stopOpacity="0.3" />
|
||||
</linearGradient>
|
||||
<linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#a855f7" />
|
||||
<stop offset="100%" stopColor="#06b6d4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
Reference in New Issue
Block a user