openship 0.1.0 → 0.1.1

package/apps/web/src/components/landing/no-lockin.tsx

@@ -0,0 +1,185 @@
+/* ── comparison rows ── */
+const ROWS: { feature: string; openship: string; vercel: string; warn?: boolean }[] = [
+  { feature: "Unlimited deployments", openship: "Included", vercel: "$20 / seat / mo", warn: true },
+  { feature: "CPU execution time", openship: "Your full server", vercel: "Metered — bills spike", warn: true },
+  { feature: "Bandwidth", openship: "Unlimited", vercel: "100 GB then overage", warn: true },
+  { feature: "Serverless invocations", openship: "No limits", vercel: "Billed per million", warn: true },
+  { feature: "Wildcard SSL", openship: "Auto", vercel: "Enterprise only" },
+  { feature: "Built-in mail server", openship: "Free", vercel: "—" },
+  { feature: "Microservices / Docker", openship: "Native", vercel: "—" },
+  { feature: "Custom backend & DB", openship: "Full control", vercel: "External only" },
+  { feature: "Full-control app", openship: "Built-in", vercel: "Limited" },
+  { feature: "MCP agent support", openship: "Built-in", vercel: "—" },
+  { feature: "Self-host anywhere", openship: "Any VPS", vercel: "—" },
+  { feature: "Vendor lock-in", openship: "None — MIT", vercel: "High" },
+];
+
+/* ── VPS providers ── */
+const VPS = [
+  { name: "Hetzner", from: "€3.79", note: "CX22 · 2 vCPU · 4 GB", accent: "#E32E2E" },
+  { name: "Hostinger", from: "$5.99", note: "KVM 1 · 4 GB · 50 GB NVMe", accent: "#6746C8" },
+  { name: "DigitalOcean", from: "$6.00", note: "Basic · 1 vCPU · 1 GB", accent: "#0080FF" },
+  { name: "OVH", from: "€3.50", note: "Starter · 2 GB · ∞ traffic", accent: "#123F6D" },
+];
+
+/* ── vercel bill callout figures ── */
+const BILLS = [
+  { label: "Small SaaS", vercel: "$150+/mo", self: "~$8/mo" },
+  { label: "Growing startup", vercel: "$800+/mo", self: "~$24/mo" },
+  { label: "At scale", vercel: "$5,000+/mo", self: "~$80/mo" },
+];
+
+export function NoLockin() {
+  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">
+              Why switch
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Stop getting locked in.
+            </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)" }}
+            >
+              Own your stack.
+            </span>
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
+            Vercel&apos;s metered CPU time, per-seat pricing, and bandwidth caps
+            mean bills grow fast — especially when traffic spikes. With Openship,
+            the app runs on <strong className="th-text-heading">your machine</strong> and deploys to
+            <strong className="th-text-heading"> your server</strong> — you keep 100% of the performance you pay for.
+          </p>
+        </div>
+
+        {/* ── Bill comparison callout ── */}
+        <div className="mx-auto mt-14 grid max-w-5xl gap-4 sm:grid-cols-3">
+          {BILLS.map((b) => (
+            <div
+              key={b.label}
+              className="relative overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] px-6 py-5 shadow-[var(--th-card-shadow)]"
+            >
+              <p className="text-[12px] font-semibold uppercase tracking-[0.1em] th-text-muted">
+                {b.label}
+              </p>
+
+              {/* Vercel row */}
+              <div className="mt-4">
+                <p className="text-[11px] font-medium uppercase tracking-[0.06em] th-text-muted">Vercel</p>
+                <p
+                  className="mt-0.5 text-[clamp(1.25rem,2.5vw,1.625rem)] font-bold leading-none tracking-tight"
+                  style={{ color: "var(--th-clr-terra)" }}
+                >
+                  {b.vercel}
+                </p>
+              </div>
+
+              {/* Divider + arrow */}
+              <div className="my-3 flex items-center gap-2">
+                <div className="h-px flex-1" style={{ background: "var(--th-sf-06, rgba(0,0,0,.06))" }} />
+                <svg className="h-4 w-4 shrink-0 th-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+                </svg>
+                <div className="h-px flex-1" style={{ background: "var(--th-sf-06, rgba(0,0,0,.06))" }} />
+              </div>
+
+              {/* Self-host row */}
+              <div>
+                <p className="text-[11px] font-medium uppercase tracking-[0.06em] th-text-muted">Self-host</p>
+                <p
+                  className="mt-0.5 text-[clamp(1.25rem,2.5vw,1.625rem)] font-bold leading-none tracking-tight"
+                  style={{ color: "var(--th-clr-sea)" }}
+                >
+                  {b.self}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* ── Comparison table ── */}
+        <div className="mx-auto mt-14 max-w-5xl overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[var(--th-card-shadow)]">
+          {/* Header row */}
+          <div className="grid grid-cols-[1fr_140px_160px] sm:grid-cols-[1fr_200px_220px] border-b-2 border-[var(--th-card-bd)] bg-[var(--th-sf-02)] px-6 py-4">
+            <span className="text-[13px] font-bold uppercase tracking-[0.08em] th-text-muted">
+              Feature
+            </span>
+            <span className="text-center text-[14px] font-bold th-text-heading">
+              🚀 Openship
+            </span>
+            <span className="text-center text-[14px] font-bold th-text-muted">
+              Vercel
+            </span>
+          </div>
+
+          {/* Data rows */}
+          {ROWS.map((r, i) => (
+            <div
+              key={r.feature}
+              className="grid grid-cols-[1fr_140px_160px] sm:grid-cols-[1fr_200px_220px] items-center border-t border-[var(--th-card-bd)] px-6 py-4"
+              style={{ background: i % 2 === 0 ? "transparent" : "var(--th-sf-01)" }}
+            >
+              <span className="text-[15px] font-medium th-text-heading">
+                {r.feature}
+              </span>
+              <span className="text-center">
+                <span
+                  className="inline-block rounded-full px-3.5 py-1 text-[13px] font-semibold"
+                  style={{ background: "var(--th-clr-sea-wash)", color: "var(--th-clr-sea)" }}
+                >
+                  {r.openship}
+                </span>
+              </span>
+              <span className="text-center">
+                <span
+                  className="inline-block rounded-full px-3.5 py-1 text-[13px] font-medium"
+                  style={{
+                    background: r.warn ? "var(--th-clr-terra-wash)" : "var(--th-sf-04)",
+                    color: r.warn ? "var(--th-clr-terra)" : "var(--th-text-secondary)",
+                  }}
+                >
+                  {r.vercel}
+                </span>
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* ── VPS provider cards ── */}
+        <div className="mt-12">
+          <p className="mb-5 text-center text-[13px] font-semibold uppercase tracking-[0.08em] th-text-muted">
+            Self-host on any VPS — popular picks
+          </p>
+          <div className="mx-auto grid max-w-4xl grid-cols-2 gap-4 sm:grid-cols-4">
+            {VPS.map((v) => (
+              <div
+                key={v.name}
+                className="relative overflow-hidden 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="absolute inset-x-0 top-0 h-[3px]"
+                  style={{ background: v.accent }}
+                />
+                <p className="text-[15px] font-bold th-text-heading">{v.name}</p>
+                <p className="mt-1 text-[24px] font-bold tracking-tight th-text-heading">
+                  {v.from}
+                  <span className="ml-1 text-[13px] font-normal th-text-muted">/mo</span>
+                </p>
+                <p className="mt-1.5 text-[12px] leading-snug th-text-muted">{v.note}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/apps/web/src/components/landing/open-source-cta.tsx

@@ -0,0 +1,151 @@
+const TRAITS = [
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-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.955 11.955 0 003 12c0 6.628 5.373 12 12 12s12-5.372 12-12c0-1.99-.487-3.87-1.346-5.528A11.95 11.95 0 0112 2.964z" />
+      </svg>
+    ),
+    label: "MIT License",
+    desc: "No vendor lock-in. Fork it, own it.",
+  },
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-5">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+      </svg>
+    ),
+    label: "Free Mail Server",
+    desc: "Transactional email — no Sendgrid bill.",
+  },
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-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>
+    ),
+    label: "Unlimited Domains",
+    desc: "Wildcard SSL included, always.",
+  },
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-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>
+    ),
+    label: "No Usage Limits",
+    desc: "Deploy as much as your server can handle.",
+  },
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-5">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    label: "Community Driven",
+    desc: "Built in public, with contributors worldwide.",
+  },
+  {
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6} className="h-5 w-5">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-3zm0 0H12m-16.5-3h.008v.008H3.75V12z" />
+      </svg>
+    ),
+    label: "Self-Host Anywhere",
+    desc: "Your VPS, bare-metal, or private cloud.",
+  },
+];
+
+export function OpenSourceCta() {
+  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">
+        <div className="grid gap-16 lg:grid-cols-[1fr_auto] lg:gap-24 lg:items-start">
+
+          {/* ── Left: headline + CTAs ── */}
+          <div>
+            {/* Badge */}
+            <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">
+              <svg className="h-3.5 w-3.5 th-text-muted" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+              <span className="text-[12px] font-medium tracking-[0.02em] th-text-secondary">
+                Open Source &middot; MIT License
+              </span>
+            </div>
+
+            {/* Headline */}
+            <h2>
+              <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+                Free. Open Source.
+              </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)" }}
+              >
+                Forever.
+              </span>
+            </h2>
+
+            <p className="mt-6 max-w-[480px] text-[16px] leading-[1.65] th-text-body">
+              MIT licensed and built in public. Deploy to
+              Openship Cloud, self-host on your own server, or contribute to the codebase.{" "}
+              No hidden costs, no usage limits, no lock-in.
+            </p>
+
+            {/* CTAs */}
+            <div className="mt-9 flex flex-col gap-3.5 sm:flex-row sm:items-center">
+              <a
+                href="/login"
+                className="th-btn group rounded-full px-7 py-3 text-[15px] font-medium"
+              >
+                Start Free
+                <svg
+                  className="ml-1.5 h-4 w-4 transition-transform group-hover:translate-x-0.5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2.2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                </svg>
+              </a>
+              <a
+                href="https://github.com/openshiporg/openship"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="th-btn-ghost rounded-full px-7 py-3 text-[15px]"
+              >
+                <svg className="h-[18px] w-[18px]" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+                View on GitHub
+              </a>
+            </div>
+          </div>
+
+          {/* ── Right: trait grid ── */}
+          <div className="grid grid-cols-1 gap-px sm:grid-cols-2 lg:grid-cols-1 lg:w-[360px] rounded-2xl overflow-hidden border border-[var(--th-card-bd)] bg-[var(--th-card-bd)]">
+            {TRAITS.map((t) => (
+              <div
+                key={t.label}
+                className="flex items-start gap-4 bg-[var(--th-card-bg)] px-5 py-4"
+              >
+                <span className="mt-0.5 flex-none rounded-lg border border-[var(--th-card-bd)] p-2 th-text-secondary">
+                  {t.icon}
+                </span>
+                <div>
+                  <p className="text-[14px] font-semibold th-text-heading">{t.label}</p>
+                  <p className="mt-0.5 text-[13px] leading-snug th-text-body">{t.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,190 @@
+const DIRECTIONS = [
+  {
+    from: "Self-hosted VPS",
+    to: "Openship Cloud",
+    icon: (
+      <svg className="h-6 w-6" 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>
+    ),
+    desc: "Want managed scaling? Push your self-hosted instance to Openship Cloud — projects, domains, certs, and databases transfer instantly. Control everything from the app.",
+    color: "var(--th-clr-plum)",
+    bgWash: "var(--th-clr-plum-bg)",
+    blob: "var(--th-clr-plum-blob)",
+  },
+  {
+    from: "Openship Cloud",
+    to: "Self-hosted VPS",
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+      </svg>
+    ),
+    desc: "Want full control? Export from Openship Cloud to your own server in one tap. You own the data — we never hold it hostage.",
+    color: "var(--th-clr-sea)",
+    bgWash: "var(--th-clr-sea-bg)",
+    blob: "var(--th-clr-sea-blob)",
+  },
+  {
+    from: "Server A",
+    to: "Server B",
+    icon: (
+      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+      </svg>
+    ),
+    desc: "Moving between VPS providers? Hetzner to DigitalOcean, OVH to Hostinger — migrate everything without touching a config file.",
+    color: "var(--th-clr-terra)",
+    bgWash: "var(--th-clr-terra-bg)",
+    blob: "var(--th-clr-terra-blob)",
+  },
+];
+
+const TRUST_POINTS = [
+  "No proprietary formats — standard Docker + volumes",
+  "CLI export produces a portable .tar.gz archive",
+  "Encrypted transfer over SSH by default",
+  "Domains & SSL auto-reconnect on the new host",
+  "Works between any Linux server, any provider",
+];
+
+const CHECK = (
+  <svg className="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);
+
+export function Portability() {
+  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">
+              Portability
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Cloud ↔ self-host.
+            </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)" }}
+            >
+              Move anytime. Zero setup.
+            </span>
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
+            Your infrastructure should never be a cage. Transfer between Openship
+            Cloud and any self-hosted VPS — or between two servers — in a single
+            tap from the app. No re-deploy, no data loss, no vendor games.
+          </p>
+        </div>
+
+        {/* ── Direction cards ── */}
+        <div className="mx-auto mt-16 grid max-w-6xl gap-6 md:grid-cols-3">
+          {DIRECTIONS.map((d) => (
+            <div
+              key={d.from + d.to}
+              className="relative overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-7 shadow-[var(--th-card-shadow)] transition-colors hover:border-[var(--th-card-bd-hover)]"
+            >
+              {/* Accent top bar */}
+              <div
+                className="absolute inset-x-0 top-0 h-[3px]"
+                style={{ background: d.color }}
+              />
+
+              {/* Ambient blob */}
+              <div
+                className="pointer-events-none absolute -right-10 -top-10 h-[160px] w-[160px] rounded-full blur-[60px]"
+                style={{ background: d.blob }}
+              />
+
+              <div className="relative">
+                <div
+                  className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl"
+                  style={{ background: d.bgWash, color: d.color }}
+                >
+                  {d.icon}
+                </div>
+
+                {/* From → To — bigger & bolder */}
+                <div className="mb-3 flex flex-wrap items-center gap-2">
+                  <span className="text-[17px] font-bold th-text-heading">{d.from}</span>
+                  <svg className="h-4 w-4 th-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                  </svg>
+                  <span className="text-[17px] font-bold th-text-heading">{d.to}</span>
+                </div>
+
+                <p className="text-[14px] leading-[1.65] th-text-body">{d.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* ── CLI demo + trust points ── */}
+        <div className="mx-auto mt-14 grid max-w-5xl items-start gap-10 lg:grid-cols-[1fr_1fr]">
+          {/* Terminal card */}
+          <div className="overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] font-mono text-[13px] shadow-[var(--th-card-shadow)]">
+            <div className="border-b border-[var(--th-card-bd)] px-5 py-2.5 text-[11px] font-semibold uppercase tracking-[0.1em] th-text-muted">
+              Terminal
+            </div>
+            <div className="space-y-2 px-5 py-4">
+              <div>
+                <span className="th-text-muted">$</span>{" "}
+                <span className="th-text-heading">openship export</span>
+              </div>
+              <div className="th-text-muted">
+                ✓ 3 projects, 2 databases, 4 domains
+              </div>
+              <div className="th-text-muted">
+                ✓ Packed → openship-backup-2026-03-07.tar.gz (142 MB)
+              </div>
+              <div className="mt-3">
+                <span className="th-text-muted">$</span>{" "}
+                <span className="th-text-heading">openship import --host new-server.example.com</span>
+              </div>
+              <div className="th-text-muted">
+                ✓ Transferred via SSH (encrypted)
+              </div>
+              <div className="th-text-muted">
+                ✓ Projects restored, domains reconnected
+              </div>
+              <div style={{ color: "var(--th-clr-sea)" }}>
+                ✓ Migration complete — 0 downtime
+              </div>
+            </div>
+          </div>
+
+          {/* Trust points */}
+          <div>
+            <h3 className="mb-5 text-[20px] font-bold th-text-heading">
+              True portability, not marketing talk.
+            </h3>
+            <ul className="space-y-3">
+              {TRUST_POINTS.map((t) => (
+                <li
+                  key={t}
+                  className="flex items-start gap-2.5 text-[15px] th-text-heading"
+                >
+                  <span style={{ color: "var(--th-clr-sea)" }}>{CHECK}</span>
+                  {t}
+                </li>
+              ))}
+            </ul>
+            <p className="mt-6 text-[14px] leading-[1.65] th-text-body">
+              Your stack is standard Docker. There is no proprietary runtime, no
+              secret sauce tying you down. Leave whenever you want — or never
+              leave at all. It&apos;s your call.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}