rebar-mcp 2.0.0

package/landing/app/page.tsx

@@ -0,0 +1,944 @@
+"use client";
+
+import { useEffect, useState, FormEvent } from "react";
+
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+// Simple Supabase fetch helper (no SDK needed)
+async function supabaseInsert(table: string, data: Record<string, unknown>) {
+  const response = await fetch(`${SUPABASE_URL}/rest/v1/${table}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': SUPABASE_ANON_KEY,
+      'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
+      'Prefer': 'return=minimal'
+    },
+    body: JSON.stringify(data)
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({}));
+    throw new Error(error.message || 'Failed to submit');
+  }
+
+  return true;
+}
+
+interface LiveStats {
+  npmDownloads: number | null;
+  githubStars: number | null;
+  githubForks: number | null;
+  openIssues: number | null;
+  loading: boolean;
+}
+
+export default function Home() {
+  const [stats, setStats] = useState<LiveStats>({
+    npmDownloads: null,
+    githubStars: null,
+    githubForks: null,
+    openIssues: null,
+    loading: true,
+  });
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        // Fetch npm downloads (last week)
+        const npmRes = await fetch(
+          "https://api.npmjs.org/downloads/point/last-week/rebar-mcp"
+        );
+        const npmData = npmRes.ok ? await npmRes.json() : null;
+
+        // Fetch GitHub stats
+        const ghRes = await fetch(
+          "https://api.github.com/repos/RCOLKITT/rebar-mcp"
+        );
+        const ghData = ghRes.ok ? await ghRes.json() : null;
+
+        setStats({
+          npmDownloads: npmData?.downloads ?? null,
+          githubStars: ghData?.stargazers_count ?? null,
+          githubForks: ghData?.forks_count ?? null,
+          openIssues: ghData?.open_issues_count ?? null,
+          loading: false,
+        });
+      } catch {
+        setStats((prev) => ({ ...prev, loading: false }));
+      }
+    }
+
+    fetchStats();
+  }, []);
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      background: 'linear-gradient(180deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%)',
+      color: '#fff',
+      padding: '40px 20px'
+    }}>
+      <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
+        {/* Hero */}
+        <div style={{ textAlign: 'center', marginBottom: '80px', paddingTop: '40px' }}>
+          {/* Logo */}
+          <div style={{ marginBottom: '32px' }}>
+            <RebarLogo />
+          </div>
+
+          <div style={{
+            display: 'inline-block',
+            background: 'rgba(245, 158, 11, 0.1)',
+            border: '1px solid rgba(245, 158, 11, 0.3)',
+            borderRadius: '20px',
+            padding: '6px 16px',
+            fontSize: '0.85rem',
+            color: '#f59e0b',
+            marginBottom: '24px',
+            fontWeight: 500
+          }}>
+            Works with Claude Code, Cursor, Windsurf & Codex
+          </div>
+
+          <h1 style={{
+            fontSize: '3.8rem',
+            fontWeight: 800,
+            marginBottom: '24px',
+            lineHeight: '1.05',
+            letterSpacing: '-0.03em'
+          }}>
+            <span style={{ color: '#fff' }}>Reinforcement for</span><br/>
+            <span style={{
+              background: 'linear-gradient(90deg, #f59e0b 0%, #ef4444 100%)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent'
+            }}>AI-generated code</span>
+          </h1>
+
+          <p style={{
+            fontSize: '1.35rem',
+            color: '#a1a1aa',
+            maxWidth: '650px',
+            margin: '0 auto 40px',
+            lineHeight: '1.6'
+          }}>
+            Enforcement hooks, quality audits, and opinionated templates that prevent
+            AI coding tools from shipping broken code.
+          </p>
+
+          <div style={{
+            background: '#18181b',
+            borderRadius: '12px',
+            padding: '18px 28px',
+            fontFamily: '"JetBrains Mono", monospace',
+            fontSize: '1rem',
+            border: '1px solid #27272a',
+            display: 'inline-block',
+            marginBottom: '16px'
+          }}>
+            <span style={{ color: '#71717a' }}>$</span>{' '}
+            <span style={{ color: '#f59e0b' }}>claude mcp add</span> rebar --{' '}
+            <span style={{ color: '#22c55e' }}>npx rebar-mcp</span>
+          </div>
+
+          <p style={{ color: '#52525b', fontSize: '0.9rem' }}>
+            One command. Works immediately.
+          </p>
+        </div>
+
+        {/* Live Stats Bar */}
+        <div style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '48px',
+          marginBottom: '80px',
+          padding: '24px 40px',
+          background: 'rgba(255,255,255,0.02)',
+          borderRadius: '16px',
+          border: '1px solid #27272a',
+          flexWrap: 'wrap'
+        }}>
+          <LiveStat
+            label="npm downloads"
+            value={stats.npmDownloads}
+            suffix="/week"
+            loading={stats.loading}
+          />
+          <LiveStat
+            label="GitHub stars"
+            value={stats.githubStars}
+            loading={stats.loading}
+          />
+          <LiveStat
+            label="Forks"
+            value={stats.githubForks}
+            loading={stats.loading}
+          />
+          <LiveStat
+            label="Open issues"
+            value={stats.openIssues}
+            loading={stats.loading}
+          />
+        </div>
+
+        {/* Problem/Solution */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: '24px',
+          marginBottom: '80px'
+        }}>
+          <div style={{
+            background: 'rgba(239, 68, 68, 0.05)',
+            border: '1px solid rgba(239, 68, 68, 0.2)',
+            borderRadius: '16px',
+            padding: '30px'
+          }}>
+            <h3 style={{ color: '#ef4444', marginTop: 0, fontSize: '1.1rem', fontWeight: 600 }}>
+              Without Rebar
+            </h3>
+            <ul style={{ color: '#a1a1aa', lineHeight: '2.2', paddingLeft: '20px', margin: 0 }}>
+              <li>&quot;I&apos;ve completed the implementation&quot; <span style={{ color: '#71717a' }}>(no tests run)</span></li>
+              <li>Empty catch blocks swallow errors silently</li>
+              <li><code style={{ color: '#ef4444', background: 'rgba(239,68,68,0.1)', padding: '2px 6px', borderRadius: '4px' }}>any</code> types everywhere — TypeScript theater</li>
+              <li>TODO comments shipped to production</li>
+            </ul>
+          </div>
+          <div style={{
+            background: 'rgba(34, 197, 94, 0.05)',
+            border: '1px solid rgba(34, 197, 94, 0.2)',
+            borderRadius: '16px',
+            padding: '30px'
+          }}>
+            <h3 style={{ color: '#22c55e', marginTop: 0, fontSize: '1.1rem', fontWeight: 600 }}>
+              With Rebar
+            </h3>
+            <ul style={{ color: '#a1a1aa', lineHeight: '2.2', paddingLeft: '20px', margin: 0 }}>
+              <li>Tests run after every file change</li>
+              <li>Lint errors block until fixed</li>
+              <li>Secrets detected and blocked pre-commit</li>
+              <li>Destructive commands require approval</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Platforms */}
+        <div style={{
+          textAlign: 'center',
+          marginBottom: '80px',
+          padding: '50px 40px',
+          background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%)',
+          borderRadius: '20px',
+          border: '1px solid rgba(245, 158, 11, 0.15)'
+        }}>
+          <h2 style={{ marginTop: 0, fontSize: '1.8rem', marginBottom: '12px', fontWeight: 700 }}>
+            One tool. Every AI coding platform.
+          </h2>
+          <p style={{ color: '#71717a', marginBottom: '32px' }}>
+            Rebar generates native configuration for each platform
+          </p>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '24px'
+          }}>
+            <Platform name="Claude Code" files="CLAUDE.md, hooks, skills" />
+            <Platform name="Cursor" files=".cursor/rules/" />
+            <Platform name="Windsurf" files=".windsurf/rules/" />
+            <Platform name="Codex CLI" files="AGENTS.md" />
+          </div>
+        </div>
+
+        {/* Strictness Profiles */}
+        <div style={{ marginBottom: '80px' }}>
+          <h2 style={{ textAlign: 'center', marginBottom: '16px', fontSize: '2rem', fontWeight: 700 }}>
+            Three strictness levels
+          </h2>
+          <p style={{ textAlign: 'center', color: '#71717a', marginBottom: '40px' }}>
+            From gentle nudges to iron-fisted enforcement
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+            <ProfileCard
+              name="Standard"
+              emoji="⚡"
+              color="#3b82f6"
+              description="Notify on issues. Danger + secrets still block."
+              features={['Test results shown', 'Lint output displayed', 'Secrets blocked', 'Danger blocked']}
+            />
+            <ProfileCard
+              name="Strict"
+              emoji="🛡️"
+              color="#f59e0b"
+              description="Block on test and lint failures."
+              features={['Tests must pass', 'Lint must pass', 'Secrets blocked', 'Danger blocked']}
+              recommended
+            />
+            <ProfileCard
+              name="Paranoid"
+              emoji="🔒"
+              color="#ef4444"
+              description="Maximum enforcement. No shortcuts."
+              features={['All Strict rules', 'Files < 400 lines', 'No any types', 'No TODOs in commits']}
+            />
+          </div>
+        </div>
+
+        {/* Quality Checks */}
+        <div style={{
+          background: 'rgba(255,255,255,0.02)',
+          borderRadius: '20px',
+          padding: '50px 40px',
+          marginBottom: '80px'
+        }}>
+          <h2 style={{ marginTop: 0, textAlign: 'center', marginBottom: '12px', fontSize: '2rem', fontWeight: 700 }}>
+            8 Quality Checks, Always On
+          </h2>
+          <p style={{ textAlign: 'center', color: '#71717a', marginBottom: '36px' }}>
+            Audit your code with <code style={{ background: '#27272a', padding: '2px 8px', borderRadius: '4px' }}>rebar audit</code>
+          </p>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '16px'
+          }}>
+            <Check title="Test Coverage" desc="Tests must pass before task completion" />
+            <Check title="Error Handling" desc="No empty catch blocks or swallowed errors" />
+            <Check title="Type Safety" desc="No any types in TypeScript code" />
+            <Check title="Clean Code" desc="No TODO/FIXME in production code" />
+            <Check title="File Size" desc="Files under 400 lines, functions under 50" />
+            <Check title="Secret Detection" desc="API keys and tokens blocked from commits" />
+            <Check title="Dangerous Commands" desc="rm -rf, force push require approval" />
+            <Check title="Custom Rules" desc="Add your own rules in .rebar/rules.yaml" />
+          </div>
+        </div>
+
+        {/* CLI */}
+        <div style={{ marginBottom: '80px' }}>
+          <h2 style={{ textAlign: 'center', marginBottom: '16px', fontSize: '2rem', fontWeight: 700 }}>
+            Works in CI/CD too
+          </h2>
+          <p style={{ textAlign: 'center', color: '#71717a', marginBottom: '32px' }}>
+            Gate pull requests on quality score
+          </p>
+          <div style={{
+            background: '#18181b',
+            borderRadius: '12px',
+            padding: '24px',
+            fontFamily: '"JetBrains Mono", monospace',
+            fontSize: '0.9rem',
+            border: '1px solid #27272a',
+            overflow: 'auto'
+          }}>
+            <pre style={{ margin: 0, color: '#a1a1aa' }}>
+{`# .github/workflows/rebar.yml
+name: Rebar Code Quality
+on: [pull_request]
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npx rebar-mcp audit --threshold 70`}
+            </pre>
+          </div>
+        </div>
+
+        {/* Pricing */}
+        <div style={{ marginBottom: '80px' }}>
+          <h2 style={{ textAlign: 'center', marginBottom: '16px', fontSize: '2rem', fontWeight: 700 }}>
+            Pricing
+          </h2>
+          <p style={{ textAlign: 'center', color: '#71717a', marginBottom: '40px' }}>
+            Open source core. Enterprise features coming soon.
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+            <PricingCard
+              name="Free"
+              price="$0"
+              period="forever"
+              description="Everything you need to enforce AI code quality"
+              features={[
+                '15 MCP tools',
+                '4 compliance packs (HIPAA, SOC2, PCI-DSS, SOX)',
+                '5 CLAUDE.md templates',
+                '18 lifecycle hook events',
+                'Multi-platform support',
+                'JSON & dry-run modes',
+                'Community support'
+              ]}
+              cta="Get Started"
+              ctaHref="https://github.com/RCOLKITT/rebar-mcp"
+              available
+            />
+            <PricingCard
+              name="Pro"
+              price="TBD"
+              period=""
+              description="Advanced compliance and priority support"
+              features={[
+                'Everything in Free',
+                'ISO 42001, FedRAMP, GDPR packs',
+                'Priority GitHub support',
+                'Template customization',
+                'Early access to new features'
+              ]}
+              cta="Join Waitlist"
+              ctaHref="#waitlist"
+              comingSoon
+            />
+            <PricingCard
+              name="Enterprise"
+              price="Custom"
+              period=""
+              description="Team management and audit capabilities"
+              features={[
+                'Everything in Pro',
+                'Team policy dashboard',
+                'Centralized audit logs',
+                'Custom compliance packs',
+                'SSO/SAML integration',
+                'Dedicated support + SLA'
+              ]}
+              cta="Contact Sales"
+              ctaHref="mailto:ryan@vasperacapital.com?subject=Rebar%20Enterprise"
+              comingSoon
+            />
+          </div>
+        </div>
+
+        {/* Compliance Badges */}
+        <div style={{
+          textAlign: 'center',
+          marginBottom: '80px',
+          padding: '40px',
+          background: 'rgba(255,255,255,0.02)',
+          borderRadius: '20px',
+          border: '1px solid #27272a'
+        }}>
+          <h3 style={{ marginTop: 0, marginBottom: '8px', fontSize: '1.3rem', fontWeight: 600 }}>
+            Compliance Packs Available Now
+          </h3>
+          <p style={{ color: '#71717a', marginBottom: '28px', fontSize: '0.9rem' }}>
+            Generate hooks and policies for major compliance frameworks
+          </p>
+          <div style={{ display: 'flex', justifyContent: 'center', gap: '32px', flexWrap: 'wrap' }}>
+            <ComplianceBadge name="HIPAA" />
+            <ComplianceBadge name="SOC 2" />
+            <ComplianceBadge name="PCI-DSS" />
+            <ComplianceBadge name="SOX" />
+          </div>
+        </div>
+
+        {/* Waitlist */}
+        <div id="waitlist" style={{
+          textAlign: 'center',
+          marginBottom: '80px',
+          padding: '50px 40px',
+          background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%)',
+          borderRadius: '20px',
+          border: '1px solid rgba(245, 158, 11, 0.15)'
+        }}>
+          <h2 style={{ marginTop: 0, fontSize: '1.8rem', marginBottom: '12px', fontWeight: 700 }}>
+            Interested in Pro or Enterprise?
+          </h2>
+          <p style={{ color: '#a1a1aa', marginBottom: '28px', maxWidth: '500px', margin: '0 auto 28px' }}>
+            We&apos;re building team features and advanced compliance packs. Get notified when they&apos;re ready.
+          </p>
+          <WaitlistForm />
+        </div>
+
+        {/* CTA */}
+        <div style={{
+          textAlign: 'center',
+          marginBottom: '80px',
+          padding: '60px 40px',
+          background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.08) 100%)',
+          borderRadius: '20px',
+          border: '1px solid rgba(245, 158, 11, 0.2)'
+        }}>
+          <h2 style={{ fontSize: '2.4rem', marginBottom: '16px', fontWeight: 700 }}>
+            Stop shipping broken AI code
+          </h2>
+          <p style={{ color: '#a1a1aa', marginBottom: '32px', fontSize: '1.1rem' }}>
+            One command to enforce quality across your entire team
+          </p>
+          <div style={{
+            background: '#18181b',
+            borderRadius: '12px',
+            padding: '20px 32px',
+            fontFamily: '"JetBrains Mono", monospace',
+            fontSize: '1.1rem',
+            border: '1px solid #27272a',
+            display: 'inline-block',
+            marginBottom: '24px'
+          }}>
+            npx rebar-mcp init --strictness strict
+          </div>
+          <p style={{ color: '#71717a' }}>
+            Or as MCP server: <code style={{ background: '#27272a', padding: '4px 10px', borderRadius: '6px' }}>claude mcp add rebar -- npx rebar-mcp</code>
+          </p>
+        </div>
+
+        {/* Footer */}
+        <div style={{
+          textAlign: 'center',
+          color: '#52525b',
+          paddingTop: '40px',
+          borderTop: '1px solid #27272a'
+        }}>
+          <p>
+            Built by{' '}
+            <a href="https://vasperacapital.com" style={{ color: '#f59e0b', textDecoration: 'none' }}>
+              Vaspera Capital
+            </a>
+          </p>
+          <p style={{ marginTop: '10px' }}>
+            <a href="https://github.com/RCOLKITT/rebar-mcp" style={{ color: '#71717a', textDecoration: 'none' }}>
+              GitHub
+            </a>
+            {' · '}
+            <a href="https://www.npmjs.com/package/rebar-mcp" style={{ color: '#71717a', textDecoration: 'none' }}>
+              npm
+            </a>
+            {' · '}
+            <a href="mailto:ryan@vasperacapital.com" style={{ color: '#71717a', textDecoration: 'none' }}>
+              Contact
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LiveStat({ label, value, suffix = "", loading }: { label: string; value: number | null; suffix?: string; loading: boolean }) {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '2rem', fontWeight: 700, color: '#f59e0b', minHeight: '40px' }}>
+        {loading ? (
+          <span style={{ color: '#52525b' }}>—</span>
+        ) : value !== null ? (
+          <>
+            {value.toLocaleString()}
+            {suffix && <span style={{ fontSize: '1rem', color: '#71717a' }}>{suffix}</span>}
+          </>
+        ) : (
+          <span style={{ color: '#52525b' }}>—</span>
+        )}
+      </div>
+      <div style={{ color: '#71717a', fontSize: '0.85rem', marginTop: '4px' }}>{label}</div>
+    </div>
+  );
+}
+
+function RebarLogo() {
+  return (
+    <svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* Crossed rebar pattern */}
+      <defs>
+        <linearGradient id="rebarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#f59e0b" />
+          <stop offset="100%" stopColor="#ef4444" />
+        </linearGradient>
+        <linearGradient id="steelGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#71717a" />
+          <stop offset="50%" stopColor="#a1a1aa" />
+          <stop offset="100%" stopColor="#71717a" />
+        </linearGradient>
+      </defs>
+
+      {/* Rebar icon - two crossed bars */}
+      <g transform="translate(10, 10)">
+        {/* Horizontal bar with ridges */}
+        <rect x="0" y="18" width="40" height="8" rx="2" fill="url(#rebarGradient)" />
+        <rect x="5" y="16" width="3" height="12" rx="1" fill="url(#rebarGradient)" opacity="0.7" />
+        <rect x="12" y="16" width="3" height="12" rx="1" fill="url(#rebarGradient)" opacity="0.7" />
+        <rect x="19" y="16" width="3" height="12" rx="1" fill="url(#rebarGradient)" opacity="0.7" />
+        <rect x="26" y="16" width="3" height="12" rx="1" fill="url(#rebarGradient)" opacity="0.7" />
+        <rect x="33" y="16" width="3" height="12" rx="1" fill="url(#rebarGradient)" opacity="0.7" />
+
+        {/* Diagonal bar */}
+        <rect x="8" y="0" width="8" height="44" rx="2" fill="url(#steelGradient)" transform="rotate(30 20 22)" />
+      </g>
+
+      {/* Text */}
+      <text x="60" y="40" fontFamily="Inter, system-ui" fontSize="32" fontWeight="800" fill="white">
+        Rebar
+      </text>
+    </svg>
+  )
+}
+
+function Platform({ name, files }: { name: string; files: string }) {
+  return (
+    <div style={{
+      background: 'rgba(255,255,255,0.03)',
+      borderRadius: '12px',
+      padding: '20px 16px',
+      border: '1px solid rgba(255,255,255,0.05)'
+    }}>
+      <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '1.05rem' }}>{name}</div>
+      <div style={{ color: '#71717a', fontSize: '0.85rem', fontFamily: '"JetBrains Mono", monospace' }}>{files}</div>
+    </div>
+  )
+}
+
+function ProfileCard({
+  name,
+  emoji,
+  color,
+  description,
+  features,
+  recommended
+}: {
+  name: string;
+  emoji: string;
+  color: string;
+  description: string;
+  features: string[];
+  recommended?: boolean;
+}) {
+  return (
+    <div style={{
+      background: `rgba(255,255,255,0.02)`,
+      borderRadius: '16px',
+      padding: '28px 24px',
+      border: recommended ? `2px solid ${color}` : '1px solid rgba(255,255,255,0.05)',
+      position: 'relative'
+    }}>
+      {recommended && (
+        <div style={{
+          position: 'absolute',
+          top: '-12px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          background: color,
+          color: '#000',
+          padding: '4px 12px',
+          borderRadius: '12px',
+          fontSize: '0.75rem',
+          fontWeight: 600
+        }}>
+          RECOMMENDED
+        </div>
+      )}
+      <div style={{ fontSize: '2rem', marginBottom: '12px' }}>{emoji}</div>
+      <h3 style={{ margin: '0 0 8px', fontSize: '1.3rem', color, fontWeight: 700 }}>{name}</h3>
+      <p style={{ color: '#a1a1aa', marginBottom: '20px', fontSize: '0.9rem', lineHeight: '1.5' }}>{description}</p>
+      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+        {features.map((f, i) => (
+          <li key={i} style={{
+            color: '#71717a',
+            fontSize: '0.85rem',
+            marginBottom: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px'
+          }}>
+            <span style={{ color }}>&#10003;</span> {f}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function Check({ title, desc }: { title: string; desc: string }) {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: '14px',
+      padding: '18px',
+      background: 'rgba(255,255,255,0.02)',
+      borderRadius: '12px',
+      border: '1px solid rgba(255,255,255,0.04)'
+    }}>
+      <span style={{
+        color: '#22c55e',
+        fontSize: '1.1rem',
+        background: 'rgba(34, 197, 94, 0.1)',
+        width: '28px',
+        height: '28px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '6px',
+        flexShrink: 0
+      }}>&#10003;</span>
+      <div>
+        <div style={{ fontWeight: 600, marginBottom: '4px' }}>{title}</div>
+        <div style={{ color: '#71717a', fontSize: '0.9rem' }}>{desc}</div>
+      </div>
+    </div>
+  )
+}
+
+function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features,
+  cta,
+  ctaHref,
+  available,
+  comingSoon
+}: {
+  name: string;
+  price: string;
+  period: string;
+  description: string;
+  features: string[];
+  cta: string;
+  ctaHref: string;
+  available?: boolean;
+  comingSoon?: boolean;
+}) {
+  return (
+    <div style={{
+      background: available ? 'rgba(34, 197, 94, 0.03)' : 'rgba(255,255,255,0.02)',
+      borderRadius: '16px',
+      padding: '32px 28px',
+      border: available ? '2px solid rgba(34, 197, 94, 0.3)' : '1px solid rgba(255,255,255,0.05)',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      {available && (
+        <div style={{
+          position: 'absolute',
+          top: '-12px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          background: '#22c55e',
+          color: '#000',
+          padding: '4px 12px',
+          borderRadius: '12px',
+          fontSize: '0.75rem',
+          fontWeight: 600
+        }}>
+          AVAILABLE NOW
+        </div>
+      )}
+      {comingSoon && (
+        <div style={{
+          position: 'absolute',
+          top: '-12px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          background: '#52525b',
+          color: '#fff',
+          padding: '4px 12px',
+          borderRadius: '12px',
+          fontSize: '0.75rem',
+          fontWeight: 600
+        }}>
+          COMING SOON
+        </div>
+      )}
+      <h3 style={{ margin: '0 0 8px', fontSize: '1.4rem', fontWeight: 700 }}>{name}</h3>
+      <div style={{ marginBottom: '12px' }}>
+        <span style={{ fontSize: '2.5rem', fontWeight: 800, color: available ? '#22c55e' : '#fff' }}>{price}</span>
+        {period && <span style={{ color: '#71717a', fontSize: '0.9rem' }}> {period}</span>}
+      </div>
+      <p style={{ color: '#a1a1aa', marginBottom: '24px', fontSize: '0.9rem', lineHeight: '1.5' }}>{description}</p>
+      <ul style={{ margin: '0 0 28px', padding: 0, listStyle: 'none', flex: 1 }}>
+        {features.map((f, i) => (
+          <li key={i} style={{
+            color: '#a1a1aa',
+            fontSize: '0.85rem',
+            marginBottom: '10px',
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: '10px'
+          }}>
+            <span style={{ color: available ? '#22c55e' : '#71717a', flexShrink: 0 }}>&#10003;</span>
+            <span>{f}</span>
+          </li>
+        ))}
+      </ul>
+      <a
+        href={ctaHref}
+        style={{
+          display: 'block',
+          textAlign: 'center',
+          background: available ? '#22c55e' : comingSoon ? 'transparent' : '#f59e0b',
+          color: available ? '#000' : comingSoon ? '#a1a1aa' : '#000',
+          padding: '12px 20px',
+          borderRadius: '8px',
+          fontWeight: 600,
+          textDecoration: 'none',
+          border: comingSoon ? '1px solid #52525b' : 'none'
+        }}
+      >
+        {cta}
+      </a>
+    </div>
+  )
+}
+
+function ComplianceBadge({ name }: { name: string }) {
+  return (
+    <div style={{
+      background: 'rgba(245, 158, 11, 0.1)',
+      border: '1px solid rgba(245, 158, 11, 0.3)',
+      borderRadius: '8px',
+      padding: '12px 24px',
+      fontWeight: 600,
+      fontSize: '0.95rem',
+      color: '#f59e0b'
+    }}>
+      {name}
+    </div>
+  )
+}
+
+function WaitlistForm() {
+  const [email, setEmail] = useState('');
+  const [interest, setInterest] = useState<'pro' | 'enterprise' | 'both'>('pro');
+  const [company, setCompany] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setStatus('loading');
+    setErrorMessage('');
+
+    try {
+      await supabaseInsert('waitlist', {
+        email,
+        interest,
+        company: company || null,
+        source: 'landing_page'
+      });
+      setStatus('success');
+      setEmail('');
+      setCompany('');
+    } catch (err) {
+      setStatus('error');
+      setErrorMessage(err instanceof Error ? err.message : 'Something went wrong');
+    }
+  };
+
+  if (status === 'success') {
+    return (
+      <div style={{
+        background: 'rgba(34, 197, 94, 0.1)',
+        border: '1px solid rgba(34, 197, 94, 0.3)',
+        borderRadius: '12px',
+        padding: '24px',
+        maxWidth: '400px',
+        margin: '0 auto'
+      }}>
+        <div style={{ color: '#22c55e', fontSize: '1.5rem', marginBottom: '8px' }}>&#10003;</div>
+        <div style={{ color: '#22c55e', fontWeight: 600, marginBottom: '4px' }}>You&apos;re on the list!</div>
+        <div style={{ color: '#a1a1aa', fontSize: '0.9rem' }}>We&apos;ll notify you when Pro/Enterprise launches.</div>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: '0 auto' }}>
+      <div style={{ marginBottom: '16px' }}>
+        <input
+          type="email"
+          required
+          placeholder="you@company.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '14px 18px',
+            borderRadius: '8px',
+            border: '1px solid #27272a',
+            background: '#18181b',
+            color: '#fff',
+            fontSize: '1rem',
+            outline: 'none'
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <input
+          type="text"
+          placeholder="Company (optional)"
+          value={company}
+          onChange={(e) => setCompany(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '14px 18px',
+            borderRadius: '8px',
+            border: '1px solid #27272a',
+            background: '#18181b',
+            color: '#fff',
+            fontSize: '1rem',
+            outline: 'none'
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px', display: 'flex', gap: '12px', justifyContent: 'center' }}>
+        {(['pro', 'enterprise', 'both'] as const).map((opt) => (
+          <label
+            key={opt}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              cursor: 'pointer',
+              color: interest === opt ? '#f59e0b' : '#71717a',
+              fontSize: '0.9rem'
+            }}
+          >
+            <input
+              type="radio"
+              name="interest"
+              value={opt}
+              checked={interest === opt}
+              onChange={() => setInterest(opt)}
+              style={{ accentColor: '#f59e0b' }}
+            />
+            {opt.charAt(0).toUpperCase() + opt.slice(1)}
+          </label>
+        ))}
+      </div>
+
+      {status === 'error' && (
+        <div style={{
+          color: '#ef4444',
+          fontSize: '0.85rem',
+          marginBottom: '12px',
+          padding: '8px 12px',
+          background: 'rgba(239, 68, 68, 0.1)',
+          borderRadius: '6px'
+        }}>
+          {errorMessage || 'Failed to join waitlist. Try again.'}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={status === 'loading'}
+        style={{
+          width: '100%',
+          background: status === 'loading' ? '#52525b' : 'linear-gradient(90deg, #f59e0b 0%, #ef4444 100%)',
+          color: '#000',
+          padding: '14px 32px',
+          borderRadius: '8px',
+          fontWeight: 600,
+          fontSize: '1rem',
+          border: 'none',
+          cursor: status === 'loading' ? 'not-allowed' : 'pointer'
+        }}
+      >
+        {status === 'loading' ? 'Joining...' : 'Join the Waitlist'}
+      </button>
+    </form>
+  );
+}