openship 0.1.1 → 0.1.7

package/apps/web/src/components/landing/dashboard.tsx

@@ -1,407 +0,0 @@
-const CAPABILITIES = [
-  {
-    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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
-      </svg>
-    ),
-    title: "One-click deploys",
-    desc: "Push, preview, promote — all from a single screen.",
-  },
-  {
-    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>
-    ),
-    title: "Domains & SSL",
-    desc: "Add domains, wildcard certs auto-provision. Visual DNS status.",
-  },
-  {
-    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="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
-      </svg>
-    ),
-    title: "Real-time monitoring",
-    desc: "CPU, memory, network, build logs — live charts and streaming.",
-  },
-  {
-    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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
-      </svg>
-    ),
-    title: "Databases & services",
-    desc: "Spin up Postgres, Redis, or any Docker service. Visual management.",
-  },
-  {
-    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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
-      </svg>
-    ),
-    title: "Backups & rollback",
-    desc: "Scheduled snapshots, one-click restore. Never lose a deployment.",
-  },
-  {
-    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="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
-      </svg>
-    ),
-    title: "Auto-scale controls",
-    desc: "Toggle auto-scaling per project from the app. Visual resource graphs.",
-  },
-];
-
-/* ── AI assistant capabilities ── */
-const AI_FEATURES = [
-  {
-    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.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
-      </svg>
-    ),
-    title: "AI deploys for you",
-    desc: "Tell the AI what you want deployed and it handles repo connection, build config, environment variables, and domain setup — start to finish.",
-  },
-  {
-    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>
-    ),
-    title: "Security fully configured",
-    desc: "Firewall rules, SSL, rate limiting, CORS, headers — the AI configures production-grade security by default. Disable anything you don't need with one toggle.",
-  },
-  {
-    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="M11.42 15.17l-5.384-3.19A1.5 1.5 0 016 10.68V6.757a1.5 1.5 0 01.788-1.32l4.723-2.574a1.5 1.5 0 011.478 0l4.723 2.573a1.5 1.5 0 01.788 1.32v3.924a1.5 1.5 0 01-.036.301M11.42 15.17l4.543 2.69a1.5 1.5 0 001.478 0l4.723-2.573a1.5 1.5 0 00.788-1.32v-3.924a1.5 1.5 0 00-.788-1.32l-4.723-2.573a1.5 1.5 0 00-1.478 0L11.42 9.47m0 5.7v5.373m0 0l-4.723-2.574a1.5 1.5 0 01-.788-1.32v-3.923" />
-      </svg>
-    ),
-    title: "Zero-knowledge setup",
-    desc: "Don't know Docker, NGINX, or DNS? You don't need to. Describe your app in plain English and the AI sets up everything — databases, caching, domains, backups.",
-  },
-  {
-    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 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
-      </svg>
-    ),
-    title: "Auto-diagnose & fix",
-    desc: "Build failed? AI reads the logs, identifies the issue, and applies the fix automatically. You approve or let it run hands-free.",
-  },
-];
-
-export function Dashboard() {
-  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">
-              The App
-            </span>
-          </div>
-          <h2>
-            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
-              Full control.
-            </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)" }}
-            >
-              One beautiful app.
-            </span>
-          </h2>
-          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
-            Deployments, domains, databases, backups, scaling — manage your entire
-            infrastructure from one desktop app. No terminal, no YAML, no guesswork.
-          </p>
-        </div>
-
-        {/* ── Screenshot ── */}
-        <div className="mx-auto mt-14 max-w-6xl">
-          <div className="relative overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[0_8px_40px_rgba(0,0,0,.08)]">
-            {/* Fake browser chrome */}
-            <div className="flex items-center gap-2 border-b border-[var(--th-card-bd)] bg-[var(--th-sf-02)] px-4 py-2.5">
-              <div className="flex gap-1.5">
-                <div className="h-2.5 w-2.5 rounded-full" style={{ background: "var(--th-clr-terra)" }} />
-                <div className="h-2.5 w-2.5 rounded-full" style={{ background: "var(--th-clr-amber)" }} />
-                <div className="h-2.5 w-2.5 rounded-full" style={{ background: "var(--th-clr-sea)" }} />
-              </div>
-              <div className="ml-4 flex-1 rounded-md bg-[var(--th-sf-04)] px-3 py-1 text-[12px] th-text-muted">
-                Openship — Connected to 192.168.1.100
-              </div>
-            </div>
-
-            {/* Dashboard mockup content */}
-            <div className="grid grid-cols-[200px_1fr] min-h-[420px]">
-              {/* Sidebar */}
-              <div className="border-r border-[var(--th-card-bd)] bg-[var(--th-sf-01)] p-4">
-                <div className="mb-6 text-[14px] font-bold th-text-heading">Openship</div>
-                {["Projects", "Deployments", "Domains", "Databases", "Backups", "Settings"].map(
-                  (item, i) => (
-                    <div
-                      key={item}
-                      className="mb-1 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors"
-                      style={{
-                        background: i === 0 ? "var(--th-sf-05)" : "transparent",
-                        color:
-                          i === 0
-                            ? "var(--th-text-heading)"
-                            : "var(--th-text-muted)",
-                      }}
-                    >
-                      {item}
-                    </div>
-                  )
-                )}
-              </div>
-
-              {/* Main area */}
-              <div className="p-6">
-                <div className="mb-5 flex items-center justify-between">
-                  <div className="text-[18px] font-bold th-text-heading">Projects</div>
-                  <div className="rounded-lg px-3 py-1.5 text-[12px] font-semibold" style={{ background: "var(--th-btn-bg)", color: "var(--th-btn-text)" }}>
-                    + New Project
-                  </div>
-                </div>
-
-                {/* Project cards row */}
-                <div className="grid gap-3 sm:grid-cols-3">
-                  {[
-                    { name: "my-saas-app", status: "Live", framework: "Next.js", deploys: 42 },
-                    { name: "api-service", status: "Live", framework: "Node.js", deploys: 18 },
-                    { name: "landing-page", status: "Building", framework: "Astro", deploys: 7 },
-                  ].map((p) => (
-                    <div
-                      key={p.name}
-                      className="rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-4"
-                    >
-                      <div className="flex items-center justify-between">
-                        <span className="text-[14px] font-semibold th-text-heading">
-                          {p.name}
-                        </span>
-                        <span
-                          className="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase"
-                          style={{
-                            background:
-                              p.status === "Live"
-                                ? "var(--th-clr-sea-wash)"
-                                : "var(--th-clr-amber-wash)",
-                            color:
-                              p.status === "Live"
-                                ? "var(--th-clr-sea)"
-                                : "var(--th-text-secondary)",
-                          }}
-                        >
-                          {p.status}
-                        </span>
-                      </div>
-                      <div className="mt-2 text-[12px] th-text-muted">
-                        {p.framework} · {p.deploys} deploys
-                      </div>
-                      {/* Mini bar chart */}
-                      <div className="mt-3 flex items-end gap-px h-6">
-                        {Array.from({ length: 12 }).map((_, j) => (
-                          <div
-                            key={j}
-                            className="flex-1 rounded-sm"
-                            style={{
-                              height: `${20 + Math.sin(j * 0.8 + p.deploys) * 40 + 40}%`,
-                              background:
-                                p.status === "Live"
-                                  ? "var(--th-clr-sea-bg)"
-                                  : "var(--th-clr-amber-wash)",
-                            }}
-                          />
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Stats ribbon */}
-                <div className="mt-4 grid grid-cols-4 gap-3">
-                  {[
-                    { label: "Total deploys", val: "67" },
-                    { label: "Active domains", val: "12" },
-                    { label: "Uptime", val: "99.98%" },
-                    { label: "Avg build", val: "34s" },
-                  ].map((s) => (
-                    <div
-                      key={s.label}
-                      className="rounded-lg border border-[var(--th-card-bd)] bg-[var(--th-sf-01)] p-3 text-center"
-                    >
-                      <div className="text-[18px] font-bold th-text-heading">
-                        {s.val}
-                      </div>
-                      <div className="text-[11px] th-text-muted">{s.label}</div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* ── Capability grid ── */}
-        <div className="mx-auto mt-14 grid max-w-6xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {CAPABILITIES.map((c) => (
-            <div
-              key={c.title}
-              className="group flex items-start gap-4 rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-5 shadow-[var(--th-card-shadow)] transition-colors hover:border-[var(--th-card-bd-hover)]"
-            >
-              <div
-                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
-                style={{ background: "var(--th-clr-plum-bg)", color: "var(--th-clr-plum)" }}
-              >
-                {c.icon}
-              </div>
-              <div>
-                <h3 className="text-[15px] font-semibold th-text-heading">
-                  {c.title}
-                </h3>
-                <p className="mt-1 text-[13px] leading-[1.55] th-text-body">
-                  {c.desc}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* ── AI Assistant ── */}
-        <div className="mx-auto mt-20 max-w-6xl">
-          {/* Sub-heading */}
-          <div className="mx-auto mb-10 max-w-3xl text-center">
-            <div className="mb-5 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">
-              <svg className="h-3.5 w-3.5 th-text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
-              </svg>
-              <span className="text-[12px] font-medium tracking-[0.02em] th-text-secondary">
-                Built-in AI Assistant
-              </span>
-            </div>
-            <h3 className="text-[clamp(1.75rem,4vw,2.75rem)] font-semibold leading-[1.1] tracking-[-0.03em] th-text-heading">
-              Don&apos;t know how?{" "}
-              <span style={{ color: "var(--th-on-40)" }}>AI does it for you.</span>
-            </h3>
-            <p className="mx-auto mt-5 max-w-xl text-[16px] leading-[1.65] th-text-body">
-              An AI assistant lives inside the app. It can deploy apps, configure security,
-              set up databases, fix failed builds, and manage domains — all by just telling it what you want.
-              Zero DevOps knowledge required. Disable it anytime.
-            </p>
-          </div>
-
-          {/* AI Chat mockup */}
-          <div className="mx-auto max-w-4xl overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[0_8px_40px_rgba(0,0,0,.08)]">
-            {/* Chat header */}
-            <div className="flex items-center gap-3 border-b border-[var(--th-card-bd)] bg-[var(--th-sf-02)] px-5 py-3">
-              <div className="flex h-7 w-7 items-center justify-center rounded-lg" style={{ background: "var(--th-clr-plum-bg)", color: "var(--th-clr-plum)" }}>
-                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
-                </svg>
-              </div>
-              <span className="text-[13px] font-semibold th-text-heading">Openship AI</span>
-              <span className="ml-auto flex items-center gap-1.5 text-[11px] font-medium" style={{ color: "var(--th-clr-sea)" }}>
-                <span className="h-1.5 w-1.5 rounded-full" style={{ background: "var(--th-clr-sea)" }} />
-                Online
-              </span>
-            </div>
-            {/* Chat messages */}
-            <div className="space-y-4 p-5">
-              {/* User message */}
-              <div className="flex justify-end">
-                <div className="max-w-[75%] rounded-2xl rounded-tr-md bg-[var(--th-sf-04)] px-4 py-2.5 text-[13px] leading-[1.6] th-text-heading">
-                  Deploy my Next.js app from github.com/acme/store, set up Postgres, configure SSL for store.acme.com, and enable daily backups.
-                </div>
-              </div>
-              {/* AI response */}
-              <div className="flex justify-start">
-                <div className="max-w-[80%] space-y-3 rounded-2xl rounded-tl-md border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] px-4 py-3 shadow-sm">
-                  <div className="text-[13px] leading-[1.6] th-text-heading">
-                    On it! Here&apos;s what I&apos;m setting up:
-                  </div>
-                  {[
-                    { done: true, text: "Connected repo acme/store (Next.js detected)" },
-                    { done: true, text: "Postgres 16 database provisioned" },
-                    { done: true, text: "SSL wildcard cert issued for *.acme.com" },
-                    { done: true, text: "Domain store.acme.com → project linked" },
-                    { done: true, text: "Daily backup schedule enabled (03:00 UTC)" },
-                    { done: true, text: "Security hardened — rate-limit, CORS, headers" },
-                    { done: false, text: "Deploying to production…" },
-                  ].map((step, i) => (
-                    <div key={i} className="flex items-center gap-2 text-[12px]">
-                      {step.done ? (
-                        <svg className="h-3.5 w-3.5 shrink-0" 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>
-                      ) : (
-                        <div
-                          className="h-3.5 w-3.5 shrink-0 animate-spin rounded-full border-2 border-t-transparent"
-                          style={{ borderColor: "var(--th-clr-plum)", borderTopColor: "transparent" }}
-                        />
-                      )}
-                      <span className={step.done ? "th-text-body" : "font-medium th-text-heading"}>
-                        {step.text}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-            {/* Input bar */}
-            <div className="border-t border-[var(--th-card-bd)] bg-[var(--th-sf-01)] px-5 py-3">
-              <div className="flex items-center gap-3 rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] px-4 py-2.5">
-                <span className="flex-1 text-[13px] th-text-muted">Ask AI to deploy, configure, debug…</span>
-                <div className="flex h-7 w-7 items-center justify-center rounded-lg" style={{ background: "var(--th-btn-bg)", color: "var(--th-btn-text)" }}>
-                  <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* AI Feature cards */}
-          <div className="mx-auto mt-10 grid max-w-6xl gap-4 sm:grid-cols-2">
-            {AI_FEATURES.map((f) => (
-              <div
-                key={f.title}
-                className="group relative flex items-start gap-4 overflow-hidden 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)]"
-              >
-                {/* subtle blob */}
-                <div
-                  className="pointer-events-none absolute -right-10 -top-10 h-[140px] w-[140px] rounded-full blur-[50px]"
-                  style={{ background: "var(--th-clr-plum-blob)" }}
-                />
-                <div
-                  className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
-                  style={{ background: "var(--th-clr-plum-bg)", color: "var(--th-clr-plum)" }}
-                >
-                  {f.icon}
-                </div>
-                <div className="relative">
-                  <h4 className="text-[15px] font-semibold th-text-heading">{f.title}</h4>
-                  <p className="mt-1.5 text-[13px] leading-[1.6] th-text-body">{f.desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Disable note */}
-          <p className="mx-auto mt-6 max-w-lg text-center text-[13px] leading-[1.6] th-text-muted">
-            AI is fully optional. Toggle it off in Settings &rarr; AI &amp; Automation.
-            Every action it takes is visible and reversible.
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}

package/apps/web/src/components/landing/developer-experience.tsx

@@ -1,224 +0,0 @@
-const TOOLS = [
-  {
-    tag: "CLI",
-    title: "Deploy from your terminal",
-    desc: "Full control without leaving the command line. Deploy, rollback, stream live logs, and manage domains — all with a single binary.",
-    icon: (
-      <svg className="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
-      </svg>
-    ),
-    chips: ["deploy", "logs --follow", "rollback", "domains"],
-    chipPrefix: "openship ",
-    blob: "var(--th-clr-plum-blob)",
-    code: [
-      { kind: "muted", text: "$" },
-      { text: " openship deploy " },
-      { kind: "muted", text: "--prod" },
-      { br: true },
-      { kind: "muted", text: "›" },
-      { text: " Detecting framework… " },
-      { kind: "ok", text: "Next.js" },
-      { br: true },
-      { kind: "muted", text: "›" },
-      { text: " Building… " },
-      { kind: "muted", text: "34s" },
-      { br: true },
-      { kind: "ok", text: "✓" },
-      { text: " Deployed to " },
-      { kind: "accent", text: "prod" },
-    ],
-  },
-  {
-    tag: "MCP",
-    title: "Let your AI agent deploy",
-    desc: "Native Model Context Protocol support. Give Cursor, Claude, or any AI assistant the ability to deploy, rollback, and monitor — without leaving the chat.",
-    icon: (
-      <svg className="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
-      </svg>
-    ),
-    chips: ["deploy", "rollback", "logs", "status"],
-    chipPrefix: "mcp/",
-    blob: "var(--th-clr-terra-blob)",
-    code: [
-      { kind: "muted", text: "// Cursor — MCP tool call" },
-      { br: true },
-      { kind: "accent", text: "you" },
-      { kind: "muted", text: ": " },
-      { text: "deploy my-app to production" },
-      { br: true },
-      { kind: "accent", text: "cursor" },
-      { kind: "muted", text: ": calling " },
-      { kind: "ok", text: "openship/deploy" },
-      { text: "…" },
-      { br: true },
-      { kind: "ok", text: "✓" },
-      { text: " Live at " },
-      { kind: "accent", text: "my-app.example.com" },
-    ],
-  },
-  {
-    tag: "REST API",
-    title: "Automate everything",
-    desc: "A complete REST API for every action in the platform. Build CI/CD pipelines, custom dashboards, or integrate deployments directly into your own product.",
-    icon: (
-      <svg className="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
-      </svg>
-    ),
-    chips: ["/deployments", "/projects", "/domains", "/logs"],
-    chipPrefix: "",
-    blob: "var(--th-clr-sea-blob)",
-    code: [
-      { kind: "accent", text: "POST" },
-      { text: " /api/v1/deployments" },
-      { br: true },
-      { kind: "muted", text: "Authorization: Bearer ••••••" },
-      { br: true },
-      { kind: "muted", text: "{ " },
-      { kind: "accent", text: '"project"' },
-      { kind: "muted", text: ": " },
-      { kind: "ok", text: '"my-app"' },
-      { kind: "muted", text: " }" },
-      { br: true },
-      { kind: "ok", text: "201" },
-      { kind: "muted", text: ' { id: "dep_01J…" }' },
-    ],
-  },
-];
-
-const C = {
-  ok: "var(--th-clr-sea)",
-  accent: "var(--th-on-70, rgba(45,52,54,.70))",
-  muted: "var(--th-on-25, rgba(45,52,54,.25))",
-  dot: "var(--th-on-10, rgba(45,52,54,.10))",
-  bg: "var(--th-on-04, rgba(45,52,54,.04))",
-  bd: "var(--th-on-06, rgba(45,52,54,.06))",
-};
-
-function CodeLine({ tokens }: { tokens: typeof TOOLS[number]["code"] }) {
-  return (
-    <div className="font-mono text-[13px] leading-[1.7]">
-      {tokens.map((t, i) =>
-        "br" in t ? (
-          <br key={i} />
-        ) : (
-          <span
-            key={i}
-            style={{
-              color:
-                t.kind === "ok"
-                  ? C.ok
-                  : t.kind === "accent"
-                  ? C.accent
-                  : t.kind === "muted"
-                  ? C.muted
-                  : "rgba(45,52,54,.55)",
-            }}
-          >
-            {t.text}
-          </span>
-        )
-      )}
-    </div>
-  );
-}
-
-export function DeveloperExperience() {
-  return (
-    <section className="relative py-28 sm:py-36">
-      {/* Divider */}
-      <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="grid gap-10 lg:grid-cols-[1fr_auto] lg:items-end">
-          <div>
-            <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">
-                Developer Experience
-              </span>
-            </div>
-            <h2>
-              <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
-                App first.
-              </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)" }}
-              >
-                CLI when you want it.
-              </span>
-            </h2>
-          </div>
-          <p className="max-w-[340px] text-[16px] leading-[1.65] th-text-body lg:mb-1">
-            The app handles everything visually. CLI, MCP, and REST API
-            are there for developers who want deeper control.
-          </p>
-        </div>
-
-        {/* Cards */}
-        <div className="mt-16 grid gap-4 lg:grid-cols-3">
-          {TOOLS.map((t) => (
-            <div
-              key={t.tag}
-              className="relative flex flex-col overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[var(--th-card-shadow)] transition-[border-color,box-shadow] duration-200 hover:border-[var(--th-card-bd-hover)] hover:shadow-[0_4px_12px_rgba(0,0,0,.06)]"
-            >
-              {/* Ambient blob */}
-              <div
-                className="pointer-events-none absolute -top-12 -right-12 h-[180px] w-[180px] rounded-full blur-[60px]"
-                style={{ background: t.blob }}
-                aria-hidden="true"
-              />
-              {/* Top: text */}
-              <div className="relative flex flex-col gap-4 p-7 pb-5">
-                <div className="flex items-center gap-3">
-                  <span className="flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--th-card-bd)] th-text-secondary">
-                    {t.icon}
-                  </span>
-                  <span className="text-[11px] font-semibold uppercase tracking-[0.12em] th-text-muted">
-                    {t.tag}
-                  </span>
-                </div>
-                <h3 className="text-[20px] font-semibold tracking-[-0.02em] th-text-heading">
-                  {t.title}
-                </h3>
-                <p className="text-[14px] leading-[1.65] th-text-body">
-                  {t.desc}
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {t.chips.map((c) => (
-                    <code
-                      key={c}
-                      className="rounded-md border border-[var(--th-card-bd)] bg-[var(--th-bg-subtle,rgba(0,0,0,.03))] px-2.5 py-1 text-[12px] font-mono th-text-secondary"
-                    >
-                      {t.chipPrefix}{c}
-                    </code>
-                  ))}
-                </div>
-              </div>
-
-              {/* Bottom: light code block */}
-              <div className="mt-auto border-t border-[var(--th-card-bd)]">
-                {/* Dot bar */}
-                <div className="flex items-center gap-1.5 px-5 pt-3.5">
-                  {[0, 1, 2].map((i) => (
-                    <span
-                      key={i}
-                      className="h-[7px] w-[7px] rounded-full"
-                      style={{ background: C.dot }}
-                    />
-                  ))}
-                </div>
-                <div className="px-5 py-4">
-                  <CodeLine tokens={t.code} />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}