Sebastian Krüger
ce0b2e8470
- Next.js 16 with Turbopack - React 19 - Tailwind CSS 4 with CSS-first config - Framer Motion animations - Animated logo and hero section - Tool cards for Vert and Paint - Glassmorphism effects and gradient animations - Fully responsive design - Docker support with Nginx - Static export ready 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
120 lines
3.4 KiB
TypeScript
120 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.5, rotate: -180 }}
|
|
animate={{ opacity: 1, scale: 1, rotate: 0 }}
|
|
transition={{ duration: 1, ease: 'easeOut' }}
|
|
>
|
|
{/* Toolbox base */}
|
|
<motion.rect
|
|
x="40"
|
|
y="80"
|
|
width="120"
|
|
height="80"
|
|
rx="8"
|
|
stroke="url(#gradient1)"
|
|
strokeWidth="4"
|
|
fill="rgba(139, 92, 246, 0.1)"
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 1.5, ease: 'easeInOut' }}
|
|
/>
|
|
|
|
{/* Toolbox handle */}
|
|
<motion.path
|
|
d="M 80 80 Q 100 40, 120 80"
|
|
stroke="url(#gradient1)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
|
|
/>
|
|
|
|
{/* Wrench */}
|
|
<motion.g
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
|
>
|
|
<path
|
|
d="M 70 110 L 70 130"
|
|
stroke="url(#gradient2)"
|
|
strokeWidth="5"
|
|
strokeLinecap="round"
|
|
/>
|
|
<circle cx="70" cy="105" r="6" fill="url(#gradient2)" />
|
|
</motion.g>
|
|
|
|
{/* Pencil */}
|
|
<motion.g
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1 }}
|
|
>
|
|
<path
|
|
d="M 100 110 L 100 135"
|
|
stroke="url(#gradient3)"
|
|
strokeWidth="5"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M 95 110 L 100 105 L 105 110"
|
|
fill="url(#gradient3)"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Brush */}
|
|
<motion.g
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
>
|
|
<rect
|
|
x="127"
|
|
y="110"
|
|
width="6"
|
|
height="20"
|
|
fill="url(#gradient4)"
|
|
rx="1"
|
|
/>
|
|
<path
|
|
d="M 125 110 L 130 105 L 135 110"
|
|
fill="url(#gradient4)"
|
|
/>
|
|
</motion.g>
|
|
|
|
{/* Gradient definitions */}
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#8b5cf6" />
|
|
<stop offset="100%" stopColor="#6366f1" />
|
|
</linearGradient>
|
|
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#2dd4bf" />
|
|
<stop offset="100%" stopColor="#06b6d4" />
|
|
</linearGradient>
|
|
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#f59e0b" />
|
|
<stop offset="100%" stopColor="#ef4444" />
|
|
</linearGradient>
|
|
<linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#10b981" />
|
|
<stop offset="100%" stopColor="#14b8a6" />
|
|
</linearGradient>
|
|
</defs>
|
|
</motion.svg>
|
|
);
|
|
}
|