Upload folder using huggingface_hub (part 2)

package.json

@@ -0,0 +1,101 @@
+{
+  "name": "open-lovable",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test:api": "node tests/api-endpoints.test.js",
+    "test:code": "node tests/code-execution.test.js",
+    "test:all": "npm run test:integration && npm run test:api && npm run test:code"
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^2.0.1",
+    "@ai-sdk/google": "^2.0.4",
+    "@ai-sdk/groq": "^2.0.0",
+    "@ai-sdk/openai": "^2.0.4",
+    "@anthropic-ai/sdk": "^0.57.0",
+    "@e2b/code-interpreter": "^2.0.0",
+    "@mendable/firecrawl-js": "^4.3.3",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.34.1",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vercel/sandbox": "^0.0.17",
+    "ai": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.13.5",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.1",
+    "fast-xml-parser": "^5.3.6",
+    "framer-motion": "^12.23.12",
+    "groq-sdk": "^0.29.0",
+    "jotai": "^2.14.0",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.532.0",
+    "motion": "^12.23.12",
+    "nanoid": "^5.1.5",
+    "next": "15.4.3",
+    "next-themes": "^0.4.6",
+    "octokit": "^5.0.5",
+    "pixi.js": "^8.13.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.62.0",
+    "react-icons": "^5.5.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "sonner": "^2.0.7",
+    "tailwind-gradient-mask-image": "^1.2.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.1",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.3",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "postcss-nesting": "^13.0.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
+  }
+}

packages/create-open-lovable/index.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { installer } from './lib/installer.js';
+import { getPrompts } from './lib/prompts.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+  .name('create-open-lovable')
+  .description('Create a new Open Lovable project with your choice of sandbox provider')
+  .version('1.0.0')
+  .option('-s, --sandbox <provider>', 'Sandbox provider (e2b or vercel)')
+  .option('-n, --name <name>', 'Project name')
+  .option('-p, --path <path>', 'Installation path (defaults to current directory)')
+  .option('--skip-install', 'Skip npm install')
+  .option('--dry-run', 'Run without making changes')
+  .parse(process.argv);
+
+const options = program.opts();
+
+async function main() {
+  console.log(chalk.cyan('\n🚀 Welcome to Open Lovable Setup!\n'));
+
+  let config = {
+    sandbox: options.sandbox,
+    name: options.name || 'my-open-lovable',
+    path: options.path || process.cwd(),
+    skipInstall: options.skipInstall || false,
+    dryRun: options.dryRun || false
+  };
+
+  // Interactive mode if sandbox not specified
+  if (!config.sandbox) {
+    const prompts = getPrompts(config);
+    const answers = await inquirer.prompt(prompts);
+    config = { ...config, ...answers };
+  }
+
+  // Validate sandbox provider
+  if (!['e2b', 'vercel'].includes(config.sandbox)) {
+    console.error(chalk.red(`\n❌ Invalid sandbox provider: ${config.sandbox}`));
+    console.log(chalk.yellow('Valid options: e2b, vercel\n'));
+    process.exit(1);
+  }
+
+  console.log(chalk.gray('\nConfiguration:'));
+  console.log(chalk.gray(`  Project: ${config.name}`));
+  console.log(chalk.gray(`  Sandbox: ${config.sandbox}`));
+  console.log(chalk.gray(`  Path: ${path.resolve(config.path, config.name)}\n`));
+
+  if (config.dryRun) {
+    console.log(chalk.yellow('🔍 Dry run mode - no files will be created\n'));
+  }
+
+  const spinner = ora('Creating project...').start();
+
+  try {
+    await installer({
+      ...config,
+      templatesDir: path.join(__dirname, 'templates')
+    });
+
+    spinner.succeed('Project created successfully!');
+
+    console.log(chalk.green('\n✅ Setup complete!\n'));
+    console.log(chalk.white('Next steps:'));
+    console.log(chalk.gray(`  1. cd ${config.name}`));
+    console.log(chalk.gray(`  2. Copy .env.example to .env and add your API keys`));
+    console.log(chalk.gray(`  3. npm run dev`));
+    console.log(chalk.gray('\nHappy coding! 🎉\n'));
+
+  } catch (error) {
+    spinner.fail('Setup failed');
+    console.error(chalk.red('\n❌ Error:'), error.message);
+    if (error.stack && process.env.DEBUG) {
+      console.error(chalk.gray(error.stack));
+    }
+    process.exit(1);
+  }
+}
+
+main().catch(error => {
+  console.error(chalk.red('Unexpected error:'), error);
+  process.exit(1);
+});

packages/create-open-lovable/lib/installer.js

@@ -0,0 +1,261 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { execSync } from 'child_process';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import { getEnvPrompts } from './prompts.js';
+
+export async function installer(config) {
+  const { name, sandbox, path: installPath, skipInstall, dryRun, templatesDir } = config;
+  const projectPath = path.join(installPath, name);
+
+  if (dryRun) {
+    console.log(chalk.blue('\n📋 Dry run - would perform these actions:'));
+    console.log(chalk.gray(`  - Create directory: ${projectPath}`));
+    console.log(chalk.gray(`  - Copy base template files`));
+    console.log(chalk.gray(`  - Copy ${sandbox}-specific files`));
+    console.log(chalk.gray(`  - Create .env file`));
+    if (!skipInstall) {
+      console.log(chalk.gray(`  - Run npm install`));
+    }
+    return;
+  }
+
+  // Check if directory exists
+  if (await fs.pathExists(projectPath)) {
+    const { overwrite } = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'overwrite',
+      message: `Directory ${name} already exists. Overwrite?`,
+      default: false
+    }]);
+
+    if (!overwrite) {
+      throw new Error('Installation cancelled');
+    }
+    await fs.remove(projectPath);
+  }
+
+  // Create project directory
+  await fs.ensureDir(projectPath);
+
+  // Copy base template (shared files)
+  const baseTemplatePath = path.join(templatesDir, 'base');
+  if (await fs.pathExists(baseTemplatePath)) {
+    await copyTemplate(baseTemplatePath, projectPath);
+  } else {
+    // If no base template exists yet, copy from the main project
+    await copyMainProject(path.dirname(templatesDir), projectPath, sandbox);
+  }
+
+  // Copy provider-specific template
+  const providerTemplatePath = path.join(templatesDir, sandbox);
+  if (await fs.pathExists(providerTemplatePath)) {
+    await copyTemplate(providerTemplatePath, projectPath);
+  }
+
+  // Configure environment variables
+  if (config.configureEnv) {
+    const envAnswers = await inquirer.prompt(getEnvPrompts(sandbox));
+    await createEnvFile(projectPath, sandbox, envAnswers);
+  } else {
+    // Create .env.example copy
+    await createEnvExample(projectPath, sandbox);
+  }
+
+  // Update package.json with project name
+  await updatePackageJson(projectPath, name);
+
+  // Update configuration to use the selected sandbox provider
+  await updateAppConfig(projectPath, sandbox);
+
+  // Install dependencies
+  if (!skipInstall) {
+    console.log(chalk.cyan('\n📦 Installing dependencies...'));
+    execSync('npm install', {
+      cwd: projectPath,
+      stdio: 'inherit'
+    });
+  }
+}
+
+async function copyTemplate(src, dest) {
+  const files = await fs.readdir(src);
+  
+  for (const file of files) {
+    const srcPath = path.join(src, file);
+    const destPath = path.join(dest, file);
+    
+    const stat = await fs.stat(srcPath);
+    
+    if (stat.isDirectory()) {
+      await fs.ensureDir(destPath);
+      await copyTemplate(srcPath, destPath);
+    } else {
+      await fs.copy(srcPath, destPath, { overwrite: true });
+    }
+  }
+}
+
+async function copyMainProject(mainProjectPath, projectPath, sandbox) {
+  // Copy essential directories and files from the main project
+  const itemsToCopy = [
+    'app',
+    'components',
+    'config',
+    'lib',
+    'types',
+    'public',
+    'styles',
+    '.eslintrc.json',
+    '.gitignore',
+    'next.config.js',
+    'package.json',
+    'tailwind.config.ts',
+    'tsconfig.json',
+    'postcss.config.mjs'
+  ];
+
+  for (const item of itemsToCopy) {
+    const srcPath = path.join(mainProjectPath, '..', item);
+    const destPath = path.join(projectPath, item);
+    
+    if (await fs.pathExists(srcPath)) {
+      await fs.copy(srcPath, destPath, {
+        overwrite: true,
+        filter: (src) => {
+          // Skip node_modules and .next
+          if (src.includes('node_modules') || src.includes('.next')) {
+            return false;
+          }
+          return true;
+        }
+      });
+    }
+  }
+}
+
+async function createEnvFile(projectPath, sandbox, answers) {
+  let envContent = '# Open Lovable Configuration\n\n';
+  
+  // Sandbox provider
+  envContent += `# Sandbox Provider\n`;
+  envContent += `SANDBOX_PROVIDER=${sandbox}\n\n`;
+  
+  // Required keys
+  envContent += `# REQUIRED - Web scraping for cloning websites\n`;
+  envContent += `FIRECRAWL_API_KEY=${answers.firecrawlApiKey || 'your_firecrawl_api_key_here'}\n\n`;
+  
+  if (sandbox === 'e2b') {
+    envContent += `# REQUIRED - E2B Sandboxes\n`;
+    envContent += `E2B_API_KEY=${answers.e2bApiKey || 'your_e2b_api_key_here'}\n\n`;
+  } else if (sandbox === 'vercel') {
+    envContent += `# REQUIRED - Vercel Sandboxes\n`;
+    if (answers.vercelAuthMethod === 'oidc') {
+      envContent += `# Using OIDC authentication (automatic in Vercel environment)\n`;
+    } else {
+      envContent += `VERCEL_TEAM_ID=${answers.vercelTeamId || 'your_team_id'}\n`;
+      envContent += `VERCEL_PROJECT_ID=${answers.vercelProjectId || 'your_project_id'}\n`;
+      envContent += `VERCEL_TOKEN=${answers.vercelToken || 'your_access_token'}\n`;
+    }
+    envContent += '\n';
+  }
+  
+  // Optional AI provider keys
+  envContent += `# OPTIONAL - AI Providers\n`;
+  
+  if (answers.anthropicApiKey) {
+    envContent += `ANTHROPIC_API_KEY=${answers.anthropicApiKey}\n`;
+  } else {
+    envContent += `# ANTHROPIC_API_KEY=your_anthropic_api_key_here\n`;
+  }
+  
+  if (answers.openaiApiKey) {
+    envContent += `OPENAI_API_KEY=${answers.openaiApiKey}\n`;
+  } else {
+    envContent += `# OPENAI_API_KEY=your_openai_api_key_here\n`;
+  }
+  
+  if (answers.geminiApiKey) {
+    envContent += `GEMINI_API_KEY=${answers.geminiApiKey}\n`;
+  } else {
+    envContent += `# GEMINI_API_KEY=your_gemini_api_key_here\n`;
+  }
+  
+  if (answers.groqApiKey) {
+    envContent += `GROQ_API_KEY=${answers.groqApiKey}\n`;
+  } else {
+    envContent += `# GROQ_API_KEY=your_groq_api_key_here\n`;
+  }
+  
+  await fs.writeFile(path.join(projectPath, '.env'), envContent);
+  await fs.writeFile(path.join(projectPath, '.env.example'), envContent.replace(/=.+/g, '=your_key_here'));
+}
+
+async function createEnvExample(projectPath, sandbox) {
+  let envContent = '# Open Lovable Configuration\n\n';
+  
+  envContent += `# Sandbox Provider\n`;
+  envContent += `SANDBOX_PROVIDER=${sandbox}\n\n`;
+  
+  envContent += `# REQUIRED - Web scraping for cloning websites\n`;
+  envContent += `# Get yours at https://firecrawl.dev\n`;
+  envContent += `FIRECRAWL_API_KEY=your_firecrawl_api_key_here\n\n`;
+  
+  if (sandbox === 'e2b') {
+    envContent += `# REQUIRED - Sandboxes for code execution\n`;
+    envContent += `# Get yours at https://e2b.dev\n`;
+    envContent += `E2B_API_KEY=your_e2b_api_key_here\n\n`;
+  } else if (sandbox === 'vercel') {
+    envContent += `# REQUIRED - Vercel Sandboxes\n`;
+    envContent += `# Option 1: OIDC (automatic in Vercel environment)\n`;
+    envContent += `# Option 2: Personal Access Token\n`;
+    envContent += `VERCEL_TEAM_ID=your_team_id\n`;
+    envContent += `VERCEL_PROJECT_ID=your_project_id\n`;
+    envContent += `VERCEL_TOKEN=your_access_token\n\n`;
+  }
+  
+  envContent += `# OPTIONAL - AI Providers (need at least one)\n`;
+  envContent += `# Get yours at https://console.anthropic.com\n`;
+  envContent += `ANTHROPIC_API_KEY=your_anthropic_api_key_here\n\n`;
+  envContent += `# Get yours at https://platform.openai.com\n`;
+  envContent += `OPENAI_API_KEY=your_openai_api_key_here\n\n`;
+  envContent += `# Get yours at https://aistudio.google.com/app/apikey\n`;
+  envContent += `GEMINI_API_KEY=your_gemini_api_key_here\n\n`;
+  envContent += `# Get yours at https://console.groq.com\n`;
+  envContent += `GROQ_API_KEY=your_groq_api_key_here\n`;
+  
+  await fs.writeFile(path.join(projectPath, '.env.example'), envContent);
+}
+
+async function updatePackageJson(projectPath, name) {
+  const packageJsonPath = path.join(projectPath, 'package.json');
+  
+  if (await fs.pathExists(packageJsonPath)) {
+    const packageJson = await fs.readJson(packageJsonPath);
+    packageJson.name = name;
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  }
+}
+
+async function updateAppConfig(projectPath, sandbox) {
+  const configPath = path.join(projectPath, 'config', 'app.config.ts');
+  
+  if (await fs.pathExists(configPath)) {
+    let content = await fs.readFile(configPath, 'utf-8');
+    
+    // Add sandbox provider configuration
+    const sandboxConfig = `
+  // Sandbox Provider Configuration
+  sandboxProvider: process.env.SANDBOX_PROVIDER || '${sandbox}',
+`;
+    
+    // Insert after the opening of appConfig
+    content = content.replace(
+      'export const appConfig = {',
+      `export const appConfig = {${sandboxConfig}`
+    );
+    
+    await fs.writeFile(configPath, content);
+  }
+}

