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

@@ -0,0 +1,83 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface ToolCardProps {
+  title: string;
+  description: string;
+  icon: ReactNode;
+  url: string;
+  gradient: string;
+  index: number;
+}
+
+export default function ToolCard({ title, description, icon, url, gradient, index }: ToolCardProps) {
+  return (
+    <motion.a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group relative block"
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      whileHover={{ y: -10 }}
+    >
+      <div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 hover:shadow-2xl">
+        {/* Gradient overlay on hover */}
+        <div
+          className={`absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-300 ${gradient}`}
+        />
+
+        {/* Glow effect */}
+        <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl -z-10">
+          <div className={`w-full h-full ${gradient}`} />
+        </div>
+
+        {/* Icon */}
+        <motion.div
+          className="mb-6 flex justify-center"
+          whileHover={{ scale: 1.1, rotate: 5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          <div className={`p-4 rounded-xl ${gradient}`}>
+            {icon}
+          </div>
+        </motion.div>
+
+        {/* Title */}
+        <h3 className="text-2xl font-bold mb-3 text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-cyan-400 transition-all duration-300">
+          {title}
+        </h3>
+
+        {/* Description */}
+        <p className="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">
+          {description}
+        </p>
+
+        {/* Arrow icon */}
+        <motion.div
+          className="absolute bottom-8 right-8 text-gray-600 group-hover:text-purple-400"
+          initial={{ x: 0 }}
+          whileHover={{ x: 5 }}
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 7l5 5m0 0l-5 5m5-5H6"
+            />
+          </svg>
+        </motion.div>
+      </div>
+    </motion.a>
+  );
+}