...

2025-08-03 06:15:57 +02:00 · 2025-08-03 06:15:57 +02:00 · d2fce95eab
commit d2fce95eab
parent 0f31cbd991
89 changed files with 12001 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,130 @@
 # Dependencies
 node_modules/
 .pnp
 .pnp.js
 # Testing
 coverage/
 .nyc_output
 # Production builds
 dist/
 build/
 build-ssr/
 *.local
 # Environment files
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 # Logs
 logs/
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 # Runtime data
 pids/
 *.pid
 *.seed
 *.pid.lock
 # Coverage directory used by tools like istanbul
 coverage/
 *.lcov
 # nyc test coverage
 .nyc_output
 # Dependency directories
 jspm_packages/
 # TypeScript cache
 *.tsbuildinfo
 # Optional npm cache directory
 .npm
 # Optional eslint cache
 .eslintcache
 # Microbundle cache
 .rpt2_cache/
 .rts2_cache_cjs/
 .rts2_cache_es/
 .rts2_cache_umd/
 # Optional REPL history
 .node_repl_history
 # Output of 'npm pack'
 *.tgz
 # Yarn Integrity file
 .yarn-integrity
 # dotenv environment variables file
 .env.test
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache
 # Next.js build output
 .next
 # Nuxt.js build / generate output
 .nuxt
 dist
 # Gatsby files
 .cache/
 public
 # Storybook build outputs
 .out
 .storybook-out
 # Temporary folders
 tmp/
 temp/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 # OS generated files
 .DS_Store
 .DS_Store?
 ._*
 .Spotlight-V100
 .Trashes
 ehthumbs.db
 Thumbs.db
 # Vite specific
 .vite/
 .vite-ssr/
 .vitepress/
 vite.config.ts.timestamp-*
 # Pnpm specific
 .pnpm-store/
 # Package manager lock files (uncomment if you want to ignore them)
 # pnpm-lock.yaml
 # yarn.lock
 # package-lock.json
--- a/README.md
+++ b/README.md
@ -1,2 +1,151 @@
-# hero_web_try1
+# HERO Personal Agent Website
 A modern, emotional dark-mode website for HERO Personal Agent platform built with React, Tailwind CSS, and Framer Motion.
 ## 🌟 Features
 - **Dark Mode Only** - Professional dark theme with blue, purple, and cyan accents
 - **Emotional Design** - Cyberpunk aesthetics with gradient text effects and smooth animations
 - **Large Full-Width Images** - Impactful visuals throughout the site
 - **Responsive Design** - Works perfectly on desktop and mobile
 - **Five Complete Pages** - Home, How, Get Started, Technology, and Blog
 - **Modern Tech Stack** - React 18, Tailwind CSS, Framer Motion, Lucide Icons
 ## 🚀 Quick Start
 ### Prerequisites
 - Node.js (v16 or higher)
 - pnpm (will be installed automatically if not present)
 ### Installation
 1. **Extract the files** to your desired directory
 2. **Run the installation script**:
   ```bash
   chmod +x install.sh start.sh
   ./install.sh
   ```
 3. **Start the development server**:
   ```bash
   ./start.sh
   ```
 4. **Open your browser** to `http://localhost:5173`
 ## 📁 Project Structure
 ```
 hero-website/
 ├── src/
 │   ├── pages/              # Website pages
 │   │   ├── Home.jsx        # Landing page with hero section
 │   │   ├── How.jsx         # How HERO works
 │   │   ├── GetStarted.jsx  # Pricing and signup ($20/month)
 │   │   ├── Technology.jsx  # Technical details and comparisons
 │   │   └── Blog.jsx        # Blog section with articles
 │   ├── components/         # Reusable UI components
 │   │   ├── HeroSection.jsx # Hero section component
 │   │   ├── Section.jsx     # Layout section wrapper
 │   │   ├── FeatureCard.jsx # Feature display cards
 │   │   └── Navigation.jsx  # Site navigation
 │   ├── assets/            # Images and media files
 │   ├── App.jsx            # Main application component
 │   ├── App.css            # Custom styles and animations
 │   └── main.jsx           # Application entry point
 ├── public/                # Static assets
 ├── install.sh            # Installation script
 ├── start.sh              # Development server script
 └── README.md             # This file
 ```
 ## 🎨 Customization
 ### Content Updates
 - **Home Page**: Edit `src/pages/Home.jsx` for main messaging
 - **Pricing**: Update pricing in `src/pages/GetStarted.jsx`
 - **Technology**: Modify technical details in `src/pages/Technology.jsx`
 - **Blog**: Add/edit blog posts in `src/pages/Blog.jsx`
 ### Styling
 - **Colors**: Modify color scheme in `src/App.css`
 - **Animations**: Customize Framer Motion animations in components
 - **Layout**: Adjust responsive breakpoints in Tailwind classes
 ### Images
 - Replace images in `src/assets/` directory
 - Update image imports in page components
 - Maintain aspect ratios for best results
 ## 🛠 Development Commands
 ```bash
 # Install dependencies
 ./install.sh
 # Start development server
 ./start.sh
 # Build for production
 pnpm run build
 # Preview production build
 pnpm run preview
 ```
 ## 🌐 Deployment
 The website is built as a static React application and can be deployed to any static hosting service:
 1. **Build the project**:
   ```bash
   pnpm run build
   ```
 2. **Deploy the `dist/` folder** to your hosting service
 ## 📦 Technologies Used
 - **React 18** - Modern React with hooks
 - **Vite** - Fast build tool and dev server
 - **Tailwind CSS** - Utility-first CSS framework
 - **Framer Motion** - Smooth animations and transitions
 - **Lucide React** - Beautiful icon library
 - **React Router** - Client-side routing
 - **shadcn/ui** - High-quality UI components
 ## 🎯 Key Pages
 1. **HOME** - Emotional hero section introducing HERO Personal Agent
 2. **HOW** - Technical explanation of HERO's capabilities
 3. **GET STARTED** - Clear pricing ($20/month) and signup process
 4. **TECHNOLOGY** - Deep technical details and comparisons
 5. **BLOG** - Modern blog layout with featured articles
 ## 🔧 Troubleshooting
 ### Common Issues
 1. **White screen on load**:
   - Ensure all dependencies are installed: `./install.sh`
   - Check browser console for errors
 2. **Images not loading**:
   - Verify images are in `src/assets/` directory
   - Check import paths in components
 3. **Styling issues**:
   - Ensure Tailwind CSS is properly configured
   - Check `src/App.css` for custom styles
 ### Getting Help
 - Check the browser console for error messages
 - Ensure Node.js version is 16 or higher
 - Verify all dependencies installed correctly
 ## 📄 License
 This project is created for HERO Personal Agent platform. Customize as needed for your use case.
 ---
 **Built with ❤️ for digital sovereignty and privacy**
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": false,
  "tailwind": {
    "config": "",
    "css": "src/App.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,33 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
 ]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HERO - Your Personal Agent</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
--- a/install.sh
+++ b/install.sh
@ -0,0 +1,47 @@
 #!/bin/bash
 # HERO Personal Agent Website - Installation Script
 # This script installs all dependencies using pnpm
 echo "🚀 Installing HERO Personal Agent Website..."
 echo "=============================================="
 # Check if Node.js is installed
 if ! command -v node &> /dev/null; then
    echo "❌ Node.js is not installed. Please install Node.js first."
    exit 1
 fi
 # Check if pnpm is installed
 if ! command -v pnpm &> /dev/null; then
    echo "📦 Installing pnpm..."
    npm install -g pnpm
 fi
 echo "📋 Node.js version: $(node --version)"
 echo "📋 pnpm version: $(pnpm --version)"
 # Install dependencies
 echo "📦 Installing project dependencies..."
 pnpm install
 # Check if installation was successful
 if [ $? -eq 0 ]; then
    echo "✅ Installation completed successfully!"
    echo ""
    echo "🎯 Next steps:"
    echo "   1. Run './start.sh' to start the development server"
    echo "   2. Open http://localhost:5173 in your browser"
    echo "   3. Start developing your HERO website!"
    echo ""
    echo "📁 Project structure:"
    echo "   - src/pages/     → Website pages (Home, How, GetStarted, Technology, Blog)"
    echo "   - src/components/ → Reusable UI components"
    echo "   - src/assets/    → Images and media files"
    echo "   - src/App.css    → Custom styles and animations"
    echo ""
 else
    echo "❌ Installation failed. Please check the error messages above."
    exit 1
 fi
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -0,0 +1,76 @@
 {
  "name": "hero-website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
    "@radix-ui/react-accordion": "^1.2.10",
    "@radix-ui/react-alert-dialog": "^1.1.13",
    "@radix-ui/react-aspect-ratio": "^1.1.6",
    "@radix-ui/react-avatar": "^1.1.9",
    "@radix-ui/react-checkbox": "^1.3.1",
    "@radix-ui/react-collapsible": "^1.1.10",
    "@radix-ui/react-context-menu": "^2.2.14",
    "@radix-ui/react-dialog": "^1.1.13",
    "@radix-ui/react-dropdown-menu": "^2.1.14",
    "@radix-ui/react-hover-card": "^1.1.13",
    "@radix-ui/react-label": "^2.1.6",
    "@radix-ui/react-menubar": "^1.1.14",
    "@radix-ui/react-navigation-menu": "^1.2.12",
    "@radix-ui/react-popover": "^1.1.13",
    "@radix-ui/react-progress": "^1.1.6",
    "@radix-ui/react-radio-group": "^1.3.6",
    "@radix-ui/react-scroll-area": "^1.2.8",
    "@radix-ui/react-select": "^2.2.4",
    "@radix-ui/react-separator": "^1.1.6",
    "@radix-ui/react-slider": "^1.3.4",
    "@radix-ui/react-slot": "^1.2.2",
    "@radix-ui/react-switch": "^1.2.4",
    "@radix-ui/react-tabs": "^1.1.11",
    "@radix-ui/react-toggle": "^1.1.8",
    "@radix-ui/react-toggle-group": "^1.1.9",
    "@radix-ui/react-tooltip": "^1.2.6",
    "@tailwindcss/vite": "^4.1.7",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "^8.6.0",
    "framer-motion": "^12.15.0",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.510.0",
    "next-themes": "^0.4.6",
    "react": "^19.1.0",
    "react-day-picker": "8.10.1",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.56.3",
    "react-resizable-panels": "^3.0.2",
    "react-router-dom": "^7.6.1",
    "recharts": "^2.15.3",
    "sonner": "^2.0.3",
    "tailwind-merge": "^3.3.0",
    "tailwindcss": "^4.1.7",
    "vaul": "^1.1.2",
    "zod": "^3.24.4"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "tw-animate-css": "^1.2.9",
    "vite": "^6.3.5"
  },
  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,243 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
 }
 :root {
  --radius: 0.625rem;
  --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);
 }
 .dark {
  --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);
 }
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
 }
 /* Custom HERO Dark Theme Enhancements */
 .hero-gradient {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
 }
 .hero-text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }
 .glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
 }
 .glow-purple {
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
 }
 /* Smooth scrolling */
 html {
  scroll-behavior: smooth;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
  width: 8px;
 }
 ::-webkit-scrollbar-track {
  background: #1a1a1a;
 }
 ::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
 }
 /* Animated background particles */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
 }
 .float-animation {
  animation: float 6s ease-in-out infinite;
 }
 /* Pulse effect for important elements */
@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
  }
  50% { 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
 }
 .pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
 }
 /* Text reveal animation */