packages/create-open-lovable/lib/prompts.js

@@ -0,0 +1,190 @@
+export function getPrompts(config) {
+  const prompts = [];
+
+  if (!config.name) {
+    prompts.push({
+      type: 'input',
+      name: 'name',
+      message: 'Project name:',
+      default: 'my-open-lovable',
+      validate: (input) => {
+        if (!input || input.trim() === '') {
+          return 'Project name is required';
+        }
+        if (!/^[a-z0-9-_]+$/i.test(input)) {
+          return 'Project name can only contain letters, numbers, hyphens, and underscores';
+        }
+        return true;
+      }
+    });
+  }
+
+  if (!config.sandbox) {
+    prompts.push({
+      type: 'list',
+      name: 'sandbox',
+      message: 'Choose your sandbox provider:',
+      choices: [
+        {
+          name: 'E2B - Full-featured development sandboxes',
+          value: 'e2b',
+          short: 'E2B'
+        },
+        {
+          name: 'Vercel - Lightweight ephemeral VMs',
+          value: 'vercel',
+          short: 'Vercel'
+        }
+      ],
+      default: 'e2b'
+    });
+  }
+
+  prompts.push({
+    type: 'confirm',
+    name: 'configureEnv',
+    message: 'Would you like to configure API keys now?',
+    default: true
+  });
+
+  return prompts;
+}
+
+export function getEnvPrompts(provider) {
+  const prompts = [];
+
+  // Always include Firecrawl API key
+  prompts.push({
+    type: 'input',
+    name: 'firecrawlApiKey',
+    message: 'Firecrawl API key (for web scraping):',
+    validate: (input) => {
+      if (!input || input.trim() === '') {
+        return 'Firecrawl API key is required for web scraping functionality';
+      }
+      return true;
+    }
+  });
+
+  if (provider === 'e2b') {
+    prompts.push({
+      type: 'input',
+      name: 'e2bApiKey',
+      message: 'E2B API key:',
+      validate: (input) => {
+        if (!input || input.trim() === '') {
+          return 'E2B API key is required';
+        }
+        return true;
+      }
+    });
+  } else if (provider === 'vercel') {
+    prompts.push({
+      type: 'list',
+      name: 'vercelAuthMethod',
+      message: 'Vercel authentication method:',
+      choices: [
+        {
+          name: 'OIDC Token (automatic in Vercel environment)',
+          value: 'oidc',
+          short: 'OIDC'
+        },
+        {
+          name: 'Personal Access Token',
+          value: 'pat',
+          short: 'PAT'
+        }
+      ]
+    });
+
+    prompts.push({
+      type: 'input',
+      name: 'vercelTeamId',
+      message: 'Vercel Team ID:',
+      when: (answers) => answers.vercelAuthMethod === 'pat',
+      validate: (input) => {
+        if (!input || input.trim() === '') {
+          return 'Team ID is required for PAT authentication';
+        }
+        return true;
+      }
+    });
+
+    prompts.push({
+      type: 'input',
+      name: 'vercelProjectId',
+      message: 'Vercel Project ID:',
+      when: (answers) => answers.vercelAuthMethod === 'pat',
+      validate: (input) => {
+        if (!input || input.trim() === '') {
+          return 'Project ID is required for PAT authentication';
+        }
+        return true;
+      }
+    });
+
+    prompts.push({
+      type: 'input',
+      name: 'vercelToken',
+      message: 'Vercel Access Token:',
+      when: (answers) => answers.vercelAuthMethod === 'pat',
+      validate: (input) => {
+        if (!input || input.trim() === '') {
+          return 'Access token is required for PAT authentication';
+        }
+        return true;
+      }
+    });
+  }
+
+  // Optional AI provider keys
+  prompts.push({
+    type: 'confirm',
+    name: 'addAiKeys',
+    message: 'Would you like to add AI provider API keys?',
+    default: true
+  });
+
+  prompts.push({
+    type: 'checkbox',
+    name: 'aiProviders',
+    message: 'Select AI providers to configure:',
+    when: (answers) => answers.addAiKeys,
+    choices: [
+      { name: 'Anthropic (Claude)', value: 'anthropic' },
+      { name: 'OpenAI (GPT)', value: 'openai' },
+      { name: 'Google (Gemini)', value: 'gemini' },
+      { name: 'Groq', value: 'groq' }
+    ]
+  });
+
+  prompts.push({
+    type: 'input',
+    name: 'anthropicApiKey',
+    message: 'Anthropic API key:',
+    when: (answers) => answers.aiProviders && answers.aiProviders.includes('anthropic')
+  });
+
+  prompts.push({
+    type: 'input',
+    name: 'openaiApiKey',
+    message: 'OpenAI API key:',
+    when: (answers) => answers.aiProviders && answers.aiProviders.includes('openai')
+  });
+
+  prompts.push({
+    type: 'input',
+    name: 'geminiApiKey',
+    message: 'Gemini API key:',
+    when: (answers) => answers.aiProviders && answers.aiProviders.includes('gemini')
+  });
+
+  prompts.push({
+    type: 'input',
+    name: 'groqApiKey',
+    message: 'Groq API key:',
+    when: (answers) => answers.aiProviders && answers.aiProviders.includes('groq')
+  });
+
+  return prompts;
+}

