Sebastian Krüger
f843ad9923
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>
105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function Logo({ className = '', size = 120 }: { className?: string; size?: number }) {
|
|
return (
|
|
<motion.svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 200 200"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, ease: 'easeOut' }}
|
|
>
|
|
{/* Suitcase body */}
|
|
<motion.rect
|
|
x="50"
|
|
y="85"
|
|
width="100"
|
|
height="70"
|
|
rx="6"
|
|
stroke="url(#gradient1)"
|
|
strokeWidth="5"
|
|
fill="rgba(139, 92, 246, 0.15)"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 1 }}
|
|
transition={{ duration: 1.2, ease: 'easeInOut' }}
|
|
/>
|
|
|
|
{/* Suitcase handle */}
|
|
<motion.path
|
|
d="M 85 85 Q 100 60, 115 85"
|
|
stroke="url(#gradient1)"
|
|
strokeWidth="5"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
animate={{ pathLength: 1, opacity: 1 }}
|
|
transition={{ duration: 1, delay: 0.2, ease: 'easeInOut' }}
|
|
/>
|
|
|
|
{/* Suitcase latch */}
|
|
<motion.rect
|
|
x="95"
|
|
y="82"
|
|
width="10"
|
|
height="8"
|
|
rx="2"
|
|
fill="url(#gradient1)"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.8 }}
|
|
/>
|
|
|
|
{/* Brush handle */}
|
|
<motion.g
|
|
initial={{ opacity: 0, y: -15 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1, ease: 'easeOut' }}
|
|
>
|
|
<rect
|
|
x="97"
|
|
y="100"
|
|
width="6"
|
|
height="35"
|
|
fill="url(#brushHandle)"
|
|
rx="3"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Brush bristles */}
|
|
<motion.g
|
|
initial={{ opacity: 0, scaleY: 0.5 }}
|
|
animate={{ opacity: 1, scaleY: 1 }}
|
|
transition={{ duration: 0.6, delay: 1.3, ease: 'easeOut' }}
|
|
style={{ transformOrigin: '100px 135px' }}
|
|
>
|
|
<path
|
|
d="M 88 135 L 90 145 L 92 143 L 94 146 L 96 144 L 98 147 L 100 145 L 102 147 L 104 144 L 106 146 L 108 143 L 110 145 L 112 135 Z"
|
|
fill="url(#brushBristles)"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Gradient definitions */}
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#a855f7" />
|
|
<stop offset="100%" stopColor="#6366f1" />
|
|
</linearGradient>
|
|
<linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="#f59e0b" />
|
|
<stop offset="100%" stopColor="#ef4444" />
|
|
</linearGradient>
|
|
<linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="#10b981" />
|
|
<stop offset="100%" stopColor="#06b6d4" />
|
|
</linearGradient>
|
|
</defs>
|
|
</motion.svg>
|
|
);
|
|
}
|