@keyframes text-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
 }
 .text-reveal {
  animation: text-reveal 0.8s ease-out forwards;
 }
 /* Hover effects for interactive elements */
 .hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }
 /* Video overlay styles */
 .video-overlay {
  position: relative;
  overflow: hidden;
 }
 .video-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  z-index: 1;
 }
 .video-overlay > * {
  position: relative;
  z-index: 2;
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,31 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Navigation from './components/Navigation';
 import Home from './pages/Home';
 import How from './pages/How';
 import GetStarted from './pages/GetStarted';
 import Technology from './pages/Technology';
 import Blog from './pages/Blog';
 import './App.css';
 function App() {
  return (
    <Router>
      <div className="dark min-h-screen bg-black text-white">
        <Navigation />
        <main className="pt-20">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/how" element={<How />} />
            <Route path="/get-started" element={<GetStarted />} />
            <Route path="/technology" element={<Technology />} />
            <Route path="/blog" element={<Blog />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
 }
 export default App;
--- a/src/assets/3iGsTmc5FYZK.jpg
+++ b/src/assets/3iGsTmc5FYZK.jpg
--- a/src/assets/47WALTyZu0ep.jpg
+++ b/src/assets/47WALTyZu0ep.jpg
--- a/src/assets/8a1DncT2SIYs.jpeg
+++ b/src/assets/8a1DncT2SIYs.jpeg
--- a/src/assets/9nsRPMS0HUV4.jpg
+++ b/src/assets/9nsRPMS0HUV4.jpg
--- a/src/assets/H2coK1FCuiPB.jpeg
+++ b/src/assets/H2coK1FCuiPB.jpeg
--- a/src/assets/LubjiSy2yrT2.jpg
+++ b/src/assets/LubjiSy2yrT2.jpg
--- a/src/assets/SXifMdAlG29t.png
+++ b/src/assets/SXifMdAlG29t.png
--- a/src/assets/VQMVMsOGQyW8.jpg
+++ b/src/assets/VQMVMsOGQyW8.jpg
--- a/src/assets/bjNv78U6CA3e.jpg
+++ b/src/assets/bjNv78U6CA3e.jpg
--- a/src/assets/htZtx22e5QlA.jpg
+++ b/src/assets/htZtx22e5QlA.jpg
--- a/src/assets/i3w3S3Pt93wI.jpg
+++ b/src/assets/i3w3S3Pt93wI.jpg
--- a/src/assets/iQoW0Ohet4Cz.jpg
+++ b/src/assets/iQoW0Ohet4Cz.jpg
--- a/src/assets/ozNr9q8elMcO.jpg
+++ b/src/assets/ozNr9q8elMcO.jpg
--- a/src/assets/poVm1zm8mO0y.png
+++ b/src/assets/poVm1zm8mO0y.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/wD5nv0lVwg3i.jpg
+++ b/src/assets/wD5nv0lVwg3i.jpg
--- a/src/assets/yKQ5gi1xUIrM.jpg
+++ b/src/assets/yKQ5gi1xUIrM.jpg
--- a/src/components/FeatureCard.jsx
+++ b/src/components/FeatureCard.jsx
@ -0,0 +1,52 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 const FeatureCard = ({ 
  icon, 
  title, 
  description, 
  image, 
  className = "",
  delay = 0 
 }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      viewport={{ once: true }}
      whileHover={{ y: -5 }}
      className={`group relative bg-gray-900/50 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:border-blue-400/30 transition-all duration-300 ${className}`}
    >
      {image && (
        <div className="mb-4 overflow-hidden rounded-lg">
          <img 
            src={image} 
            alt={title}
            className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
          />
        </div>
      )}
      {icon && (
        <div className="mb-4 text-blue-400 group-hover:text-blue-300 transition-colors duration-300">
          {icon}
        </div>
      )}
      <h3 className="text-xl font-semibold text-white mb-3 group-hover:text-blue-100 transition-colors duration-300">
        {title}
      </h3>
      <p className="text-gray-300 leading-relaxed group-hover:text-gray-200 transition-colors duration-300">
        {description}
      </p>
      {/* Subtle glow effect on hover */}
      <div className="absolute inset-0 rounded-xl bg-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
    </motion.div>
  );
 };
 export default FeatureCard;
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@ -0,0 +1,104 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 const HeroSection = ({ 
  title, 
  subtitle, 
  description, 
  backgroundImage, 
  ctaText = "Get Started", 
  ctaLink = "/get-started",
  showVideo = false 
 }) => {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image/Video */}
      <div className="absolute inset-0 z-0">
        {showVideo ? (
          <div className="w-full h-full bg-gradient-to-br from-blue-900/20 to-purple-900/20">
            {/* Placeholder for video background */}
            <div className="w-full h-full bg-black/50 flex items-center justify-center">
              <span className="text-white/50 text-lg">Video Background Placeholder</span>
            </div>
          </div>
        ) : (
          <div 
            className="w-full h-full bg-cover bg-center bg-no-repeat"
            style={{ 
              backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
              backgroundColor: '#000'
            }}
          >
            <div className="absolute inset-0 bg-black/60"></div>
          </div>
        )}
      </div>
      {/* Content */}
      <div className="relative z-10 max-w-6xl mx-auto px-6 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          {subtitle && (
            <motion.p 
              className="text-blue-400 text-lg font-medium mb-4"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.2, duration: 0.6 }}
            >
              {subtitle}
            </motion.p>
          )}
          <motion.h1 
            className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 0.8 }}
          >
            {title}
          </motion.h1>
          {description && (
            <motion.p 
              className="text-xl md:text-2xl text-white/80 mb-8 max-w-4xl mx-auto leading-relaxed"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.8 }}
            >
              {description}
            </motion.p>
          )}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8, duration: 0.8 }}
          >
            <Button 
              size="lg" 
              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105"
              onClick={() => window.location.href = ctaLink}
            >
              {ctaText}
            </Button>
          </motion.div>
        </motion.div>
      </div>
      {/* Animated particles/dots effect */}
      <div className="absolute inset-0 z-5">
        <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-blue-400/30 rounded-full animate-pulse"></div>
        <div className="absolute top-1/3 right-1/3 w-1 h-1 bg-purple-400/40 rounded-full animate-ping"></div>
        <div className="absolute bottom-1/4 left-1/3 w-3 h-3 bg-cyan-400/20 rounded-full animate-bounce"></div>
        <div className="absolute bottom-1/3 right-1/4 w-1 h-1 bg-blue-300/50 rounded-full animate-pulse"></div>
      </div>
    </section>
  );
 };
 export default HeroSection;
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@ -0,0 +1,44 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 const Navigation = () => {
  const location = useLocation();
  const navItems = [
    { path: '/', label: 'HOME' },
    { path: '/how', label: 'HOW' },
    { path: '/get-started', label: 'GET STARTED' },
    { path: '/technology', label: 'TECHNOLOGY' },
    { path: '/blog', label: 'BLOG' },
  ];
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-white/10">
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <Link to="/" className="text-2xl font-bold text-white">
            HERO
          </Link>
          <div className="hidden md:flex space-x-8">
            {navItems.map((item) => (
              <Link
                key={item.path}
                to={item.path}
                className={`text-sm font-medium transition-colors hover:text-blue-400 ${
                  location.pathname === item.path
                    ? 'text-blue-400'
                    : 'text-white/80'
                }`}
              >
                {item.label}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
 };
 export default Navigation;
--- a/src/components/Section.jsx
+++ b/src/components/Section.jsx
@ -0,0 +1,50 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 const Section = ({ 
  children, 
  className = "", 
  background = "dark", 
  padding = "large",
  animate = true 
 }) => {
  const paddingClasses = {
    small: "py-12 px-6",
    medium: "py-16 px-6", 
    large: "py-24 px-6",
    xlarge: "py-32 px-6"
  };
  const backgroundClasses = {
    dark: "bg-black",
    darker: "bg-gray-900",
    gradient: "bg-gradient-to-br from-gray-900 to-black",
    transparent: "bg-transparent"
  };
  const content = (
    <section className={`${backgroundClasses[background]} ${paddingClasses[padding]} ${className}`}>
      <div className="max-w-7xl mx-auto">
        {children}
      </div>
    </section>
  );
  if (animate) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true, margin: "-100px" }}
      >
        {content}
      </motion.div>
    );
  }
  return content;
 };
 export default Section;
--- a/src/components/ui/accordion.jsx
+++ b/src/components/ui/accordion.jsx
@ -0,0 +1,62 @@
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDownIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function Accordion({
  ...props
 }) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 function AccordionItem({
  className,
  ...props
 }) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b last:border-b-0", className)}
      {...props} />
  );
 }
 function AccordionTrigger({
  className,
  children,
  ...props
 }) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
          className
        )}
        {...props}>
        {children}
        <ChevronDownIcon
          className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  );
 }
 function AccordionContent({
  className,
  children,
  ...props
 }) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}>
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
  );
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/ui/alert-dialog.jsx
+++ b/src/components/ui/alert-dialog.jsx
@ -0,0 +1,138 @@
 "use client"
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 function AlertDialog({
  ...props
 }) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 function AlertDialogTrigger({
  ...props
 }) {
  return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />);
 }
 function AlertDialogPortal({
  ...props
 }) {
  return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />);
 }
 function AlertDialogOverlay({
  className,
  ...props
 }) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props} />
  );
 }
 function AlertDialogContent({
  className,
  ...props
 }) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props} />
    </AlertDialogPortal>
  );
 }
 function AlertDialogHeader({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props} />
  );
 }
 function AlertDialogFooter({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
      {...props} />
  );
 }
 function AlertDialogTitle({
  className,
  ...props
 }) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn("text-lg font-semibold", className)}
      {...props} />
  );
 }
 function AlertDialogDescription({
  className,
  ...props
 }) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 function AlertDialogAction({
  className,
  ...props
 }) {
  return (<AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />);
 }
 function AlertDialogCancel({
  className,
  ...props
 }) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props} />
  );
 }
 export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
 }
--- a/src/components/ui/alert.jsx
+++ b/src/components/ui/alert.jsx
@ -0,0 +1,63 @@
 import * as React from "react"
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
 )
 function Alert({
  className,
  variant,
  ...props
 }) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props} />
  );
 }
 function AlertTitle({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="alert-title"
      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
      {...props} />
  );
 }
 function AlertDescription({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className
      )}
      {...props} />
  );
 }
 export { Alert, AlertTitle, AlertDescription }
--- a/src/components/ui/aspect-ratio.jsx
+++ b/src/components/ui/aspect-ratio.jsx
@ -0,0 +1,9 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 function AspectRatio({
  ...props
 }) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }
 export { AspectRatio }
--- a/src/components/ui/avatar.jsx
+++ b/src/components/ui/avatar.jsx
@ -0,0 +1,47 @@
 "use client"
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 import { cn } from "@/lib/utils"
 function Avatar({
  className,
  ...props
 }) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
      {...props} />
  );
 }
 function AvatarImage({
  className,
  ...props
 }) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("aspect-square size-full", className)}
      {...props} />
  );
 }
 function AvatarFallback({
  className,
  ...props
 }) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
        className
      )}
      {...props} />
  );
 }
 export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.jsx
@ -0,0 +1,44 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
 )
 function Badge({
  className,
  variant,
  asChild = false,
  ...props
 }) {
  const Comp = asChild ? Slot : "span"
  return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props} />
  );
 }
 export { Badge, badgeVariants }
