vibecarbon 0.1.0

package/carbon/src/client/pages/Docs.tsx

@@ -0,0 +1,372 @@
+import { BookOpen, ChevronRight, Menu, Search, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Link, Navigate, useNavigate, useParams } from 'react-router-dom';
+import { Wordmark } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { SEO } from '@/components/SEO';
+import { Button } from '@/components/ui/button';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  type PackageManager,
+  replacePackageManager,
+  usePackageManager,
+} from '@/hooks/usePackageManager';
+import { getPage, pages } from '@/lib/docs';
+import { type SearchResult, searchDocs } from '@/lib/docs-search';
+import { cn } from '@/lib/utils';
+
+function DocsSearch({ onNavigate }: { onNavigate?: () => void }) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+
+  const handleSearch = useCallback((value: string) => {
+    setQuery(value);
+    if (value.length >= 2) {
+      setResults(searchDocs(value));
+      setIsOpen(true);
+    } else {
+      setResults([]);
+      setIsOpen(false);
+    }
+  }, []);
+
+  const handleSelect = useCallback(
+    (slug: string) => {
+      navigate(`/docs/${slug}`);
+      setQuery('');
+      setIsOpen(false);
+      onNavigate?.();
+    },
+    [navigate, onNavigate]
+  );
+
+  // Cmd+K / Ctrl+K keyboard shortcut
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <div className="relative mb-4">
+      <div className="relative">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => handleSearch(e.target.value)}
+          onFocus={() => query.length >= 2 && setIsOpen(true)}
+          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+          placeholder="Search docs..."
+          className="w-full rounded-md border border-border bg-muted/50 pl-8 pr-12 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+        <kbd className="absolute right-2 top-1/2 -translate-y-1/2 hidden sm:inline-flex items-center gap-0.5 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </div>
+
+      {/* Results dropdown */}
+      {isOpen && results.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-lg">
+          {results.map((result) => (
+            <button
+              key={result.slug}
+              type="button"
+              onMouseDown={() => handleSelect(result.slug)}
+              className="w-full px-3 py-2 text-left text-sm hover:bg-accent transition-colors first:rounded-t-md last:rounded-b-md"
+            >
+              <div className="font-medium">{result.title}</div>
+              <div className="text-xs text-muted-foreground truncate">{result.snippet}</div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {isOpen && query.length >= 2 && results.length === 0 && (
+        <div className="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover p-3 shadow-lg">
+          <p className="text-sm text-muted-foreground">No results found.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DocsSidebar({
+  currentSlug,
+  onNavigate,
+}: {
+  currentSlug: string;
+  onNavigate?: () => void;
+}) {
+  return (
+    <nav className="space-y-1">
+      <DocsSearch onNavigate={onNavigate} />
+      {pages.map((page) => (
+        <Link
+          key={page.slug}
+          to={`/docs/${page.slug}`}
+          onClick={onNavigate}
+          className={cn(
+            'flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors',
+            page.slug === currentSlug
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+          )}
+        >
+          {page.frontmatter.title}
+        </Link>
+      ))}
+    </nav>
+  );
+}
+
+export function DocsIndex() {
+  // Redirect to the first doc page
+  if (pages.length > 0) {
+    return <Navigate to={`/docs/${pages[0].slug}`} replace />;
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <main className="mx-auto max-w-3xl px-6 pt-32 pb-24 text-center">
+        <h1 className="mb-4 text-2xl font-bold">No documentation yet</h1>
+        <p className="text-muted-foreground">Check back soon!</p>
+      </main>
+    </div>
+  );
+}
+
+const PM_OPTIONS: PackageManager[] = ['pnpm', 'npm', 'bun'];
+
+function PackageManagerSwitcher({
+  pm,
+  onChange,
+}: {
+  pm: PackageManager;
+  onChange: (pm: PackageManager) => void;
+}) {
+  return (
+    <ToggleGroup
+      value={[pm]}
+      onValueChange={(values) => {
+        const next = values[0] as PackageManager | undefined;
+        if (next) onChange(next);
+      }}
+      variant="outline"
+      size="sm"
+      className="shrink-0"
+    >
+      {PM_OPTIONS.map((option) => (
+        <ToggleGroupItem key={option} value={option} className="text-xs px-2.5">
+          {option}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export function DocsPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const page = slug ? getPage(slug) : undefined;
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [pm, setPm] = usePackageManager();
+
+  const mdxComponents = useMemo(
+    () => ({
+      code: ((rawProps: unknown) => {
+        const { children, ...props } = rawProps as Record<string, unknown> & {
+          children?: React.ReactNode;
+        };
+        const content =
+          typeof children === 'string' && children.includes('pnpm')
+            ? replacePackageManager(children, pm)
+            : children;
+        return <code {...props}>{content}</code>;
+      }) as React.ComponentType<unknown>,
+    }),
+    [pm]
+  );
+
+  if (!page) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Nav />
+        <main className="mx-auto max-w-3xl px-6 pt-32 pb-24 text-center">
+          <h1 className="mb-4 text-2xl font-bold">Page not found</h1>
+          <Button variant="outline" asChild>
+            <Link to="/docs" className="inline-flex items-center gap-2">
+              <BookOpen className="size-4 shrink-0" />
+              Browse docs
+            </Link>
+          </Button>
+        </main>
+      </div>
+    );
+  }
+
+  // Find prev/next pages
+  const currentIndex = pages.findIndex((p) => p.slug === slug);
+  const prevPage = currentIndex > 0 ? pages[currentIndex - 1] : null;
+  const nextPage = currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null;
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Nav />
+      <SEO title={page.frontmatter.title} description={page.frontmatter.description} />
+
+      <div className="mx-auto max-w-7xl px-6 pt-28 pb-24">
+        <div className="flex gap-10">
+          {/* Desktop sidebar */}
+          <aside className="hidden lg:block w-56 shrink-0 sticky top-28 h-[calc(100vh-8rem)] overflow-y-auto">
+            <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Documentation
+            </h3>
+            <DocsSidebar currentSlug={slug || ''} />
+          </aside>
+
+          {/* Mobile sidebar toggle */}
+          <Button
+            variant="outline"
+            size="icon-sm"
+            className="fixed bottom-6 right-6 z-50 lg:hidden shadow-lg"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          >
+            {sidebarOpen ? <X className="size-4" /> : <Menu className="size-4" />}
+          </Button>
+
+          {/* Mobile sidebar overlay */}
+          {sidebarOpen && (
+            <div
+              role="button"
+              tabIndex={0}
+              aria-label="Close sidebar"
+              className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+              onClick={() => setSidebarOpen(false)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') setSidebarOpen(false);
+              }}
+            >
+              <aside
+                className="absolute left-0 top-20 bottom-0 w-64 bg-background border-r p-6 overflow-y-auto"
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={() => {}}
+              >
+                <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Documentation
+                </h3>
+                <DocsSidebar currentSlug={slug || ''} onNavigate={() => setSidebarOpen(false)} />
+              </aside>
+            </div>
+          )}
+
+          {/* Main content */}
+          <main className="min-w-0 flex-1">
+            <header className="mb-10">
+              <div className="flex items-start justify-between gap-4">
+                <h1 className="mb-3 text-4xl font-black tracking-tight">
+                  {page.frontmatter.title}
+                </h1>
+                <PackageManagerSwitcher pm={pm} onChange={setPm} />
+              </div>
+              {page.frontmatter.description && (
+                <p className="text-lg text-muted-foreground">{page.frontmatter.description}</p>
+              )}
+            </header>
+
+            <article className="prose prose-invert max-w-none">
+              <page.Component components={mdxComponents} />
+            </article>
+
+            {/* Prev / Next navigation */}
+            <div className="mt-16 border-t pt-8 flex items-center justify-between gap-4">
+              {prevPage ? (
+                <Link
+                  to={`/docs/${prevPage.slug}`}
+                  className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <ChevronRight className="size-4 rotate-180 group-hover:-translate-x-0.5 transition-transform" />
+                  {prevPage.frontmatter.title}
+                </Link>
+              ) : (
+                <div />
+              )}
+              {nextPage && (
+                <Link
+                  to={`/docs/${nextPage.slug}`}
+                  className="group flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {nextPage.frontmatter.title}
+                  <ChevronRight className="size-4 group-hover:translate-x-0.5 transition-transform" />
+                </Link>
+              )}
+            </div>
+          </main>
+        </div>
+      </div>
+
+      <DocsFooter />
+    </div>
+  );
+}
+
+/** Default export for React.lazy() route-level code splitting */
+export default function DocsRoute() {
+  const { slug } = useParams<{ slug: string }>();
+  return slug ? <DocsPage /> : <DocsIndex />;
+}
+
+function DocsFooter() {
+  return (
+    <footer className="border-t border-border py-8">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 sm:flex-row">
+        <Wordmark size="sm" />
+        <div className="flex items-center gap-6">
+          <Link
+            to="/"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Home
+          </Link>
+          <Link
+            to="/docs"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Docs
+          </Link>
+          <Link
+            to="/blog"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Blog
+          </Link>
+          <Link
+            to="/privacy"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Privacy
+          </Link>
+          <Link
+            to="/terms"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Terms
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/carbon/src/client/pages/ForgotPassword.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Wordmark } from '../components/Logo';
+import { Button } from '../components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { supabase } from '../lib/supabase';
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/reset-password`,
+      });
+
+      if (error) throw error;
+
+      // Always show success to prevent email enumeration
+      setSuccess(true);
+    } catch (_err) {
+      // Show generic message to prevent email enumeration
+      setError('Unable to send reset email. Please try again later.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      {/* Header */}
+      <header className="h-20">
+        <div className="mx-auto max-w-7xl h-full px-6 flex items-center">
+          <Link to="/" className="group">
+            <Wordmark size="lg" />
+          </Link>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md shadow-lg shadow-primary/5">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl text-primary">Reset password</CardTitle>
+            <CardDescription>
+              {success
+                ? 'Check your email for a reset link'
+                : "Enter your email and we'll send you a reset link"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {success ? (
+              <div className="space-y-4">
+                <div className="p-3 text-sm text-emerald-600 bg-emerald-50 dark:bg-emerald-950/30 dark:text-emerald-400 rounded-lg">
+                  If an account exists with that email, you'll receive a password reset link
+                  shortly.
+                </div>
+                <p className="text-center text-sm text-muted-foreground">
+                  Didn't receive an email?{' '}
+                  <button
+                    type="button"
+                    onClick={() => setSuccess(false)}
+                    className="text-primary hover:underline font-medium cursor-pointer"
+                  >
+                    Try again
+                  </button>
+                </p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {error && (
+                  <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-lg">
+                    {error}
+                  </div>
+                )}
+
+                <Input
+                  type="email"
+                  placeholder="Email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoFocus
+                />
+
+                <Button type="submit" disabled={loading} className="w-full">
+                  {loading ? 'Sending...' : 'Send reset link'}
+                </Button>
+              </form>
+            )}
+
+            <p className="text-center text-sm text-muted-foreground">
+              Remember your password?{' '}
+              <Link to="/login" className="text-primary hover:underline font-medium">
+                Sign in
+              </Link>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/carbon/src/client/pages/Home.tsx

@@ -0,0 +1,187 @@
+/**
+ * Vibecarbon marketing homepage.
+ *
+ * Route: /
+ */
+
+import { motion } from 'framer-motion';
+import { ExternalLink, Lock } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import hyperformantLogo from '../assets/hyperformant-dark.svg';
+import claudeLogo from '../assets/logos/claude-code.svg';
+import geminiLogo from '../assets/logos/gemini-cli.svg';
+import openaiLogo from '../assets/logos/openai-codex.svg';
+import { AIIntegrationSection } from '../components/AIIntegrationSection';
+import { ArchitectureSection } from '../components/ArchitectureSection';
+import { ComparisonSection } from '../components/ComparisonSection';
+import { CTAFooter } from '../components/CTAFooter';
+import { FilmGrainOverlay } from '../components/effects/FilmGrainOverlay';
+import { VGlowEffect } from '../components/effects/VGlowEffect';
+import { FAQSection } from '../components/FAQSection';
+import Hero from '../components/Hero';
+import { LogoStrip } from '../components/LogoStrip';
+import { MetricsStrip } from '../components/MetricsStrip';
+import { NewsletterSignup } from '../components/NewsletterSignup';
+import { PricingSection } from '../components/PricingSection';
+import { SEO } from '../components/SEO';
+import { ScrollSection } from '../components/scroll/ScrollSection';
+import { ScrollytellingProvider } from '../components/scroll/ScrollytellingProvider';
+import { TechStackSection } from '../components/TechStackSection';
+import { WorkflowSection } from '../components/WorkflowSection';
+
+function VibecarbonCTAFooter() {
+  const { t } = useTranslation();
+  return (
+    <CTAFooter
+      gradient="bg-gradient-to-br from-fuchsia-950 via-fuchsia-900/80 to-secondary-accent/60"
+      floatingElements={
+        <div className="absolute inset-0 flex items-end justify-center gap-4 pb-2">
+          {/* Shared glow behind the group */}
+          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[400px] h-[200px] rounded-full bg-primary/15 blur-[60px]" />
+          {[
+            { src: claudeLogo, scale: 1.2, delay: 0 },
+            { src: geminiLogo, scale: 1.0, delay: 0.3 },
+            { src: openaiLogo, scale: 1.1, delay: 0.6 },
+          ].map(({ src, scale, delay }, i) => (
+            <motion.div
+              key={src}
+              className="relative p-5 rounded-2xl bg-white/8 border border-white/15 backdrop-blur-md shadow-2xl"
+              style={{ scale }}
+              animate={{ y: [0, -10, 0], rotate: [0, i % 2 === 0 ? 3 : -3, 0] }}
+              transition={{
+                duration: 3.5 + i * 0.4,
+                repeat: Infinity,
+                ease: 'easeInOut',
+                delay,
+              }}
+            >
+              <img src={src} alt="" width={64} height={64} className="brightness-0 invert" />
+            </motion.div>
+          ))}
+        </div>
+      }
+      footerLinks={
+        <>
+          <div className="flex items-center gap-6">
+            <a
+              href="https://github.com/hyperformant/vibecarbon/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-white/60 transition-colors hover:text-white flex items-center gap-1"
+            >
+              GitHub
+              <ExternalLink className="size-3" />
+            </a>
+            <Link to="/docs" className="text-sm text-white/60 transition-colors hover:text-white">
+              {t('landing.footer.userDocs')}
+            </Link>
+            <Link
+              to="/api/docs"
+              className="text-sm text-white/60 transition-colors hover:text-white"
+            >
+              {t('landing.footer.apiDocs')}
+            </Link>
+            <Link to="/blog" className="text-sm text-white/60 transition-colors hover:text-white">
+              {t('landing.footer.blog')}
+            </Link>
+            <Link
+              to="/changelog"
+              className="text-sm text-white/60 transition-colors hover:text-white"
+            >
+              {t('landing.footer.changelog')}
+            </Link>
+            <Link
+              to="/contact"
+              className="text-sm text-white/60 transition-colors hover:text-white"
+            >
+              {t('landing.footer.contact')}
+            </Link>
+            <Link
+              to="/privacy"
+              className="text-sm text-white/60 transition-colors hover:text-white"
+            >
+              {t('landing.footer.privacy')}
+            </Link>
+            <Link to="/terms" className="text-sm text-white/60 transition-colors hover:text-white">
+              {t('landing.footer.terms')}
+            </Link>
+          </div>
+          <a
+            href="https://hyperformant.co/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-sm text-white/60 hover:text-white transition-colors"
+          >
+            <img src={hyperformantLogo} alt="Hyperformant" className="h-5" />
+          </a>
+        </>
+      }
+    >
+      <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 text-sm font-medium text-white">
+        <Lock className="size-4" />
+        {t('landing.cta.badge')}
+      </div>
+
+      <h2 className="mb-4 text-3xl font-black tracking-tight text-white md:text-4xl">
+        {t('landing.cta.headline')}
+      </h2>
+
+      <p className="mb-8 text-lg text-white/80">{t('landing.cta.subheading')}</p>
+
+      <NewsletterSignup className="justify-center max-w-md mx-auto" />
+    </CTAFooter>
+  );
+}
+
+export default function VibecarbonHome() {
+  return (
+    <ScrollytellingProvider>
+      <div className="relative min-h-screen bg-background film-grain">
+        <SEO description="Professional grade vibecoding. Full-stack, security-hardened, auto-everything SaaS apps in minutes." />
+        <FilmGrainOverlay opacity={0.025} />
+        <VGlowEffect />
+
+        <ScrollSection id="hero" disableEffects>
+          <Hero />
+        </ScrollSection>
+
+        <LogoStrip />
+
+        <div className="bg-background">
+          <ScrollSection id="workflow">
+            <WorkflowSection />
+          </ScrollSection>
+
+          <MetricsStrip />
+
+          <ScrollSection id="comparison">
+            <ComparisonSection />
+          </ScrollSection>
+
+          <ScrollSection id="ai-integration">
+            <AIIntegrationSection />
+          </ScrollSection>
+
+          <ScrollSection id="tech-stack">
+            <TechStackSection />
+          </ScrollSection>
+
+          <ScrollSection id="architecture">
+            <ArchitectureSection />
+          </ScrollSection>
+
+          <ScrollSection id="pricing">
+            <PricingSection />
+          </ScrollSection>
+
+          <ScrollSection id="faq">
+            <FAQSection />
+          </ScrollSection>
+
+          <VibecarbonCTAFooter />
+        </div>
+      </div>
+    </ScrollytellingProvider>
+  );
+}