openship 0.1.0 → 0.1.1

package/apps/web/src/components/landing/dns-domains.tsx

@@ -0,0 +1,146 @@
+const STEPS = [
+  {
+    step: "1",
+    title: "Add your domain",
+    desc: "Type it in — apex, subdomain, or full wildcard. app.example.com, *.example.com, you name it.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+      </svg>
+    ),
+  },
+  {
+    step: "2",
+    title: "Copy DNS records",
+    desc: "One A record, one wildcard CNAME. We show you exactly what to paste — works with every DNS provider.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
+      </svg>
+    ),
+  },
+  {
+    step: "3",
+    title: "Wildcard SSL — done",
+    desc: "Wildcard certificates are issued and renewed automatically. Every subdomain is covered — *.yoursite.com, all HTTPS, zero config.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+      </svg>
+    ),
+  },
+];
+
+const HIGHLIGHTS = [
+  "Wildcard subdomains",
+  "Apex domains",
+  "Auto-renew SSL",
+  "Unlimited domains",
+  "No Certbot",
+  "No NGINX config",
+];
+
+export function DnsDomains() {
+  return (
+    <section className="relative py-28 sm:py-36">
+      <div className="section-divider mx-auto mb-28 max-w-4xl sm:mb-36" />
+
+      <div className="mx-auto max-w-7xl px-6">
+        {/* Header */}
+        <div className="mx-auto max-w-3xl text-center">
+          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-[var(--th-on-06)] bg-white/60 px-4 py-1.5 shadow-[0_1px_3px_rgba(0,0,0,.04)] backdrop-blur-sm">
+            <span className="text-[12px] font-medium tracking-[0.02em] th-text-secondary">
+              DNS &amp; domains
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Domains &amp; wildcards.
+            </span>
+            <span
+              className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em]"
+              style={{ color: "var(--th-on-40)" }}
+            >
+              SSL included for all.
+            </span>
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
+            Connect any domain — including full <strong className="th-text-heading">wildcard subdomains</strong> like{" "}
+            <code className="rounded-md border border-[var(--th-card-bd)] bg-[var(--th-sf-02)] px-1.5 py-0.5 font-mono text-[14px] th-text-heading">*.yoursite.com</code>.
+            Certificates auto-provision and auto-renew. Three steps, zero config.
+          </p>
+
+          {/* Highlight pills */}
+          <div className="mx-auto mt-5 flex flex-wrap justify-center gap-2">
+            {HIGHLIGHTS.map((h) => (
+              <span
+                key={h}
+                className="inline-flex items-center gap-1.5 rounded-full border border-[var(--th-on-06)] bg-white/60 px-3 py-1 text-[12px] font-medium backdrop-blur-sm th-text-secondary"
+              >
+                <svg className="h-3 w-3" style={{ color: "var(--th-clr-sea)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+                {h}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Steps — horizontal on desktop */}
+        <div className="mx-auto mt-16 grid max-w-4xl gap-6 md:grid-cols-3">
+          {STEPS.map((s) => (
+            <div
+              key={s.step}
+              className="group relative rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-6 shadow-[var(--th-card-shadow)] transition-colors hover:border-[var(--th-card-bd-hover)]"
+            >
+              {/* Step number */}
+              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: "var(--th-clr-sea-bg)", color: "var(--th-clr-sea)" }}>
+                {s.icon}
+              </div>
+              <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.1em] th-text-muted">
+                Step {s.step}
+              </p>
+              <h3 className="text-[16px] font-semibold th-text-heading">
+                {s.title}
+              </h3>
+              <p className="mt-1.5 text-[13px] leading-[1.6] th-text-body">
+                {s.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Visual example DNS */}
+        <div className="mx-auto mt-10 max-w-4xl overflow-hidden rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] font-mono text-[13px] shadow-[var(--th-card-shadow)]">
+          <div className="flex items-center justify-between border-b border-[var(--th-card-bd)] px-5 py-2.5">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.1em] th-text-muted">Your DNS provider</span>
+            <span className="flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase" style={{ background: "var(--th-clr-sea-wash)", color: "var(--th-clr-sea)" }}>Wildcard ready</span>
+          </div>
+          <div className="divide-y divide-[var(--th-card-bd)]">
+            <div className="grid grid-cols-[56px_1fr_1fr] items-center gap-4 px-5 py-3">
+              <span className="font-semibold" style={{ color: "var(--th-clr-sea)" }}>A</span>
+              <span className="th-text-heading">@</span>
+              <span className="th-text-muted">→ 95.216.xx.xx</span>
+            </div>
+            <div className="grid grid-cols-[56px_1fr_1fr] items-center gap-4 px-5 py-3" style={{ background: "var(--th-sf-01)" }}>
+              <span className="font-semibold" style={{ color: "var(--th-clr-sea)" }}>CNAME</span>
+              <span className="th-text-heading">*</span>
+              <span className="th-text-muted">→ proxy.openship.app</span>
+            </div>
+            <div className="grid grid-cols-[56px_1fr_1fr] items-center gap-4 px-5 py-3">
+              <span className="font-semibold" style={{ color: "var(--th-clr-plum)" }}>TXT</span>
+              <span className="th-text-heading">_acme-challenge</span>
+              <span className="th-text-muted">→ auto-managed by Openship</span>
+            </div>
+          </div>
+          <div className="border-t border-[var(--th-card-bd)] bg-[var(--th-sf-01)] px-5 py-2.5 text-[12px] th-text-muted">
+            <svg className="mr-1.5 inline h-3.5 w-3.5" style={{ color: "var(--th-clr-sea)" }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+            </svg>
+            Wildcard cert covers <strong className="th-text-heading">*.yoursite.com</strong> — every subdomain is HTTPS automatically
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/apps/web/src/components/landing/download-button.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePlatform, type Platform } from "@/hooks/use-platform";
+
+/* ── Platform icons ── */
+function AppleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+    </svg>
+  );
+}
+
+function WindowsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
+    </svg>
+  );
+}
+
+function LinuxIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.43.868.07 1.678-.467 1.975-1.484.1-.334.204-.669.305-1.004.2-.668.398-1.335.554-2 .156-.668.297-1.338.378-2.004a2.08 2.08 0 00-.193-1.2c.4-.748.757-1.336.914-2.007.199-.869.099-1.87-.399-3.003-.564-1.332-1.272-2.8-1.743-4.287-.216-.668-.39-1.314-.428-2.008-.05-.87.154-1.868.473-2.865.32-.998.721-2.093.66-3.202C18.108.784 16.985 0 15.595 0h-.003c-.578.002-1.129.2-1.597.468a4.534 4.534 0 00-1.482 1.196c-.012.016-.018.019-.03.019z" />
+    </svg>
+  );
+}
+
+function DownloadIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+    </svg>
+  );
+}
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  apple: AppleIcon,
+  windows: WindowsIcon,
+  linux: LinuxIcon,
+  download: DownloadIcon,
+};
+
+/* ── Dropdown items ── */
+const DROPDOWN_PLATFORMS: { platform: Platform; label: string; icon: string }[] = [
+  { platform: "mac-arm", label: "Mac (Apple Silicon)", icon: "apple" },
+  { platform: "mac-intel", label: "Mac (Intel)", icon: "apple" },
+  { platform: "windows", label: "Windows", icon: "windows" },
+  { platform: "linux", label: "Linux", icon: "linux" },
+];
+
+/* ── Props ── */
+interface DownloadButtonProps {
+  /** Visual variant */
+  variant?: "primary" | "ghost";
+  /** Additional classes */
+  className?: string;
+  /** Size */
+  size?: "default" | "large";
+}
+
+export function DownloadButton({
+  variant = "primary",
+  className = "",
+  size = "default",
+}: DownloadButtonProps) {
+  const { downloadUrl, icon, platform, getDownloadUrl } = usePlatform();
+  const Icon = ICON_MAP[icon];
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+
+  const sizeClasses =
+    size === "large" ? "py-3 text-[15px]" : "py-2.5 text-[14px]";
+
+  const btnBase =
+    variant === "primary"
+      ? `th-btn rounded-full font-medium ${sizeClasses}`
+      : `th-btn-ghost rounded-full font-medium ${sizeClasses}`;
+
+  return (
+    <div ref={ref} className={`relative inline-flex ${className}`}>
+      {/* Main download link */}
+      <a
+        href={downloadUrl}
+        className={`${btnBase} pl-5 pr-3 flex items-center gap-2 rounded-r-none border-r-0`}
+      >
+        <Icon className="h-[20px] w-[20px]" />
+        <span>Download</span>
+      </a>
+
+      {/* Dropdown toggle */}
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={`${btnBase} px-2 rounded-l-none border-l border-l-white/20 flex items-center`}
+        aria-label="Other platforms"
+      >
+        <ChevronIcon className={`h-3.5 w-3.5 transition-transform mr-2 ${open ? "rotate-180" : ""}`} />
+      </button>
+
+      {/* Dropdown menu */}
+      {open && (
+        <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-[9999] min-w-[200px] overflow-hidden rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[0_12px_40px_rgba(0,0,0,.12)]">
+          <p className="px-3.5 pt-3 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.08em] th-text-muted">
+            All platforms
+          </p>
+          {DROPDOWN_PLATFORMS.map((p) => {
+            const PIcon = ICON_MAP[p.icon];
+            const isCurrent = p.platform === platform;
+            return (
+              <a
+                key={p.platform}
+                href={getDownloadUrl(p.platform)}
+                className="flex items-center gap-2.5 px-3.5 py-2.5 text-[13px] font-medium transition-colors hover:bg-[var(--th-sf-02)] th-text-heading"
+                onClick={() => setOpen(false)}
+              >
+                <PIcon className="h-4 w-4 th-text-secondary" />
+                {p.label}
+                {isCurrent && (
+                  <span className="ml-auto rounded-full bg-[var(--th-accent-violet)] px-2 py-0.5 text-[10px] font-bold text-white">
+                    Detected
+                  </span>
+                )}
+              </a>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/web/src/components/landing/features/ai-visual.tsx

@@ -0,0 +1,48 @@
+export function AiVisual() {
+  return (
+    <svg viewBox="0 0 520 260" fill="none" className="w-full h-auto">
+      {/* Terminal window */}
+      <rect x="20" y="32" width="210" height="148" rx="12"
+        fill="currentColor" fillOpacity={0.05} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.2} />
+      {/* Title bar */}
+      <circle cx="38" cy="50" r="3.5" fill="currentColor" fillOpacity={0.2} />
+      <circle cx="50" cy="50" r="3.5" fill="currentColor" fillOpacity={0.2} />
+      <circle cx="62" cy="50" r="3.5" fill="currentColor" fillOpacity={0.2} />
+      <line x1="20" y1="62" x2="230" y2="62" stroke="currentColor" strokeWidth=".5" strokeOpacity={0.12} />
+      {/* Terminal lines */}
+      <text x="34" y="82" fontSize="11.5" fontFamily="monospace" fill="currentColor" fillOpacity={0.35}>$</text>
+      <text x="46" y="82" fontSize="11.5" fontFamily="monospace" fill="currentColor" fillOpacity={0.65}>openship deploy</text>
+      <text x="34" y="102" fontSize="11.5" fontFamily="monospace" fill="currentColor" fillOpacity={0.75}>✕ Build failed</text>
+      <text x="34" y="120" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.35}>Module not found</text>
+      <text x="34" y="136" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.3}>src/index.ts:14</text>
+      <text x="34" y="152" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.25}>ERR_MODULE_NOT_FOUND</text>
+
+      {/* Arrow: terminal → AI */}
+      <line x1="236" y1="106" x2="280" y2="106" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.25} strokeDasharray="4 4" />
+      <path d="M277 101 L286 106 L277 111" fill="none" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.35} />
+
+      {/* AI Agent block */}
+      <rect x="292" y="32" width="195" height="148" rx="12"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      {/* Sparkles */}
+      <path d="M390 60 L393 70 L403 73 L393 76 L390 86 L387 76 L377 73 L387 70 Z" fill="currentColor" fillOpacity={0.45} />
+      <path d="M340 50 L342 56 L348 58 L342 60 L340 66 L338 60 L332 58 L338 56 Z" fill="currentColor" fillOpacity={0.3} />
+      <path d="M440 48 L441.5 52 L446 54 L441.5 56 L440 60 L438.5 56 L434 54 L438.5 52 Z" fill="currentColor" fillOpacity={0.2} />
+      <text x="390" y="110" textAnchor="middle" fontSize="15" fontWeight="600" fill="currentColor" fillOpacity={0.85}>AI Agent</text>
+      <text x="390" y="128" textAnchor="middle" fontSize="11" fill="currentColor" fillOpacity={0.4}>Analyzing error…</text>
+      {/* Fix result */}
+      <line x1="310" y1="146" x2="470" y2="146" stroke="currentColor" strokeWidth=".5" strokeOpacity={0.12} />
+      <circle cx="320" cy="160" r="3" fill="currentColor" fillOpacity={0.4} />
+      <text x="330" y="164" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.45}>fix applied ✓</text>
+
+      {/* Bottom flow: Error → Diagnose → Fixed */}
+      <text x="125" y="224" textAnchor="middle" fontSize="12" fontWeight="500" fill="currentColor" fillOpacity={0.5}>Error</text>
+      <line x1="162" y1="220" x2="218" y2="220" stroke="currentColor" strokeWidth="1" strokeOpacity={0.2} />
+      <path d="M215 216 L223 220 L215 224" fill="none" stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="260" y="224" textAnchor="middle" fontSize="12" fontWeight="500" fill="currentColor" fillOpacity={0.5}>Diagnose</text>
+      <line x1="300" y1="220" x2="356" y2="220" stroke="currentColor" strokeWidth="1" strokeOpacity={0.2} />
+      <path d="M353 216 L361 220 L353 224" fill="none" stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="395" y="224" textAnchor="middle" fontSize="12" fontWeight="600" fill="currentColor" fillOpacity={0.7}>Fixed ✓</text>
+    </svg>
+  );
+}

package/apps/web/src/components/landing/features/cloud-visual.tsx

@@ -0,0 +1,44 @@
+export function CloudVisual() {
+  return (
+    <svg viewBox="0 0 540 260" fill="none" className="w-full h-auto">
+      {/* ── Left: Cloud shape ── */}
+      <path
+        d="M48 158 C46 158 30 100 92 82 C112 34 182 26 204 68 C236 44 280 66 276 112 C310 108 324 140 304 166 L48 166 Z"
+        fill="currentColor" fillOpacity=".05" stroke="currentColor" strokeWidth="1.8" strokeOpacity=".4" strokeLinejoin="round"
+      />
+      <circle cx="118" cy="108" r="5" fill="currentColor" fillOpacity=".08" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".3" />
+      <circle cx="118" cy="108" r="2" fill="currentColor" fillOpacity=".65" />
+      <circle cx="176" cy="94" r="5" fill="currentColor" fillOpacity=".08" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".3" />
+      <circle cx="176" cy="94" r="2" fill="currentColor" fillOpacity=".65" />
+      <circle cx="232" cy="106" r="5" fill="currentColor" fillOpacity=".08" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".3" />
+      <circle cx="232" cy="106" r="2" fill="currentColor" fillOpacity=".65" />
+      <line x1="123" y1="107" x2="171" y2="96" stroke="currentColor" strokeWidth=".8" strokeOpacity=".2" />
+      <line x1="181" y1="96" x2="227" y2="105" stroke="currentColor" strokeWidth=".8" strokeOpacity=".2" />
+      <text x="175" y="196" textAnchor="middle" fontSize="14" fontWeight="600" fill="currentColor" fillOpacity=".75">Managed</text>
+      <text x="175" y="214" textAnchor="middle" fontSize="11" fill="currentColor" fillOpacity=".4">Auto-scaling · Zero ops</text>
+
+      {/* ── Center divider ── */}
+      <line x1="278" y1="50" x2="278" y2="175" stroke="currentColor" strokeWidth="1" strokeOpacity=".15" strokeDasharray="4 4" />
+      <text x="278" y="196" textAnchor="middle" fontSize="11" fontWeight="700" fill="currentColor" fillOpacity=".3" letterSpacing=".12em">OR</text>
+
+      {/* ── Right: Server rack ── */}
+      <rect x="336" y="60" width="154" height="30" rx="6" fill="currentColor" fillOpacity=".04" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".25" />
+      <rect x="336" y="96" width="154" height="30" rx="6" fill="currentColor" fillOpacity=".04" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".25" />
+      <rect x="336" y="132" width="154" height="30" rx="6" fill="currentColor" fillOpacity=".04" stroke="currentColor" strokeWidth="1.2" strokeOpacity=".25" />
+      <circle cx="352" cy="75" r="2.5" fill="currentColor" fillOpacity=".45" />
+      <circle cx="362" cy="75" r="2.5" fill="currentColor" fillOpacity=".25" />
+      <circle cx="352" cy="111" r="2.5" fill="currentColor" fillOpacity=".45" />
+      <circle cx="362" cy="111" r="2.5" fill="currentColor" fillOpacity=".25" />
+      <circle cx="352" cy="147" r="2.5" fill="currentColor" fillOpacity=".45" />
+      <circle cx="362" cy="147" r="2.5" fill="currentColor" fillOpacity=".25" />
+      <line x1="378" y1="68" x2="478" y2="68" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <line x1="378" y1="82" x2="478" y2="82" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <line x1="378" y1="104" x2="478" y2="104" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <line x1="378" y1="118" x2="478" y2="118" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <line x1="378" y1="140" x2="478" y2="140" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <line x1="378" y1="154" x2="478" y2="154" stroke="currentColor" strokeWidth=".6" strokeOpacity=".1" />
+      <text x="413" y="196" textAnchor="middle" fontSize="14" fontWeight="600" fill="currentColor" fillOpacity=".75">Self-Hosted</text>
+      <text x="413" y="214" textAnchor="middle" fontSize="11" fill="currentColor" fillOpacity=".4">Your servers · Full control</text>
+    </svg>
+  );
+}

package/apps/web/src/components/landing/features/git-visual.tsx

@@ -0,0 +1,61 @@
+export function GitVisual() {
+  return (
+    <svg viewBox="0 0 520 260" fill="none" className="w-full h-auto">
+      {/* Main branch line */}
+      <line x1="50" y1="100" x2="470" y2="100" stroke="currentColor" strokeWidth="2" strokeOpacity={0.35} strokeLinecap="round" />
+
+      {/* Feature branch arc */}
+      <path d="M140 100 C155 100 162 62 182 56" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.25} fill="none" />
+      <line x1="182" y1="56" x2="308" y2="56" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.25} strokeLinecap="round" />
+      <path d="M308 56 C328 62 335 100 350 100" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.25} fill="none" />
+
+      {/* Commits on main */}
+      <circle cx="50" cy="100" r="6" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.4} />
+      <circle cx="50" cy="100" r="2" fill="currentColor" fillOpacity={0.6} />
+      <circle cx="140" cy="100" r="6" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.4} />
+      <circle cx="140" cy="100" r="2" fill="currentColor" fillOpacity={0.6} />
+      {/* Merge commit — emphasized */}
+      <circle cx="350" cy="100" r="8" fill="currentColor" fillOpacity={0.1} stroke="currentColor" strokeWidth="2" strokeOpacity={0.6} />
+      <circle cx="350" cy="100" r="3" fill="currentColor" fillOpacity={0.7} />
+      <circle cx="440" cy="100" r="6" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.4} />
+      <circle cx="440" cy="100" r="2" fill="currentColor" fillOpacity={0.6} />
+
+      {/* Feature branch commits */}
+      <circle cx="222" cy="56" r="5" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.3} />
+      <circle cx="222" cy="56" r="1.5" fill="currentColor" fillOpacity={0.5} />
+      <circle cx="280" cy="56" r="5" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.3} />
+      <circle cx="280" cy="56" r="1.5" fill="currentColor" fillOpacity={0.5} />
+
+      {/* Labels — main commits */}
+      <text x="50" y="124" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.4}>a3f2c</text>
+      <text x="140" y="124" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.4}>b7e4a</text>
+      <text x="350" y="126" textAnchor="middle" fontSize="11" fontFamily="monospace" fontWeight="600" fill="currentColor" fillOpacity={0.7}>merge</text>
+      <text x="440" y="124" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="currentColor" fillOpacity={0.4}>deploy</text>
+
+      {/* Branch labels */}
+      <text x="251" y="42" textAnchor="middle" fontSize="11" fontWeight="600" fill="currentColor" fillOpacity={0.55}>feat/dashboard</text>
+      <text x="30" y="146" fontSize="11" fontWeight="600" fill="currentColor" fillOpacity={0.55}>main</text>
+
+      {/* Deploy arrow */}
+      <line x1="440" y1="112" x2="440" y2="162" stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.2} strokeDasharray="3 3" />
+      <path d="M436 159 L440 168 L444 159" fill="currentColor" fillOpacity={0.25} />
+
+      {/* Pipeline bar */}
+      <rect x="80" y="180" width="360" height="44" rx="10" fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.2} />
+      {/* Build */}
+      <circle cx="160" cy="202" r="4" fill="currentColor" fillOpacity={0.08} stroke="currentColor" strokeWidth="1" strokeOpacity={0.35} />
+      <path d="M157.5 202 L159.5 204 L163 200" stroke="currentColor" strokeWidth="1" strokeOpacity={0.5} strokeLinecap="round" fill="none" />
+      <text x="174" y="206" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.5}>Build</text>
+      <line x1="220" y1="190" x2="220" y2="214" stroke="currentColor" strokeOpacity={0.1} strokeWidth=".6" />
+      {/* Test */}
+      <circle cx="260" cy="202" r="4" fill="currentColor" fillOpacity={0.08} stroke="currentColor" strokeWidth="1" strokeOpacity={0.35} />
+      <path d="M257.5 202 L259.5 204 L263 200" stroke="currentColor" strokeWidth="1" strokeOpacity={0.5} strokeLinecap="round" fill="none" />
+      <text x="274" y="206" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.5}>Test</text>
+      <line x1="320" y1="190" x2="320" y2="214" stroke="currentColor" strokeOpacity={0.1} strokeWidth=".6" />
+      {/* Live */}
+      <circle cx="360" cy="202" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.5} />
+      <path d="M357.5 202 L359.5 204 L363 200" stroke="currentColor" strokeWidth="1" strokeOpacity={0.6} strokeLinecap="round" fill="none" />
+      <text x="374" y="206" fontSize="11" fontWeight="600" fill="currentColor" fillOpacity={0.65}>Live</text>
+    </svg>
+  );
+}