--- a/src/components/ui/breadcrumb.jsx
+++ b/src/components/ui/breadcrumb.jsx
@ -0,0 +1,112 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "@/lib/utils"
 function Breadcrumb({
  ...props
 }) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 function BreadcrumbList({
  className,
  ...props
 }) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      )}
      {...props} />
  );
 }
 function BreadcrumbItem({
  className,
  ...props
 }) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props} />
  );
 }
 function BreadcrumbLink({
  asChild,
  className,
  ...props
 }) {
  const Comp = asChild ? Slot : "a"
  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("hover:text-foreground transition-colors", className)}
      {...props} />
  );
 }
 function BreadcrumbPage({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props} />
  );
 }
 function BreadcrumbSeparator({
  children,
  className,
  ...props
 }) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}>
      {children ?? <ChevronRight />}
    </li>
  );
 }
 function BreadcrumbEllipsis({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}>
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  );
 }
 export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
 }
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@ -0,0 +1,55 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } 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 shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs 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 shadow-xs 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",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
 )
 function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
 }) {
  const Comp = asChild ? Slot : "button"
  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props} />
  );
 }
 export { Button, buttonVariants }
--- a/src/components/ui/calendar.jsx
+++ b/src/components/ui/calendar.jsx
@ -0,0 +1,72 @@
 import * as React from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
 }) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row gap-2",
        month: "flex flex-col gap-4",
        caption: "flex justify-center pt-1 relative items-center w-full",
        caption_label: "text-sm font-medium",
        nav: "flex items-center gap-1",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-x-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
            : "[&:has([aria-selected])]:rounded-md"
        ),
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "size-8 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_start:
          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
        day_range_end:
          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ className, ...props }) => (
          <ChevronLeft className={cn("size-4", className)} {...props} />
        ),
        IconRight: ({ className, ...props }) => (
          <ChevronRight className={cn("size-4", className)} {...props} />
        ),
      }}
      {...props} />
  );
 }
 export { Calendar }
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@ -0,0 +1,101 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 function Card({
  className,
  ...props
 }) {
  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
 }) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      )}
      {...props} />
  );
 }
 function CardTitle({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props} />
  );
 }
 function CardDescription({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 function CardAction({
  className,
  ...props
 }) {
  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
 }) {
  return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />);
 }
 function CardFooter({
  className,
  ...props
 }) {
  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,
 }
--- a/src/components/ui/carousel.jsx
+++ b/src/components/ui/carousel.jsx
@ -0,0 +1,195 @@
 "use client";
 import * as React from "react"
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 const CarouselContext = React.createContext(null)
 function useCarousel() {
  const context = React.useContext(CarouselContext)
  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }
  return context
 }
 function Carousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
 }) {
  const [carouselRef, api] = useEmblaCarousel({
    ...opts,
    axis: orientation === "horizontal" ? "x" : "y",
  }, plugins)
  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
  const [canScrollNext, setCanScrollNext] = React.useState(false)
  const onSelect = React.useCallback((api) => {
    if (!api) return
    setCanScrollPrev(api.canScrollPrev())
    setCanScrollNext(api.canScrollNext())
  }, [])
  const scrollPrev = React.useCallback(() => {
    api?.scrollPrev()
  }, [api])
  const scrollNext = React.useCallback(() => {
    api?.scrollNext()
  }, [api])
  const handleKeyDown = React.useCallback((event) => {
    if (event.key === "ArrowLeft") {
      event.preventDefault()
      scrollPrev()
    } else if (event.key === "ArrowRight") {
      event.preventDefault()
      scrollNext()
    }
  }, [scrollPrev, scrollNext])
  React.useEffect(() => {
    if (!api || !setApi) return
    setApi(api)
  }, [api, setApi])
  React.useEffect(() => {
    if (!api) return
    onSelect(api)
    api.on("reInit", onSelect)
    api.on("select", onSelect)
    return () => {
      api?.off("select", onSelect)
    };
  }, [api, onSelect])
  return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api: api,
        opts,
        orientation:
          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext,
      }}>
      <div
        onKeyDownCapture={handleKeyDown}
        className={cn("relative", className)}
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        {...props}>
        {children}
      </div>
    </CarouselContext.Provider>
  );
 }
 function CarouselContent({
  className,
  ...props
 }) {
  const { carouselRef, orientation } = useCarousel()
  return (
    <div
      ref={carouselRef}
      className="overflow-hidden"
      data-slot="carousel-content">
      <div
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props} />
    </div>
  );
 }
 function CarouselItem({
  className,
  ...props
 }) {
  const { orientation } = useCarousel()
  return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props} />
  );
 }
 function CarouselPrevious({
  className,
  variant = "outline",
  size = "icon",
  ...props
 }) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
  return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn("absolute size-8 rounded-full", orientation === "horizontal"
        ? "top-1/2 -left-12 -translate-y-1/2"
        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}>
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
  );
 }
 function CarouselNext({
  className,
  variant = "outline",
  size = "icon",
  ...props
 }) {
  const { orientation, scrollNext, canScrollNext } = useCarousel()
  return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn("absolute size-8 rounded-full", orientation === "horizontal"
        ? "top-1/2 -right-12 -translate-y-1/2"
        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}>
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
  );
 }
 export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