packages/create-open-lovable/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "create-open-lovable",
+  "version": "1.0.0",
+  "description": "CLI to bootstrap Open Lovable with your choice of sandbox provider",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "create-open-lovable": "./index.js"
+  },
+  "scripts": {
+    "test": "node index.js --dry-run"
+  },
+  "keywords": [
+    "lovable",
+    "sandbox",
+    "e2b",
+    "vercel",
+    "ai",
+    "code-generation"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.12",
+    "ora": "^7.0.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/create-open-lovable/templates/e2b/.env.example

@@ -0,0 +1,25 @@
+# Open Lovable Configuration - E2B Provider
+
+# Sandbox Provider
+SANDBOX_PROVIDER=e2b
+
+# REQUIRED - Sandboxes for code execution
+# Get yours at https://e2b.dev
+E2B_API_KEY=your_e2b_api_key_here
+
+# REQUIRED - Web scraping for cloning websites
+# Get yours at https://firecrawl.dev
+FIRECRAWL_API_KEY=your_firecrawl_api_key_here
+
+# OPTIONAL - AI Providers (need at least one)
+# Get yours at https://console.anthropic.com
+ANTHROPIC_API_KEY=your_anthropic_api_key_here
+
+# Get yours at https://platform.openai.com
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Get yours at https://aistudio.google.com/app/apikey
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# Get yours at https://console.groq.com
+GROQ_API_KEY=your_groq_api_key_here

packages/create-open-lovable/templates/e2b/README.md

@@ -0,0 +1,38 @@
+# Open Lovable - E2B Sandbox
+
+This project is configured to use E2B sandboxes for code execution.
+
+## Setup
+
+1. Get your E2B API key from [https://e2b.dev](https://e2b.dev)
+2. Get your Firecrawl API key from [https://firecrawl.dev](https://firecrawl.dev)
+3. Copy `.env.example` to `.env` and add your API keys
+4. Run `npm install` to install dependencies
+5. Run `npm run dev` to start the development server
+
+## E2B Features
+
+- Full-featured development sandboxes
+- 15-minute default timeout (configurable)
+- Persistent file system during session
+- Support for complex package installations
+- Built-in Python runtime for code execution
+
+## Configuration
+
+You can adjust E2B settings in `config/app.config.ts`:
+
+- `timeoutMinutes`: Sandbox session timeout (default: 15)
+- `vitePort`: Development server port (default: 5173)
+- `viteStartupDelay`: Time to wait for Vite to start (default: 7000ms)
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. Verify your E2B API key is valid
+2. Check the console for detailed error messages
+3. Ensure you have a stable internet connection
+4. Try refreshing the page and creating a new sandbox
+
+For more help, visit the [E2B documentation](https://docs.e2b.dev).

packages/create-open-lovable/templates/vercel/.env.example

@@ -0,0 +1,28 @@
+# Open Lovable Configuration - Vercel Provider
+
+# Sandbox Provider
+SANDBOX_PROVIDER=vercel
+
+# REQUIRED - Vercel Sandboxes
+# Option 1: OIDC Token (automatic in Vercel environment)
+# Option 2: Personal Access Token (configure below)
+VERCEL_TEAM_ID=your_team_id
+VERCEL_PROJECT_ID=your_project_id
+VERCEL_TOKEN=your_access_token
+
+# REQUIRED - Web scraping for cloning websites
+# Get yours at https://firecrawl.dev
+FIRECRAWL_API_KEY=your_firecrawl_api_key_here
+
+# OPTIONAL - AI Providers (need at least one)
+# Get yours at https://console.anthropic.com
+ANTHROPIC_API_KEY=your_anthropic_api_key_here
+
+# Get yours at https://platform.openai.com
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Get yours at https://aistudio.google.com/app/apikey
+GEMINI_API_KEY=your_gemini_api_key_here
+
+# Get yours at https://console.groq.com
+GROQ_API_KEY=your_groq_api_key_here

packages/create-open-lovable/templates/vercel/README.md

@@ -0,0 +1,52 @@
+# Open Lovable - Vercel Sandbox
+
+This project is configured to use Vercel Sandboxes for code execution.
+
+## Setup
+
+1. Configure Vercel authentication (see below)
+2. Get your Firecrawl API key from [https://firecrawl.dev](https://firecrawl.dev)
+3. Copy `.env.example` to `.env` and add your credentials
+4. Run `npm install` to install dependencies
+5. Run `npm run dev` to start the development server
+
+## Vercel Authentication
+
+### Option 1: OIDC Token (Automatic for Vercel deployments)
+When running in a Vercel environment, authentication happens automatically via OIDC tokens. No configuration needed!
+
+### Option 2: Personal Access Token (For local development)
+1. Create a Personal Access Token in your [Vercel account settings](https://vercel.com/account/tokens)
+2. Get your Team ID from your [team settings](https://vercel.com/teams)
+3. Create a project and get the Project ID
+4. Add these to your `.env` file:
+   - `VERCEL_TOKEN`
+   - `VERCEL_TEAM_ID`
+   - `VERCEL_PROJECT_ID`
+
+## Vercel Sandbox Features
+
+- Lightweight ephemeral Linux VMs
+- Powered by Firecracker MicroVMs
+- 5-minute default timeout (max 45 minutes)
+- 8 vCPUs maximum
+- Root access for package installation
+- Node 22 runtime included
+
+## Configuration
+
+You can adjust Vercel settings in `config/app.config.ts`:
+
+- `maxDuration`: Sandbox session timeout (default: 5 minutes)
+- Authentication method (OIDC or PAT)
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. Verify your authentication credentials
+2. Check if you're using the correct authentication method
+3. Ensure your Vercel account has sandbox access
+4. Check the console for detailed error messages
+
+For more help, visit the [Vercel Sandbox documentation](https://vercel.com/docs/vercel-sandbox).

postcss.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    "postcss-import": {},
+    "postcss-nesting": {},
+    "tailwindcss": {},
+    "autoprefixer": {},
+  },
+};

public/compressor.json

@@ -0,0 +1,16 @@
+{
+  "configs": [
+    {
+      "extension": "avif",
+      "quality": 80,
+      "effort": 4,
+      "scale": 2
+    },
+    {
+      "extension": "webp",
+      "quality": 85,
+      "effort": 4,
+      "scale": 2
+    }
+  ]
+}

requirements.txt

@@ -0,0 +1,4 @@
+openai>=1.65.4
+vllm>=0.6.4.post1
+transformers>=4.46.3
+tiktoken>=0.9.0

scripts/run.sh

@@ -0,0 +1,50 @@
+# export OPENAI_API_KEY=""
+
+GPT_VERSION="o3-mini"
+
+PAPER_NAME="Transformer"
+PDF_PATH="../examples/Transformer.pdf" # .pdf
+PDF_JSON_PATH="../examples/Transformer.json" # .json
+PDF_JSON_CLEANED_PATH="../examples/Transformer_cleaned.json" # _cleaned.json
+OUTPUT_DIR="../outputs/Transformer"
+OUTPUT_REPO_DIR="../outputs/Transformer_repo"
+
+mkdir -p $OUTPUT_DIR
+mkdir -p $OUTPUT_REPO_DIR
+
+echo $PAPER_NAME
+
+echo "------- Preprocess -------"
+
+python ../codes/0_pdf_process.py \
+    --input_json_path ${PDF_JSON_PATH} \
+    --output_json_path ${PDF_JSON_CLEANED_PATH} \
+
+
+echo "------- PaperCoder -------"
+
+python ../codes/1_planning.py \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR}
+
+
+python ../codes/1.1_extract_config.py \
+    --paper_name $PAPER_NAME \
+    --output_dir ${OUTPUT_DIR}
+
+cp -rp ${OUTPUT_DIR}/planning_config.yaml ${OUTPUT_REPO_DIR}/config.yaml
+
+python ../codes/2_analyzing.py \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/3_coding.py  \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR} \
+    --output_repo_dir ${OUTPUT_REPO_DIR} \

scripts/run_latex.sh

@@ -0,0 +1,44 @@
+# export OPENAI_API_KEY=""
+
+GPT_VERSION="o3-mini"
+
+PAPER_NAME="Transformer"
+PDF_LATEX_CLEANED_PATH="../examples/Transformer_cleaned.tex" # _cleaned.tex
+OUTPUT_DIR="../outputs/Transformer"
+OUTPUT_REPO_DIR="../outputs/Transformer_repo"
+
+mkdir -p $OUTPUT_DIR
+mkdir -p $OUTPUT_REPO_DIR
+
+echo $PAPER_NAME
+
+echo "------- PaperCoder -------"
+
+python ../codes/1_planning.py \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR}
+
+
+python ../codes/1.1_extract_config.py \
+    --paper_name $PAPER_NAME \
+    --output_dir ${OUTPUT_DIR}
+
+cp -rp ${OUTPUT_DIR}/planning_config.yaml ${OUTPUT_REPO_DIR}/config.yaml
+
+python ../codes/2_analyzing.py \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/3_coding.py  \
+    --paper_name $PAPER_NAME \
+    --gpt_version ${GPT_VERSION} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR} \
+    --output_repo_dir ${OUTPUT_REPO_DIR} \

scripts/run_latex_llm.sh

@@ -0,0 +1,45 @@
+MODEL_NAME="deepseek-ai/DeepSeek-Coder-V2-Lite-Instruct"
+TP_SIZE=2
+
+PAPER_NAME="Transformer"
+PDF_LATEX_CLEANED_PATH="../examples/Transformer_cleaned.tex" # _cleaned.tex
+OUTPUT_DIR="../outputs/Transformer_dscoder"
+OUTPUT_REPO_DIR="../outputs/Transformer_dscoder_repo"
+
+mkdir -p $OUTPUT_DIR
+mkdir -p $OUTPUT_REPO_DIR
+
+echo $PAPER_NAME
+
+echo "------- PaperCoder -------"
+
+python ../codes/1_planning_llm.py \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/1.1_extract_config.py \
+    --paper_name $PAPER_NAME \
+    --output_dir ${OUTPUT_DIR}
+
+cp -rp ${OUTPUT_DIR}/planning_config.yaml ${OUTPUT_REPO_DIR}/config.yaml
+
+python ../codes/2_analyzing_llm.py \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/3_coding_llm.py  \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_latex_path ${PDF_LATEX_CLEANED_PATH} \
+    --paper_format LaTeX \
+    --output_dir ${OUTPUT_DIR} \
+    --output_repo_dir ${OUTPUT_REPO_DIR} \

scripts/run_llm.sh

@@ -0,0 +1,51 @@
+MODEL_NAME="deepseek-ai/DeepSeek-Coder-V2-Lite-Instruct"
+TP_SIZE=2
+
+PAPER_NAME="Transformer"
+PDF_PATH="../examples/Transformer.pdf" # .pdf
+PDF_JSON_PATH="../examples/Transformer.json" # .json
+PDF_JSON_CLEANED_PATH="../examples/Transformer_cleaned.json" # _cleaned.json
+OUTPUT_DIR="../outputs/Transformer_dscoder"
+OUTPUT_REPO_DIR="../outputs/Transformer_dscoder_repo"
+
+mkdir -p $OUTPUT_DIR
+mkdir -p $OUTPUT_REPO_DIR
+
+echo $PAPER_NAME
+
+echo "------- Preprocess -------"
+
+python ../codes/0_pdf_process.py \
+    --input_json_path ${PDF_JSON_PATH} \
+    --output_json_path ${PDF_JSON_CLEANED_PATH} \
+
+
+echo "------- PaperCoder -------"
+
+python ../codes/1_planning_llm.py \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/1.1_extract_config.py \
+    --paper_name $PAPER_NAME \
+    --output_dir ${OUTPUT_DIR}
+
+cp -rp ${OUTPUT_DIR}/planning_config.yaml ${OUTPUT_REPO_DIR}/config.yaml
+
+python ../codes/2_analyzing_llm.py \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR}
+
+python ../codes/3_coding_llm.py  \
+    --paper_name $PAPER_NAME \
+    --model_name ${MODEL_NAME} \
+    --tp_size ${TP_SIZE} \
+    --pdf_json_path ${PDF_JSON_CLEANED_PATH} \
+    --output_dir ${OUTPUT_DIR} \
+    --output_repo_dir ${OUTPUT_REPO_DIR} \

styles/additional-styles/theme.css

@@ -0,0 +1,58 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+  @apply ring-0;
+}
+
+/* Hamburger button */
+.hamburger svg > *:nth-child(1),
+.hamburger svg > *:nth-child(2),
+.hamburger svg > *:nth-child(3) {
+  transform-origin: center;
+  transform: rotate(0deg);
+}
+
+.hamburger svg > *:nth-child(1) {
+  transition:
+    y 0.1s 0.25s ease-in,
+    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+    opacity 0.1s ease-in;
+}
+
+.hamburger svg > *:nth-child(2) {
+  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger svg > *:nth-child(3) {
+  transition:
+    y 0.1s 0.25s ease-in,
+    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+    width 0.1s 0.25s ease-in;
+}
+
+.hamburger.active svg > *:nth-child(1) {
+  opacity: 0;
+  y: 11;
+  transform: rotate(225deg);
+  transition:
+    y 0.1s ease-out,
+    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1),
+    opacity 0.1s 0.12s ease-out;
+}
+
+.hamburger.active svg > *:nth-child(2) {
+  transform: rotate(225deg);
+  transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.hamburger.active svg > *:nth-child(3) {
+  y: 11;
+  transform: rotate(135deg);
+  transition:
+    y 0.1s ease-out,
+    transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1),
+    width 0.1s ease-out;
+}

styles/additional-styles/utility-patterns.css

