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/Hero.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Logo from './Logo';
+
+export default function Hero() {
+  return (
+    <section className="relative min-h-screen flex flex-col items-center justify-center px-4 py-20">
+      <div className="max-w-6xl mx-auto text-center">
+        {/* Logo */}
+        <motion.div
+          className="mb-8 flex justify-center"
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <Logo size={160} />
+        </motion.div>
+
+        {/* Main heading */}
+        <motion.h1
+          className="text-6xl md:text-8xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
+          Kit
+        </motion.h1>
+
+        {/* Subtitle */}
+        <motion.p
+          className="text-xl md:text-2xl text-gray-300 mb-4 max-w-2xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          Your Creative Toolkit
+        </motion.p>
+
+        {/* Description */}
+        <motion.p
+          className="text-base md:text-lg text-gray-400 mb-12 max-w-xl mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+        >
+          A curated collection of creative and utility tools for developers and creators.
+          Simple, powerful, and always at your fingertips.
+        </motion.p>
+
+        {/* Scroll indicator */}
+        <motion.div
+          className="flex flex-col items-center gap-2"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 1 }}
+        >
+          <span className="text-sm text-gray-500">Explore Tools</span>
+          <motion.div
+            className="w-6 h-10 border-2 border-gray-600 rounded-full p-1"
+            animate={{ y: [0, 10, 0] }}
+            transition={{ duration: 1.5, repeat: Infinity }}
+          >
+            <div className="w-1 h-2 bg-gradient-to-b from-purple-400 to-cyan-400 rounded-full mx-auto" />
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}