--- a/src/components/ui/chart.jsx
+++ b/src/components/ui/chart.jsx
@ -0,0 +1,309 @@
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 import { cn } from "@/lib/utils"
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = {
  light: "",
  dark: ".dark"
 }
 const ChartContext = React.createContext(null)
 function useChart() {
  const context = React.useContext(ChartContext)
  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }
  return context
 }
 function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
 }) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}>
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  );
 }
 const ChartStyle = ({
  id,
  config
 }) => {
  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
  if (!colorConfig.length) {
    return null
  }
  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
 .map(([key, itemConfig]) => {
 const color =
  itemConfig.theme?.[theme] ||
  itemConfig.color
 return color ? `  --color-${key}: ${color};` : null
 })
 .join("\n")}
 }
 `)
          .join("\n"),
      }} />
  );
 }
 const ChartTooltip = RechartsPrimitive.Tooltip
 function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey
 }) {
  const { config } = useChart()
  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }
    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label]?.label || label
        : itemConfig?.label
    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      );
    }
    if (!value) {
      return null
    }
    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])
  if (!active || !payload?.length) {
    return null
  }
  const nestLabel = payload.length === 1 && indicator !== "dot"
  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}>
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color
          return (
            <div
              key={item.dataKey}
              className={cn(
                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                indicator === "dot" && "items-center"
              )}>
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
                          "h-2.5 w-2.5": indicator === "dot",
                          "w-1": indicator === "line",
                          "w-0 border-[1.5px] border-dashed bg-transparent":
                            indicator === "dashed",
                          "my-0.5": nestLabel && indicator === "dashed",
                        })}
                        style={
                          {
                            "--color-bg": indicatorColor,
                            "--color-border": indicatorColor
                          }
                        } />
                    )
                  )}
                  <div
                    className={cn(
                      "flex flex-1 justify-between leading-none",
                      nestLabel ? "items-end" : "items-center"
                    )}>
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
 }
 const ChartLegend = RechartsPrimitive.Legend
 function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey
 }) {
  const { config } = useChart()
  if (!payload?.length) {
    return null
  }
  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}>
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || "value"}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)
        return (
          <div
            key={item.value}
            className={cn(
              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
            )}>
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }} />
            )}
            {itemConfig?.label}
          </div>
        );
      })}
    </div>
  );
 }
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
  config,
  payload,
  key
 ) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }
  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined
  let configLabelKey = key
  if (
    key in payload &&
    typeof payload[key] === "string"
  ) {
    configLabelKey = payload[key]
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key] === "string"
  ) {
    configLabelKey = payloadPayload[key]
  }
  return configLabelKey in config
    ? config[configLabelKey]
    : config[key];
 }
 export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
 }
--- a/src/components/ui/checkbox.jsx
+++ b/src/components/ui/checkbox.jsx
@ -0,0 +1,30 @@
 "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
 }) {
  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="flex items-center justify-center text-current transition-none">
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
 }
 export { Checkbox }
--- a/src/components/ui/collapsible.jsx
+++ b/src/components/ui/collapsible.jsx
@ -0,0 +1,21 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 function Collapsible({
  ...props
 }) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 function CollapsibleTrigger({
  ...props
 }) {
  return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />);
 }
 function CollapsibleContent({
  ...props
 }) {
  return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />);
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.jsx
+++ b/src/components/ui/command.jsx
@ -0,0 +1,155 @@
 "use client"
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 import { SearchIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog"
 function Command({
  className,
  ...props
 }) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
        className
      )}
      {...props} />
  );
 }
 function CommandDialog({
  title = "Command Palette",
  description = "Search for a command to run...",
  children,
  ...props
 }) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent className="overflow-hidden p-0">
        <Command
          className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  );
 }
 function CommandInput({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3">
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        {...props} />
    </div>
  );
 }
 function CommandList({
  className,
  ...props
 }) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
      {...props} />
  );
 }
 function CommandEmpty({
  ...props
 }) {
  return (<CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />);
 }
 function CommandGroup({
  className,
  ...props
 }) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
        className
      )}
      {...props} />
  );
 }
 function CommandSeparator({
  className,
  ...props
 }) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn("bg-border -mx-1 h-px", className)}
      {...props} />
  );
 }
 function CommandItem({
  className,
  ...props
 }) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function CommandShortcut({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
      {...props} />
  );
 }
 export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
 }
--- a/src/components/ui/context-menu.jsx
+++ b/src/components/ui/context-menu.jsx
@ -0,0 +1,224 @@
 "use client"
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function ContextMenu({
  ...props
 }) {
  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 function ContextMenuTrigger({
  ...props
 }) {
  return (<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />);
 }
 function ContextMenuGroup({
  ...props
 }) {
  return (<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />);
 }
 function ContextMenuPortal({
  ...props
 }) {
  return (<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />);
 }
 function ContextMenuSub({
  ...props
 }) {
  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
 }
 function ContextMenuRadioGroup({
  ...props
 }) {
  return (<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />);
 }
 function ContextMenuSubTrigger({
  className,
  inset,
  children,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.SubTrigger
      data-slot="context-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}>
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
  );
 }
 function ContextMenuSubContent({
  className,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.SubContent
      data-slot="context-menu-sub-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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props} />
  );
 }
 function ContextMenuContent({
  className,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        data-slot="context-menu-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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
          className
        )}
        {...props} />
    </ContextMenuPrimitive.Portal>
  );
 }
 function ContextMenuItem({
  className,
  inset,
  variant = "default",
  ...props
 }) {
  return (
    <ContextMenuPrimitive.Item
      data-slot="context-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function ContextMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.CheckboxItem
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
        className
      )}
      checked={checked}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  );
 }
 function ContextMenuRadioItem({
  className,
  children,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.RadioItem
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
        className
      )}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
  );
 }
 function ContextMenuLabel({
  className,
  inset,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.Label
      data-slot="context-menu-label"
      data-inset={inset}
      className={cn(
        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
        className
      )}
      {...props} />
  );
 }
 function ContextMenuSeparator({
  className,
  ...props
 }) {
  return (
    <ContextMenuPrimitive.Separator
      data-slot="context-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props} />
  );
 }
 function ContextMenuShortcut({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="context-menu-shortcut"
      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
      {...props} />
  );
 }
 export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
 }
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.jsx
@ -0,0 +1,131 @@
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function Dialog({
  ...props
 }) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 function DialogTrigger({
  ...props
 }) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 function DialogPortal({
  ...props
 }) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 function DialogClose({
  ...props
 }) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 function DialogOverlay({
  className,
  ...props
 }) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props} />
  );
 }
 function DialogContent({
  className,
  children,
  ...props
 }) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}>
        {children}
        <DialogPrimitive.Close
          className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
          <XIcon />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPortal>
  );
 }
 function DialogHeader({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props} />
  );
 }
 function DialogFooter({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
      {...props} />
  );
 }
 function DialogTitle({
  className,
  ...props
 }) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn("text-lg leading-none font-semibold", className)}
      {...props} />
  );
 }
 function DialogDescription({
  className,
  ...props
 }) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
 }
--- a/src/components/ui/drawer.jsx
+++ b/src/components/ui/drawer.jsx
@ -0,0 +1,131 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 import { cn } from "@/lib/utils"
 function Drawer({
  ...props
 }) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 function DrawerTrigger({
  ...props
 }) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 function DrawerPortal({
  ...props
 }) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 function DrawerClose({
  ...props
 }) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 function DrawerOverlay({
  className,
  ...props
 }) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props} />
  );
 }
 function DrawerContent({
  className,
  children,
  ...props
 }) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
          className
        )}
        {...props}>
        <div
          className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  );
 }
 function DrawerHeader({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="drawer-header"
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props} />
  );
 }
 function DrawerFooter({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props} />
  );
 }
 function DrawerTitle({
  className,
  ...props
 }) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn("text-foreground font-semibold", className)}
      {...props} />
  );
 }
 function DrawerDescription({
  className,
  ...props
 }) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
 }
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.jsx
@ -0,0 +1,223 @@
 "use client"
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function DropdownMenu({
  ...props
 }) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 function DropdownMenuPortal({
  ...props
 }) {
  return (<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />);
 }
 function DropdownMenuTrigger({
  ...props
 }) {
  return (<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />);
 }
 function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
          className
        )}
        {...props} />
    </DropdownMenuPrimitive.Portal>
  );
 }
 function DropdownMenuGroup({
  ...props
 }) {
  return (<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />);
 }
 function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
        className
      )}
      checked={checked}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  );
 }
 function DropdownMenuRadioGroup({
  ...props
 }) {
  return (<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />);
 }
 function DropdownMenuRadioItem({
  className,
  children,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
        className
      )}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  );
 }
 function DropdownMenuLabel({
  className,
  inset,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
      {...props} />
  );
 }
 function DropdownMenuSeparator({
  className,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props} />
  );
 }
 function DropdownMenuShortcut({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
      {...props} />
  );
 }
 function DropdownMenuSub({
  ...props
 }) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
        className
      )}
      {...props}>
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  );
 }
 function DropdownMenuSubContent({
  className,
  ...props
 }) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props} />
  );
 }
 export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
 }
--- a/src/components/ui/form.jsx
+++ b/src/components/ui/form.jsx
@ -0,0 +1,143 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 const Form = FormProvider
 const FormFieldContext = React.createContext({})
 const FormField = (
  {
    ...props
  }
 ) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  );
 }
 const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)
  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }
  const { id } = itemContext
  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
 }
 const FormItemContext = React.createContext({})
 function FormItem({
  className,
  ...props
 }) {
  const id = React.useId()
  return (
    <FormItemContext.Provider value={{ id }}>
      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
    </FormItemContext.Provider>
  );
 }
 function FormLabel({
  className,
  ...props
 }) {
  const { error, formItemId } = useFormField()
  return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn("data-[error=true]:text-destructive", className)}
      htmlFor={formItemId}
      {...props} />
  );
 }
 function FormControl({
  ...props
 }) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
  return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props} />
  );
 }
 function FormDescription({
  className,
  ...props
 }) {
  const { formDescriptionId } = useFormField()
  return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 function FormMessage({
  className,
  ...props
 }) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? "") : props.children
  if (!body) {
    return null
  }
  return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn("text-destructive text-sm", className)}
      {...props}>
      {body}
    </p>
  );
 }
 export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
 }
--- a/src/components/ui/hover-card.jsx
+++ b/src/components/ui/hover-card.jsx
@ -0,0 +1,39 @@
 import * as React from "react"
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 import { cn } from "@/lib/utils"
 function HoverCard({
  ...props
 }) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 function HoverCardTrigger({
  ...props
 }) {
  return (<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />);
 }
 function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
 }) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props} />
    </HoverCardPrimitive.Portal>
  );
 }
 export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/components/ui/input-otp.jsx
+++ b/src/components/ui/input-otp.jsx
@ -0,0 +1,73 @@
 "use client"
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 import { MinusIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function InputOTP({
  className,
  containerClassName,
  ...props
 }) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
      className={cn("disabled:cursor-not-allowed", className)}
      {...props} />
  );
 }
 function InputOTPGroup({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn("flex items-center", className)}
      {...props} />
  );
 }
 function InputOTPSlot({
  index,
  className,
  ...props
 }) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
  return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
        className
      )}
      {...props}>
      {char}
      {hasFakeCaret && (
        <div
          className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
        </div>
      )}
    </div>
  );
 }
 function InputOTPSeparator({
  ...props
 }) {
  return (
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
  );
 }
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@ -0,0 +1,24 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 function Input({
  className,
  type,
  ...props
 }) {
  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 flex 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 }
--- a/src/components/ui/label.jsx
+++ b/src/components/ui/label.jsx
@ -0,0 +1,23 @@
 "use client"
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cn } from "@/lib/utils"
 function Label({
  className,
  ...props
 }) {
  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 }
--- a/src/components/ui/menubar.jsx
+++ b/src/components/ui/menubar.jsx
@ -0,0 +1,250 @@
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function Menubar({
  className,
  ...props
 }) {
  return (
    <MenubarPrimitive.Root
      data-slot="menubar"
      className={cn(
        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
        className
      )}
      {...props} />
  );
 }
 function MenubarMenu({
  ...props
 }) {
  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
 }
 function MenubarGroup({
  ...props
 }) {
  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
 }
 function MenubarPortal({
  ...props
 }) {
  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
 }
 function MenubarRadioGroup({
  ...props
 }) {
  return (<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />);
 }
 function MenubarTrigger({
  className,
  ...props
 }) {
  return (
    <MenubarPrimitive.Trigger
      data-slot="menubar-trigger"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
        className
      )}
      {...props} />
  );
 }
 function MenubarContent({
  className,
  align = "start",
  alignOffset = -4,
  sideOffset = 8,
  ...props
 }) {
  return (
    <MenubarPortal>
      <MenubarPrimitive.Content
        data-slot="menubar-content"
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
          className
        )}
        {...props} />
    </MenubarPortal>
  );
 }
 function MenubarItem({
  className,
  inset,
  variant = "default",
  ...props
 }) {
  return (
    <MenubarPrimitive.Item
      data-slot="menubar-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function MenubarCheckboxItem({
  className,
  children,
  checked,
  ...props
 }) {
  return (
    <MenubarPrimitive.CheckboxItem
      data-slot="menubar-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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",
        className
      )}
      checked={checked}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.CheckboxItem>
  );
 }
 function MenubarRadioItem({
  className,
  children,
  ...props
 }) {
  return (
    <MenubarPrimitive.RadioItem
      data-slot="menubar-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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",
        className
      )}
      {...props}>
      <span
        className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.RadioItem>
  );
 }
 function MenubarLabel({
  className,
  inset,
  ...props
 }) {
  return (
    <MenubarPrimitive.Label
      data-slot="menubar-label"
      data-inset={inset}
      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
      {...props} />
  );
 }
 function MenubarSeparator({
  className,
  ...props
 }) {
  return (
    <MenubarPrimitive.Separator
      data-slot="menubar-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props} />
  );
 }
 function MenubarShortcut({
  className,
  ...props
 }) {
  return (
    <span
      data-slot="menubar-shortcut"
      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
      {...props} />
  );
 }
 function MenubarSub({
  ...props
 }) {
  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 function MenubarSubTrigger({
  className,
  inset,
  children,
  ...props
 }) {
  return (
    <MenubarPrimitive.SubTrigger
      data-slot="menubar-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
        className
      )}
      {...props}>
      {children}
      <ChevronRightIcon className="ml-auto h-4 w-4" />
    </MenubarPrimitive.SubTrigger>
  );
 }
 function MenubarSubContent({
  className,
  ...props
 }) {
  return (
    <MenubarPrimitive.SubContent
      data-slot="menubar-sub-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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props} />
  );
 }
 export {
  Menubar,
  MenubarPortal,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarSeparator,
  MenubarLabel,
  MenubarItem,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
 }
--- a/src/components/ui/navigation-menu.jsx
+++ b/src/components/ui/navigation-menu.jsx
@ -0,0 +1,152 @@
 import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDownIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
        className
      )}
      {...props}>
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  );
 }
 function NavigationMenuList({
  className,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
      {...props} />
  );
 }
 function NavigationMenuItem({
  className,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn("relative", className)}
      {...props} />
  );
 }
 const navigationMenuTriggerStyle = cva(
  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 )
 function NavigationMenuTrigger({
  className,
  children,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      {...props}>
      {children}{" "}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true" />
    </NavigationMenuPrimitive.Trigger>
  );
 }
 function NavigationMenuContent({
  className,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
        className
      )}
      {...props} />
  );
 }
 function NavigationMenuViewport({
  className,
  ...props
 }) {
  return (
    <div
      className={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
          className
        )}
        {...props} />
    </div>
  );
 }
 function NavigationMenuLink({
  className,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function NavigationMenuIndicator({
  className,
  ...props
 }) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
        className
      )}
      {...props}>
      <div
        className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  );
 }
 export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
 }
--- a/src/components/ui/pagination.jsx
+++ b/src/components/ui/pagination.jsx
@ -0,0 +1,118 @@
 import * as React from "react"
 import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button";
 function Pagination({
  className,
  ...props
 }) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props} />
  );
 }
 function PaginationContent({
  className,
  ...props
 }) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn("flex flex-row items-center gap-1", className)}
      {...props} />
  );
 }
 function PaginationItem({
  ...props
 }) {
  return <li data-slot="pagination-item" {...props} />;
 }
 function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
 }) {
  return (
    <a
      aria-current={isActive ? "page" : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }), className)}
      {...props} />
  );
 }
 function PaginationPrevious({
  className,
  ...props
 }) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
      {...props}>
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  );
 }
 function PaginationNext({
  className,
  ...props
 }) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
      {...props}>
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  );
 }
 function PaginationEllipsis({
  className,
  ...props
 }) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}>
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  );
 }
 export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
 }
--- a/src/components/ui/popover.jsx
+++ b/src/components/ui/popover.jsx
@ -0,0 +1,47 @@
 "use client"
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { cn } from "@/lib/utils"
 function Popover({
  ...props
 }) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 function PopoverTrigger({
  ...props
 }) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
 }) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props} />
    </PopoverPrimitive.Portal>
  );
 }
 function PopoverAnchor({
  ...props
 }) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/progress.jsx
+++ b/src/components/ui/progress.jsx
@ -0,0 +1,27 @@
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 import { cn } from "@/lib/utils"
 function Progress({
  className,
  value,
  ...props
 }) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
        className
      )}
      {...props}>
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
    </ProgressPrimitive.Root>
  );
 }
 export { Progress }
--- a/src/components/ui/radio-group.jsx
+++ b/src/components/ui/radio-group.jsx
@ -0,0 +1,43 @@
 "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
 }) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("grid gap-3", className)}
      {...props} />
  );
 }
 function RadioGroupItem({
  className,
  ...props
 }) {
  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 }
--- a/src/components/ui/resizable.jsx
+++ b/src/components/ui/resizable.jsx
@ -0,0 +1,51 @@
 import * as React from "react"
 import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 import { cn } from "@/lib/utils"
 function ResizablePanelGroup({
  className,
  ...props
 }) {
  return (
    <ResizablePrimitive.PanelGroup
      data-slot="resizable-panel-group"
      className={cn(
        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
        className
      )}
      {...props} />
  );
 }
 function ResizablePanel({
  ...props
 }) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 function ResizableHandle({
  withHandle,
  className,
  ...props
 }) {
  return (
    <ResizablePrimitive.PanelResizeHandle
      data-slot="resizable-handle"
      className={cn(
        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
        className
      )}
      {...props}>
      {withHandle && (
        <div
          className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
          <GripVerticalIcon className="size-2.5" />
        </div>
      )}
    </ResizablePrimitive.PanelResizeHandle>
  );
 }
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
--- a/src/components/ui/scroll-area.jsx
+++ b/src/components/ui/scroll-area.jsx
@ -0,0 +1,51 @@
 "use client"
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 import { cn } from "@/lib/utils"
 function ScrollArea({
  className,
  children,
  ...props
 }) {
  return (
    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
 }
 function ScrollBar({
  className,
  orientation = "vertical",
  ...props
 }) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "flex touch-none p-px transition-colors select-none",
        orientation === "vertical" &&
          "h-full w-2.5 border-l border-l-transparent",
        orientation === "horizontal" &&
          "h-2.5 flex-col border-t border-t-transparent",
        className
      )}
      {...props}>
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full" />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  );
 }
 export { ScrollArea, ScrollBar }
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@ -0,0 +1,164 @@
 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
 }) {
  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 function SelectGroup({
  ...props
 }) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 function SelectValue({
  ...props
 }) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
 }) {
  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",
  ...props
 }) {
  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}
        {...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
 }) {
  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
 }) {
  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
 }) {
  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
 }) {
  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
 }) {
  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,
 }
--- a/src/components/ui/separator.jsx
+++ b/src/components/ui/separator.jsx
@ -0,0 +1,27 @@
 "use client"
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 import { cn } from "@/lib/utils"
 function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
 }) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator-root"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props} />
  );
 }
 export { Separator }
--- a/src/components/ui/sheet.jsx
+++ b/src/components/ui/sheet.jsx
@ -0,0 +1,138 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 function Sheet({
  ...props
 }) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 function SheetTrigger({
  ...props
 }) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 function SheetClose({
  ...props
 }) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 function SheetPortal({
  ...props
 }) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 function SheetOverlay({
  className,
  ...props
 }) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props} />
  );
 }
 function SheetContent({
  className,
  children,
  side = "right",
  ...props
 }) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
          side === "right" &&
            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
          side === "left" &&
            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
          side === "top" &&
            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
          side === "bottom" &&
            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
          className
        )}
        {...props}>
        {children}
        <SheetPrimitive.Close
          className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  );
 }
 function SheetHeader({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props} />
  );
 }
 function SheetFooter({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props} />
  );
 }
 function SheetTitle({
  className,
  ...props
 }) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn("text-foreground font-semibold", className)}
      {...props} />
  );
 }
 function SheetDescription({
  className,
  ...props
 }) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props} />
  );
 }
 export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
 }
--- a/src/components/ui/sidebar.jsx
+++ b/src/components/ui/sidebar.jsx
@ -0,0 +1,682 @@
 "use client";
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
 } from "@/components/ui/sheet"
 import { Skeleton } from "@/components/ui/skeleton"
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/ui/tooltip"
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 const SidebarContext = React.createContext(null)
 function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }
  return context
 }
 function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
 }) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)
  // This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback((value) => {
    const openState = typeof value === "function" ? value(open) : value
    if (setOpenProp) {
      setOpenProp(openState)
    } else {
      _setOpen(openState)
    }
    // This sets the cookie to keep the sidebar state.
    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
  }, [setOpenProp, open])
  // Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
  }, [isMobile, setOpen, setOpenMobile])
  // Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }
    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [toggleSidebar])
  // We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? "expanded" : "collapsed"
  const contextValue = React.useMemo(() => ({
    state,
    open,
    setOpen,
    isMobile,
    openMobile,
    setOpenMobile,
    toggleSidebar,
  }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar])
  return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style
            }
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
            className
          )}
          {...props}>
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  );
 }
 function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  ...props
 }) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
  if (collapsible === "none") {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
          className
        )}
        {...props}>
        {children}
      </div>
    );
  }
  if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH_MOBILE
            }
          }
          side={side}>
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    );
  }
  return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar">
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
        )} />
      <div
        data-slot="sidebar-container"
        className={cn(
          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          // Adjust the padding for floating and inset variants.
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
          className
        )}
        {...props}>
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
          {children}
        </div>
      </div>
    </div>
  );
 }
 function SidebarTrigger({
  className,
  onClick,
  ...props
 }) {
  const { toggleSidebar } = useSidebar()
  return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn("size-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}>
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  );
 }
 function SidebarRail({
  className,
  ...props
 }) {
  const { toggleSidebar } = useSidebar()
  return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props} />
  );
 }
 function SidebarInset({
  className,
  ...props
 }) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
        className
      )}
      {...props} />
  );
 }
 function SidebarInput({
  className,
  ...props
 }) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn("bg-background h-8 w-full shadow-none", className)}
      {...props} />
  );
 }
 function SidebarHeader({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props} />
  );
 }
 function SidebarFooter({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props} />
  );
 }
 function SidebarSeparator({
  className,
  ...props
 }) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn("bg-sidebar-border mx-2 w-auto", className)}
      {...props} />
  );
 }
 function SidebarContent({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props} />
  );
 }
 function SidebarGroup({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props} />
  );
 }
 function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
 }) {
  const Comp = asChild ? Slot : "div"
  return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props} />
  );
 }
 function SidebarGroupAction({
  className,
  asChild = false,
  ...props
 }) {
  const Comp = asChild ? Slot : "button"
  return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props} />
  );
 }
 function SidebarGroupContent({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn("w-full text-sm", className)}
      {...props} />
  );
 }
 function SidebarMenu({
  className,
  ...props
 }) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
      {...props} />
  );
 }
 function SidebarMenuItem({
  className,
  ...props
 }) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn("group/menu-item relative", className)}
      {...props} />
  );
 }
 const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
 )
 function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = "default",
  size = "default",
  tooltip,
  className,
  ...props
 }) {
  const Comp = asChild ? Slot : "button"
  const { isMobile, state } = useSidebar()
  const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props} />
  )
  if (!tooltip) {
    return button
  }
  if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
    }
  }
  return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== "collapsed" || isMobile}
        {...tooltip} />
    </Tooltip>
  );
 }
 function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
 }) {
  const Comp = asChild ? Slot : "button"
  return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
        className
      )}
      {...props} />
  );
 }
 function SidebarMenuBadge({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props} />
  );
 }
 function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
 }) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`;
  }, [])
  return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
      {...props}>
      {showIcon && (
        <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width
          }
        } />
    </div>
  );
 }
 function SidebarMenuSub({
  className,
  ...props
 }) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props} />
  );
 }
 function SidebarMenuSubItem({
  className,
  ...props
 }) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn("group/menu-sub-item relative", className)}
      {...props} />
  );
 }
 function SidebarMenuSubButton({
  asChild = false,
  size = "md",
  isActive = false,
  className,
  ...props
 }) {
  const Comp = asChild ? Slot : "a"
  return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props} />
  );
 }
 export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
 }