@@ -0,0 +1,112 @@
+/* Typography */
+.h1 {
+  @apply text-5xl font-bold;
+}
+
+.h2 {
+  @apply text-4xl font-bold;
+}
+
+.h3 {
+  @apply text-3xl font-bold;
+}
+
+.h4 {
+  @apply text-2xl font-bold;
+}
+
+@screen md {
+  .h1 {
+    @apply text-6xl;
+  }
+
+  .h2 {
+    @apply text-5xl;
+  }
+
+  .h3 {
+    @apply text-4xl;
+  }
+}
+
+/* Buttons */
+.btn,
+.btn-sm {
+  @apply text-sm font-medium inline-flex items-center justify-center border border-transparent rounded-md tracking-normal transition;
+}
+
+.btn {
+  @apply px-4 py-2;
+}
+
+.btn-sm {
+  @apply px-2 py-1;
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+  @apply bg-white border border-zinc-200 focus:border-zinc-400 shadow shadow-black/5;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox {
+  @apply rounded;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+  @apply text-zinc-600 text-sm px-4 py-2;
+}
+
+.form-input,
+.form-textarea {
+  @apply placeholder-zinc-400;
+}
+
+.form-select {
+  @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+  @apply text-zinc-800;
+}
+
+.form-checkbox {
+  @apply rounded-sm;
+}
+
+/* Fix input cursor visibility on Windows Chrome */
+input,
+textarea {
+  caret-color: hsl(var(--foreground));
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}

styles/chrome-bug.css

@@ -0,0 +1,12 @@
+/**
+ * Chrome has a bug with transitions on load since 2012!
+ *
+ * To prevent a "pop" of content, you have to disable all transitions until
+ * the page is done loading.
+ *
+ * https://lab.laukstein.com/bug/input
+ * https://twitter.com/timer150/status/1345217126680899584
+ */
+body.loading * {
+  transition: none !important;
+}

styles/colors.json

@@ -0,0 +1,182 @@
+{
+  "heat-4": {
+    "hex": "fa5d190a",
+    "p3": "0.980392 0.364706 0.098039 / 0.039216"
+  },
+  "heat-8": {
+    "hex": "fa5d1914",
+    "p3": "0.980392 0.364706 0.098039 / 0.078431"
+  },
+  "heat-12": {
+    "hex": "fa5d191f",
+    "p3": "0.980392 0.364706 0.098039 / 0.121569"
+  },
+  "heat-16": {
+    "hex": "fa5d1929",
+    "p3": "0.980392 0.364706 0.098039 / 0.160784"
+  },
+  "heat-20": {
+    "hex": "fa5d1933",
+    "p3": "0.980392 0.364706 0.098039 / 0.200000"
+  },
+  "heat-40": {
+    "hex": "fa5d1966",
+    "p3": "0.980392 0.364706 0.098039 / 0.400000"
+  },
+  "heat-90": {
+    "hex": "fa5d19e6",
+    "p3": "0.980392 0.364706 0.098039 / 0.900000"
+  },
+  "heat-100": {
+    "hex": "fa5d19ff",
+    "p3": "0.980392 0.364706 0.098039 / 1.000000"
+  },
+  "accent-black": {
+    "hex": "262626ff",
+    "p3": "0.149020 0.149020 0.149020 / 1.000000"
+  },
+  "accent-white": {
+    "hex": "ffffffff",
+    "p3": "1.000000 1.000000 1.000000 / 1.000000"
+  },
+  "accent-amethyst": {
+    "hex": "9061ffff",
+    "p3": "0.564706 0.380392 1.000000 / 1.000000"
+  },
+  "accent-bluetron": {
+    "hex": "2a6dfbff",
+    "p3": "0.164706 0.427451 0.984314 / 1.000000"
+  },
+  "accent-crimson": {
+    "hex": "eb3424ff",
+    "p3": "0.921569 0.203922 0.141176 / 1.000000"
+  },
+  "accent-forest": {
+    "hex": "42c366ff",
+    "p3": "0.258824 0.764706 0.400000 / 1.000000"
+  },
+  "accent-honey": {
+    "hex": "ecb730ff",
+    "p3": "0.925490 0.717647 0.188235 / 1.000000"
+  },
+  "black-alpha-1": {
+    "hex": "00000003",
+    "p3": "0.000000 0.000000 0.000000 / 0.011765"
+  },
+  "black-alpha-2": {
+    "hex": "00000005",
+    "p3": "0.000000 0.000000 0.000000 / 0.019608"
+  },
+  "black-alpha-3": {
+    "hex": "00000008",
+    "p3": "0.000000 0.000000 0.000000 / 0.031373"
+  },
+  "black-alpha-4": {
+    "hex": "0000000a",
+    "p3": "0.000000 0.000000 0.000000 / 0.039216"
+  },
+  "black-alpha-5": {
+    "hex": "0000000d",
+    "p3": "0.000000 0.000000 0.000000 / 0.050980"
+  },
+  "black-alpha-6": {
+    "hex": "0000000f",
+    "p3": "0.000000 0.000000 0.000000 / 0.058824"
+  },
+  "black-alpha-7": {
+    "hex": "00000012",
+    "p3": "0.000000 0.000000 0.000000 / 0.070588"
+  },
+  "black-alpha-8": {
+    "hex": "00000014",
+    "p3": "0.000000 0.000000 0.000000 / 0.078431"
+  },
+  "black-alpha-10": {
+    "hex": "0000001a",
+    "p3": "0.000000 0.000000 0.000000 / 0.101961"
+  },
+  "black-alpha-12": {
+    "hex": "0000001f",
+    "p3": "0.000000 0.000000 0.000000 / 0.121569"
+  },
+  "black-alpha-16": {
+    "hex": "00000029",
+    "p3": "0.000000 0.000000 0.000000 / 0.160784"
+  },
+  "black-alpha-20": {
+    "hex": "00000033",
+    "p3": "0.000000 0.000000 0.000000 / 0.200000"
+  },
+  "black-alpha-24": {
+    "hex": "0000003d",
+    "p3": "0.000000 0.000000 0.000000 / 0.239216"
+  },
+  "black-alpha-32": {
+    "hex": "26262652",
+    "p3": "0.149020 0.149020 0.149020 / 0.321569"
+  },
+  "black-alpha-40": {
+    "hex": "26262666",
+    "p3": "0.149020 0.149020 0.149020 / 0.400000"
+  },
+  "black-alpha-48": {
+    "hex": "2626267a",
+    "p3": "0.149020 0.149020 0.149020 / 0.478431"
+  },
+  "black-alpha-56": {
+    "hex": "2626268f",
+    "p3": "0.149020 0.149020 0.149020 / 0.560784"
+  },
+  "black-alpha-64": {
+    "hex": "262626a3",
+    "p3": "0.149020 0.149020 0.149020 / 0.639216"
+  },
+  "black-alpha-72": {
+    "hex": "262626b8",
+    "p3": "0.149020 0.149020 0.149020 / 0.721569"
+  },
+  "black-alpha-88": {
+    "hex": "262626e0",
+    "p3": "0.149020 0.149020 0.149020 / 0.878431"
+  },
+  "white-alpha-56": {
+    "hex": "ffffff8f",
+    "p3": "1.000000 1.000000 1.000000 / 0.560784"
+  },
+  "white-alpha-72": {
+    "hex": "ffffffb8",
+    "p3": "1.000000 1.000000 1.000000 / 0.721569"
+  },
+  "border-faint": {
+    "hex": "edededff",
+    "p3": "0.929412 0.929412 0.929412 / 1.000000"
+  },
+  "border-muted": {
+    "hex": "e8e8e8ff",
+    "p3": "0.909804 0.909804 0.909804 / 1.000000"
+  },
+  "border-loud": {
+    "hex": "e6e6e6ff",
+    "p3": "0.901961 0.901961 0.901961 / 1.000000"
+  },
+  "illustrations-faint": {
+    "hex": "edededff",
+    "p3": "0.929412 0.929412 0.929412 / 1.000000"
+  },
+  "illustrations-muted": {
+    "hex": "e6e6e6ff",
+    "p3": "0.901961 0.901961 0.901961 / 1.000000"
+  },
+  "illustrations-default": {
+    "hex": "dbdbdbff",
+    "p3": "0.858824 0.858824 0.858824 / 1.000000"
+  },
+  "background-lighter": {
+    "hex": "fbfbfbff",
+    "p3": "0.984314 0.984314 0.984314 / 1.000000"
+  },
+  "background-base": {
+    "hex": "f9f9f9ff",
+    "p3": "0.976471 0.976471 0.976471 / 1.000000"
+  }
+}

styles/components/.cursor/rules/component-styles.md

@@ -0,0 +1,32 @@
+# Component Styles Rules
+
+When working with component-specific CSS in styles/components:
+
+## Architecture
+Each component that requires custom CSS has a corresponding file:
+- `button.css` - Fire-inspired button shadows and effects
+- `modal.css` - Modal animations and backdrop effects
+- `spinner.css` - Custom loading animations
+
+## Import Strategy
+All component CSS files are imported in `styles/main.css`:
+```css
+/* Component styles */
+@import "./components/button.css";
+@import "./components/modal.css";
+@import "./components/spinner.css";
+```
+
+## Guidelines
+1. **Only create CSS files for components that need them** - If Tailwind utilities suffice, don't create a CSS file
+2. **Use P3 colors with sRGB fallbacks** - Ensure wide gamut displays get enhanced colors
+3. **Keep animations performant** - Use transform and opacity for animations
+4. **Component classes should be prefixed** - e.g., `.button-primary`, `.modal-backdrop`
+
+## P3 Color Example
+```css
+.button-primary {
+  background: #fa5d19; /* sRGB fallback */
+  background: color(display-p3 0.9816 0.3634 0.0984); /* P3 color */
+}
+```

styles/components/button.css

@@ -0,0 +1,72 @@
+.button {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:active {
+  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
+    scale 0.05s cubic-bezier(0.25, 0.1, 0.25, 1),
+    box-shadow 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button-primary {
+  background: #ff4c00;
+  background: color(display-p3 0.9816 0.3634 0.0984);
+
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:hover {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 4px 8px 0px rgba(255, 77, 0, 0.16),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 4px 8px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-primary:active {
+  box-shadow: 0px -6px 12px 0px rgba(255, 0, 0, 0.2) inset,
+    0px 2px 4px 0px rgba(255, 77, 0, 0.12),
+    0px 1px 1px 0px rgba(255, 77, 0, 0.12),
+    0px 0.5px 0.5px 0px rgba(255, 77, 0, 0.16),
+    0px 0.25px 0.25px 0px rgba(255, 77, 0, 0.2);
+  box-shadow: 0px -6px 12px 0px color(display-p3 0.9804 0.1127 0.098 / 0.2) inset,
+    0px 2px 4px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 1px 1px 0px color(display-p3 0.9804 0.3647 0.098 / 0.12),
+    0px 0.5px 0.5px 0px color(display-p3 0.9804 0.3647 0.098 / 0.16),
+    0px 0.25px 0.25px 0px color(display-p3 0.9804 0.3647 0.098 / 0.2);
+}
+
+.button-background {
+  background: linear-gradient(to bottom, white, transparent);
+
+  opacity: 0.06;
+
+  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+.button:hover .button-background {
+  opacity: 0.08;
+}
+
+.button:active .button-background {
+  opacity: 0;
+
+  transition: opacity 0.05s cubic-bezier(0.25, 0.1, 0.25, 1);
+}

styles/components/code.css

@@ -0,0 +1,44 @@
+.string,
+.language-html .tag:not(.punctuation, .attr-name, .attr-value, .special-attr) {
+  color: var(--heat-100) !important;
+}
+
+.punctuation,
+.operator {
+  color: #c2c2c2 !important;
+}
+
+.language-html .attr-name {
+  color: var(--black-alpha-64);
+}
+
+.comment {
+  color: #999999 !important;
+}
+
+code:not(.language-html) .property:not(.literal-property),
+.class-name,
+code:not(.language-html) .function,
+.language-json .boolean {
+  color: #9061ff;
+  color: color(display-p3 0.566 0.38 1);
+}
+
+.language-json .property {
+  color: inherit !important;
+}
+
+.prismjs {
+  padding-top: 20px;
+  @apply text-mono-medium font-mono;
+}
+
+.prismjs code {
+  color: var(--accent-black) !important;
+}
+
+.linenumber {
+  padding: 0;
+  color:white!important;
+  font-style: normal;
+}

styles/components/index.css

@@ -0,0 +1,10 @@
+/* Component-specific styles from firecrawl-marketing */
+
+/* UI Components (for Dashboard v2) */
+@import "./button.css";
+@import "./code.css";
+
+/* Additional component CSS will be added as we migrate more components */
+/* @import "./modal.css"; */
+/* @import "./spinner.css"; */
+/* @import "./input.css"; */

styles/design-system/.cursor/rules/design-system.md

@@ -0,0 +1,81 @@
+# Firecrawl Design System Rules
+
+When working with the fire-inspired design system:
+
+## Important Note
+- For existing pages: Continue using `styles/main.css`
+- For Dashboard v2 pages: Import `styles/dashboard.css` in the layout
+
+## Color System
+Use CSS custom properties with P3 color space for richer colors:
+- **Heat colors**: `--heat-4` through `--heat-100` (fire orange shades)
+- **Accent colors**: `--accent-black`, `--accent-amethyst`, `--accent-bluetron`, `--accent-crimson`
+- **Alpha variants**: Black and white with various opacity levels
+- **UI colors**: Borders, backgrounds, illustrations
+- All colors have sRGB fallbacks for browser compatibility
+
+## Typography
+**Font Families:**
+- Display: SuisseIntl (weights: 400, 450, 500, 600, 700)
+- Mono: System monospace stack (SF Mono, Monaco, Inconsolata, etc.)
+
+**Type Scale Classes:**
+- Headings: `.title-h1` through `.title-h5`
+- Body: `.body-small`, `.body-medium`, `.body-large`, `.body-x-large`
+- Labels: `.label-small`, `.label-medium`, `.label-large`, `.label-x-large`
+- Mono: `.mono-small`, `.mono-medium`, `.mono-large`
+
+## Utilities
+**Gradients:**
+- `.gradient-fire` - Heat gradient
+- `.gradient-heat` - Subtle heat gradient
+- `.gradient-sunset` - Heat to amethyst
+- `.gradient-ocean` - Blue gradient
+
+**Layout:**
+- `.container-prose` - Max 65ch width
+- `.center-absolute` - Absolute centering
+- `.stack-*` - Vertical spacing
+- `.layout-sidebar` - Sidebar layout pattern
+
+**Effects:**
+- `.blur-backdrop` - Backdrop blur
+- `.border-gradient` - Gradient border
+- `.mask-fade-*` - Fade masks
+- `.focus-ring` - Accessible focus states
+- `.dotted-underline` - SVG dotted underline
+
+## Animation Classes
+- `.cursor` - Blinking cursor
+- `.animate-spin-reverse` - Reverse rotation
+- `.animate-flicker` - Fire flicker effect
+- `.animate-glow` - Glowing effect
+- `.transition-*` - Smooth transitions
+
+## Usage Example
+```css
+.fire-button {
+  background: var(--heat-100);
+  color: var(--white);
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  transition: all 0.3s ease;
+}
+
+.fire-button:hover {
+  background: var(--accent-crimson);
+  box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
+}
+```
+
+## Component CSS Architecture
+Component-specific styles go in `styles/components/`:
+- Button.css - Fire-inspired button styles
+- Input.css - Input with heat focus states
+- Modal.css - Modal with fire animations
+
+## Build Optimization
+- PostCSS handles optimization
+- Tailwind v3 purging via content paths in tailwind.config.js
+- P3 color space with automatic sRGB fallbacks
+- Font preloading for performance

styles/design-system/animations.css

@@ -0,0 +1,92 @@
+/* Animation Utilities */
+
+/* Cursor blink animation */
+.cursor {
+  animation: cursor-blink 0.7s infinite;
+}
+
+@keyframes cursor-blink {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Reverse spin */
+.animate-spin-reverse {
+  animation: spin-reverse 1s linear infinite;
+}
+
+@keyframes spin-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+}
+
+/* Fire-inspired animations */
+.animate-flicker {
+  animation: flicker 2s ease-in-out infinite;
+}
+
+@keyframes flicker {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.98);
+  }
+}
+
+.animate-glow {
+  animation: glow 2s ease-in-out infinite;
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(250, 93, 25, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
+  }
+}
+
+/* Smooth transitions */
+.transition-all {
+  transition: all 0.3s ease;
+}
+
+.transition-colors {
+  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.transition-transform {
+  transition: transform 0.3s ease;
+}
+
+.transition-opacity {
+  transition: opacity 0.3s ease;
+}
+
+/* Animation delays */
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+.delay-400 {
+  animation-delay: 400ms;
+}
+
+.delay-500 {
+  animation-delay: 500ms;
+}

styles/design-system/base/body.css

@@ -0,0 +1,132 @@
+/* Body and Global Styles */
+
+/* Hide scrollbars but keep functionality */
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--black-alpha-12);
+}
+
+/* Global text rendering */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Body defaults */
+body {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--accent-black);
+  background-color: var(--background-base);
+  overflow-anchor: none;
+}
+
+/* Prevent image dragging */
+img,
+video {
+  max-width: unset;
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  user-drag: none;
+}
+
+/* Form elements */
+input,
+input:focus,
+textarea,
+textarea:focus,
+select,
+select:focus {
+  outline: 0;
+}
+
+/* Focus states handled by utilities */
+*:focus {
+  outline: 0;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Section defaults */
+section {
+  position: relative;
+}
+
+/* Text selection */
+h1, h2, h3, h4, h5, h6, p {
+  user-select: text;
+}
+
+/* Button defaults */
+button {
+  text-align: left;
+  user-select: none;
+}
+
+/* Selection color using design system colors */
+*::selection {
+  background-color: var(--heat-20);
+  color: var(--accent-black);
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--heat-100);
+}
+
+/* Code blocks */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background-color: var(--black-alpha-4);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Prevent FOUC */
+html {
+  visibility: visible !important;
+}
+
+/* Responsive text sizing */
+@media (max-width: 768px) {
+  html {
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 1536px) {
+  html {
+    font-size: 17px;
+  }
+}

styles/design-system/base/layout.css

@@ -0,0 +1,212 @@
+/* Layout Utilities and Helpers */
+
+/* Container system */
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--container-padding, 1rem);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+    padding-inline: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+/* Layout patterns */
+.layout-grid {
+  display: grid;
+  gap: var(--gap, 1rem);
+}
+
+.layout-flex {
+  display: flex;
+  gap: var(--gap, 1rem);
+}
+
+/* Common grid patterns */
+.grid-cols-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 250px), 1fr));
+}
+
+.grid-cols-auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-width, 250px), 1fr));
+}
+
+/* Sidebar layouts */
+.layout-sidebar {
+  display: grid;
+  grid-template-columns: var(--sidebar-width, 260px) 1fr;
+  gap: var(--gap, 2rem);
+  align-items: start;
+}
+
+@media (max-width: 1024px) {
+  .layout-sidebar {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Stack layouts */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap, 1rem);
+}
+
+.stack-horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap, 1rem);
+}
+
+/* Cluster layout */
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, 1rem);
+  align-items: center;
+}
+
+/* Center layout */
+.center {
+  display: grid;
+  place-items: center;
+  min-height: var(--min-height, 100vh);
+}
+
+/* Cover layout */
+.cover {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--min-height, 100vh);
+}
+
+.cover > * {
+  margin-block: 1rem;
+}
+
+.cover > :first-child:not(.centered) {
+  margin-block-start: 0;
+}
+
+.cover > :last-child:not(.centered) {
+  margin-block-end: 0;
+}
+
+.cover > .centered {
+  margin-block: auto;
+}
+
+/* Switcher layout (switches from horizontal to vertical) */
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap, 1rem);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
+}
+
+/* Frame layout (for aspect ratios) */
+.frame {
+  aspect-ratio: var(--ratio, 16 / 9);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.frame > img,
+.frame > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Reel layout (horizontal scroll) */
+.reel {
+  display: flex;
+  gap: var(--gap, 1rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.reel::-webkit-scrollbar {
+  display: none;
+}
+
+.reel > * {
+  flex: 0 0 auto;
+}
+
+/* Full bleed */
+.full-bleed {
+  width: 100vw;
+  margin-inline: calc(50% - 50vw);
+}
+
+/* Visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Skip to content link */
+.skip-link {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 999;
+  padding: 0.5rem 1rem;
+  background-color: var(--accent-black);
+  color: var(--white);
+  text-decoration: none;
+  border-radius: 0.25rem;
+  opacity: 0;
+  transform: translateY(-100%);
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.skip-link:focus {
+  opacity: 1;
+  transform: translateY(0);
+}

styles/design-system/base/reset.css

@@ -0,0 +1,132 @@
+/* Modern CSS Reset */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Reset button styles */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: inherit;
+  color: inherit;
+}
+
+/* Form elements */
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Text area */
+textarea {
+  resize: vertical;
+}
+
+/* Remove default focus styles and add custom ones */
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--heat-100);
+  outline-offset: 2px;
+}
+
+/* Prevent iOS zoom on form focus */
+@media (hover: none) {
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="search"],
+  input[type="url"],
+  textarea,
+  select {
+    font-size: 16px !important;
+  }
+}

