doc: prod deploy

.mcp.json

@@ -13,7 +13,10 @@
     },
     "brave-search": {
       "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-brave-search"
+      ],
       "env": {
         "BRAVE_API_KEY": "BSAcRGGikEzY4B2j3NZ8Qy5NYh9l4HZ"
       }
@@ -36,17 +39,34 @@
     "perplexity": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "perplexity-mcp"],
+      "args": [
+        "-y",
+        "perplexity-mcp"
+      ],
       "env": {
         "PERPLEXITY_API_KEY": "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",
         "PERPLEXITY_TIMEOUT_MS": "600000"
       }
     },
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "chrome-devtools-mcp@latest"
+      ]
+    },
     "browsermcp": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "@browsermcp/mcp@latest"],
+      "args": [
+        "-y",
+        "@browsermcp/mcp@latest"
+      ],
       "env": {}
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
     }
   }
 }

apps/landing/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

apps/landing/package.json

@@ -10,17 +10,28 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@banatie/database": "workspace:*",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.400.0",
+    "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.4",
-    "@banatie/database": "workspace:*"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
   }
 }

apps/landing/src/app/(lab)/CLAUDE.md

@@ -0,0 +1,364 @@
+# Lab Section Design System
+
+The Lab section is a production-ready UI interface for interacting with the Banatie API service. It provides a clean, work-focused experience for image generation, gallery browsing, alias management, and flow control.
+
+## File Structure
+
+```
+apps/landing/src/
+├── app/(lab)/
+│   ├── CLAUDE.md              # This design documentation
+│   ├── layout.tsx             # Root lab layout with scroll context
+│   └── lab/
+│       ├── layout.tsx         # Sub-layout with PageProvider
+│       ├── page.tsx           # Redirect to /lab/generate
+│       ├── generate/page.tsx  # Generation workbench
+│       ├── images/page.tsx    # Image gallery browser
+│       ├── live/page.tsx      # Live generation testing
+│       └── upload/page.tsx    # File upload interface
+│
+├── components/layout/lab/
+│   ├── LabLayout.tsx          # Main layout (sidebar + content + footer)
+│   ├── LabSidebar.tsx         # Left filter panel
+│   └── LabFooter.tsx          # Contextual footer with links
+│
+├── components/lab/
+│   ├── GenerateFormPlaceholder.tsx  # Generation form component
+│   └── FilterPlaceholder.tsx        # Reusable filter checkbox/radio
+│
+└── contexts/
+    └── lab-scroll-context.tsx  # Scroll state for header collapse
+```
+
+## Design Principles
+
+1. **Work-focused, not marketing** - Small typography, efficient spacing
+2. **Clean and functional** - Like Google AI Studio
+3. **Dual color system** - Zinc for layout, Slate for forms
+4. **Consistent icons** - Lucide React only, no emojis
+5. **Responsive** - Works on 768px to 1920px+ screens
+
+---
+
+## Color System
+
+### Layout/Chrome → Zinc (Neutral Gray)
+Used for sidebar, footer, and layout borders:
+```css
+bg-zinc-950       /* Sidebar background */
+bg-zinc-950/50    /* Footer background, layout wrappers */
+border-zinc-800   /* Layout borders, dividers */
+text-zinc-400     /* Sidebar text */
+text-zinc-500     /* Footer text, muted */
+```
+
+### Forms/Cards → Slate (Original Style)
+Used for cards, inputs, and interactive UI elements:
+```css
+bg-slate-900/80   /* Card backgrounds */
+bg-slate-900/50   /* Empty states, lighter cards */
+bg-slate-800      /* Input backgrounds, secondary surfaces */
+border-slate-700  /* Card borders, input borders */
+text-gray-400     /* Labels, secondary text */
+text-gray-500     /* Placeholders, hints */
+```
+
+### Accent Colors (Purple/Cyan)
+```css
+/* Primary gradient */
+bg-gradient-to-r from-purple-600 to-cyan-600
+hover:from-purple-500 hover:to-cyan-500
+shadow-lg shadow-purple-900/30
+focus:ring-2 focus:ring-purple-500
+
+/* Single-color accents */
+text-purple-400   /* Links, interactive text */
+
+/* Info banners */
+bg-purple-900/10 border-purple-700/50
+```
+
+### Status Colors
+```css
+/* Success */ bg-emerald-500/10 border-emerald-500/30 text-emerald-400
+/* Warning */ bg-amber-500/10 border-amber-500/30 text-amber-400
+/* Error   */ bg-red-500/10 border-red-500/30 text-red-400
+/* Info    */ bg-purple-900/10 border-purple-700/50 text-purple-400
+```
+
+---
+
+## Typography Scale
+
+### Headings (Practical Sizes)
+```tsx
+// Page Title (only on main pages)
+text-lg font-semibold text-white
+
+// Section Title
+text-base font-semibold text-white
+
+// Card Title
+text-sm font-medium text-white
+```
+
+### Body Text
+```tsx
+// Primary body
+text-sm text-gray-300
+
+// Secondary/descriptions
+text-sm text-gray-400
+
+// Small text (hints, metadata)
+text-xs text-gray-500
+
+// Labels (form fields)
+text-xs font-medium text-gray-400
+```
+
+### Interactive
+```tsx
+// Button text
+text-sm font-semibold
+
+// Links
+text-sm text-purple-400 hover:text-purple-300
+
+// Badge/count
+text-xs text-gray-600
+```
+
+---
+
+## Spacing System
+
+### Padding
+```tsx
+// Cards
+p-4 md:p-5
+
+// Compact cards
+p-3
+
+// Form inputs
+px-3 py-2
+
+// Buttons (primary)
+px-4 py-2.5
+
+// Buttons (secondary)
+px-3 py-2
+```
+
+### Section Spacing
+```tsx
+// Page padding
+p-4 md:p-6
+
+// Between sections
+space-y-4
+
+// Between cards in grid
+gap-3 md:gap-4
+
+// Between form fields
+gap-2
+
+// Label to input
+mb-1.5
+```
+
+### Border Radius
+```tsx
+rounded-lg     /* Standard (inputs, small cards) */
+rounded-xl     /* Medium (cards) */
+```
+
+---
+
+## Component Patterns
+
+### Page Header
+```tsx
+<header className="pb-3 border-b border-zinc-800">
+  <div className="flex items-center gap-2">
+    <Sparkles className="w-5 h-5 text-purple-400" />
+    <div>
+      <h1 className="text-lg font-semibold text-white">Generate</h1>
+      <p className="text-xs text-gray-400">Create AI images from text prompts</p>
+    </div>
+  </div>
+</header>
+```
+
+### Form Card (Slate)
+```tsx
+<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
+  {/* content */}
+</section>
+```
+
+### Form Input (Slate)
+```tsx
+<div className="space-y-1.5">
+  <label className="block text-xs font-medium text-gray-400">Field Label</label>
+  <input
+    className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+    placeholder="Enter value..."
+  />
+</div>
+```
+
+### Textarea (Slate)
+```tsx
+<textarea
+  className="w-full px-3 py-2.5 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
+  rows={4}
+/>
+```
+
+### Primary Button
+```tsx
+<button className="px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all shadow-lg shadow-purple-900/30 focus:ring-2 focus:ring-purple-500 flex items-center gap-1.5">
+  <Sparkles className="w-4 h-4" />
+  Generate
+</button>
+```
+
+### Secondary Button (Slate)
+```tsx
+<button className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white hover:bg-slate-700 transition-colors flex items-center justify-center gap-1.5 focus:ring-2 focus:ring-purple-500">
+  <Settings className="w-4 h-4" />
+  Configure
+</button>
+```
+
+### Empty State (Slate)
+```tsx
+<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+  <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+    <ImageOff className="w-6 h-6 text-gray-500" />
+  </div>
+  <h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
+  <p className="text-xs text-gray-400">Generated images will appear here</p>
+</div>
+```
+
+### Info Banner
+```tsx
+<div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
+  <div className="flex items-start gap-2">
+    <Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
+    <p className="text-xs text-gray-300">
+      <span className="font-medium text-white">Lab Mode:</span> Experimental features enabled.
+    </p>
+  </div>
+</div>
+```
+
+---
+
+## Icon System (Lucide React)
+
+### Standard Sizes
+```tsx
+// Inline with text
+<Icon className="w-4 h-4" />
+
+// Small (badges)
+<Icon className="w-3 h-3" />
+
+// Medium (empty states)
+<Icon className="w-6 h-6" />
+
+// With margin (before text)
+<Icon className="w-4 h-4 mr-1.5" />
+```
+
+### Recommended Icons
+```tsx
+// Navigation
+import { Home, Image, Upload, Zap, Settings } from 'lucide-react';
+
+// Actions
+import { Plus, X, Download, Share2, Copy, Trash2, Edit3, MoreVertical } from 'lucide-react';
+
+// Filters
+import { Activity, Calendar, Palette, ChevronRight, ChevronDown } from 'lucide-react';
+
+// Status
+import { CheckCircle2, AlertCircle, XCircle, Info, Loader2 } from 'lucide-react';
+
+// Media
+import { ImageOff, FileImage, Sparkles } from 'lucide-react';
+
+// Form
+import { Search, Filter, SlidersHorizontal } from 'lucide-react';
+```
+
+---
+
+## Responsive Breakpoints
+
+```tsx
+// Base: < 768px (mobile) - single column, no sidebar
+// md: >= 768px (tablet) - 2 columns, no sidebar
+// lg: >= 1024px (desktop) - sidebar visible, 2-3 columns
+// xl: >= 1280px (large desktop) - optimal spacing, 3 columns
+```
+
+### Sidebar Behavior
+```tsx
+// Hidden on mobile/tablet, visible lg+
+hidden lg:block w-64
+```
+
+### Content Grid
+```tsx
+// Images: 1 col mobile, 2 col tablet, 3 col desktop
+grid-cols-1 md:grid-cols-2 xl:grid-cols-3
+
+// Form fields
+grid-cols-1 md:grid-cols-3
+```
+
+---
+
+## Do's and Don'ts
+
+### DO
+- Use **zinc** for layout (sidebar, footer, layout borders)
+- Use **slate** for forms (cards, inputs, empty states)
+- Use text-sm/text-xs for most text
+- Use Lucide icons exclusively
+- Keep spacing tight (p-3 to p-5)
+- Add focus:ring-2 focus:ring-purple-500 to all interactive elements
+- Use transitions (transition-colors, transition-all)
+
+### DON'T
+- Use emojis anywhere in the UI
+- Use marketing-size headings (text-3xl+)
+- Use generous spacing (p-8+, py-12+)
+- Mix zinc and slate inconsistently
+- Forget aria-label on icon-only buttons
+
+---
+
+## Layout Architecture
+
+The Lab uses a scroll-aware header system:
+
+1. **LabScrollProvider** wraps the entire section
+2. **LabLayout** detects scroll > 50px in content area
+3. When scrolled, header collapses (h-16 → h-0)
+4. SubsectionNav becomes the top element
+5. Content height adjusts: `h-[calc(100vh-7rem)]` → `h-[calc(100vh-3rem)]`
+
+```tsx
+// Layout hierarchy
+(lab)/layout.tsx          → LabScrollProvider + LabHeader
+  └── lab/layout.tsx      → PageProvider (SubsectionNav)
+      └── LabLayout.tsx   → ThreeColumnLayout (sidebar + content + footer)
+          └── page.tsx    → Actual page content
+```