--- a/src/components/ui/skeleton.jsx
+++ b/src/components/ui/skeleton.jsx
@ -0,0 +1,15 @@
 import { cn } from "@/lib/utils"
 function Skeleton({
  className,
  ...props
 }) {
  return (
    <div
      data-slot="skeleton"
      className={cn("bg-accent animate-pulse rounded-md", className)}
      {...props} />
  );
 }
 export { Skeleton }
--- a/src/components/ui/slider.jsx
+++ b/src/components/ui/slider.jsx
@ -0,0 +1,56 @@
 "use client"
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 import { cn } from "@/lib/utils"
 function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
 }) {
  const _values = React.useMemo(() =>
    Array.isArray(value)
      ? value
      : Array.isArray(defaultValue)
        ? defaultValue
        : [min, max], [value, defaultValue, min, max])
  return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
        className
      )}
      {...props}>
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={cn(
          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
        )}>
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
          )} />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
      ))}
    </SliderPrimitive.Root>
  );
 }
 export { Slider }
--- a/src/components/ui/sonner.jsx
+++ b/src/components/ui/sonner.jsx
@ -0,0 +1,24 @@
 import { useTheme } from "next-themes"
 import { Toaster as Sonner } from "sonner";
 const Toaster = ({
  ...props
 }) => {
  const { theme = "system" } = useTheme()
  return (
    <Sonner
      theme={theme}
      className="toaster group"
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)"
        }
      }
      {...props} />
  );
 }
 export { Toaster }
--- a/src/components/ui/switch.jsx
+++ b/src/components/ui/switch.jsx
@ -0,0 +1,29 @@
 "use client"
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 import { cn } from "@/lib/utils"
 function Switch({
  className,
  ...props
 }) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}>
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
        )} />
    </SwitchPrimitive.Root>
  );
 }
 export { Switch }
--- a/src/components/ui/table.jsx
+++ b/src/components/ui/table.jsx
@ -0,0 +1,121 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 function Table({
  className,
  ...props
 }) {
  return (
    <div data-slot="table-container" className="relative w-full overflow-x-auto">
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props} />
    </div>
  );
 }
 function TableHeader({
  className,
  ...props
 }) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b", className)}
      {...props} />
  );
 }
 function TableBody({
  className,
  ...props
 }) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props} />
  );
 }
 function TableFooter({
  className,
  ...props
 }) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
      {...props} />
  );
 }
 function TableRow({
  className,
  ...props
 }) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      )}
      {...props} />
  );
 }
 function TableHead({
  className,
  ...props
 }) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props} />
  );
 }
 function TableCell({
  className,
  ...props
 }) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props} />
  );
 }
 function TableCaption({
  className,
  ...props
 }) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("text-muted-foreground mt-4 text-sm", className)}
      {...props} />
  );
 }
 export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
 }
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@ -0,0 +1,62 @@
 "use client"
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 import { cn } from "@/lib/utils"
 function Tabs({
  className,
  ...props
 }) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props} />
  );
 }
 function TabsList({
  className,
  ...props
 }) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      )}
      {...props} />
  );
 }
 function TabsTrigger({
  className,
  ...props
 }) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props} />
  );
 }
 function TabsContent({
  className,
  ...props
 }) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props} />
  );
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/src/components/ui/textarea.jsx
+++ b/src/components/ui/textarea.jsx
@ -0,0 +1,20 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 function Textarea({
  className,
  ...props
 }) {
  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 }
--- a/src/components/ui/toggle-group.jsx
+++ b/src/components/ui/toggle-group.jsx
@ -0,0 +1,61 @@
 "use client";
 import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { cn } from "@/lib/utils"
 import { toggleVariants } from "@/components/ui/toggle"
 const ToggleGroupContext = React.createContext({
  size: "default",
  variant: "default",
 })
 function ToggleGroup({
  className,
  variant,
  size,
  children,
  ...props
 }) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      className={cn(
        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
        className
      )}
      {...props}>
      <ToggleGroupContext.Provider value={{ variant, size }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  );
 }
 function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
 }) {
  const context = React.useContext(ToggleGroupContext)
  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      className={cn(toggleVariants({
        variant: context.variant || variant,
        size: context.size || size,
      }), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className)}
      {...props}>
      {children}
    </ToggleGroupPrimitive.Item>
  );
 }
 export { ToggleGroup, ToggleGroupItem }
