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>
2025-11-07 11:26:19 +01:00
commit ce0b2e8470
21 changed files with 4980 additions and 0 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,70 @@
+@import "tailwindcss";
+
+@source "../components/*.{js,ts,jsx,tsx}";
+@source "../components/ui/*.{js,ts,jsx,tsx}";
+@source "*.{js,ts,jsx,tsx}";
+
+@theme {
+  --color-background: #0a0a0f;
+  --color-foreground: #ffffff;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+  /* Custom animations */
+  --animate-gradient: gradient 8s linear infinite;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-glow: glow 2s ease-in-out infinite alternate;
+
+  @keyframes gradient {
+    0%, 100% {
+      background-size: 200% 200%;
+      background-position: left center;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: right center;
+    }
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+
+  @keyframes glow {
+    from {
+      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+    }
+    to {
+      box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3);
+    }
+  }
+}
+
+body {
+  color: var(--color-foreground);
+  background: var(--color-background);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@utility gradient-purple-blue {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+@utility gradient-cyan-purple {
+  background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Kit - Your Creative Toolkit',
+  description: 'A curated collection of creative and utility tools for developers and creators',
+  keywords: ['tools', 'utilities', 'pastebin', 'paint', 'creative toolkit'],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,15 @@
+import AnimatedBackground from '@/components/AnimatedBackground';
+import Hero from '@/components/Hero';
+import ToolsGrid from '@/components/ToolsGrid';
+import Footer from '@/components/Footer';
+
+export default function Home() {
+  return (
+    <main className="relative min-h-screen">
+      <AnimatedBackground />
+      <Hero />
+      <ToolsGrid />
+      <Footer />
+    </main>
+  );
+}