Initial commit: Kit landing page

- 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>

components/Logo.tsx

@@ -0,0 +1,119 @@
+'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>
+  );
+}