Sebastian Krüger
a37b0e5b08
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>
96 lines
3.4 KiB
TypeScript
96 lines
3.4 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.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
>
|
|
{/* 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="8"
|
|
fill="url(#centerGradient)"
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.8, type: 'spring', stiffness: 200 }}
|
|
/>
|
|
|
|
{/* Gradient definitions */}
|
|
<defs>
|
|
<linearGradient id="wrenchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#667eea" />
|
|
<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>
|
|
</motion.svg>
|
|
);
|
|
}
|