--- a/src/components/ui/toggle.jsx
+++ b/src/components/ui/toggle.jsx
@ -0,0 +1,43 @@
 import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-9 px-2 min-w-9",
        sm: "h-8 px-1.5 min-w-8",
        lg: "h-10 px-2.5 min-w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
 )
 function Toggle({
  className,
  variant,
  size,
  ...props
 }) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props} />
  );
 }
 export { Toggle, toggleVariants }
--- a/src/components/ui/tooltip.jsx
+++ b/src/components/ui/tooltip.jsx
@ -0,0 +1,53 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { cn } from "@/lib/utils"
 function TooltipProvider({
  delayDuration = 0,
  ...props
 }) {
  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
 }
 function Tooltip({
  ...props
 }) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  );
 }
 function TooltipTrigger({
  ...props
 }) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
 }) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
          className
        )}
        {...props}>
        {children}
        <TooltipPrimitive.Arrow
          className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  );
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/hooks/use-mobile.js
+++ b/src/hooks/use-mobile.js
@ -0,0 +1,19 @@
 import * as React from "react"
 const MOBILE_BREAKPOINT = 768
 export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(undefined)
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange);
  }, [])
  return !!isMobile
 }
--- a/src/index.css
+++ b/src/index.css
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@ -0,0 +1,6 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge"
 export function cn(...inputs) {
  return twMerge(clsx(inputs));
 }
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
--- a/src/pages/Blog.jsx
+++ b/src/pages/Blog.jsx
@ -0,0 +1,325 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Calendar, User, ArrowRight, Tag } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import { Button } from '@/components/ui/button';
 // Import images
 import blogBackground from '../assets/8a1DncT2SIYs.jpeg'; // Dark AI
 import post1Image from '../assets/VQMVMsOGQyW8.jpg'; // Emotional tech
 import post2Image from '../assets/H2coK1FCuiPB.jpeg'; // AI Agent creation
 import post3Image from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy
 const Blog = () => {
  const featuredPost = {
    title: "The Future of Digital Sovereignty: Why Personal Agents Matter",
    excerpt: "In an era where tech giants control our digital lives, Personal Agents represent a fundamental shift toward individual sovereignty and privacy. Discover how HERO is leading this revolution.",
    author: "HERO Team",
    date: "December 15, 2024",
    readTime: "8 min read",
    image: post1Image,
    tags: ["Digital Sovereignty", "Privacy", "AI"]
  };
  const blogPosts = [
    {
      title: "Building Trust in a Zero-Knowledge World",
      excerpt: "How HERO's zero-knowledge architecture enables trust without compromising privacy. A deep dive into the cryptographic foundations of digital sovereignty.",
      author: "Dr. Sarah Chen",
      date: "December 12, 2024", 
      readTime: "6 min read",
      image: post2Image,
      tags: ["Cryptography", "Zero-Knowledge", "Security"]
    },
    {
      title: "From Centralized to Sovereign: The Evolution of Digital Identity",
      excerpt: "Tracing the journey from corporate-controlled identities to blockchain-verified, user-owned digital personas. The future is sovereign.",
      author: "Alex Rodriguez",
      date: "December 10, 2024",
      readTime: "5 min read", 
      image: post3Image,
      tags: ["Identity", "Blockchain", "Sovereignty"]
    },
    {
      title: "AI That Serves You: The Personal Agent Revolution",
      excerpt: "Unlike corporate AI that serves shareholders, Personal Agents work exclusively for you. Learn how this changes everything about AI interaction.",
      author: "HERO Team",
      date: "December 8, 2024",
      readTime: "7 min read",
      image: post1Image,
      tags: ["AI", "Personal Agents", "Technology"]
    },
    {
      title: "Quantum-Safe Storage: Protecting Your Digital Legacy",
      excerpt: "As quantum computing threatens traditional encryption, HERO's quantum-safe storage ensures your data remains secure for generations.",
      author: "Dr. Michael Park",
      date: "December 5, 2024",
      readTime: "9 min read",
      image: post2Image,
      tags: ["Quantum Computing", "Storage", "Security"]
    },
    {
      title: "The Economics of Digital Sovereignty",
      excerpt: "Why paying $20/month for digital freedom is the best investment you'll ever make. Breaking down the true cost of corporate data harvesting.",
      author: "Emma Thompson",
      date: "December 3, 2024",
      readTime: "4 min read",
      image: post3Image,
      tags: ["Economics", "Privacy", "Value"]
    },
    {
      title: "Peer-to-Peer Communication: Cutting Out the Middleman",
      excerpt: "How HERO enables direct communication between Personal Agents without corporate intermediaries. The future of private messaging is here.",
      author: "HERO Team", 
      date: "December 1, 2024",
      readTime: "6 min read",
      image: post1Image,
      tags: ["Communication", "P2P", "Privacy"]
    }
  ];
  const categories = [
    "All Posts",
    "Digital Sovereignty", 
    "Technology",
    "Privacy & Security",
    "AI & Personal Agents",
    "Blockchain",
    "Cryptography"
  ];
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Insights & Updates"
        title="HERO Blog"
        description="Stay informed about the latest developments in digital sovereignty, Personal Agents, and the future of private technology."
        backgroundImage={blogBackground}
        ctaText="Subscribe to Updates"
        ctaLink="#subscribe"
        showVideo={false}
      />
      {/* Featured Post Section */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Featured <span className="text-blue-400">Article</span>
          </motion.h2>
        </div>
        <motion.article
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto glass-effect rounded-2xl overflow-hidden hover:border-blue-400/30 transition-all duration-300 hover-lift"
        >
          <div className="md:flex">
            <div className="md:w-1/2">
              <img 
                src={featuredPost.image} 
                alt={featuredPost.title}
                className="w-full h-64 md:h-full object-cover"
              />
            </div>
            <div className="md:w-1/2 p-8">
              <div className="flex flex-wrap gap-2 mb-4">
                {featuredPost.tags.map((tag, index) => (
                  <span 
                    key={index}
                    className="px-3 py-1 bg-blue-600/20 text-blue-400 text-sm rounded-full"
                  >
                    {tag}
                  </span>
                ))}
              </div>
              <h3 className="text-2xl md:text-3xl font-bold text-white mb-4 leading-tight">
                {featuredPost.title}
              </h3>
              <p className="text-gray-300 mb-6 leading-relaxed">
                {featuredPost.excerpt}
              </p>
              <div className="flex items-center justify-between text-sm text-gray-400 mb-6">
                <div className="flex items-center space-x-4">
                  <div className="flex items-center space-x-2">
                    <User size={16} />
                    <span>{featuredPost.author}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Calendar size={16} />
                    <span>{featuredPost.date}</span>
                  </div>
                </div>
                <span>{featuredPost.readTime}</span>
              </div>
              <Button className="bg-blue-600 hover:bg-blue-700 text-white">
                Read Full Article <ArrowRight size={16} className="ml-2" />
              </Button>
            </div>
          </div>
        </motion.article>
      </Section>
      {/* Blog Posts Grid */}
      <Section background="dark" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Latest <span className="text-purple-400">Posts</span>
          </motion.h2>
          {/* Category Filter */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            className="flex flex-wrap justify-center gap-3 mb-12"
          >
            {categories.map((category, index) => (
              <button
                key={index}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                  index === 0 
                    ? 'bg-purple-600 text-white' 
                    : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'
                }`}
              >
                {category}
              </button>
            ))}
          </motion.div>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {blogPosts.map((post, index) => (
            <motion.article
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="glass-effect rounded-xl overflow-hidden hover:border-purple-400/30 transition-all duration-300 hover-lift group"
            >
              <div className="relative overflow-hidden">
                <img 
                  src={post.image} 
                  alt={post.title}
                  className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
              </div>
              <div className="p-6">
                <div className="flex flex-wrap gap-2 mb-3">
                  {post.tags.slice(0, 2).map((tag, tagIndex) => (
                    <span 
                      key={tagIndex}
                      className="px-2 py-1 bg-purple-600/20 text-purple-400 text-xs rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
                <h3 className="text-xl font-semibold text-white mb-3 leading-tight group-hover:text-purple-100 transition-colors duration-300">
                  {post.title}
                </h3>
                <p className="text-gray-300 text-sm mb-4 leading-relaxed">
                  {post.excerpt}
                </p>
                <div className="flex items-center justify-between text-xs text-gray-400">
                  <div className="flex items-center space-x-3">
                    <div className="flex items-center space-x-1">
                      <User size={12} />
                      <span>{post.author}</span>
                    </div>
                    <div className="flex items-center space-x-1">
                      <Calendar size={12} />
                      <span>{post.date}</span>
                    </div>
                  </div>
                  <span>{post.readTime}</span>
                </div>
              </div>
            </motion.article>
          ))}
        </div>
      </Section>
      {/* Newsletter Signup */}
      <Section background="gradient" padding="xlarge" id="subscribe">
        <div className="max-w-2xl mx-auto text-center">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Stay <span className="text-cyan-400">Informed</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 mb-8"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Get the latest insights on digital sovereignty, Personal Agents, and privacy technology delivered to your inbox.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"
          >
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-4 py-3 bg-gray-900/50 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400 transition-colors duration-300"
            />
            <Button className="bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-lg">
              Subscribe
            </Button>
          </motion.div>
          <motion.p 
            className="text-gray-400 text-sm mt-4"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            viewport={{ once: true }}
          >
            No spam, unsubscribe anytime. Your email stays private with HERO.
          </motion.p>
        </div>
      </Section>
    </div>
  );
 };
 export default Blog;
--- a/src/pages/GetStarted.jsx
+++ b/src/pages/GetStarted.jsx
@ -0,0 +1,285 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Check, Star, Shield, Zap, Users, Crown } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import { Button } from '@/components/ui/button';
 // Import images
 import startImage from '../assets/ozNr9q8elMcO.jpg'; // Digital human silhouette
 import securityImage from '../assets/wD5nv0lVwg3i.jpg'; // Digital privacy
 const GetStarted = () => {
  const features = [
    "Complete digital sovereignty and data ownership",
    "Quantum-safe memory storage across multiple nodes", 
    "Private AI agent access and local processing",
    "Secure peer-to-peer communication",
    "Blockchain-verified identity and reputation",
    "Geographic data placement control",
    "Zero-knowledge architecture",
    "24/7 Personal Agent assistance",
    "Unlimited secure storage",
    "Cross-platform compatibility",
    "Regular security updates",
    "Community support and resources"
  ];
  const steps = [
    {
      number: "01",
      title: "Create Your Account",
      description: "Sign up with your email and create your secure HERO identity. Choose your preferred data sovereignty settings."
    },
    {
      number: "02", 
      title: "Complete Payment",
      description: "Subscribe for $20/month to access your Personal Agent and all HERO capabilities. Cancel anytime."
    },
    {
      number: "03",
      title: "Setup Your HERO",
      description: "Download the HERO client, configure your preferences, and begin migrating your digital life."
    },
    {
      number: "04",
      title: "Start Living Sovereignly", 
      description: "Experience true digital freedom with your Personal Agent managing your secure, private digital ecosystem."
    }
  ];
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Begin Your Digital Sovereignty"
        title="Get Started with HERO"
        description="Join the revolution and take back control of your digital life. Your Personal Agent is waiting to serve you with complete privacy and security."
        backgroundImage={startImage}
        ctaText="Start Free Trial"
        ctaLink="#pricing"
        showVideo={false}
      />
      {/* Pricing Section */}
      <Section background="gradient" padding="xlarge" className="scroll-mt-20" id="pricing">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Simple, <span className="text-green-400">Transparent</span> Pricing
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            One price, unlimited possibilities. No hidden fees, no data harvesting, no compromises.
          </motion.p>
        </div>
        <div className="max-w-2xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative bg-gradient-to-br from-gray-900/80 to-black/80 backdrop-blur-sm border border-green-400/30 rounded-2xl p-8 hover:border-green-400/50 transition-all duration-300 glow-blue"
          >
            <div className="absolute top-4 right-4">
              <Crown className="text-green-400" size={32} />
            </div>
            <div className="text-center mb-8">
              <h3 className="text-3xl font-bold text-white mb-2">HERO Personal Agent</h3>
              <div className="flex items-center justify-center space-x-2 mb-4">
                <span className="text-5xl font-bold text-green-400">$20</span>
                <span className="text-xl text-gray-300">/month</span>
              </div>
              <p className="text-gray-300">Complete digital sovereignty for everyone</p>
            </div>
            <div className="grid md:grid-cols-2 gap-4 mb-8">
              {features.map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.05 }}
                  viewport={{ once: true }}
                  className="flex items-start space-x-3"
                >
                  <Check className="text-green-400 mt-1 flex-shrink-0" size={16} />
                  <span className="text-gray-300 text-sm">{feature}</span>
                </motion.div>
              ))}
            </div>
            <div className="text-center">
              <Button 
                size="lg" 
                className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 w-full md:w-auto"
              >
                Start Your 7-Day Free Trial
              </Button>
              <p className="text-gray-400 text-sm mt-4">No credit card required • Cancel anytime</p>
            </div>
          </motion.div>
        </div>
      </Section>
      {/* How to Get Started Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            How to <span className="text-blue-400">Get Started</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Setting up your HERO Personal Agent is simple and secure. Follow these steps to begin your journey to digital sovereignty.
          </motion.p>
        </div>
        <div className="max-w-4xl mx-auto">
          <div className="space-y-12">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8"
              >
                <div className="flex-shrink-0 w-20 h-20 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-xl">
                  {step.number}
                </div>
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-2xl font-semibold text-white mb-3">{step.title}</h3>
                  <p className="text-gray-300 text-lg leading-relaxed">{step.description}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </Section>
      {/* Security Guarantee Section */}
      <Section background="gradient" padding="xlarge">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Your <span className="text-purple-400">Security</span> is Guaranteed
            </h2>
            <p className="text-xl text-gray-300 mb-6 leading-relaxed">
              We use military-grade encryption and quantum-safe algorithms to ensure your data remains private and secure. 
              Your HERO operates under your complete control with zero-knowledge architecture.
            </p>
            <div className="space-y-4">
              {[
                "End-to-end encryption for all communications",
                "Zero-knowledge data storage and processing", 
                "Quantum-resistant cryptographic algorithms",
                "Geographic data sovereignty options",
                "Regular security audits and updates",
                "24/7 monitoring and threat detection"
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="flex items-start space-x-3"
                >
                  <Shield className="text-purple-400 mt-1 flex-shrink-0" size={20} />
                  <span className="text-gray-300">{item}</span>
                </motion.div>
              ))}
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative"
          >
            <img 
              src={securityImage} 
              alt="Digital Security"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>
      {/* Final CTA Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Ready to Reclaim Your <span className="text-green-400">Digital Freedom</span>?
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Join thousands of users who have already taken control of their digital lives with HERO Personal Agent.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-4"
          >
            <Button 
              size="lg" 
              className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
            >
              Start Your Free Trial Now
            </Button>
            <p className="text-gray-400">7-day free trial • $20/month after • Cancel anytime</p>
          </motion.div>
        </div>
      </Section>
    </div>
  );
 };
 export default GetStarted;
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -0,0 +1,253 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Shield, Brain, Users, Lock, Zap, Heart } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
 import { Button } from '@/components/ui/button';
 // Import images
 import heroBackground from '../assets/47WALTyZu0ep.jpg'; // Cyberpunk city
 import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
 import heartTechImage from '../assets/LubjiSy2yrT2.jpg'; // Technology heart
 import humanConnectionImage from '../assets/htZtx22e5QlA.jpg'; // Digital human connection
 import privacyImage from '../assets/wD5nv0lVwg3i.jpg'; // Digital privacy
 import blockchainImage from '../assets/iQoW0Ohet4Cz.jpg'; // Blockchain visualization
 const Home = () => {
  const capabilities = [
    {
      icon: <Brain size={32} />,
      title: "Communicate",
      description: "Secure messaging, voice, and video chat — all managed privately by your Personal Agent",
      image: humanConnectionImage
    },
    {
      icon: <Zap size={32} />,
      title: "Create", 
      description: "Build documents, videos, and creative assets collaboratively with AI assistance",
      image: heartTechImage
    },
    {
      icon: <Shield size={32} />,
      title: "Discover",
      description: "Browse and search using authentic sources and AI assistance while maintaining privacy",
      image: networkImage
    },
    {
      icon: <Users size={32} />,
      title: "Develop",
      description: "Build and deploy applications faster with local AI and secure storage",
      image: blockchainImage
    },
    {
      icon: <Lock size={32} />,
      title: "Share",
      description: "Distribute content without central platforms — sovereignly and securely",
      image: privacyImage
    },
    {
      icon: <Heart size={32} />,
      title: "Transact",
      description: "Send and receive digital value safely and without intermediaries",
      image: networkImage
    }
  ];
  const benefits = [
    "Your memory can never be lost, stolen, or corrupted",
    "Authentic information flow between real, verified people", 
    "Equal access to knowledge and collaboration",
    "Enhanced personal productivity with local AI support",
    "Legal identity and digital autonomy through sovereign zones",
    "Full control of your assets and data — for you and your children"
  ];
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Take Back Control of Your Digital Life"
        title={
          <span>
            Your <span className="hero-text-gradient">Personal Agent</span>
          </span>
        }
        description="HERO is not just another app — it's your trusted digital extension that works for you and no one else. Own your data, decide who accesses what, and preserve your memory in a way that can never be corrupted, lost, or hacked."
        backgroundImage={heroBackground}
        ctaText="Start Your Journey"
        ctaLink="/get-started"
      />
      {/* What is HERO Section */}
      <Section background="gradient" padding="xlarge">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              What is a <span className="text-blue-400">HERO</span>?
            </h2>
            <p className="text-xl text-gray-300 mb-6 leading-relaxed">
              A <strong className="text-white">HERO</strong> is your <strong className="text-blue-400">Personal Agent (PA)</strong> — 
              a secure piece of software that acts entirely on your behalf.
            </p>
            <div className="space-y-4 text-lg text-gray-300">
              <div className="flex items-start space-x-3">
                <Shield className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Fully owned and controlled by you</span>
              </div>
              <div className="flex items-start space-x-3">
                <Brain className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Capable of managing your digital life: data, identity, communication, AI, and transactions</span>
              </div>
              <div className="flex items-start space-x-3">
                <Lock className="text-blue-400 mt-1 flex-shrink-0" size={20} />
                <span>Designed for privacy, security, and sovereignty</span>
              </div>
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative"
          >
            <img 
              src={humanConnectionImage} 
              alt="Digital Human Connection"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>
      {/* Why HEROs Matter Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Why <span className="text-purple-400">HEROs</span> Matter
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Today, most AI tools are owned by corporations. They process your data, monitor your interactions, 
            and store your digital memory in centralized systems. <strong className="text-white">HERO flips that model.</strong>
          </motion.p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
          {benefits.map((benefit, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="glass-effect rounded-xl p-6 hover:glow-blue transition-all duration-300"
            >
              <div className="flex items-start space-x-3">
                <Heart className="text-purple-400 mt-1 flex-shrink-0" size={20} />
                <p className="text-gray-300">{benefit}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </Section>
      {/* HERO Capabilities Section */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            HERO <span className="text-cyan-400">Capabilities</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Your Personal Agent empowers you with comprehensive digital capabilities
          </motion.p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {capabilities.map((capability, index) => (
            <FeatureCard
              key={index}
              icon={capability.icon}
              title={capability.title}
              description={capability.description}
              image={capability.image}
              delay={index * 0.1}
            />
          ))}
        </div>
      </Section>
      {/* Call to Action Section */}
      <Section background="dark" padding="xlarge">
        <div className="text-center">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Ready to Take Control?
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            This is not just better tech. This is <strong className="text-blue-400">freedom through infrastructure</strong>.
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
          >
            <Button 
              size="lg" 
              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-12 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 pulse-glow"
              onClick={() => window.location.href = '/get-started'}
            >
              Get Started Today
            </Button>
          </motion.div>
        </div>
      </Section>
    </div>
  );
 };
 export default Home;
--- a/src/pages/How.jsx
+++ b/src/pages/How.jsx
@ -0,0 +1,228 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { User, Shield, Brain, Network, Database, Key } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
 // Import images
 import agentImage from '../assets/H2coK1FCuiPB.jpeg'; // AI Agent Creation
 import memoryImage from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy/memory
 import ledgerImage from '../assets/SXifMdAlG29t.png'; // Blockchain visualization
 import networkImage from '../assets/9nsRPMS0HUV4.jpg'; // Human silhouette with network
 const How = () => {
  const howItWorks = [
    {
      icon: <User size={32} />,
      title: "Your Personal Agent",
      description: "Your HERO acts as your digital assistant, managing messaging, meetings, calendar, documents, tasks, AI interactions, personal identity, credentials, and financial transactions.",
      image: agentImage
    },
    {
      icon: <Database size={32} />,
      title: "Secure, Unbreakable Memory", 
      description: "Uses a zero-knowledge, quantum-safe dispersal algorithm. Memory is stored across multiple nodes with no single point of failure. You control the geographic placement of your data.",
      image: memoryImage
    },
    {
      icon: <Brain size={32} />,
      title: "AI Agents on Your Terms",
      description: "HERO connects with a wide range of AI agents for research, content creation, and task automation. All computation is done locally or via trusted partners.",
      image: networkImage
    },
    {
      icon: <Key size={32} />,
      title: "A Private Ledger Just for You",
      description: "Every HERO maintains a private blockchain ledger that verifies identity, manages access control, tracks interactions, and can communicate securely with other ledgers.",
      image: ledgerImage
    }
  ];
  const technicalFeatures = [
    {
      title: "Zero-Knowledge Architecture",
      description: "Your data is encrypted and dispersed using advanced cryptographic techniques that ensure even we cannot access your information."
    },
    {
      title: "Quantum-Safe Security", 
      description: "Built with post-quantum cryptography to protect against future quantum computing threats."
    },
    {
      title: "Geographic Sovereignty",
      description: "Choose where your data is stored geographically, ensuring compliance with local laws and regulations."
    },
    {
      title: "Peer-to-Peer Communication",
      description: "Direct communication between HEROs without central servers or intermediaries."
    },
    {
      title: "Local AI Processing",
      description: "AI computations happen on your device or trusted infrastructure, never exposing your data to third parties."
    },
    {
      title: "Blockchain Identity",
      description: "Cryptographically verified identity that you control, with reputation and trust built over time."
    }
  ];
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="Understanding Your Personal Agent"
        title="How HERO Works"
        description="Discover the revolutionary technology that puts you back in control of your digital life through secure, private, and sovereign infrastructure."
        backgroundImage={networkImage}
        ctaText="Get Your HERO"
        ctaLink="/get-started"
        showVideo={false}
      />
      {/* How It Works Section */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            The Four <span className="text-blue-400">Core Components</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-4xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            HERO operates through four interconnected systems that work together to create your sovereign digital experience
          </motion.p>
        </div>
        <div className="grid md:grid-cols-2 gap-8">
          {howItWorks.map((item, index) => (
            <FeatureCard
              key={index}
              icon={item.icon}
              title={item.title}
              description={item.description}
              image={item.image}
              delay={index * 0.2}
              className="lg:col-span-1"
            />
          ))}
        </div>
      </Section>
      {/* Technical Architecture Section */}
      <Section background="dark" padding="xlarge">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Built for <span className="text-purple-400">Maximum Security</span>
            </h2>
            <p className="text-xl text-gray-300 mb-8 leading-relaxed">
              HERO uses cutting-edge cryptographic techniques and distributed architecture to ensure your data remains private, secure, and under your complete control.
            </p>
            <div className="space-y-6">
              {technicalFeatures.map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="glass-effect rounded-lg p-4 hover:border-purple-400/30 transition-all duration-300"
                >
                  <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
                  <p className="text-gray-300">{feature.description}</p>
                </motion.div>
              ))}
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative"
          >
            <img 
              src={ledgerImage} 
              alt="Blockchain Network Visualization"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>
      {/* Process Flow Section */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Your Journey with <span className="text-cyan-400">HERO</span>
          </motion.h2>
        </div>
        <div className="max-w-4xl mx-auto">
          <div className="space-y-8">
            {[
              {
                step: "01",
                title: "Setup Your HERO",
                description: "Create your Personal Agent with secure identity verification and choose your data sovereignty preferences."
              },
              {
                step: "02", 
                title: "Connect Your Digital Life",
                description: "Migrate your data, connect your accounts, and configure your AI preferences while maintaining complete control."
              },
              {
                step: "03",
                title: "Experience True Digital Freedom",
                description: "Enjoy secure communication, private AI assistance, and sovereign data management in your new digital ecosystem."
              }
            ].map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: index % 2 === 0 ? -30 : 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="flex items-center space-x-8"
              >
                <div className="flex-shrink-0 w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                  {item.step}
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-semibold text-white mb-2">{item.title}</h3>
                  <p className="text-gray-300 text-lg">{item.description}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </Section>
    </div>
  );
 };
 export default How;
--- a/src/pages/Technology.jsx
+++ b/src/pages/Technology.jsx
@ -0,0 +1,336 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Shield, Database, Network, Key, Cpu, Globe, Lock, Zap } from 'lucide-react';
 import HeroSection from '../components/HeroSection';
 import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
 // Import images
 import techBackground from '../assets/poVm1zm8mO0y.png'; // AI Dark Mode
 import blockchainImage from '../assets/SXifMdAlG29t.png'; // Blockchain visualization
 import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
 import securityImage from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy
 const Technology = () => {
  const comparisonData = [
    {
      feature: "Ownership",
      hero: "Fully owned and run by the individual user",
      traditional: "Owned and operated by corporations"
    },
    {
      feature: "Data Privacy", 
      hero: "Encrypted, user-controlled, and geo-sovereign",
      traditional: "Stored and processed by companies, often without transparency"
    },
    {
      feature: "Communication",
      hero: "Peer-to-peer between HEROs", 
      traditional: "Routed through centralized servers"
    },
    {
      feature: "AI Integration",
      hero: "You choose which AI agents to use",
      traditional: "You depend on closed AI services with unknown behavior"
    },
    {
      feature: "Memory",
      hero: "Dispersed, quantum-safe, cannot be lost",
      traditional: "Centralized, at risk of breaches or deletion"
    },
    {
      feature: "Identity & Reputation",
      hero: "Blockchain-authenticated and user-controlled",
      traditional: "Managed by third-party login or opaque identity providers"
    },
    {
      feature: "Sovereignty",
      hero: "Operates in a digital freezone under your legal control",
      traditional: "Bound to corporate policies and jurisdictions"
    },
    {
      feature: "Trust Layer",
      hero: "Verified through zero-knowledge proofs and peer links",
      traditional: "No built-in trust mechanism"
    }
  ];
  const technicalSpecs = [
    {
      icon: <Shield size={32} />,
      title: "Zero-Knowledge Architecture",
      description: "Advanced cryptographic techniques ensure that even HERO cannot access your data. Your information is encrypted before it leaves your device.",
      image: securityImage
    },
    {
      icon: <Database size={32} />,
      title: "Quantum-Safe Storage",
      description: "Post-quantum cryptography protects your data against future quantum computing threats. Memory is dispersed across multiple nodes with no single point of failure.",
      image: blockchainImage
    },
    {
      icon: <Network size={32} />,
      title: "Peer-to-Peer Network",
      description: "Direct communication between HEROs without central servers. Built on distributed protocols that ensure privacy and resilience.",
      image: networkImage
    },
    {
      icon: <Key size={32} />,
      title: "Blockchain Identity",
      description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships.",
      image: blockchainImage
    }
  ];
  const architectureFeatures = [
    {
      title: "Distributed Memory System",
      description: "Your data is split into encrypted fragments and stored across multiple geographic locations, ensuring it can never be lost or compromised."
    },
    {
      title: "Local AI Processing",
      description: "AI computations happen on your device or trusted infrastructure, ensuring your data never leaves your control."
    },
    {
      title: "Geographic Sovereignty", 
      description: "Choose where your data is stored and processed, ensuring compliance with local laws and regulations."
    },
    {
      title: "Quantum-Resistant Encryption",
      description: "Built with post-quantum cryptographic algorithms that remain secure even against quantum computer attacks."
    },
    {
      title: "Zero-Trust Security Model",
      description: "Every interaction is verified and encrypted, with no implicit trust relationships or single points of failure."
    },
    {
      title: "Interoperable Protocols",
      description: "Open standards ensure your HERO can communicate with other systems while maintaining security and privacy."
    }
  ];
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <HeroSection
        subtitle="The Technology Behind Digital Sovereignty"
        title="HERO Technology"
        description="Built on cutting-edge cryptography, distributed systems, and blockchain technology to deliver true digital sovereignty and privacy."
        backgroundImage={techBackground}
        ctaText="See How It Works"
        ctaLink="/how"
        showVideo={false}
      />
      {/* Technical Specifications Section */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Core <span className="text-blue-400">Technologies</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-4xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            HERO is built on a foundation of advanced technologies that ensure your digital sovereignty, privacy, and security
          </motion.p>
        </div>
        <div className="grid md:grid-cols-2 gap-8">
          {technicalSpecs.map((spec, index) => (
            <FeatureCard
              key={index}
              icon={spec.icon}
              title={spec.title}
              description={spec.description}
              image={spec.image}
              delay={index * 0.2}
            />
          ))}
        </div>
      </Section>
      {/* HERO vs Traditional Comparison */}
      <Section background="dark" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            HERO vs <span className="text-red-400">Traditional AI Platforms</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-4xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            See how HERO's Personal Agent approach compares to traditional corporate AI platforms
          </motion.p>
        </div>
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="glass-effect rounded-2xl overflow-hidden"
          >
            <div className="grid grid-cols-3 bg-gray-900/50 p-4 border-b border-white/10">
              <div className="text-gray-400 font-semibold">Feature</div>
              <div className="text-green-400 font-semibold text-center">HERO (Personal Agent)</div>
              <div className="text-red-400 font-semibold text-center">Traditional AI Platforms</div>
            </div>
            {comparisonData.map((row, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: -20 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
                className="grid grid-cols-3 p-4 border-b border-white/5 hover:bg-white/5 transition-colors duration-300"
              >
                <div className="text-white font-medium">{row.feature}</div>
                <div className="text-gray-300 text-sm px-2">{row.hero}</div>
                <div className="text-gray-400 text-sm px-2">{row.traditional}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </Section>
      {/* Architecture Deep Dive */}
      <Section background="gradient" padding="xlarge">
        <div className="text-center mb-16">
          <motion.h2 
            className="text-4xl md:text-5xl font-bold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Technical <span className="text-purple-400">Architecture</span>
          </motion.h2>
          <motion.p 
            className="text-xl text-gray-300 max-w-4xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Deep dive into the technical foundations that make HERO's digital sovereignty possible
          </motion.p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {architectureFeatures.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="glass-effect rounded-xl p-6 hover:border-purple-400/30 transition-all duration-300 hover-lift"
            >
              <h3 className="text-xl font-semibold text-white mb-3">{feature.title}</h3>
              <p className="text-gray-300 leading-relaxed">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </Section>
      {/* Security Standards Section */}
      <Section background="dark" padding="xlarge">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Military-Grade <span className="text-cyan-400">Security Standards</span>
            </h2>
            <p className="text-xl text-gray-300 mb-8 leading-relaxed">
              HERO implements the highest security standards used by governments and military organizations, 
              adapted for personal use to ensure your digital sovereignty.
            </p>
            <div className="space-y-6">
              {[
                {
                  icon: <Lock size={24} />,
                  title: "AES-256 Encryption",
                  description: "Industry-standard encryption used by governments worldwide"
                },
                {
                  icon: <Shield size={24} />,
                  title: "Post-Quantum Cryptography", 
                  description: "Future-proof against quantum computing threats"
                },
                {
                  icon: <Key size={24} />,
                  title: "Zero-Knowledge Proofs",
                  description: "Verify identity without revealing personal information"
                },
                {
                  icon: <Globe size={24} />,
                  title: "Distributed Architecture",
                  description: "No single point of failure or attack"
                }
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="flex items-start space-x-4"
                >
                  <div className="text-cyan-400 mt-1">{item.icon}</div>
                  <div>
                    <h3 className="text-lg font-semibold text-white mb-1">{item.title}</h3>
                    <p className="text-gray-300">{item.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="relative"
          >
            <img 
              src={securityImage} 
              alt="Security Architecture"
              className="w-full rounded-2xl shadow-2xl hover-lift"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-2xl"></div>
          </motion.div>
        </div>
      </Section>
    </div>
  );
 };
 export default Technology;
--- a/start.sh
+++ b/start.sh
@ -0,0 +1,33 @@
 #!/bin/bash
 # HERO Personal Agent Website - Development Server
 # This script starts the development server with hot reload
 echo "🚀 Starting HERO Personal Agent Website Development Server..."
 echo "============================================================="
 # Check if node_modules exists
 if [ ! -d "node_modules" ]; then
    echo "❌ Dependencies not installed. Please run './install.sh' first."
    exit 1
 fi
 echo "🌐 Starting development server..."
 echo "📍 Local URL: http://localhost:5173"
 echo "📍 Network URL: http://0.0.0.0:5173"
 echo ""
 echo "💡 Tips:"
 echo "   - The server will automatically reload when you save files"
 echo "   - Press Ctrl+C to stop the server"
 echo "   - Edit files in src/ directory to see changes"
 echo ""
 echo "🎨 Key files to customize:"
 echo "   - src/pages/Home.jsx      → Home page content"
 echo "   - src/pages/GetStarted.jsx → Pricing and signup"
 echo "   - src/App.css            → Styles and animations"
 echo "   - src/assets/            → Replace with your images"
 echo ""
 # Start the development server
 pnpm run dev --host
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,14 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react(),tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
 })
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>