apps/landing/src/app/(lab)/lab/generate/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { GenerateFormPlaceholder } from '@/components/lab/GenerateFormPlaceholder';
+
+const GeneratePage = () => {
+  return <GenerateFormPlaceholder />;
+};
+
+export default GeneratePage;

apps/landing/src/app/(lab)/lab/images/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Image, ImageOff } from 'lucide-react';
+
+const ImagesPage = () => {
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Image className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Images</h1>
+            <p className="text-xs text-gray-400">Browse and manage your generated images</p>
+          </div>
+        </div>
+      </header>
+
+      {/* Empty State Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <ImageOff className="w-6 h-6 text-gray-500" />
+        </div>
+        <h2 className="text-sm font-medium text-white mb-1">Image Browser</h2>
+        <p className="text-xs text-gray-400">Component will be implemented here</p>
+      </div>
+    </div>
+  );
+};
+
+export default ImagesPage;

apps/landing/src/app/(lab)/lab/layout.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+/**
+ * Lab Section Layout
+ *
+ * Code Style:
+ * - Use `const` arrow function components (not function declarations)
+ * - Use `type` instead of `interface` for type definitions
+ * - Early returns for conditionals
+ * - No inline comments (JSDoc headers only)
+ * - Tailwind classes only
+ *
+ * Structure:
+ * - Layout components: src/components/layout/lab/
+ * - Feature components: src/components/lab/
+ * - Pages: src/app/lab/{section}/page.tsx
+ *
+ * Sub-navigation items:
+ * - /lab/generate - Image generation
+ * - /lab/images - Image library browser
+ * - /lab/live - Live generation testing
+ * - /lab/upload - File upload interface
+ */
+
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
+import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
+import { PageProvider } from '@/contexts/page-context';
+import { LabLayout } from '@/components/layout/lab/LabLayout';
+
+type LabLayoutWrapperProps = {
+  children: ReactNode;
+};
+
+const navItems = [
+  { label: 'Generate', href: '/lab/generate' },
+  { label: 'Images', href: '/lab/images' },
+  { label: 'Live', href: '/lab/live' },
+  { label: 'Upload', href: '/lab/upload' },
+];
+
+const LabLayoutWrapper = ({ children }: LabLayoutWrapperProps) => {
+  const pathname = usePathname();
+
+  return (
+    <ApiKeyProvider>
+      <PageProvider navItems={navItems} currentPath={pathname} rightSlot={<ApiKeyWidget />}>
+        <LabLayout>{children}</LabLayout>
+      </PageProvider>
+    </ApiKeyProvider>
+  );
+};
+
+export default LabLayoutWrapper;

apps/landing/src/app/(lab)/lab/live/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Zap, Radio } from 'lucide-react';
+
+const LivePage = () => {
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Zap className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Live</h1>
+            <p className="text-xs text-gray-400">Real-time testing and experimentation</p>
+          </div>
+        </div>
+      </header>
+
+      {/* Live Testing Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <Radio className="w-6 h-6 text-gray-500" />
+        </div>
+        <h2 className="text-sm font-medium text-white mb-1">Live Testing Interface</h2>
+        <p className="text-xs text-gray-400">Component will be implemented here</p>
+      </div>
+    </div>
+  );
+};
+
+export default LivePage;

apps/landing/src/app/(lab)/lab/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+const LabPage = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace('/lab/generate');
+  }, [router]);
+
+  return null;
+};
+
+export default LabPage;

apps/landing/src/app/(lab)/lab/upload/page.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Upload, UploadCloud } from 'lucide-react';
+
+const UploadPage = () => {
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Upload className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Upload</h1>
+            <p className="text-xs text-gray-400">Upload and manage reference images</p>
+          </div>
+        </div>
+      </header>
+
+      {/* Upload Dropzone Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 border-dashed rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <UploadCloud className="w-6 h-6 text-gray-500" />
+        </div>
+        <h2 className="text-sm font-medium text-white mb-1">Upload Interface</h2>
+        <p className="text-xs text-gray-400">Drag and drop files or click to browse</p>
+      </div>
+    </div>
+  );
+};
+
+export default UploadPage;

apps/landing/src/app/(lab)/layout.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Image from 'next/image';
+import { LabScrollProvider, useLabScroll } from '@/contexts/lab-scroll-context';
+
+const LabHeader = () => {
+  const { isScrolled } = useLabScroll();
+
+  return (
+    <header
+      className={`
+        relative z-10 border-b border-white/10 backdrop-blur-sm shrink-0
+        transition-all duration-300 ease-in-out
+        ${isScrolled ? 'h-0 opacity-0 overflow-hidden border-b-0' : 'h-16 opacity-100'}
+      `}
+    >
+      <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
+        <div className="h-full flex items-center">
+          <Image
+            src="/banatie-logo-horisontal.png"
+            alt="Banatie Logo"
+            width={150}
+            height={40}
+            priority
+            className="h-full w-auto object-contain"
+          />
+        </div>
+        <a
+          href="#waitlist"
+          className="text-sm text-gray-300 hover:text-white transition-colors"
+        >
+          Join Beta
+        </a>
+      </nav>
+    </header>
+  );
+};
+
+export default function LabLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <LabScrollProvider>
+      <div className="h-screen overflow-hidden flex flex-col">
+        <LabHeader />
+        <div className="flex-1 min-h-0">
+          {children}
+        </div>
+      </div>
+    </LabScrollProvider>
+  );
+}

apps/landing/src/app/(main)/banatie-landing-v3.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Banatie - AI Images for Modern Development</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #0a0a0f;
+        }
+        
+        .gradient-text {
+            background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .gradient-border {
+            background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
+            padding: 1px;
+            border-radius: 12px;
+        }
+        
+        .gradient-border-inner {
+            background: #0a0a0f;
+            border-radius: 11px;
+            height: 100%;
+        }
+        
+        .card-gradient {
+            background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .cta-gradient {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(6, 182, 212, 0.2) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .btn-gradient {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+        }
+        
+        .btn-gradient:hover {
+            background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
+        }
+        
+        .badge {
+            background: rgba(139, 92, 246, 0.15);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .feature-icon {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
+        }
+        
+        .screenshot-placeholder {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .step-number {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+        }
+        
+        .tool-badge {
+            background: rgba(30, 30, 50, 0.8);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .powered-badge {
+            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
+            border: 1px solid rgba(251, 191, 36, 0.3);
+        }
+        
+        .unique-feature {
+            background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(6, 182, 212, 0.3);
+        }
+        
+        .code-block {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .api-example {
+            background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.15);
+        }
+        
+        .shape-your-future {
+            background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(236, 72, 153, 0.3);
+        }
+    </style>
+</head>
+<body class="bg-[#0a0a0f] text-white min-h-screen">
+    
+    <!-- Navigation -->
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-md border-b border-white/5">
+        <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
+                <span class="text-xl font-bold">Banatie</span>
+            </div>
+            <div class="flex items-center gap-6">
+                <a href="#lab" class="text-gray-400 hover:text-white transition-colors text-sm">Lab</a>
+                <a href="#join" class="text-gray-300 hover:text-white transition-colors">Get Access</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- SECTION 1: HERO -->
+    <section class="pt-32 pb-20 px-6">
+        <div class="max-w-4xl mx-auto text-center">
+            <!-- Headline -->
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+                AI Image Generation<br>
+                <span class="gradient-text">Inside Your Workflow</span>
+            </h1>
+            
+            <!-- Subheadline - replaced "No context switching" -->
+            <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+                Generate images via API, SDK, CLI, Lab, or live URLs.<br>
+                Production-ready CDN delivery in seconds.
+            </p>
+            
+            <!-- Email Form -->
+            <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
+                <input 
+                    type="email" 
+                    placeholder="your@email.com" 
+                    class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                >
+                <button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
+                    Get Early Access
+                </button>
+            </form>
+            
+            <p class="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
+            
+            <!-- Badges - Prompt URLs moved to last -->
+            <div class="flex flex-wrap gap-3 justify-center">
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="zap" class="w-4 h-4"></i>
+                    API-First
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="globe" class="w-4 h-4"></i>
+                    Built-in CDN
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="flask-conical" class="w-4 h-4"></i>
+                    Web Lab
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="at-sign" class="w-4 h-4"></i>
+                    Style References
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-cyan-300 flex items-center gap-2 border-cyan-500/30">
+                    <i data-lucide="link" class="w-4 h-4"></i>
+                    Prompt URLs
+                </span>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 2: API EXAMPLE - Practical code right after Hero -->
+    <section class="py-16 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="api-example rounded-2xl p-8">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center">
+                        <i data-lucide="terminal" class="w-5 h-5 text-purple-400"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-xl font-bold">One request. Production-ready URL.</h2>
+                        <p class="text-gray-400 text-sm">Simple REST API that handles everything</p>
+                    </div>
+                </div>
+                
+                <!-- Code Example - Request -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
+                    <div class="text-gray-500 mb-2"># Generate an image</div>
+                    <span class="text-cyan-400">curl</span> <span class="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span><br>
+                    <span class="text-gray-300 ml-4">-H</span> <span class="text-green-400">"Authorization: Bearer $API_KEY"</span> <span class="text-gray-300">\</span><br>
+                    <span class="text-gray-300 ml-4">-d</span> <span class="text-green-400">'{"prompt": "modern office interior, natural light"}'</span>
+                </div>
+                
+                <!-- Code Example - Response -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
+                    <div class="text-gray-500 mb-2"># Response</div>
+                    <span class="text-gray-300">{</span><br>
+                    <span class="text-purple-400 ml-4">"url"</span><span class="text-gray-300">:</span> <span class="text-green-400">"https://cdn.banatie.app/img/a7x2k9.png"</span><span class="text-gray-300">,</span><br>
+                    <span class="text-purple-400 ml-4">"enhanced_prompt"</span><span class="text-gray-300">:</span> <span class="text-green-400">"A photorealistic modern office..."</span><span class="text-gray-300">,</span><br>
+                    <span class="text-purple-400 ml-4">"generation_time"</span><span class="text-gray-300">:</span> <span class="text-yellow-400">12.4</span><br>
+                    <span class="text-gray-300">}</span>
+                </div>
+                
+                <p class="text-gray-500 text-sm mt-4 text-center">
+                    CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 3: PROBLEM → SOLUTION -->
+    <section class="py-20 px-6">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Why developers choose Banatie
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                Stop fighting your image workflow. Start building.
+            </p>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Card 1 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="refresh-cw" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Placeholder hell</h3>
+                    <p class="text-gray-500 text-sm mb-4">"I'll add images later" never happens</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Generate real images as you build
+                    </p>
+                </div>
+                
+                <!-- Card 2 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="arrow-left-right" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Context switching</h3>
+                    <p class="text-gray-500 text-sm mb-4">Leave IDE, generate elsewhere, come back</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Stay in your workflow. API, SDK, MCP
+                    </p>
+                </div>
+                
+                <!-- Card 3 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="package" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Asset management</h3>
+                    <p class="text-gray-500 text-sm mb-4">Download, optimize, upload, get URL</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Production CDN URLs instantly
+                    </p>
+                </div>
+                
+                <!-- Card 4 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="layers" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Style drift</h3>
+                    <p class="text-gray-500 text-sm mb-4">Every image looks different</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Reference images keep style consistent
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 4: PROMPT URLs HIGHLIGHT - Moved after Problem/Solution -->
+    <section class="py-16 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="unique-feature rounded-2xl p-8">
+                <div class="flex items-start gap-4 mb-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                        <i data-lucide="sparkles" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <div>
+                        <span class="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">Unique</span>
+                        <h2 class="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
+                        <p class="text-gray-400">Put a prompt in your <code class="text-cyan-300">img src</code> and get a real image. No API calls. No JavaScript. Just HTML.</p>
+                    </div>
+                </div>
+                
+                <!-- Code Example -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
+                    <span class="text-gray-500">&lt;!-- Write this --&gt;</span><br>
+                    <span class="text-purple-400">&lt;img</span> <span class="text-cyan-300">src</span>=<span class="text-green-400">"https://cdn.banatie.app/gen?p=modern office interior"</span> <span class="text-purple-400">/&gt;</span><br><br>
+                    <span class="text-gray-500">&lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;</span>
+                </div>
+                
+                <p class="text-gray-500 text-sm mt-4">Perfect for static sites, prototypes, and AI coding agents that generate HTML.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 5: HOW IT WORKS -->
+    <section class="py-20 px-6 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Your prompt. Your control. Production-ready.
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                We handle the complexity so you can focus on building.
+            </p>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- Pipeline visualization -->
+                <div class="grid md:grid-cols-4 gap-4 mb-8">
+                    <!-- Step 1 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">1</div>
+                        <p class="text-sm font-medium mb-1">Your Prompt</p>
+                        <p class="text-xs text-gray-500">"a cat on windowsill"</p>
+                    </div>
+                    
+                    <!-- Step 2 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">2</div>
+                        <p class="text-sm font-medium mb-1">Smart Enhancement</p>
+                        <p class="text-xs text-gray-500">Style + details added</p>
+                    </div>
+                    
+                    <!-- Step 3 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">3</div>
+                        <p class="text-sm font-medium mb-1">AI Generation</p>
+                        <p class="text-xs text-gray-500">Gemini creates image</p>
+                    </div>
+                    
+                    <!-- Step 4 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">4</div>
+                        <p class="text-sm font-medium mb-1">CDN Delivery</p>
+                        <p class="text-xs text-gray-500">Instant global URL</p>
+                    </div>
+                </div>
+                
+                <!-- What you control box -->
+                <div class="card-gradient rounded-xl p-6 mt-8">
+                    <h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
+                        <i data-lucide="settings-2" class="w-5 h-5 text-purple-400"></i>
+                        What you control
+                    </h3>
+                    <div class="grid md:grid-cols-3 gap-4 text-sm">
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Style templates</strong> — photorealistic, illustration, minimalist, and more</span>
+                        </div>
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Reference images</strong> — @aliases maintain visual consistency</span>
+                        </div>
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Output specs</strong> — aspect ratio, dimensions, format</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Transparency note -->
+                <p class="text-center text-gray-500 text-sm mt-6">
+                    <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
+                    Enhanced prompts are visible in API response. You always see what was generated.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 6: KEY FEATURES -->
+    <section class="py-20 px-6">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Built for real development workflows
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                Everything you need to integrate AI images into your projects.
+            </p>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Feature 1: Reference Images -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="at-sign" class="w-6 h-6 text-pink-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Reference Images</h3>
+                    <p class="text-gray-400 text-sm">
+                        Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.
+                    </p>
+                </div>
+                
+                <!-- Feature 2: Flows -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="git-branch" class="w-6 h-6 text-purple-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Flows</h3>
+                    <p class="text-gray-400 text-sm">
+                        Chain generations, iterate on results, build image sequences with @last and @first references.
+                    </p>
+                </div>
+                
+                <!-- Feature 3: Style Templates -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="palette" class="w-6 h-6 text-yellow-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">7 Style Templates</h3>
+                    <p class="text-gray-400 text-sm">
+                        Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.
+                    </p>
+                </div>
+                
+                <!-- Feature 4: Instant CDN -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="globe" class="w-6 h-6 text-green-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Instant CDN Delivery</h3>
+                    <p class="text-gray-400 text-sm">
+                        Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.
+                    </p>
+                </div>
+                
+                <!-- Feature 5: Output Control -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="sliders-horizontal" class="w-6 h-6 text-blue-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Output Control</h3>
+                    <p class="text-gray-400 text-sm">
+                        Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.
+                    </p>
+                </div>
+                
+                <!-- Feature 6: Prompt URLs -->
+                <div class="unique-feature rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <div class="flex items-center gap-2 mb-2">
+                        <h3 class="font-semibold text-lg">Prompt URLs</h3>
+                        <span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">Unique</span>
+                    </div>
+                    <p class="text-gray-400 text-sm">
+                        Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 7: INTEGRATIONS - Added Lab -->
+    <section id="lab" class="py-20 px-6 bg-gradient-to-b from-transparent via-cyan-900/5 to-transparent">
+        <div class="max-w-6xl mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                Works with your tools
+            </h2>
+            <p class="text-gray-400 mb-12 max-w-2xl mx-auto">
+                Use what fits your workflow. All methods, same capabilities.
+            </p>
+            
+            <div class="flex flex-wrap justify-center gap-4 mb-8">
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="server" class="w-5 h-5 text-cyan-400"></i>
+                    <span>REST API</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="code" class="w-5 h-5 text-blue-400"></i>
+                    <span>TypeScript SDK</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="cpu" class="w-5 h-5 text-purple-400"></i>
+                    <span>MCP Server</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="terminal" class="w-5 h-5 text-green-400"></i>
+                    <span>CLI</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="flask-conical" class="w-5 h-5 text-orange-400"></i>
+                    <span>Banatie Lab</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2 border-cyan-500/30">
+                    <i data-lucide="link-2" class="w-5 h-5 text-cyan-400"></i>
+                    <span>Prompt URLs</span>
+                </div>
+            </div>
+            
+            <!-- Lab description -->
+            <div class="max-w-2xl mx-auto mt-8 p-4 bg-white/5 rounded-lg">
+                <p class="text-sm text-gray-400">
+                    <strong class="text-white">Banatie Lab</strong> — Official web interface for Banatie API. Generate images, build flows, browse your gallery, and explore all capabilities with ready-to-use code snippets.
+                </p>
+            </div>
+            
+            <p class="text-gray-500 text-sm mt-6">
+                Perfect for Claude Code, Cursor, and any AI-powered workflow.
+            </p>
+        </div>
+    </section>
+
+    <!-- SECTION 8: POWERED BY - Focus on Gemini capabilities -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="powered-badge rounded-2xl p-8">
+                <div class="flex items-center justify-center gap-3 mb-4">
+                    <i data-lucide="zap" class="w-8 h-8 text-yellow-400"></i>
+                    <h2 class="text-2xl font-bold">Powered by Google Gemini</h2>
+                </div>
+                
+                <!-- Model names -->
+                <p class="text-center text-gray-400 mb-6">
+                    Currently using <span class="text-white font-medium">Gemini 2.5 Flash Image</span> <span class="text-gray-500">(Nano Banana)</span> — Google's fastest natively multimodal image model.
+                </p>
+                
+                <!-- Gemini capabilities -->
+                <div class="grid md:grid-cols-2 gap-4 max-w-2xl mx-auto">
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Native multimodal</strong>
+                            <p class="text-gray-400">Text and image understanding in one model</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">High-fidelity text rendering</strong>
+                            <p class="text-gray-400">Legible text in images for logos and diagrams</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Conversational editing</strong>
+                            <p class="text-gray-400">Refine images through natural language</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Optimized for speed</strong>
+                            <p class="text-gray-400">Fast generation without quality compromise</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Future models hint -->
+                <p class="text-center text-gray-500 text-sm mt-6">
+                    More models coming — including Gemini 3 Pro Image (Nano Banana Pro) for advanced use cases.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 9: SHAPE THE FUTURE - Replaced "What's next" -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="shape-your-future rounded-2xl p-8 text-center">
+                <div class="flex items-center justify-center gap-3 mb-4">
+                    <i data-lucide="rocket" class="w-8 h-8 text-pink-400"></i>
+                    <h2 class="text-2xl font-bold">Shape the future of Banatie</h2>
+                </div>
+                <p class="text-gray-400 mb-6 max-w-xl mx-auto">
+                    We're building this for developers like you. Early adopters get direct influence on our roadmap — suggest features, vote on priorities, and help us build exactly what you need.
+                </p>
+                <div class="flex flex-wrap justify-center gap-4 text-sm">
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="message-circle" class="w-4 h-4 text-pink-400"></i>
+                        <span>Direct feedback channel</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="vote" class="w-4 h-4 text-pink-400"></i>
+                        <span>Feature voting</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="users" class="w-4 h-4 text-pink-400"></i>
+                        <span>Early adopter community</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 10: FINAL CTA -->
+    <section id="join" class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="cta-gradient rounded-2xl p-12 text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    Be first to try it
+                </h2>
+                <p class="text-gray-300 mb-8 max-w-xl mx-auto">
+                    Join developers waiting for early access. We'll notify you when your spot is ready.
+                </p>
+                
+                <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+                    <input 
+                        type="email" 
+                        placeholder="your@email.com" 
+                        class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                    >
+                    <button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
+                        Get Early Access
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 11: FOOTER -->
+    <footer class="py-12 px-6 border-t border-white/5">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
+                <!-- Logo -->
+                <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
+                    <span class="text-xl font-bold">Banatie</span>
+                </div>
+                
+                <!-- Links -->
+                <div class="flex flex-wrap justify-center gap-6 text-gray-400">
+                    <a href="#" class="hover:text-white transition-colors">Documentation</a>
+                    <a href="#" class="hover:text-white transition-colors">API Reference</a>
+                    <a href="#" class="hover:text-white transition-colors">Lab</a>
+                    <a href="#" class="hover:text-white transition-colors">Pricing</a>
+                    <a href="#" class="hover:text-white transition-colors">Contact</a>
+                </div>
+            </div>
+            
+            <div class="mt-8 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
+                <p class="mb-2">Built for builders who create.</p>
+                <p>© 2025 Banatie. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Initialize Lucide Icons -->
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>

apps/landing/src/app/(main)/layout.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import { Footer } from '@/components/shared/Footer';
+
+export default function MainLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <header className="relative z-10 border-b border-white/10 backdrop-blur-sm">
+        <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
+          <div className="h-full flex items-center">
+            <Image
+              src="/banatie-logo-horisontal.png"
+              alt="Banatie Logo"
+              width={150}
+              height={40}
+              priority
+              className="h-full w-auto object-contain"
+            />
+          </div>
+          <a
+            href="#waitlist"
+            className="text-sm text-gray-300 hover:text-white transition-colors"
+          >
+            Join Beta
+          </a>
+        </nav>
+      </header>
+
+      {children}
+
+      <Footer />
+    </>
+  );
+}

apps/landing/src/app/globals.css

@@ -1,20 +1,49 @@
 @import 'tailwindcss';
+@import "tw-animate-css";
 
-:root {
-  --background: #0f172a;
-  --foreground: #f8fafc;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
   font-family:
     'Inter',
     -apple-system,
@@ -99,3 +128,81 @@ pre::-webkit-scrollbar-thumb {
 pre::-webkit-scrollbar-thumb:hover {
   background: rgb(148, 163, 184); /* slate-400 */
 }
+
+/* Dark theme as default (no .dark class needed) */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* Light theme (optional, requires .light class) */
+.light {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  /* Body background handled by page-specific gradients, not Shadcn variables */
+}

apps/landing/src/app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import Image from 'next/image';
-import { Footer } from '@/components/shared/Footer';
 import './globals.css';
 
 const inter = Inter({
@@ -71,38 +69,12 @@ export default function RootLayout({
       </head>
       <body className={`${inter.variable} antialiased`}>
         <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
-          {/* Animated gradient background */}
           <div className="fixed inset-0 overflow-hidden pointer-events-none">
             <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
             <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
           </div>
 
-          {/* Header */}
-          <header className="relative z-10 border-b border-white/10 backdrop-blur-sm">
-            <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
-              <div className="h-full flex items-center">
-                <Image
-                  src="/banatie-logo-horisontal.png"
-                  alt="Banatie Logo"
-                  width={150}
-                  height={40}
-                  priority
-                  className="h-full w-auto object-contain"
-                />
-              </div>
-              <a
-                href="#waitlist"
-                className="text-sm text-gray-300 hover:text-white transition-colors"
-              >
-                Join Beta
-              </a>
-            </nav>
-          </header>
-
-          {/* Page content */}
           {children}
-
-          <Footer />
         </div>
       </body>
     </html>

apps/landing/src/components/lab/FilterPlaceholder.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+/**
+ * Filter Placeholder Component
+ *
+ * Checkbox/radio button group for sidebar filters.
+ * Supports both single-select (radio) and multi-select (checkbox) modes.
+ * Uses Shadcn UI components with custom slate styling.
+ *
+ * Features:
+ * - Radio buttons for single selection (Shadcn RadioGroup)
+ * - Checkboxes for multiple selection (Shadcn Checkbox)
+ * - Option counts (e.g., "All (127)")
+ * - Accessible keyboard navigation
+ * - Focus indicators
+ */
+
+import { useState } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+
+type FilterOption = {
+  id: string;
+  label: string;
+  count?: number;
+};
+
+type FilterPlaceholderProps = {
+  options: FilterOption[];
+  multiSelect?: boolean;
+  groupId: string;
+};
+
+export const FilterPlaceholder = ({
+  options,
+  multiSelect = false,
+  groupId,
+}: FilterPlaceholderProps) => {
+  const [selected, setSelected] = useState<string[]>(multiSelect ? [] : [options[0]?.id || '']);
+
+  const handleCheckboxChange = (optionId: string, checked: boolean) => {
+    setSelected((prev) =>
+      checked ? [...prev, optionId] : prev.filter((id) => id !== optionId)
+    );
+  };
+
+  const handleRadioChange = (value: string) => {
+    setSelected([value]);
+  };
+
+  const isSelected = (optionId: string) => selected.includes(optionId);
+
+  if (multiSelect) {
+    // Checkbox mode for multi-select
+    return (
+      <div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
+        {options.map((option) => {
+          const checked = isSelected(option.id);
+          const inputId = `${groupId}-${option.id}`;
+
+          return (
+            <Label
+              key={option.id}
+              htmlFor={inputId}
+              className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
+            >
+              <Checkbox
+                id={inputId}
+                checked={checked}
+                onCheckedChange={(checked) => handleCheckboxChange(option.id, checked === true)}
+                className="border-slate-600 bg-slate-800 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600 data-[state=checked]:text-white focus-visible:ring-purple-500 focus-visible:ring-offset-0"
+              />
+              <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
+                {option.label}
+              </span>
+              {option.count !== undefined && (
+                <span className="text-xs text-gray-600">
+                  {option.count}
+                </span>
+              )}
+            </Label>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Radio mode for single-select
+  return (
+    <RadioGroup
+      value={selected[0]}
+      onValueChange={handleRadioChange}
+      className="mt-2 space-y-1"
+      aria-label={`${groupId} filters`}
+    >
+      {options.map((option) => {
+        const checked = isSelected(option.id);
+        const inputId = `${groupId}-${option.id}`;
+
+        return (
+          <Label
+            key={option.id}
+            htmlFor={inputId}
+            className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
+          >
+            <RadioGroupItem
+              id={inputId}
+              value={option.id}
+              className="border-slate-600 bg-slate-800 text-purple-600 data-[state=checked]:border-purple-600 focus-visible:ring-purple-500 focus-visible:ring-offset-0"
+            />
+            <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
+              {option.label}
+            </span>
+            {option.count !== undefined && (
+              <span className="text-xs text-gray-600">
+                {option.count}
+              </span>
+            )}
+          </Label>
+        );
+      })}
+    </RadioGroup>
+  );
+};

apps/landing/src/components/lab/GenerateFormPlaceholder.tsx

@@ -0,0 +1,446 @@
+'use client';
+
+/**
+ * Generate Form Placeholder Component
+ *
+ * Main content for lab generation interface.
+ * Clean, work-focused design with compact layout.
+ * Uses Shadcn UI components with custom slate styling.
+ *
+ * Features:
+ * - Compact info banner (dismissible)
+ * - Prompt textarea with keyboard shortcuts (Shadcn Textarea)
+ * - Options grid with Shadcn Select dropdowns
+ * - Results area with empty state
+ * - Lucide icons throughout
+ *
+ * Color scheme: Forms use slate palette (original style)
+ */
+
+import { useState, KeyboardEvent } from 'react';
+import {
+  Info,
+  X,
+  Loader2,
+  Settings,
+  ImageOff,
+  Trash2,
+  Sparkles,
+  Wand2,
+  Palette,
+  Image,
+  Layers,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+// Shared styles for consistent theming
+const selectTriggerStyles = "w-full bg-slate-800 border-slate-700 text-white focus:ring-purple-500 focus:ring-offset-0 hover:bg-slate-700/50";
+const selectContentStyles = "bg-slate-800 border-slate-700";
+const selectItemStyles = "text-white focus:bg-slate-700 focus:text-white";
+const inputStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0";
+const textareaStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0 resize-none";
+const labelStyles = "text-xs font-medium text-gray-400";
+const cardStyles = "p-4 bg-slate-900/80 backdrop-blur-sm border-slate-700 rounded-xl gap-0 py-4";
+
+export const GenerateFormPlaceholder = () => {
+  const [prompt, setPrompt] = useState('');
+  const [aspectRatio, setAspectRatio] = useState('1:1');
+  const [template, setTemplate] = useState('photorealistic');
+  const [generating, setGenerating] = useState(false);
+  const [showBanner, setShowBanner] = useState(true);
+
+  const handleGenerate = () => {
+    if (!prompt.trim()) return;
+    setGenerating(true);
+    setTimeout(() => setGenerating(false), 2000);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.ctrlKey && e.key === 'Enter') {
+      e.preventDefault();
+      handleGenerate();
+    }
+  };
+
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Compact Info Banner */}
+      {showBanner && (
+        <div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
+          <div className="flex items-start gap-2">
+            <Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
+            <div className="flex-1">
+              <p className="text-xs text-gray-300">
+                <span className="font-medium text-white">Lab Mode:</span>{' '}
+                Experimental features enabled. API calls may be rate-limited.
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setShowBanner(false)}
+              className="p-1 h-auto w-auto text-gray-500 hover:text-gray-300 hover:bg-transparent"
+              aria-label="Dismiss"
+            >
+              <X className="w-3 h-3" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Generation Form Card */}
+      <Card className={cardStyles} aria-label="Image Generation Form">
+        <CardContent className="p-0 px-4 space-y-3">
+          {/* Prompt Textarea */}
+          <div>
+            <Label htmlFor="lab-prompt-input" className={labelStyles}>
+              Prompt
+            </Label>
+            <Textarea
+              id="lab-prompt-input"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Describe the image you want to generate..."
+              disabled={generating}
+              rows={4}
+              className={`mt-1.5 ${textareaStyles}`}
+              aria-label="Image generation prompt"
+            />
+          </div>
+
+          {/* Options Row */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+            {/* Aspect Ratio */}
+            <div>
+              <Label htmlFor="lab-aspect-ratio" className={labelStyles}>
+                Aspect Ratio
+              </Label>
+              <Select value={aspectRatio} onValueChange={setAspectRatio} disabled={generating}>
+                <SelectTrigger id="lab-aspect-ratio" className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue placeholder="Select ratio" />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="1:1" className={selectItemStyles}>Square (1:1)</SelectItem>
+                  <SelectItem value="3:4" className={selectItemStyles}>Portrait (3:4)</SelectItem>
+                  <SelectItem value="4:3" className={selectItemStyles}>Landscape (4:3)</SelectItem>
+                  <SelectItem value="9:16" className={selectItemStyles}>Vertical (9:16)</SelectItem>
+                  <SelectItem value="16:9" className={selectItemStyles}>Widescreen (16:9)</SelectItem>
+                  <SelectItem value="21:9" className={selectItemStyles}>Ultrawide (21:9)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Template */}
+            <div>
+              <Label htmlFor="lab-template" className={labelStyles}>
+                Style Template
+              </Label>
+              <Select value={template} onValueChange={setTemplate} disabled={generating}>
+                <SelectTrigger id="lab-template" className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue placeholder="Select style" />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="photorealistic" className={selectItemStyles}>Photorealistic</SelectItem>
+                  <SelectItem value="illustration" className={selectItemStyles}>Illustration</SelectItem>
+                  <SelectItem value="minimalist" className={selectItemStyles}>Minimalist</SelectItem>
+                  <SelectItem value="sticker" className={selectItemStyles}>Sticker</SelectItem>
+                  <SelectItem value="product" className={selectItemStyles}>Product</SelectItem>
+                  <SelectItem value="comic" className={selectItemStyles}>Comic</SelectItem>
+                  <SelectItem value="general" className={selectItemStyles}>General</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Advanced Options Button */}
+            <div>
+              <Label className={labelStyles}>Advanced</Label>
+              <Button
+                variant="outline"
+                disabled={generating}
+                className={`mt-1.5 w-full ${selectTriggerStyles} justify-center`}
+                aria-label="Advanced options"
+              >
+                <Settings className="w-4 h-4" />
+                <span>Configure</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Submit Button Row */}
+          <div className="flex items-center justify-between gap-3 pt-3 border-t border-slate-700/50">
+            <div className="text-xs text-gray-500">
+              {generating ? (
+                <span className="flex items-center gap-1.5 text-purple-400">
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  Generating...
+                </span>
+              ) : (
+                <span className="hidden sm:inline">Ctrl+Enter to submit</span>
+              )}
+            </div>
+            <Button
+              onClick={handleGenerate}
+              disabled={generating || !prompt.trim()}
+              className="bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 shadow-lg shadow-purple-900/30"
+            >
+              <Sparkles className="w-4 h-4" />
+              {generating ? 'Generating...' : 'Generate'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Results Area */}
+      <section className="space-y-3" aria-label="Generated Results">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-white">Results</h2>
+          <Button variant="ghost" size="sm" className="h-auto py-1 text-xs text-gray-500 hover:text-gray-300 hover:bg-transparent">
+            <Trash2 className="w-3.5 h-3.5" />
+            Clear
+          </Button>
+        </div>
+
+        {/* Empty State */}
+        {!generating && (
+          <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+            <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+              <ImageOff className="w-6 h-6 text-gray-500" />
+            </div>
+            <h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
+            <p className="text-xs text-gray-400">
+              Generated images will appear here
+            </p>
+          </div>
+        )}
+
+        {/* Loading State */}
+        {generating && (
+          <div className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg animate-pulse">
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+              <div className="aspect-square bg-slate-800 rounded-lg"></div>
+              <div className="aspect-square bg-slate-800 rounded-lg"></div>
+              <div className="aspect-square bg-slate-800 rounded-lg hidden xl:block"></div>
+            </div>
+          </div>
+        )}
+      </section>
+
+      {/* Additional Form Sections for Scroll Testing */}
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Wand2 className="w-4 h-4 text-purple-400" />
+            Style Refinement
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div>
+              <Label className={labelStyles}>Color Palette</Label>
+              <Select defaultValue="vibrant">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="vibrant" className={selectItemStyles}>Vibrant</SelectItem>
+                  <SelectItem value="muted" className={selectItemStyles}>Muted</SelectItem>
+                  <SelectItem value="monochrome" className={selectItemStyles}>Monochrome</SelectItem>
+                  <SelectItem value="pastel" className={selectItemStyles}>Pastel</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Lighting</Label>
+              <Select defaultValue="natural">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="natural" className={selectItemStyles}>Natural</SelectItem>
+                  <SelectItem value="studio" className={selectItemStyles}>Studio</SelectItem>
+                  <SelectItem value="dramatic" className={selectItemStyles}>Dramatic</SelectItem>
+                  <SelectItem value="soft" className={selectItemStyles}>Soft</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Mood</Label>
+              <Select defaultValue="neutral">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="neutral" className={selectItemStyles}>Neutral</SelectItem>
+                  <SelectItem value="happy" className={selectItemStyles}>Happy</SelectItem>
+                  <SelectItem value="mysterious" className={selectItemStyles}>Mysterious</SelectItem>
+                  <SelectItem value="energetic" className={selectItemStyles}>Energetic</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Detail Level</Label>
+              <Select defaultValue="high">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="high" className={selectItemStyles}>High</SelectItem>
+                  <SelectItem value="medium" className={selectItemStyles}>Medium</SelectItem>
+                  <SelectItem value="low" className={selectItemStyles}>Low</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Palette className="w-4 h-4 text-purple-400" />
+            Color Controls
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4 space-y-3">
+          <div>
+            <Label className={labelStyles}>Primary Color</Label>
+            <Input type="text" placeholder="#8B5CF6" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+          <div>
+            <Label className={labelStyles}>Secondary Color</Label>
+            <Input type="text" placeholder="#06B6D4" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+          <div>
+            <Label className={labelStyles}>Background Hint</Label>
+            <Input type="text" placeholder="e.g., gradient, solid, transparent" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Image className="w-4 h-4 text-purple-400" />
+            Reference Images
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="aspect-square bg-slate-800 border border-slate-700 border-dashed rounded-lg flex items-center justify-center">
+                <span className="text-xs text-gray-500">Drop image</span>
+              </div>
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-gray-500">Upload up to 4 reference images to guide the generation</p>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Layers className="w-4 h-4 text-purple-400" />
+            Advanced Parameters
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4 space-y-3">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div>
+              <Label className={labelStyles}>Guidance Scale</Label>
+              <Input type="number" defaultValue={7.5} step={0.5} min={1} max={20} className={`mt-1.5 ${inputStyles}`} />
+            </div>
+            <div>
+              <Label className={labelStyles}>Steps</Label>
+              <Input type="number" defaultValue={30} step={5} min={10} max={100} className={`mt-1.5 ${inputStyles}`} />
+            </div>
+            <div>
+              <Label className={labelStyles}>Seed</Label>
+              <Input type="number" placeholder="Random" className={`mt-1.5 ${inputStyles}`} />
+            </div>
+          </div>
+          <div>
+            <Label className={labelStyles}>Negative Prompt</Label>
+            <Textarea rows={2} placeholder="Elements to avoid in the generation..." className={`mt-1.5 ${textareaStyles}`} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Settings className="w-4 h-4 text-purple-400" />
+            Output Settings
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div>
+              <Label className={labelStyles}>Output Format</Label>
+              <Select defaultValue="png">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="png" className={selectItemStyles}>PNG</SelectItem>
+                  <SelectItem value="jpeg" className={selectItemStyles}>JPEG</SelectItem>
+                  <SelectItem value="webp" className={selectItemStyles}>WebP</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Quality</Label>
+              <Select defaultValue="max">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="max" className={selectItemStyles}>Maximum (100%)</SelectItem>
+                  <SelectItem value="high" className={selectItemStyles}>High (90%)</SelectItem>
+                  <SelectItem value="medium" className={selectItemStyles}>Medium (80%)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Number of Images</Label>
+              <Select defaultValue="1">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="1" className={selectItemStyles}>1</SelectItem>
+                  <SelectItem value="2" className={selectItemStyles}>2</SelectItem>
+                  <SelectItem value="4" className={selectItemStyles}>4</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Auto-save to</Label>
+              <Select defaultValue="default">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="default" className={selectItemStyles}>Default folder</SelectItem>
+                  <SelectItem value="favorites" className={selectItemStyles}>Favorites</SelectItem>
+                  <SelectItem value="none" className={selectItemStyles}>Don&apos;t save</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

apps/landing/src/components/layout/lab/LabFooter.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+/**
+ * Lab Footer Component
+ *
+ * Simple 1-line footer for lab section with contextual navigation links.
+ * Displays copyright on left and contextual docs/API links on right.
+ * Uses slate color palette (blue-tinted gray).
+ */
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { BookOpen, Code } from 'lucide-react';
+
+type LinkMapEntry = {
+  docs: string;
+  api: string;
+};
+
+type LinkMap = {
+  [key: string]: LinkMapEntry;
+};
+
+const linkMap: LinkMap = {
+  '/lab/generate': { docs: '/docs', api: '/docs/api/text-to-image' },
+  '/lab/images': { docs: '/docs', api: '/docs/api/images' },
+  '/lab/live': { docs: '/docs', api: '/docs/api/text-to-image' },
+  '/lab/upload': { docs: '/docs', api: '/docs/api/upload' },
+};
+
+export const LabFooter = () => {
+  const pathname = usePathname();
+  const links = linkMap[pathname] || { docs: '/docs', api: '/docs/api' };
+
+  return (
+    <footer
+      className="border-t border-slate-800 bg-slate-950/80 backdrop-blur-sm"
+      role="contentinfo"
+    >
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 px-4 py-3 md:h-12">
+        {/* Left: Copyright */}
+        <p className="text-xs text-slate-500 order-2 md:order-1">
+          © 2025 Banatie. Built for builders who create.
+        </p>
+
+        {/* Right: Contextual Links */}
+        <nav aria-label="Footer navigation" className="flex items-center gap-4 order-1 md:order-2">
+          <Link
+            href={links.docs}
+            className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
+          >
+            <BookOpen className="w-3.5 h-3.5" />
+            Documentation
+          </Link>
+          <Link
+            href={links.api}
+            className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
+          >
+            <Code className="w-3.5 h-3.5" />
+            API Reference
+          </Link>
+        </nav>
+      </div>
+    </footer>
+  );
+};

apps/landing/src/components/layout/lab/LabLayout.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+/**
+ * Lab Layout Component
+ *
+ * Main layout wrapper for the Lab section combining sidebar and content.
+ * Uses ThreeColumnLayout for consistent column structure across the app.
+ *
+ * Structure:
+ * - Left: LabSidebar (w-64, hidden lg:block, scrollable)
+ * - Center: Scrollable content area + fixed LabFooter at bottom
+ * - Right: Reserved for future use (TOC, preview panels, etc.)
+ *
+ * The center column uses a fixed height container with:
+ * - Scrollable content area (flex-1 overflow-y-auto)
+ * - Sticky footer always visible at bottom
+ *
+ * This layout is rendered inside PageProvider context which provides:
+ * - SubsectionNav at the top
+ * - ApiKeyWidget in the right slot
+ * - AnimatedBackground
+ *
+ * Scroll Detection:
+ * - Detects scroll in the main content area
+ * - After 50px threshold, collapses the main header via LabScrollContext
+ * - Height adjusts dynamically: 100vh-7rem (header visible) → 100vh-3rem (header hidden)
+ */
+
+import { ReactNode, useRef, useEffect, useCallback } from 'react';
+import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
+import { LabSidebar } from './LabSidebar';
+import { LabFooter } from './LabFooter';
+import { useLabScroll } from '@/contexts/lab-scroll-context';
+
+type LabLayoutProps = {
+  children: ReactNode;
+};
+
+const SCROLL_THRESHOLD = 50;
+
+export const LabLayout = ({ children }: LabLayoutProps) => {
+  const { isScrolled, setIsScrolled } = useLabScroll();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleScroll = useCallback(() => {
+    if (!contentRef.current) return;
+    const scrollTop = contentRef.current.scrollTop;
+    setIsScrolled(scrollTop > SCROLL_THRESHOLD);
+  }, [setIsScrolled]);
+
+  useEffect(() => {
+    const contentElement = contentRef.current;
+    if (!contentElement) return;
+
+    contentElement.addEventListener('scroll', handleScroll);
+    return () => contentElement.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  const containerHeight = isScrolled ? 'h-[calc(100vh-3rem)]' : 'h-[calc(100vh-7rem)]';
+
+  return (
+    <ThreeColumnLayout
+      left={
+        <div className={`border-r border-slate-800 bg-slate-950 ${containerHeight} overflow-y-auto transition-all duration-300`}>
+          <LabSidebar />
+        </div>
+      }
+      center={
+        <div className={`flex flex-col ${containerHeight} bg-[#0f121d] transition-all duration-300`}>
+          <div ref={contentRef} className="flex-1 overflow-y-auto min-h-0">{children}</div>
+          <LabFooter />
+        </div>
+      }
+    />
+  );
+};

apps/landing/src/components/layout/lab/LabSidebar.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+/**
+ * Lab Sidebar - Filter Panel
+ *
+ * Narrow left sidebar for filtering lab content.
+ * Clean, work-focused design with Lucide icons and slate palette.
+ * Uses Shadcn UI Collapsible for expandable sections.
+ *
+ * Features:
+ * - Multiple filter groups (Status, Date Range, Source Type)
+ * - Collapsible sections with Shadcn UI and Lucide icons
+ * - Checkbox/radio button controls (Shadcn components)
+ * - Slate color palette (blue-tinted gray)
+ */
+
+import { useState, type ElementType } from 'react';
+import { Activity, Calendar, Palette, ChevronRight, RotateCcw, Layers, Sliders, Tag, Folder, Star, Clock } from 'lucide-react';
+import { FilterPlaceholder } from '@/components/lab/FilterPlaceholder';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
+
+type FilterGroupProps = {
+  id: string;
+  label: string;
+  icon: ElementType;
+  options: Array<{ id: string; label: string; count?: number }>;
+  multiSelect?: boolean;
+};
+
+const filterGroups: FilterGroupProps[] = [
+  {
+    id: 'status',
+    label: 'Status',
+    icon: Activity,
+    options: [
+      { id: 'all', label: 'All', count: 127 },
+      { id: 'completed', label: 'Completed', count: 98 },
+      { id: 'pending', label: 'Pending', count: 23 },
+      { id: 'failed', label: 'Failed', count: 6 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'date',
+    label: 'Date Range',
+    icon: Calendar,
+    options: [
+      { id: 'today', label: 'Today', count: 12 },
+      { id: 'week', label: 'Last 7 days', count: 45 },
+      { id: 'month', label: 'Last 30 days', count: 89 },
+      { id: 'all-time', label: 'All time', count: 127 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'source',
+    label: 'Source Type',
+    icon: Palette,
+    options: [
+      { id: 'text', label: 'Text-to-Image', count: 78 },
+      { id: 'upload', label: 'Uploads', count: 34 },
+      { id: 'reference', label: 'Reference Images', count: 15 },
+    ],
+    multiSelect: true,
+  },
+  {
+    id: 'model',
+    label: 'Model',
+    icon: Layers,
+    options: [
+      { id: 'gemini-2', label: 'Gemini 2.0', count: 45 },
+      { id: 'gemini-1.5', label: 'Gemini 1.5', count: 62 },
+      { id: 'imagen-3', label: 'Imagen 3', count: 20 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'quality',
+    label: 'Quality',
+    icon: Sliders,
+    options: [
+      { id: 'high', label: 'High (1024px)', count: 34 },
+      { id: 'medium', label: 'Medium (768px)', count: 56 },
+      { id: 'low', label: 'Low (512px)', count: 37 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'tags',
+    label: 'Tags',
+    icon: Tag,
+    options: [
+      { id: 'portrait', label: 'Portrait', count: 23 },
+      { id: 'landscape', label: 'Landscape', count: 31 },
+      { id: 'product', label: 'Product', count: 18 },
+      { id: 'abstract', label: 'Abstract', count: 12 },
+      { id: 'architecture', label: 'Architecture', count: 9 },
+    ],
+    multiSelect: true,
+  },
+  {
+    id: 'folder',
+    label: 'Folder',
+    icon: Folder,
+    options: [
+      { id: 'default', label: 'Default', count: 89 },
+      { id: 'favorites', label: 'Favorites', count: 15 },
+      { id: 'archive', label: 'Archive', count: 23 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'rating',
+    label: 'Rating',
+    icon: Star,
+    options: [
+      { id: '5star', label: '5 Stars', count: 12 },
+      { id: '4star', label: '4 Stars', count: 28 },
+      { id: '3star', label: '3 Stars', count: 45 },
+      { id: 'unrated', label: 'Unrated', count: 42 },
+    ],
+    multiSelect: true,
+  },
+  {
+    id: 'duration',
+    label: 'Generation Time',
+    icon: Clock,
+    options: [
+      { id: 'fast', label: '< 5 seconds', count: 67 },
+      { id: 'medium', label: '5-15 seconds', count: 43 },
+      { id: 'slow', label: '> 15 seconds', count: 17 },
+    ],
+    multiSelect: false,
+  },
+];
+
+export const LabSidebar = () => {
+  const [expandedSections, setExpandedSections] = useState<string[]>(['status', 'date', 'source']);
+
+  const toggleSection = (id: string) => {
+    setExpandedSections((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const isExpanded = (id: string) => expandedSections.includes(id);
+
+  return (
+    <aside className="h-full bg-slate-950 border-r border-slate-800" aria-label="Lab filters">
+      {/* Header */}
+      <div className="p-4 border-b border-slate-800">
+        <h2 className="text-sm font-semibold text-white">Filters</h2>
+        <p className="text-xs text-slate-500 mt-0.5">Refine your results</p>
+      </div>
+
+      {/* Filter Groups */}
+      <div className="p-3 space-y-3">
+        {filterGroups.map((group) => {
+          const expanded = isExpanded(group.id);
+          const Icon = group.icon;
+
+          return (
+            <Collapsible
+              key={group.id}
+              open={expanded}
+              onOpenChange={() => toggleSection(group.id)}
+              className="border-b border-slate-800 pb-3 last:border-b-0"
+            >
+              {/* Section Header */}
+              <CollapsibleTrigger asChild>
+                <button
+                  className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-sm transition-colors text-slate-400 hover:text-white hover:bg-slate-800/50"
+                >
+                  <span className="flex items-center gap-2">
+                    <Icon className="w-4 h-4" />
+                    <span className="font-medium">{group.label}</span>
+                  </span>
+                  <ChevronRight
+                    className={`w-4 h-4 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+                  />
+                </button>
+              </CollapsibleTrigger>
+
+              {/* Filter Options */}
+              <CollapsibleContent>
+                <FilterPlaceholder
+                  options={group.options}
+                  multiSelect={group.multiSelect}
+                  groupId={group.id}
+                />
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </div>
+
+      {/* Bottom Actions */}
+      <div className="mt-auto p-3 border-t border-slate-800">
+        <Button
+          variant="ghost"
+          className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
+          aria-label="Reset all filters"
+        >
+          <RotateCcw className="w-3.5 h-3.5" />
+          Reset Filters
+        </Button>
+      </div>
+    </aside>
+  );
+};

apps/landing/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

apps/landing/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

apps/landing/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

apps/landing/src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

apps/landing/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

apps/landing/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

apps/landing/src/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

apps/landing/src/components/ui/select.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

apps/landing/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

apps/landing/src/contexts/lab-scroll-context.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+/**
+ * Lab Scroll Context
+ *
+ * Shares scroll state between the main content area and the header.
+ * Used to collapse the main header when user scrolls in the lab section.
+ */
+
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+type LabScrollContextValue = {
+  isScrolled: boolean;
+  setIsScrolled: (value: boolean) => void;
+};
+
+const LabScrollContext = createContext<LabScrollContextValue | null>(null);
+
+export const useLabScroll = () => {
+  const context = useContext(LabScrollContext);
+  if (!context) {
+    throw new Error('useLabScroll must be used within LabScrollProvider');
+  }
+  return context;
+};
+
+type LabScrollProviderProps = {
+  children: ReactNode;
+};
+
+export const LabScrollProvider = ({ children }: LabScrollProviderProps) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  return (
+    <LabScrollContext.Provider value={{ isScrolled, setIsScrolled }}>
+      {children}
+    </LabScrollContext.Provider>
+  );
+};

apps/landing/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

docs/deployment-plan.md

@@ -0,0 +1,234 @@
+# Banatie Production Deployment Plan
+
+## Architecture
+
+### Isolated Banatie Stack (5 containers):
+```
+banatie-landing   - Landing Page (node:20-alpine)
+banatie-api       - API Service (node:20-alpine)
+banatie-postgres  - PostgreSQL 15 (isolated from VPS PostgreSQL)
+banatie-minio     - MinIO storage (SNMD mode)
+banatie-minio-init - Initialization (one-shot)
+```
+
+### Domains:
+```
+banatie.app         → banatie-landing:3000
+api.banatie.app     → banatie-api:3000
+storage.banatie.app → banatie-minio:9001 (MinIO Console)
+```
+
+### File Structure:
+```
+~/workspace/projects/banatie-service/   # Git repository (code + config)
+├── apps/
+│   ├── api-service/Dockerfile
+│   └── landing/Dockerfile
+├── packages/database/
+└── prod-env/
+    ├── docker-compose.yml              # Production compose (run from here!)
+    ├── .env                            # Config without secrets (in git)
+    └── secrets.env                     # Secrets (NOT in git)
+
+/opt/services/data/banatie/             # Runtime data only
+├── postgres/                           # PostgreSQL data
+├── storage/drive{1-4}/                 # MinIO SNMD
+├── logs/                               # API logs
+├── results/                            # Generated images
+└── uploads/                            # Uploaded files
+```
+
+---
+
+## Docker Images
+
+| Container | Image | Internal Port |
+|-----------|-------|---------------|
+| banatie-landing | Built from apps/landing/Dockerfile | 3000 |
+| banatie-api | Built from apps/api-service/Dockerfile | 3000 |
+| banatie-postgres | postgres:15-alpine | 5432 |
+| banatie-minio | quay.io/minio/minio:latest | 9000 (API), 9001 (Console) |
+
+---
+
+## Deployment Steps
+
+### Step 1: Prepare VPS Directories
+
+```bash
+# Create runtime data directory
+sudo mkdir -p /opt/services/data/banatie/{postgres,logs,results,uploads}
+sudo mkdir -p /opt/services/data/banatie/storage/drive{1,2,3,4}
+sudo chown -R $USER:$USER /opt/services/data/banatie
+```
+
+### Step 2: Configure Repository
+
+```bash
+cd ~/workspace/projects/banatie-service
+
+# Create secrets.env (not in git)
+cp prod-env/secrets.env.example prod-env/secrets.env
+nano prod-env/secrets.env
+# Fill in: GEMINI_API_KEY, etc.
+```
+
+### Step 3: Configure Caddy
+
+Add to `/opt/services/configs/caddy/Caddyfile`:
+```caddy
+banatie.app, www.banatie.app {
+    reverse_proxy banatie-landing:3000
+    encode gzip
+    header {
+        Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+        X-Content-Type-Options "nosniff"
+        X-Frame-Options "DENY"
+    }
+}
+
+api.banatie.app {
+    reverse_proxy banatie-api:3000
+    encode gzip
+    header {
+        Strict-Transport-Security "max-age=31536000"
+        X-Content-Type-Options "nosniff"
+    }
+}
+
+storage.banatie.app {
+    reverse_proxy banatie-minio:9001
+    header {
+        Strict-Transport-Security "max-age=31536000"
+    }
+}
+```
+
+### Step 4: First Launch
+
+```bash
+cd ~/workspace/projects/banatie-service/prod-env
+
+# Start stack
+docker compose up -d
+
+# Check status
+docker compose ps
+
+# View logs
+docker compose logs -f
+
+# Restart Caddy to apply config
+docker restart caddy
+
+# Create master key
+curl -X POST https://api.banatie.app/api/bootstrap/initial-key
+```
+
+---
+
+## Update Process
+
+### Update Landing:
+```bash
+cd ~/workspace/projects/banatie-service
+git pull origin main
+cd prod-env
+docker compose up -d --build banatie-landing
+```
+
+### Update API:
+```bash
+cd ~/workspace/projects/banatie-service
+git pull origin main
+cd prod-env
+docker compose up -d --build banatie-api
+```
+
+### Update Both:
+```bash
+git pull origin main
+cd prod-env
+docker compose up -d --build banatie-landing banatie-api
+```
+
+### Full Restart:
+```bash
+cd ~/workspace/projects/banatie-service/prod-env
+docker compose down
+docker compose up -d --build
+```
+
+**Downtime:** ~2-3 minutes for image build
+
+---
+
+## DNS Records (add in GoDaddy)
+
+| Record | Type | Value |
+|--------|------|-------|
+| banatie.app | A | 62.146.239.118 |
+| www | CNAME | banatie.app |
+| api | A | 62.146.239.118 |
+| storage | A | 62.146.239.118 |
+
+---
+
+## Migration from Static Landing
+
+After successful Docker deployment:
+1. Remove `/var/www/banatie.app/` (old static files)
+2. Replace banatie.app section in Caddyfile (static → reverse_proxy)
+3. `docker restart caddy`
+
+---
+
+## Network Architecture
+
+### Internal Network (banatie-internal)
+- All containers communicate internally
+- No external port exposure
+- PostgreSQL and MinIO API only accessible internally
+
+### External Network (proxy-network)
+- Shared with Caddy reverse proxy
+- Landing, API, and MinIO Console exposed to Caddy
+- SSL termination at Caddy
+
+---
+
+## Security Notes
+
+1. **No exposed ports** - All traffic goes through Caddy with SSL
+2. **Isolated PostgreSQL** - Separate from VPS main database
+3. **Secrets management** - `secrets.env` not tracked in git
+4. **MinIO SNMD mode** - Erasure coding for data protection
+
+---
+
+## Troubleshooting
+
+### Check container status:
+```bash
+cd ~/workspace/projects/banatie-service/prod-env
+docker compose ps
+docker compose logs banatie-api
+docker compose logs banatie-landing
+```
+
+### Restart specific service:
+```bash
+docker compose restart banatie-api
+```
+
+### Full rebuild:
+```bash
+docker compose down
+docker compose build --no-cache
+docker compose up -d
+```
+
+### Check Caddy logs:
+```bash
+docker logs caddy
+```

pnpm-lock.yaml

@@ -196,6 +196,33 @@ importers:
       '@banatie/database':
         specifier: workspace:*
         version: link:../../packages/database
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.8
+        version: 2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.3.8
+        version: 1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.1.16)(react@19.1.0)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.400.0
+        version: 0.400.0(react@19.1.0)
       next:
         specifier: 15.5.4
         version: 15.5.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -205,6 +232,9 @@ importers:
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4
@@ -221,6 +251,9 @@ importers:
       tailwindcss:
         specifier: ^4
         version: 4.1.13
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ^5
         version: 5.9.2
@@ -1410,6 +1443,358 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.12':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@react-aria/focus@3.21.1':
     resolution: {integrity: sha512-hmH1IhHlcQ2lSIxmki1biWzMbGgnhdxJUM0MFfzc71Rv6YAzhlx4kX3GYn4VNcjCeb6cdPv4RZ5vunV4kgMZYQ==}
     peerDependencies:
@@ -2150,6 +2535,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -2383,6 +2772,9 @@ packages:
   cjs-module-lexer@1.4.3:
     resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -2610,6 +3002,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
@@ -3200,6 +3595,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -4385,12 +4784,42 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-smooth@4.0.4:
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -4809,6 +5238,9 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -4943,6 +5375,9 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5029,6 +5464,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.5.0:
     resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
@@ -5776,6 +6231,12 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6213,6 +6674,326 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.2(@types/react@19.1.16)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@react-aria/focus@3.21.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@react-aria/interactions': 3.25.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -7006,6 +7787,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.2:
@@ -7295,6 +8080,10 @@ snapshots:
 
   cjs-module-lexer@1.4.3: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   client-only@0.0.1: {}
 
   cliui@8.0.1:
@@ -7497,6 +8286,8 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  detect-node-es@1.1.0: {}
+
   dezalgo@1.0.4:
     dependencies:
       asap: 2.0.6
@@ -8288,6 +9079,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -9192,6 +9985,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lucide-react@0.400.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -9655,6 +10452,25 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  react-remove-scroll@2.7.2(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.16)(react@19.1.0)
+      react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.1.16)(react@19.1.0)
+      use-sidecar: 1.1.3(@types/react@19.1.16)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       fast-equals: 5.3.2
@@ -9663,6 +10479,14 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
+  react-style-singleton@2.2.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.28.4
@@ -10189,6 +11013,8 @@ snapshots:
 
   tabbable@6.2.0: {}
 
+  tailwind-merge@3.4.0: {}
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -10325,6 +11151,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -10437,6 +11265,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  use-sidecar@1.1.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   use-sync-external-store@1.5.0(react@18.3.1):
     dependencies:
       react: 18.3.1

prod-env/.env

@@ -5,29 +5,29 @@
 NODE_ENV=production
 PORT=3000
 LOG_LEVEL=info
-API_BASE_URL=http://localhost:3000
+API_BASE_URL=https://api.banatie.app
 
 # CORS Configuration
 CORS_ORIGIN=*
 
 # Database Configuration (Docker internal network)
-DB_HOST=postgres
+DB_HOST=banatie-postgres
 DB_PORT=5432
 DB_NAME=banatie_db
 DB_USER=banatie_user
 DB_PASSWORD=banatie_secure_password
-DATABASE_URL=postgresql://banatie_user:banatie_secure_password@postgres:5432/banatie_db
+DATABASE_URL=postgresql://banatie_user:banatie_secure_password@banatie-postgres:5432/banatie_db
 
 # MinIO Storage Configuration (Docker internal network)
 MINIO_ROOT_USER=banatie_admin
 MINIO_ROOT_PASSWORD=banatie_storage_secure_key_2024
 STORAGE_TYPE=minio
-MINIO_ENDPOINT=minio:9000
+MINIO_ENDPOINT=banatie-minio:9000
 MINIO_ACCESS_KEY=banatie_service
 MINIO_SECRET_KEY=banatie_service_key_2024
 MINIO_USE_SSL=false
 MINIO_BUCKET_NAME=banatie
-MINIO_PUBLIC_URL=http://localhost:9000
+MINIO_PUBLIC_URL=https://storage.banatie.app
 
 # Multi-tenancy Configuration
 DEFAULT_ORG_ID=default

prod-env/docker-compose.yml

@@ -1,23 +1,27 @@
+# Banatie Production Docker Compose
+# Run from: ~/workspace/projects/banatie-service/prod-env/
+# Data stored in: /opt/services/data/banatie/
+
 services:
   # API Service
-  app:
+  banatie-api:
     build:
       context: ..
       dockerfile: apps/api-service/Dockerfile
       target: production
-    container_name: banatie-app
-    ports:
-      - "3000:3000"
+    container_name: banatie-api
+    # No ports exposed - access through Caddy reverse proxy
     volumes:
-      - ../apps/api-service/logs:/app/apps/api-service/logs
-      - ../data/results:/app/results
-      - ../data/uploads:/app/uploads
+      - /opt/services/data/banatie/logs:/app/apps/api-service/logs
+      - /opt/services/data/banatie/results:/app/results
+      - /opt/services/data/banatie/uploads:/app/uploads
     networks:
-      - banatie-network
+      - banatie-internal
+      - proxy-network
     depends_on:
-      postgres:
+      banatie-postgres:
         condition: service_healthy
-      minio:
+      banatie-minio:
         condition: service_healthy
     env_file:
       - .env
@@ -28,17 +32,17 @@ services:
     restart: unless-stopped
 
   # Landing Page
-  landing:
+  banatie-landing:
     build:
       context: ..
       dockerfile: apps/landing/Dockerfile
     container_name: banatie-landing
-    ports:
-      - "3001:3000"
+    # No ports exposed - access through Caddy reverse proxy
     networks:
-      - banatie-network
+      - banatie-internal
+      - proxy-network
     depends_on:
-      - postgres
+      - banatie-postgres
     env_file:
       - .env
       - secrets.env
@@ -47,21 +51,20 @@ services:
       - NODE_ENV=production
     restart: unless-stopped
 
-  # PostgreSQL Database
-  postgres:
+  # PostgreSQL Database (isolated for Banatie)
+  banatie-postgres:
     image: postgres:15-alpine
     container_name: banatie-postgres
-    ports:
-      - "5460:5432"
+    # No ports exposed - internal access only
     volumes:
-      - ../data/postgres:/var/lib/postgresql/data
+      - /opt/services/data/banatie/postgres:/var/lib/postgresql/data
       - ../scripts/init-db.sql:/docker-entrypoint-initdb.d/01-init.sql
     networks:
-      - banatie-network
+      - banatie-internal
     environment:
       POSTGRES_DB: banatie_db
       POSTGRES_USER: banatie_user
-      POSTGRES_PASSWORD: banatie_secure_password
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-banatie_secure_password}
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U banatie_user -d banatie_db"]
       interval: 30s
@@ -71,26 +74,25 @@ services:
     restart: unless-stopped
 
   # MinIO Object Storage - Production Ready with SNMD
-  minio:
+  banatie-minio:
     image: quay.io/minio/minio:latest
-    container_name: banatie-storage
-    ports:
-      - "9000:9000"  # S3 API
-      - "9001:9001"  # Web Console
+    container_name: banatie-minio
+    # No ports exposed - Console through Caddy, API internal only
     volumes:
       # SNMD: 4 drives for full S3 compatibility and erasure coding
-      - ../data/storage/drive1:/data1
-      - ../data/storage/drive2:/data2
-      - ../data/storage/drive3:/data3
-      - ../data/storage/drive4:/data4
+      - /opt/services/data/banatie/storage/drive1:/data1
+      - /opt/services/data/banatie/storage/drive2:/data2
+      - /opt/services/data/banatie/storage/drive3:/data3
+      - /opt/services/data/banatie/storage/drive4:/data4
     networks:
-      - banatie-network
+      - banatie-internal
+      - proxy-network  # For MinIO Console access via Caddy
     environment:
       MINIO_ROOT_USER: ${MINIO_ROOT_USER}
       MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD}
-      MINIO_BROWSER_REDIRECT_URL: http://localhost:9001
-      MINIO_SERVER_URL: http://localhost:9000
-      MINIO_DOMAIN: localhost
+      # Production URLs (through Caddy)
+      MINIO_BROWSER_REDIRECT_URL: https://storage.banatie.app
+      MINIO_SERVER_URL: https://api.banatie.app
     # CRITICAL: SNMD command for full S3 compatibility
     command: server /data{1...4} --console-address ":9001"
     healthcheck:
@@ -102,29 +104,32 @@ services:
     restart: unless-stopped
 
   # MinIO Storage Initialization
-  storage-init:
+  banatie-minio-init:
     image: minio/mc:latest
-    container_name: banatie-storage-init
+    container_name: banatie-minio-init
     networks:
-      - banatie-network
+      - banatie-internal
     depends_on:
-      minio:
+      banatie-minio:
         condition: service_healthy
+    environment:
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD}
     entrypoint:
       - /bin/sh
       - -c
       - |
         echo 'Setting up MinIO alias...'
-        mc alias set storage http://minio:9000 $${MINIO_ROOT_USER} $${MINIO_ROOT_PASSWORD}
+        mc alias set storage http://banatie-minio:9000 $${MINIO_ROOT_USER} $${MINIO_ROOT_PASSWORD}
 
         echo 'Creating main bucket...'
         mc mb --ignore-existing storage/banatie
 
         echo 'Creating service user...'
-        mc admin user add storage banatie_service banatie_service_key_2024
+        mc admin user add storage banatie_service banatie_service_key_2024 || true
 
         echo 'Attaching readwrite policy to service user...'
-        mc admin policy attach storage readwrite --user=banatie_service
+        mc admin policy attach storage readwrite --user=banatie_service || true
 
         echo 'Setting up lifecycle policy...'
         cat > /tmp/lifecycle.json <<'LIFECYCLE'
@@ -143,7 +148,7 @@ services:
           ]
         }
         LIFECYCLE
-        mc ilm import storage/banatie < /tmp/lifecycle.json
+        mc ilm import storage/banatie < /tmp/lifecycle.json || true
 
         echo 'Storage initialization completed!'
         echo 'Bucket: banatie'
@@ -153,11 +158,9 @@ services:
     restart: "no"
 
 networks:
-  banatie-network:
+  # Internal network for service-to-service communication
+  banatie-internal:
     driver: bridge
-
-volumes:
-  postgres-data:
-    driver: local
-  storage-data:
-    driver: local
+  # External network shared with Caddy reverse proxy
+  proxy-network:
+    external: true