styles/design-system/colors.css

@@ -0,0 +1,135 @@
+/* Fire Design System Colors */
+/* Define sRGB values first for maximum compatibility */
+:root {
+  /* Base colors */
+  --white: #ffffff;
+  --black: #000000;
+  
+  /* Fire-inspired heat colors */
+  --heat-4: rgba(250, 93, 25, 0.039);
+  --heat-8: rgba(250, 93, 25, 0.078);
+  --heat-12: rgba(250, 93, 25, 0.122);
+  --heat-16: rgba(250, 93, 25, 0.161);
+  --heat-20: rgba(250, 93, 25, 0.200);
+  --heat-40: rgba(250, 93, 25, 0.400);
+  --heat-100: #fa5d19;
+  --heat-200: #ff6600;
+  
+  /* Accent colors */
+  --accent-black: #262626;
+  --accent-white: #ffffff;
+  --accent-amethyst: #9061ff;
+  --accent-bluetron: #2a6dfb;
+  --accent-crimson: #eb3424;
+  
+  /* Black alpha variants */
+  --black-alpha-1: rgba(0, 0, 0, 0.012);
+  --black-alpha-2: rgba(0, 0, 0, 0.020);
+  --black-alpha-3: rgba(0, 0, 0, 0.031);
+  --black-alpha-4: rgba(0, 0, 0, 0.039);
+  --black-alpha-5: rgba(0, 0, 0, 0.051);
+  --black-alpha-6: rgba(0, 0, 0, 0.059);
+  --black-alpha-7: rgba(0, 0, 0, 0.071);
+  --black-alpha-8: rgba(0, 0, 0, 0.078);
+  --black-alpha-10: rgba(0, 0, 0, 0.102);
+  --black-alpha-12: rgba(0, 0, 0, 0.122);
+  --black-alpha-16: rgba(0, 0, 0, 0.161);
+  --black-alpha-20: rgba(0, 0, 0, 0.200);
+  --black-alpha-24: rgba(0, 0, 0, 0.239);
+  --black-alpha-32: rgba(38, 38, 38, 0.322);
+  --black-alpha-40: rgba(38, 38, 38, 0.400);
+  --black-alpha-48: rgba(38, 38, 38, 0.478);
+  --black-alpha-56: rgba(38, 38, 38, 0.561);
+  --black-alpha-64: rgba(38, 38, 38, 0.639);
+  --black-alpha-72: rgba(38, 38, 38, 0.722);
+  --black-alpha-88: rgba(38, 38, 38, 0.878);
+  
+  /* White alpha variants */
+  --white-alpha-56: rgba(255, 255, 255, 0.561);
+  --white-alpha-72: rgba(255, 255, 255, 0.722);
+  
+  /* Border colors */
+  --border-faint: #ededed;
+  --border-muted: #e8e8e8;
+  --border-loud: #e6e6e6;
+  
+  /* Illustration colors */
+  --illustrations-faint: #ededed;
+  --illustrations-muted: #e6e6e6;
+  --illustrations-default: #dbdbdb;
+  
+  /* Background colors */
+  --background-lighter: #fbfbfb;
+  --background-base: #f9f9f9;
+  
+  /* Foreground colors */
+  --foreground: #262626;
+  --foreground-dimmer: rgba(38, 38, 38, 0.722);
+}
+
+/* P3 color space enhancement for supported browsers */
+@supports (color: color(display-p3 1 1 1)) {
+  :root {
+    /* Base colors */
+    --white: color(display-p3 1 1 1);
+    --black: color(display-p3 0 0 0);
+    
+    /* Fire-inspired heat colors */
+    --heat-4: color(display-p3 0.980392 0.364706 0.098039 / 0.039216);
+    --heat-8: color(display-p3 0.980392 0.364706 0.098039 / 0.078431);
+    --heat-12: color(display-p3 0.980392 0.364706 0.098039 / 0.121569);
+    --heat-16: color(display-p3 0.980392 0.364706 0.098039 / 0.160784);
+    --heat-20: color(display-p3 0.980392 0.364706 0.098039 / 0.200000);
+    --heat-40: color(display-p3 0.980392 0.364706 0.098039 / 0.400000);
+    --heat-100: color(display-p3 0.980392 0.364706 0.098039 / 1.000000);
+    --heat-200: color(display-p3 1.000000 0.400000 0.000000 / 1.000000);
+    
+    /* Accent colors */
+    --accent-black: color(display-p3 0.149020 0.149020 0.149020 / 1.000000);
+    --accent-white: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
+    --accent-amethyst: color(display-p3 0.564706 0.380392 1.000000 / 1.000000);
+    --accent-bluetron: color(display-p3 0.164706 0.427451 0.984314 / 1.000000);
+    --accent-crimson: color(display-p3 0.921569 0.203922 0.141176 / 1.000000);
+    
+    /* Black alpha variants */
+    --black-alpha-1: color(display-p3 0.000000 0.000000 0.000000 / 0.011765);
+    --black-alpha-2: color(display-p3 0.000000 0.000000 0.000000 / 0.019608);
+    --black-alpha-3: color(display-p3 0.000000 0.000000 0.000000 / 0.031373);
+    --black-alpha-4: color(display-p3 0.000000 0.000000 0.000000 / 0.039216);
+    --black-alpha-5: color(display-p3 0.000000 0.000000 0.000000 / 0.050980);
+    --black-alpha-6: color(display-p3 0.000000 0.000000 0.000000 / 0.058824);
+    --black-alpha-7: color(display-p3 0.000000 0.000000 0.000000 / 0.070588);
+    --black-alpha-8: color(display-p3 0.000000 0.000000 0.000000 / 0.078431);
+    --black-alpha-10: color(display-p3 0.000000 0.000000 0.000000 / 0.101961);
+    --black-alpha-12: color(display-p3 0.000000 0.000000 0.000000 / 0.121569);
+    --black-alpha-16: color(display-p3 0.000000 0.000000 0.000000 / 0.160784);
+    --black-alpha-20: color(display-p3 0.000000 0.000000 0.000000 / 0.200000);
+    --black-alpha-24: color(display-p3 0.000000 0.000000 0.000000 / 0.239216);
+    --black-alpha-32: color(display-p3 0.149020 0.149020 0.149020 / 0.321569);
+    --black-alpha-40: color(display-p3 0.149020 0.149020 0.149020 / 0.400000);
+    --black-alpha-48: color(display-p3 0.149020 0.149020 0.149020 / 0.478431);
+    --black-alpha-56: color(display-p3 0.149020 0.149020 0.149020 / 0.560784);
+    --black-alpha-64: color(display-p3 0.149020 0.149020 0.149020 / 0.639216);
+    --black-alpha-72: color(display-p3 0.149020 0.149020 0.149020 / 0.721569);
+    --black-alpha-88: color(display-p3 0.149020 0.149020 0.149020 / 0.878431);
+    
+    /* White alpha variants */
+    --white-alpha-56: color(display-p3 1.000000 1.000000 1.000000 / 0.560784);
+    --white-alpha-72: color(display-p3 1.000000 1.000000 1.000000 / 0.721569);
+    
+    /* Border colors */
+    --border-faint: color(display-p3 0.929412 0.929412 0.929412 / 1.000000);
+    --border-muted: color(display-p3 0.909804 0.909804 0.909804 / 1.000000);
+    --border-loud: color(display-p3 0.901961 0.901961 0.901961 / 1.000000);
+    
+    /* Illustration colors */
+    --illustrations-faint: color(display-p3 0.929412 0.929412 0.929412 / 1.000000);
+    --illustrations-muted: color(display-p3 0.901961 0.901961 0.901961 / 1.000000);
+    --illustrations-default: color(display-p3 0.858824 0.858824 0.858824 / 1.000000);
+    
+    /* Background colors */
+    --background-lighter: color(display-p3 0.984314 0.984314 0.984314 / 1.000000);
+    --background-base: color(display-p3 0.976471 0.976471 0.976471 / 1.000000);
+  }
+}
+

