Sebastian Krüger
408caebdf0
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>
80 lines
2.1 KiB
TypeScript
80 lines
2.1 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' }}
|
|
>
|
|
{/* Background circle */}
|
|
<motion.circle
|
|
cx="100"
|
|
cy="100"
|
|
r="85"
|
|
fill="url(#bgGradient)"
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
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 */}
|
|
<defs>
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#667eea" />
|
|
<stop offset="50%" stopColor="#8b5cf6" />
|
|
<stop offset="100%" stopColor="#06b6d4" />
|
|
</linearGradient>
|
|
</defs>
|
|
</motion.svg>
|
|
);
|
|
}
|