styles/design-system/fonts.css

@@ -0,0 +1,8 @@
+/* Custom Font Faces */
+/* Using Geist fonts via CSS variables from Next.js font loading */
+/* Fonts are loaded in app/layout.tsx and available as:
+   - var(--font-geist-sans)
+   - var(--font-geist-mono)
+   - var(--font-inter)
+   - var(--font-roboto-mono)
+*/

styles/design-system/typography.css

@@ -0,0 +1,243 @@
+/* Typography System */
+
+/* Font Face Declarations - matching firecrawl-marketing exactly */
+@font-face {
+  font-family: 'SuisseIntl';
+  src: url('/fonts/SuisseIntl/400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SuisseIntl';
+  src: url('/fonts/SuisseIntl/450.woff2') format('woff2');
+  font-weight: 450;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SuisseIntl';
+  src: url('/fonts/SuisseIntl/500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SuisseIntl';
+  src: url('/fonts/SuisseIntl/600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SuisseIntl';
+  src: url('/fonts/SuisseIntl/700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Font Stack Variables */
+:root {
+  --font-sans: 'SuisseIntl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Roboto Mono', Consolas, monospace;
+}
+
+/* Typography Classes - both semantic and utility variants */
+
+/* Text Utilities */
+.text-balance {
+  text-wrap: balance;
+}
+
+.text-pretty {
+  text-wrap: pretty;
+}
+
+/* Utility text classes matching firecrawl-marketing - extending base classes */
+.title-h1,
+.text-title-h1 {
+  font-size: 4rem; /* 64px */
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+}
+
+.title-h2,
+.text-title-h2 {
+  font-size: 2.25rem; /* 36px */
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  font-weight: 500;
+}
+
+.title-h3,
+.text-title-h3 {
+  font-size: 1.875rem; /* 30px */
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  font-weight: 500;
+}
+
+.title-h4,
+.text-title-h4 {
+  font-size: 1.375rem; /* 22px */
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+.title-h5,
+.text-title-h5 {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  font-weight: 500;
+}
+
+.body-small,
+.text-body-small {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.body-medium,
+.text-body-medium {
+  font-size: 1rem; /* 16px */
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+.body-large,
+.text-body-large {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.body-x-large,
+.text-body-x-large {
+  font-size: 1.375rem; /* 22px */
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+.label-small,
+.text-label-small {
+  font-size: 0.9375rem; /* 15px */
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  font-weight: 450;
+}
+
+.label-medium,
+.text-label-medium {
+  font-size: 1rem; /* 16px */
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  font-weight: 450;
+}
+
+.label-large,
+.text-label-large {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.4;
+  font-weight: 450;
+}
+
+.label-x-large,
+.text-label-x-large {
+  font-size: 1.375rem; /* 22px */
+  line-height: 1.4;
+  font-weight: 450;
+}
+
+.mono-small,
+.text-mono-small {
+  font-family: var(--font-mono);
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.5;
+}
+
+.mono-medium,
+.text-mono-medium {
+  font-family: var(--font-mono);
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.5;
+}
+
+.mono-large,
+.text-mono-large {
+  font-family: var(--font-mono);
+  font-size: 1rem; /* 16px */
+  line-height: 1.5;
+}
+
+/* Responsive Typography - matching firecrawl-marketing */
+@media (max-width: 1024px) {
+  .text-body-large {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 26px;
+    letter-spacing: -0.09px;
+  }
+
+  .text-body-medium {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.16px;
+  }
+
+  .text-title-h4 {
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 26px;
+    letter-spacing: -0.22px;
+  }
+
+  .text-body-x-large {
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 30px;
+    letter-spacing: -0.11px;
+  }
+
+  .text-label-small {
+    font-size: 15px;
+    font-weight: 450;
+    line-height: 22px;
+  }
+
+  .text-label-large {
+    font-size: 18px;
+    font-weight: 450;
+    line-height: 26px;
+    letter-spacing: -0.09px;
+  }
+
+  .text-label-x-large {
+    font-size: 22px;
+    font-weight: 450;
+    line-height: 30px;
+    letter-spacing: -0.11px;
+  }
+
+  .text-label-medium {
+    font-size: 16px;
+    font-weight: 450;
+    line-height: 24px;
+  }
+
+  .text-title-h2 {
+    font-size: 36px;
+    font-weight: 500;
+    line-height: 40px;
+    letter-spacing: -0.36px;
+  }
+}

styles/design-system/utilities.css

@@ -0,0 +1,235 @@
+/* Custom Utility Classes */
+
+/* Gradient utilities */
+.gradient-fire {
+  background: linear-gradient(135deg, var(--heat-100) 0%, var(--accent-crimson) 100%);
+}
+
+.gradient-heat {
+  background: linear-gradient(135deg, var(--heat-20) 0%, var(--heat-100) 100%);
+}
+
+.gradient-sunset {
+  background: linear-gradient(135deg, var(--heat-100) 0%, var(--accent-amethyst) 100%);
+}
+
+.gradient-ocean {
+  background: linear-gradient(135deg, var(--accent-bluetron) 0%, var(--accent-amethyst) 100%);
+}
+
+/* Text gradient */
+.text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-color: var(--heat-100); /* Fallback */
+}
+
+/* Mask utilities */
+.mask-fade-bottom {
+  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+}
+
+.mask-fade-edges {
+  mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
+}
+
+.mask-intersect {
+  -webkit-mask-composite: source-in; /* For Chrome */
+  mask-composite: intersect; /* For Firefox */
+}
+
+/* Blur utilities */
+.blur-backdrop {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+/* Border utilities */
+.border-gradient {
+  position: relative;
+  background: var(--white);
+  border: 1px solid transparent;
+}
+
+.border-gradient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--heat-100), var(--accent-crimson));
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: xor;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+
+/* Dotted underline - updated from marketing */
+.dotted-underline {
+  position: relative;
+  display: inline-block;
+  line-height: 1.1;
+}
+
+.dotted-underline::before {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 1.7px;
+  background-image: url("data:image/svg+xml,%3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23D1D1D1' style='fill:%23D1D1D1;fill:color(display-p3 0.8196 0.8196 0.8196);fill-opacity:1;'/%3E%3C/svg%3E%0A");
+  background-size: 3.4px 1.7px;
+  background-repeat: repeat-x;
+}
+
+/* Container utilities */
+.container-prose {
+  max-width: 65ch;
+  margin-inline: auto;
+}
+
+.container-narrow {
+  max-width: 48rem; /* 768px */
+  margin-inline: auto;
+}
+
+.container-wide {
+  max-width: 80rem; /* 1280px */
+  margin-inline: auto;
+}
+
+/* Centering helpers */
+.center-absolute {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.center-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Spacing utilities */
+.stack-sm > * + * {
+  margin-top: 0.5rem;
+}
+
+.stack-md > * + * {
+  margin-top: 1rem;
+}
+
+.stack-lg > * + * {
+  margin-top: 2rem;
+}
+
+.stack-xl > * + * {
+  margin-top: 3rem;
+}
+
+/* Aspect ratio utilities */
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-portrait {
+  aspect-ratio: 3 / 4;
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--heat-20);
+  color: var(--accent-black);
+}
+
+/* Focus visible utilities */
+.focus-ring {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-ring:focus-visible {
+  outline-color: var(--heat-100);
+}
+
+/* Scrollbar styling */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-muted) var(--background-lighter);
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: var(--background-lighter);
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: var(--border-muted);
+  border-radius: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: var(--border-loud);
+}
+
+/* Animation delay utilities */
+.animation-delay-150 {
+  animation-delay: 150ms;
+}
+
+.animation-delay-300 {
+  animation-delay: 300ms;
+}
+
+.animation-delay-450 {
+  animation-delay: 450ms;
+}
+
+.animation-delay-600 {
+  animation-delay: 600ms;
+}
+
+/* Loading animation helpers */
+.animate-shimmer {
+  background-size: 400% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Heat glow effect */
+.heat-glow {
+  box-shadow: 0 0 40px rgba(250, 93, 25, 0.3);
+  animation: heat-glow 3s ease-in-out infinite;
+}
+
+@keyframes heat-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(250, 93, 25, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(250, 93, 25, 0.4);
+  }
+}

styles/fire.css

@@ -0,0 +1,103 @@
+/* Fire Design System - New Firecrawl Design System */
+/* This is the new fire-inspired design system used in app and brand pages */
+
+/* ALL @import statements must come FIRST before any other CSS */
+
+/* Fire Design System Base */
+@import "./design-system/base/reset.css";
+@import "./design-system/base/body.css";
+@import "./design-system/base/layout.css";
+
+/* Fire Design System Core */
+@import "./design-system/fonts.css";
+@import "./design-system/colors.css";
+@import "./design-system/typography.css";
+@import "./design-system/animations.css";
+@import "./design-system/utilities.css";
+
+/* Tailwind CSS - After all imports */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Container configuration from firecrawl-marketing */
+:root {
+  --container-width: 1112px;
+  --container-width-padding: 1144px;
+}
+
+/* Container implementation matching firecrawl-marketing */
+.container {
+  max-width: min(calc(100% - 32px), var(--container-width));
+  --padding: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Custom container width utilities */
+.cmw-container {
+  max-width: var(--container-width);
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (max-width: 1024px) {
+  :root {
+    --container-width: 356px;
+    --container-width-padding: var(--container-width);
+  }
+
+  .container {
+    --padding: 0px;
+  }
+}
+
+/* Marketing pattern utilities */
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.curvy-rect {
+  contain: layout paint;
+}
+
+/* Fire-specific utilities layer */
+@layer utilities {
+  /* Mask utilities */
+  .mask-intersect {
+    -webkit-mask-composite: source-in; /* For Chrome */
+    mask-composite: intersect; /* Standard */
+  }
+  
+  .mask-subtract {
+    -webkit-mask-composite: source-out; /* For Chrome */
+    mask-composite: subtract; /* Standard */
+  }
+  
+  .mask-union {
+    -webkit-mask-composite: source-over; /* For Chrome */
+    mask-composite: add; /* Standard */
+  }
+
+  /* Fire design pattern utilities */
+  .dotted-underline::before {
+    content: "";
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+    width: 100%;
+    height: 1.7px;
+    background-image: url("data:image/svg+xml,%3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23D1D1D1' style='fill:%23D1D1D1;fill:color(display-p3 0.8196 0.8196 0.8196);fill-opacity:1;'/%3E%3C/svg%3E%0A");
+    background-size: 3.4px 1.7px;
+    background-repeat: repeat-x;
+  }
+  
+  /* inside-border styles moved to inside-border-fix.css to avoid conflicts */
+}

styles/inside-border-fix.css

@@ -0,0 +1,47 @@
+/* Fix for inside-border utility */
+.inside-border {
+  position: relative;
+}
+
+.inside-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid;
+  border-color: inherit;
+  transition: all 0.2s;
+  pointer-events: none;
+}
+
+.inside-border-x {
+  position: relative;
+}
+
+.inside-border-x::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  border-color: inherit;
+  transition: all 0.2s;
+  pointer-events: none;
+}
+
+.inside-border-y {
+  position: relative;
+}
+
+.inside-border-y::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: inherit;
+  transition: all 0.2s;
+  pointer-events: none;
+}

styles/main.css

@@ -0,0 +1,282 @@
+/* Fire Design System - Must be imported first for color definitions */
+@import "./fire.css";
+@import "./components/index.css";
+@import "./inside-border-fix.css";
+
+/* Additional styles */
+@import "additional-styles/utility-patterns.css";
+@import "additional-styles/theme.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.height-screen-helper {
+  min-height: calc(100vh - 80px);
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  /* Temporarily disable dark mode until we migrate to semantic colors */
+  /* .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  } */
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 300ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.DialogOverlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 100;
+}
+
+.DialogContent {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 650px;
+  max-height: 85vh;
+  animation: contentShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 101;
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: #000;
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: #000;
+  font-size: 15px;
+  line-height: 1.5;
+}
+.FireButton {
+  color: #f8fafc;
+  background-color: #111827;
+  width: 100%;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.3s ease;
+}
+
+.FireButton:hover {
+  box-shadow: 0 0 8px 2px #ff5d22af;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.blog-heading:target {
+  padding-bottom: 120px !important;
+}
+
+@layer utilities {
+  .extra-space {
+    position: relative;
+
+    &::after {
+      --target-size: 20px;
+
+      content: '';
+      position: absolute;
+      inset: var(--target-size);
+    }
+  }
+
+  .marquee-animation {
+    animation: marquee var(--speed, 10s) linear infinite
+      var(--direction, forwards);
+  }
+
+  @keyframes marquee {
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  /* Loading state animations */
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes pulse-subtle {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.95;
+    }
+  }
+
+  @keyframes text-shimmer {
+    0% {
+      background-position: -200% center;
+    }
+    100% {
+      background-position: 200% center;
+    }
+  }
+
+  .animate-fade-in-up {
+    animation: fade-in-up 0.6s ease-out forwards;
+    opacity: 0;
+  }
+
+  .animate-pulse-subtle {
+    animation: pulse-subtle 2s ease-in-out infinite;
+  }
+
+  .animate-text-shimmer {
+    background: linear-gradient(
+      90deg,
+      rgb(156 163 175) 0%,
+      rgb(229 231 235) 50%,
+      rgb(156 163 175) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: text-shimmer 3s linear infinite;
+  }
+}
+
+.grecaptcha-badge { visibility: hidden; }
+
+/* Remove all focus styles from hero input */
+input[type="text"]:focus,
+input[type="text"]:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: inherit !important;
+}

tailwind.config.ts

@@ -0,0 +1,406 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import defaultTheme from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+
+import colorsJson from "./colors.json";
+
+const colors = Object.keys(colorsJson).reduce(
+  (acc, key) => {
+    acc[key] = `var(--${key})`;
+
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+const sizes = Array.from({ length: 1000 }, (_, i) => i).reduce(
+  (acc, curr) => {
+    acc[curr] = `${curr}px`;
+
+    return acc;
+  },
+  {
+    max: "max-content",
+    unset: "unset",
+    full: "100%",
+    inherit: "inherit",
+    "1/2": "50%",
+    "1/3": "33.3%",
+    "2/3": "66.6%",
+    "1/4": "25%",
+    "1/6": "16.6%",
+    "2/6": "33.3%",
+    "3/6": "50%",
+    "4/6": "66.6%",
+    "5/6": "83.3%"
+  } as Record<string, string>
+);
+
+const opacities = Array.from({ length: 100 }, (_, i) => i).reduce(
+  (acc, curr) => {
+    acc[curr] = curr / 100 + "";
+
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+const transitionDurations = Array.from({ length: 60 }, (_, i) => i).reduce(
+  (acc, curr) => {
+    acc[curr] = curr * 50 + "";
+
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+const themeConfig: Config = {
+  darkMode: "class",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components-new/**/*.{js,ts,jsx,tsx,mdx}",
+    "./styling-reference/ai-ready-website/app/**/*.{ts,tsx}",
+    "./styling-reference/ai-ready-website/components/**/*.{ts,tsx}",
+    "./styling-reference/ai-ready-website/components-new/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", "var(--font-inter)", ...defaultTheme.fontFamily.sans],
+        mono: ["var(--font-geist-mono)", ...defaultTheme.fontFamily.mono],
+        ascii: ["var(--font-roboto-mono)", ...defaultTheme.fontFamily.mono]
+      },
+      fontSize: {
+        "title-h1": [
+          "60px",
+          {
+            "lineHeight": "64px",
+            "letterSpacing": "-0.3px",
+            "fontWeight": "500"
+          }
+        ],
+        "title-h2": [
+          "52px",
+          {
+            "lineHeight": "56px",
+            "letterSpacing": "-0.52px",
+            "fontWeight": "500"
+          }
+        ],
+        "title-h3": [
+          "40px",
+          {
+            "lineHeight": "44px",
+            "letterSpacing": "-0.4px",
+            "fontWeight": "500"
+          }
+        ],
+        "title-h4": [
+          "32px",
+          {
+            "lineHeight": "36px",
+            "letterSpacing": "-0.32px",
+            "fontWeight": "500"
+          }
+        ],
+        "title-h5": [
+          "24px",
+          {
+            "lineHeight": "32px",
+            "letterSpacing": "-0.24px",
+            "fontWeight": "500"
+          }
+        ],
+        "body-x-large": [
+          "20px",
+          {
+            "lineHeight": "28px",
+            "letterSpacing": "-0.1px",
+            "fontWeight": "400"
+          }
+        ],
+        "body-large": [
+          "16px",
+          {
+            "lineHeight": "24px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "body-medium": [
+          "14px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0.14px",
+            "fontWeight": "400"
+          }
+        ],
+        "body-small": [
+          "13px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "body-input": [
+          "15px",
+          {
+            "lineHeight": "24px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "label-x-large": [
+          "20px",
+          {
+            "lineHeight": "28px",
+            "letterSpacing": "-0.1px",
+            "fontWeight": "450"
+          }
+        ],
+        "label-large": [
+          "16px",
+          {
+            "lineHeight": "24px",
+            "letterSpacing": "0px",
+            "fontWeight": "450"
+          }
+        ],
+        "label-medium": [
+          "14px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0px",
+            "fontWeight": "450"
+          }
+        ],
+        "label-small": [
+          "13px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0px",
+            "fontWeight": "450"
+          }
+        ],
+        "label-x-small": [
+          "12px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0px",
+            "fontWeight": "450"
+          }
+        ],
+        "mono-medium": [
+          "14px",
+          {
+            "lineHeight": "22px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "mono-small": [
+          "13px",
+          {
+            "lineHeight": "20px",
+            "letterSpacing": "0px",
+            "fontWeight": "500"
+          }
+        ],
+        "mono-x-small": [
+          "12px",
+          {
+            "lineHeight": "16px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "title-blog": [
+          "28px",
+          {
+            "lineHeight": "36px",
+            "letterSpacing": "-0.28px",
+            "fontWeight": "500"
+          }
+        ]
+      },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        ...colors
+      },
+      screens: {
+        xs: { min: "390px" },
+        "xs-max": { max: "389px" },
+        sm: { min: "576px" },
+        "sm-max": { max: "575px" },
+        md: { min: "768px" },
+        "md-max": { max: "767px" },
+        lg: { min: "996px" },
+        "lg-max": { max: "995px" },
+        xl: { min: "1200px" },
+        "xl-max": { max: "1199px" }
+      },
+      opacity: opacities,
+      spacing: {
+        ...sizes,
+        'root': 'var(--root-padding)'
+      },
+      width: sizes,
+      maxWidth: sizes,
+      height: sizes,
+      inset: sizes,
+      borderWidth: sizes,
+      backdropBlur: Array.from({ length: 20 }, (_, i) => i).reduce(
+        (acc, curr) => {
+          acc[curr] = curr + "px";
+
+          return acc;
+        },
+        {} as Record<string, string>
+      ),
+      transitionTimingFunction: { DEFAULT: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
+      transitionDuration: {
+        DEFAULT: "200ms",
+        ...transitionDurations
+      },
+      transitionDelay: {
+        ...transitionDurations
+      },
+      borderRadius: (() => {
+        const radius: Record<string | number, string> = {
+          full: "999px",
+          inherit: "inherit",
+          0: "0px",
+          lg: "var(--radius)",
+          md: "calc(var(--radius) - 2px)",
+          sm: "calc(var(--radius) - 4px)",
+        };
+
+        for (let i = 1; i <= 32; i += 1) {
+          radius[i] = `${i}px`;
+        }
+
+        return radius;
+      })()
+    }
+  },
+  plugins: [
+    ({
+      addUtilities, matchUtilities
+    }: any) => {
+      addUtilities({
+        // Inside-border utilities are defined in inside-border-fix.css to avoid Tailwind variant conflicts
+        '.mask-border': {
+          "mask": "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          "mask-composite": "exclude",
+          "pointer-events": "none"
+        },
+        ".center-x": { "@apply absolute left-1/2 -translate-x-1/2": {} },
+        ".center-y": { "@apply absolute top-1/2 -translate-y-1/2": {} },
+        ".center": { "@apply absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2": {} },
+        ".flex-center": { "@apply flex items-center justify-center": {} },
+        ".overlay": { "@apply absolute top-0 left-0 w-full h-full rounded-inherit": {} },
+        ".text-gradient": { "@apply !bg-clip-text !text-transparent": {} }
+      });
+      matchUtilities(
+        {
+          'cw': (value: string) => {
+            const width = parseInt(value);
+
+            return {
+              width: value,
+              left: `calc(50% - ${width / 2}px)`
+            };
+          },
+          'ch': (value: string) => {
+            const height = parseInt(value);
+
+            return {
+              height: value,
+              top: `calc(50% - ${height / 2}px)`
+            };
+          },
+          'cs': (value: string) => {
+            const size = parseInt(value);
+
+            return {
+              width: size,
+              height: size,
+              left: `calc(50% - ${size / 2}px)`,
+              top: `calc(50% - ${size / 2}px)`
+            };
+          },
+          'cmw': (value: string) => {
+            const [maxWidth, paddingX] = value.split(',').map((v) => parseInt(v));
+
+            const width = paddingX ? `calc(100% - ${paddingX * 2}px)` : '100%';
+
+            return {
+              maxWidth: maxWidth,
+              width,
+              left: `calc(50% - (min(${maxWidth}px, ${width}) / 2))`
+            };
+          },
+          'mw': (value: string) => {
+            const [maxWidth, paddingX] = value.split(',').map((v) => parseInt(v));
+
+            const width = paddingX ? `calc(100% - ${paddingX * 2}px)` : '100%';
+
+            return {
+              maxWidth: maxWidth,
+              width
+            };
+          }
+        },
+        { values: sizes }
+      );
+    },
+    require("tailwind-gradient-mask-image"),
+    require("@tailwindcss/typography"),
+  ]
+};
+
+export default themeConfig;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "examples", "tests", "lib/e2b-backends/archive", "styles"]
+}

types/conversation.ts

@@ -0,0 +1,50 @@
+// Conversation tracking types for maintaining context across interactions
+
+export interface ConversationMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+  metadata?: {
+    editedFiles?: string[]; // Files edited in this interaction
+    addedPackages?: string[]; // Packages added in this interaction
+    editType?: string; // Type of edit performed
+    sandboxId?: string; // Sandbox ID at time of message
+  };
+}
+
+export interface ConversationEdit {
+  timestamp: number;
+  userRequest: string;
+  editType: string;
+  targetFiles: string[];
+  confidence: number;
+  outcome: 'success' | 'partial' | 'failed';
+  errorMessage?: string;
+}
+
+export interface ConversationContext {
+  messages: ConversationMessage[];
+  edits: ConversationEdit[];
+  currentTopic?: string; // Current focus area (e.g., "header styling", "hero section")
+  projectEvolution: {
+    initialState?: string; // Description of initial project state
+    majorChanges: Array<{
+      timestamp: number;
+      description: string;
+      filesAffected: string[];
+    }>;
+  };
+  userPreferences: {
+    editStyle?: 'targeted' | 'comprehensive'; // How the user prefers edits
+    commonRequests?: string[]; // Common patterns in user requests
+    packagePreferences?: string[]; // Commonly used packages
+  };
+}
+
+export interface ConversationState {
+  conversationId: string;
+  startedAt: number;
+  lastUpdated: number;
+  context: ConversationContext;
+}

types/file-manifest.ts

@@ -0,0 +1,77 @@
+// File manifest types for enhanced edit tracking
+
+export interface FileInfo {
+  content: string;
+  type: 'component' | 'page' | 'style' | 'config' | 'utility' | 'layout' | 'hook' | 'context';
+  exports?: string[]; // Named exports and default export
+  imports?: ImportInfo[]; // Dependencies
+  lastModified: number;
+  componentInfo?: ComponentInfo; // For React components
+  path: string;
+  relativePath: string; // Path relative to src/
+}
+
+export interface ImportInfo {
+  source: string; // e.g., './Header', 'react', '@/components/Button'
+  imports: string[]; // Named imports
+  defaultImport?: string; // Default import name
+  isLocal: boolean; // true if starts with './' or '@/'
+}
+
+export interface ComponentInfo {
+  name: string;
+  props?: string[]; // Prop names if detectable
+  hooks?: string[]; // Hooks used (useState, useEffect, etc)
+  hasState: boolean;
+  childComponents?: string[]; // Components rendered inside
+}
+
+export interface RouteInfo {
+  path: string; // Route path (e.g., '/videos', '/about')
+  component: string; // Component file path
+  layout?: string; // Layout component if any
+}
+
+export interface ComponentTree {
+  [componentName: string]: {
+    file: string;
+    imports: string[]; // Components it imports
+    importedBy: string[]; // Components that import it
+    type: 'page' | 'layout' | 'component';
+  }
+}
+
+export interface FileManifest {
+  files: Record<string, FileInfo>;
+  routes: RouteInfo[];
+  componentTree: ComponentTree;
+  entryPoint: string; // Usually App.jsx or main.jsx
+  styleFiles: string[]; // All CSS files
+  timestamp: number;
+}
+
+// Edit classification types
+export enum EditType {
+  UPDATE_COMPONENT = 'UPDATE_COMPONENT',    // "update the header", "change button color"
+  ADD_FEATURE = 'ADD_FEATURE',              // "add a videos page", "create new component"
+  FIX_ISSUE = 'FIX_ISSUE',                 // "fix the styling", "resolve error"
+  REFACTOR = 'REFACTOR',                   // "reorganize", "clean up"
+  FULL_REBUILD = 'FULL_REBUILD',           // "start over", "recreate everything"
+  UPDATE_STYLE = 'UPDATE_STYLE',           // "change colors", "update theme"
+  ADD_DEPENDENCY = 'ADD_DEPENDENCY'        // "install package", "add library"
+}
+
+export interface EditIntent {
+  type: EditType;
+  targetFiles: string[]; // Predicted files to edit
+  confidence: number; // 0-1 confidence score
+  description: string; // Human-readable description
+  suggestedContext: string[]; // Additional files to include for context
+}
+
+// Patterns for intent detection
+export interface IntentPattern {
+  patterns: RegExp[];
+  type: EditType;
+  fileResolver: (prompt: string, manifest: FileManifest) => string[];
+}

types/sandbox.ts

@@ -0,0 +1,31 @@
+// Global types for sandbox file management
+
+export interface SandboxFile {
+  content: string;
+  lastModified: number;
+}
+
+export interface SandboxFileCache {
+  files: Record<string, SandboxFile>;
+  lastSync: number;
+  sandboxId: string;
+  manifest?: any; // FileManifest type from file-manifest.ts
+}
+
+export interface SandboxState {
+  fileCache: SandboxFileCache | null;
+  sandbox: any; // E2B sandbox instance
+  sandboxData: {
+    sandboxId: string;
+    url: string;
+  } | null;
+}
+
+// Declare global types
+declare global {
+  var activeSandbox: any;
+  var sandboxState: SandboxState;
+  var existingFiles: Set<string>;
+}
+
+export {};

utils/cn.ts

@@ -0,0 +1,5 @@
+import classNames from "classnames";
+
+export function cn(...classes: classNames.ArgumentArray) {
+  return classNames(...classes);
+}