openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,69 @@
+export function InfraVisual() {
+  return (
+    <svg viewBox="0 0 520 260" fill="none" className="w-full h-auto">
+      {/* Central app node */}
+      <rect x="200" y="86" width="120" height="52" rx="12"
+        fill="currentColor" fillOpacity={0.08} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.5} />
+      <text x="260" y="116" textAnchor="middle" fontSize="15" fontWeight="600" fill="currentColor" fillOpacity={0.8}>Your App</text>
+
+      {/* ── Top row services ── */}
+      {/* PostgreSQL */}
+      <rect x="30" y="22" width="100" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="52" cy="42" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="88" y="47" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>Postgres</text>
+      {/* Connection to app */}
+      <line x1="130" y1="46" x2="200" y2="100" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* Redis */}
+      <rect x="210" y="10" width="100" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="232" cy="30" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="270" y="35" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>Redis</text>
+      {/* Connection */}
+      <line x1="260" y1="50" x2="260" y2="86" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* MongoDB */}
+      <rect x="390" y="22" width="100" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="412" cy="42" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="448" y="47" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>MongoDB</text>
+      {/* Connection */}
+      <line x1="390" y1="46" x2="320" y2="100" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* ── Bottom row services ── */}
+      {/* API Gateway */}
+      <rect x="14" y="168" width="110" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="36" cy="188" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="78" y="193" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>API Gateway</text>
+      <line x1="124" y1="182" x2="210" y2="138" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* WebSocket */}
+      <rect x="148" y="180" width="106" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="170" cy="200" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="210" y="205" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>WebSocket</text>
+      <line x1="230" y1="180" x2="248" y2="138" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* Worker */}
+      <rect x="278" y="180" width="100" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="300" cy="200" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="336" y="205" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>Worker</text>
+      <line x1="300" y1="180" x2="275" y2="138" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* S3 / Storage */}
+      <rect x="402" y="168" width="100" height="40" rx="8"
+        fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.25} />
+      <circle cx="424" cy="188" r="4" fill="currentColor" fillOpacity={0.15} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <text x="460" y="193" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.55}>Storage</text>
+      <line x1="402" y1="182" x2="320" y2="138" stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} strokeDasharray="3 3" />
+
+      {/* "One click" badge */}
+      <rect x="187" y="232" width="146" height="24" rx="12"
+        fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1" strokeOpacity={0.2} />
+      <text x="260" y="248" textAnchor="middle" fontSize="10" fontWeight="600" fill="currentColor" fillOpacity={0.5} letterSpacing=".06em">ONE CLICK SETUP</text>
+    </svg>
+  );
+}

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

@@ -0,0 +1,42 @@
+export function RollbackVisual() {
+  return (
+    <svg viewBox="0 0 520 260" fill="none" className="w-full h-auto">
+      {/* Timeline */}
+      <line x1="50" y1="110" x2="470" y2="110" stroke="currentColor" strokeWidth="2" strokeOpacity={0.3} strokeLinecap="round" />
+
+      {/* Rollback arrow */}
+      <path d="M415 98 C405 54 325 46 300 80" stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.45} strokeLinecap="round" fill="none" strokeDasharray="5 4" />
+      <path d="M304 72 L296 86 L310 84" fill="none" stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.5} strokeLinecap="round" strokeLinejoin="round" />
+      <text x="358" y="56" textAnchor="middle" fontSize="13" fontWeight="600" fill="currentColor" fillOpacity={0.65}>rollback</text>
+
+      {/* v1.0 */}
+      <circle cx="100" cy="110" r="8" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.35} />
+      <circle cx="100" cy="110" r="3" fill="currentColor" fillOpacity={0.55} />
+      <text x="100" y="142" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="500" fill="currentColor" fillOpacity={0.6}>v1.0</text>
+      <text x="100" y="160" textAnchor="middle" fontSize="10" fill="currentColor" fillOpacity={0.3}>2 days ago</text>
+
+      {/* v1.1 */}
+      <circle cx="210" cy="110" r="8" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.35} />
+      <circle cx="210" cy="110" r="3" fill="currentColor" fillOpacity={0.55} />
+      <text x="210" y="142" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="500" fill="currentColor" fillOpacity={0.6}>v1.1</text>
+      <text x="210" y="160" textAnchor="middle" fontSize="10" fill="currentColor" fillOpacity={0.3}>yesterday</text>
+
+      {/* v1.2 — rollback target — emphasized */}
+      <circle cx="320" cy="110" r="10" fill="currentColor" fillOpacity={0.12} stroke="currentColor" strokeWidth="2.2" strokeOpacity={0.6} />
+      <circle cx="320" cy="110" r="4" fill="currentColor" fillOpacity={0.75} />
+      <text x="320" y="144" textAnchor="middle" fontSize="14" fontFamily="monospace" fontWeight="600" fill="currentColor" fillOpacity={0.8}>v1.2</text>
+      <text x="320" y="162" textAnchor="middle" fontSize="10" fontWeight="500" fill="currentColor" fillOpacity={0.45}>3h ago</text>
+      {/* Snapshot card */}
+      <rect x="285" y="174" width="70" height="46" rx="8" fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1" strokeOpacity={0.15} />
+      <line x1="296" y1="190" x2="344" y2="190" stroke="currentColor" strokeWidth=".8" strokeOpacity={0.15} />
+      <line x1="296" y1="200" x2="336" y2="200" stroke="currentColor" strokeWidth=".8" strokeOpacity={0.1} />
+      <line x1="296" y1="210" x2="340" y2="210" stroke="currentColor" strokeWidth=".8" strokeOpacity={0.08} />
+
+      {/* v1.3 — current (faded) */}
+      <circle cx="430" cy="110" r="8" fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.2} />
+      <circle cx="430" cy="110" r="3" fill="currentColor" fillOpacity={0.3} />
+      <text x="430" y="142" textAnchor="middle" fontSize="13" fontFamily="monospace" fill="currentColor" fillOpacity={0.35}>v1.3</text>
+      <text x="430" y="160" textAnchor="middle" fontSize="10" fill="currentColor" fillOpacity={0.2}>current</text>
+    </svg>
+  );
+}

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

@@ -0,0 +1,41 @@
+export function SslVisual() {
+  return (
+    <svg viewBox="0 0 520 260" fill="none" className="w-full h-auto">
+      {/* Central lock */}
+      <path d="M240 78 V58 C240 34 280 34 280 58 V78" fill="none" stroke="currentColor" strokeWidth="2" strokeOpacity={0.5} strokeLinecap="round" />
+      <rect x="226" y="78" width="68" height="56" rx="10" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1.8" strokeOpacity={0.45} />
+      <circle cx="260" cy="102" r="5" fill="currentColor" fillOpacity={0.08} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.4} />
+      <line x1="260" y1="106" x2="260" y2="118" stroke="currentColor" strokeWidth="1.5" strokeOpacity={0.4} strokeLinecap="round" />
+      <text x="260" y="154" textAnchor="middle" fontSize="14" fontWeight="600" fill="currentColor" fillOpacity={0.85} letterSpacing=".04em">HTTPS</text>
+
+      {/* Left: Domain card */}
+      <rect x="20" y="58" width="170" height="56" rx="10" fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.2} />
+      <circle cx="38" cy="80" r="4" fill="currentColor" fillOpacity={0.08} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <path d="M36 80 L37.5 82 L40.5 78" stroke="currentColor" strokeWidth="1" strokeOpacity={0.45} strokeLinecap="round" fill="none" />
+      <text x="50" y="84" fontSize="11" fontFamily="monospace" fill="currentColor" fillOpacity={0.6}>app.company.com</text>
+      <text x="105" y="126" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.35}>Custom domain</text>
+
+      {/* Connection: domain → lock */}
+      <line x1="192" y1="86" x2="224" y2="98" stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.15} strokeDasharray="4 4" />
+
+      {/* Right: Certificate card */}
+      <rect x="330" y="52" width="160" height="72" rx="10" fill="currentColor" fillOpacity={0.04} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.2} />
+      <line x1="348" y1="72" x2="472" y2="72" stroke="currentColor" strokeOpacity={0.12} strokeWidth=".8" />
+      <line x1="348" y1="86" x2="460" y2="86" stroke="currentColor" strokeOpacity={0.08} strokeWidth=".8" />
+      <line x1="348" y1="100" x2="466" y2="100" stroke="currentColor" strokeOpacity={0.08} strokeWidth=".8" />
+      {/* Seal */}
+      <circle cx="408" cy="110" r="7" fill="currentColor" fillOpacity={0.06} stroke="currentColor" strokeWidth="1" strokeOpacity={0.3} />
+      <path d="M405 110 L407 112 L412 108" stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.5} strokeLinecap="round" fill="none" />
+      <text x="408" y="138" textAnchor="middle" fontSize="11" fontWeight="500" fill="currentColor" fillOpacity={0.35}>SSL certificate</text>
+
+      {/* Connection: lock → cert */}
+      <line x1="296" y1="98" x2="328" y2="88" stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.15} strokeDasharray="4 4" />
+
+      {/* Bottom: DNS records */}
+      <rect x="60" y="176" width="400" height="48" rx="10" fill="currentColor" fillOpacity={0.03} stroke="currentColor" strokeWidth="1.2" strokeOpacity={0.15} />
+      <text x="190" y="204" textAnchor="middle" fontSize="11" fontFamily="monospace" fill="currentColor" fillOpacity={0.45}>A  143.198.42.17</text>
+      <line x1="260" y1="186" x2="260" y2="214" stroke="currentColor" strokeOpacity={0.1} strokeWidth=".6" />
+      <text x="350" y="204" textAnchor="middle" fontSize="11" fontFamily="monospace" fill="currentColor" fillOpacity={0.45}>CNAME  edge.os.dev</text>
+    </svg>
+  );
+}

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

@@ -0,0 +1,54 @@
+export function StacksVisual() {
+  const stacks = [
+    { name: "Go",         slug: "go" },
+    { name: "Rust",       slug: "rust" },
+    { name: "Python",     slug: "python" },
+    { name: "Node.js",    slug: "nodedotjs" },
+    { name: "Ruby",       slug: "ruby" },
+    { name: "PHP",        slug: "php" },
+    { name: "Java",       slug: "openjdk" },
+    { name: ".NET",       slug: "dotnet" },
+    { name: "Elixir",     slug: "elixir" },
+    { name: "Docker",     slug: "docker" },
+    { name: "Bun",        slug: "bun" },
+    { name: "Deno",       slug: "deno" },
+    { name: "Rails",      slug: "rubyonrails" },
+    { name: "Django",     slug: "django" },
+    { name: "Laravel",    slug: "laravel" },
+    { name: "PostgreSQL", slug: "postgresql" },
+    { name: "Redis",      slug: "redis" },
+    { name: "Nginx",      slug: "nginx" },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-6 gap-[1px] rounded-xl overflow-hidden">
+        {stacks.map((s) => (
+          <div
+            key={s.name}
+            className="feat-build-item relative flex flex-col items-center justify-center gap-2.5 py-5 px-1.5"
+            style={{ background: "rgba(255,255,255,0.05)" }}
+          >
+            {/* Icon — currentColor (inherits theme text color) */}
+            <span
+              className="h-6 w-6 block"
+              style={{
+                background: "currentColor",
+                opacity: 0.55,
+                maskImage: `url(https://cdn.simpleicons.org/${s.slug}/ffffff)`,
+                WebkitMaskImage: `url(https://cdn.simpleicons.org/${s.slug}/ffffff)`,
+                maskSize: "contain",
+                WebkitMaskSize: "contain",
+                maskRepeat: "no-repeat",
+                WebkitMaskRepeat: "no-repeat",
+                maskPosition: "center",
+                WebkitMaskPosition: "center",
+              }}
+            />
+            <span className="text-[11px] font-semibold leading-none text-center" style={{ color: "currentColor", opacity: 0.40 }}>{s.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/landing/final-cta.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+export function FinalCta() {
+  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">
+        <div className="relative overflow-hidden rounded-3xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] px-8 py-16 shadow-[0_8px_40px_rgba(0,0,0,.06)] sm:px-14 sm:py-20">
+          {/* Ambient blobs */}
+          <div
+            className="pointer-events-none absolute -left-24 -top-24 h-[300px] w-[300px] rounded-full blur-[80px]"
+            style={{ background: "var(--th-clr-plum-blob)" }}
+          />
+          <div
+            className="pointer-events-none absolute -bottom-20 -right-20 h-[260px] w-[260px] rounded-full blur-[80px]"
+            style={{ background: "var(--th-clr-sea-blob)" }}
+          />
+          <div
+            className="pointer-events-none absolute right-1/3 top-1/4 h-[180px] w-[180px] rounded-full blur-[60px]"
+            style={{ background: "var(--th-clr-terra-blob)" }}
+          />
+
+          {/* Grid lines (decorative) */}
+          <div className="pointer-events-none absolute inset-0 opacity-[0.03]" style={{
+            backgroundImage: "linear-gradient(var(--th-on-100) 1px, transparent 1px), linear-gradient(90deg, var(--th-on-100) 1px, transparent 1px)",
+            backgroundSize: "48px 48px",
+          }} />
+
+          <div className="relative text-center">
+            {/* Terminal-style prompt */}
+            <div className="mx-auto mb-8 inline-flex items-center gap-2.5 rounded-full border border-[var(--th-on-06)] bg-white/70 px-5 py-2 font-mono text-[13px] shadow-[0_2px_8px_rgba(0,0,0,.04)] backdrop-blur-sm">
+              <span style={{ color: "var(--th-clr-sea)" }}>$</span>
+              <span className="th-text-secondary">git push origin main</span>
+              <span className="animate-pulse th-text-muted">▌</span>
+            </div>
+
+            <h2>
+              <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+                Ready to ship?
+              </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)" }}
+              >
+                Deploy in minutes.
+              </span>
+            </h2>
+
+            <p className="mx-auto mt-6 max-w-lg text-[16px] leading-[1.65] th-text-body">
+              Use our cloud or deploy to your own servers. No credit card,
+              no vendor lock-in, no surprises. Start free in seconds.
+            </p>
+
+            <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+              <a
+                href="/login"
+                className="th-btn group rounded-full px-8 py-3.5 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-8 py-3.5 text-[15px] font-medium"
+              >
+                <svg className="mr-2 inline-block h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                </svg>
+                View on GitHub
+              </a>
+            </div>
+
+            {/* Trust row */}
+            <div className="mx-auto mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[13px] th-text-muted">
+              <span className="flex items-center gap-1.5">
+                <svg className="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="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+                Desktop app
+              </span>
+              <span className="flex items-center gap-1.5">
+                <svg className="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="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+                Cloud or self-hosted
+              </span>
+              <span className="flex items-center gap-1.5">
+                <svg className="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="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+                No credit card
+              </span>
+              <span className="flex items-center gap-1.5">
+                <svg className="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="M4.5 12.75l6 6 9-13.5" />
+                </svg>
+                Open source
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,145 @@
+import Link from "next/link";
+
+const footerLinks = {
+  Product: [
+    { label: "Features", href: "/#features" },
+    { label: "Download", href: "/download" },
+    { label: "Pricing", href: "/pricing" },
+    { label: "Docs", href: "/docs" },
+  ],
+  Developers: [
+    { label: "CLI Reference", href: "/docs/cli" },
+    { label: "API Reference", href: "/docs/api" },
+    { label: "MCP Integration", href: "/docs/mcp" },
+    { label: "Self-Hosting Guide", href: "/docs/self-hosting" },
+  ],
+  Company: [
+    { label: "Blog", href: "/blog" },
+    { label: "About", href: "/about" },
+    { label: "Contact", href: "/contact" },
+    { label: "Brand", href: "/brand" },
+  ],
+  Legal: [
+    { label: "Privacy", href: "/privacy" },
+    { label: "Terms", href: "/terms" },
+    { label: "License (MIT)", href: "https://github.com/openshiporg/openship/blob/main/LICENSE" },
+  ],
+};
+
+export function Footer() {
+  return (
+    <footer className="border-t border-[var(--th-bd-subtle)]">
+      <div className="mx-auto max-w-7xl px-6 py-16 sm:py-20">
+        <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-5">
+          {/* Brand column */}
+          <div className="lg:col-span-1">
+            <Link href="/" className="flex items-center gap-2.5">
+              <div
+                className="h-7 w-7 shrink-0 rounded-full border-[2px] border-[var(--th-text-heading)]"
+                aria-hidden="true"
+              />
+              <span className="th-text-heading text-base font-semibold tracking-tight">
+                Openship
+              </span>
+            </Link>
+            <p className="th-text-muted mt-4 max-w-xs text-sm leading-relaxed">
+              Open-source desktop app for deploying anything to your server. Download, connect, deploy.
+            </p>
+          </div>
+
+          {/* Link columns */}
+          {Object.entries(footerLinks).map(([heading, links]) => (
+            <div key={heading}>
+              <h4 className="th-text-strong text-sm font-semibold">{heading}</h4>
+              <ul className="mt-4 space-y-3">
+                {links.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="th-text-secondary text-sm transition-colors hover:text-[var(--th-text-strong)]"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom bar */}
+        <div className="section-divider mt-12" />
+        <div className="mt-8 flex flex-col items-center justify-between gap-6 sm:flex-row">
+          <p className="th-text-muted text-sm">
+            &copy; {new Date().getFullYear()} Oblien LLC. All rights reserved.
+          </p>
+
+          {/* Oblien attribution */}
+          <a
+            href="https://oblien.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 th-text-muted transition-colors hover:text-[var(--th-text-strong)]"
+          >
+            <span className="text-[13px]">An</span>
+            <span
+              className="inline-block h-[16px] w-[60px]"
+              style={{
+                backgroundColor: "var(--th-text-heading)",
+                maskImage: "url(https://oblien.com/logo.svg)",
+                WebkitMaskImage: "url(https://oblien.com/logo.svg)",
+                maskSize: "contain",
+                WebkitMaskSize: "contain",
+                maskRepeat: "no-repeat",
+                WebkitMaskRepeat: "no-repeat",
+                maskPosition: "center",
+                WebkitMaskPosition: "center",
+              }}
+              aria-label="Oblien"
+            />
+            <span className="text-[13px]">project</span>
+          </a>
+
+          <div className="flex items-center gap-5">
+            {/* GitHub */}
+            <a
+              href="https://github.com/openshiporg/openship"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="th-text-muted transition-colors hover:text-[var(--th-text-strong)]"
+              aria-label="GitHub"
+            >
+              <svg className="h-5 w-5" 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>
+            </a>
+            {/* X / Twitter */}
+            <a
+              href="https://x.com/openship"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="th-text-muted transition-colors hover:text-[var(--th-text-strong)]"
+              aria-label="X (Twitter)"
+            >
+              <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+              </svg>
+            </a>
+            {/* Discord */}
+            <a
+              href="https://discord.gg/openship"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="th-text-muted transition-colors hover:text-[var(--th-text-strong)]"
+              aria-label="Discord"
+            >
+              <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,110 @@
+"use client";
+
+import { DownloadButton } from "./download-button";
+
+const STACKS = [
+  { name: 'Next.js',     icon: 'https://cdn.simpleicons.org/nextdotjs/000000' },
+  { name: 'Node',        icon: 'https://cdn.simpleicons.org/nodedotjs/5FA04E' },
+  { name: 'Python',      icon: 'https://cdn.simpleicons.org/python/3776AB' },
+  { name: 'Go',          icon: 'https://cdn.simpleicons.org/go/00ADD8' },
+  { name: 'Rust',        icon: 'https://cdn.simpleicons.org/rust/000000' },
+  { name: 'Docker',      icon: 'https://cdn.simpleicons.org/docker/2496ED' },
+  { name: 'Postgres',    icon: 'https://cdn.simpleicons.org/postgresql/4169E1' },
+  { name: 'Redis',       icon: 'https://cdn.simpleicons.org/redis/FF4438' },
+  { name: 'Rails',       icon: 'https://cdn.simpleicons.org/rubyonrails/D30001' },
+  { name: 'Laravel',     icon: 'https://cdn.simpleicons.org/laravel/FF2D20' },
+  { name: 'Django',      icon: 'https://cdn.simpleicons.org/django/092E20' },
+  { name: 'Bun',         icon: 'https://cdn.simpleicons.org/bun/000000' },
+];
+
+export function Hero() {
+  return (
+    <section className="hero-section relative flex min-h-[100dvh] flex-col items-center justify-center overflow-hidden">
+      {/* ═══════════════ Background layers ═══════════════ */}
+      <div className="hero-grain absolute inset-0" aria-hidden="true" />
+      <div className="hero-grid absolute inset-0" aria-hidden="true" />
+
+      {/* ── Bottom aurora glow ── */}
+      <div className="hero-aurora" aria-hidden="true">
+        <div className="hero-aurora-core" />
+        <div className="hero-aurora-wing hero-aurora-wing--left" />
+        <div className="hero-aurora-wing hero-aurora-wing--right" />
+      </div>
+
+      {/* ═══════════════ Content ═══════════════ */}
+      <div className="relative z-20 mx-auto w-full max-w-[860px] px-6 text-center">
+        {/* Badge */}
+        <div className="animate-fade-in-up 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="relative flex h-1.5 w-1.5">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--th-accent-violet)] opacity-50" />
+            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--th-accent-violet)]" />
+          </span>
+          <span className="text-[12px] font-medium tracking-[0.02em] th-text-secondary">
+            Open Source &middot; Cloud or Self-Hosted
+          </span>
+        </div>
+
+        {/* Headline */}
+        <h1 className="animate-fade-in-up animate-delay-100">
+          <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+            Deploy Anything.
+          </span>
+          <span className="hero-headline-second block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em]">
+            Own Everything.
+          </span>
+        </h1>
+
+        {/* Sub */}
+        <p className="animate-fade-in-up animate-delay-200 mx-auto mt-6 max-w-[520px] text-[16px] leading-[1.65] th-text-body">
+          Push your code&nbsp;&mdash; AI handles the build, config, and deployment. Use our cloud or connect your own servers. Zero&nbsp;lock&#8209;in, completely&nbsp;open&#8209;source.
+        </p>
+
+        {/* CTAs */}
+        <div className="animate-fade-in-up animate-delay-300 mt-9 flex flex-col items-center justify-center gap-3.5 sm:flex-row">
+          <DownloadButton size="large" />
+          <a
+            href="/login"
+            className="th-btn-ghost group rounded-full px-7 py-3 text-[15px] font-medium"
+          >
+            Start Free
+            <svg
+              className="ml-1.5 -mr-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>
+        </div>
+      </div>
+
+      {/* ═══════════════ Stack ticker ═══════════════ */}
+      <div className="animate-fade-in-up animate-delay-500 relative z-10 mt-16 w-full max-w-[820px] px-6">
+        <p className="mb-6 text-center text-[13px] font-medium uppercase tracking-[0.1em] th-text-muted">
+          Designed for your favorite stack
+        </p>
+        <div className="hero-ticker-mask overflow-hidden">
+          <div className="hero-ticker flex w-max items-center gap-12">
+            {[0, 1].map((i) => (
+              <div key={i} className="flex shrink-0 items-center gap-12">
+                {STACKS.map((s) => (
+                  <div key={`${i}-${s.name}`} className="flex shrink-0 items-center gap-2.5 opacity-50" style={{ filter: 'grayscale(1) brightness(0.45) contrast(1.1)' }}>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img src={s.icon} alt={s.name} className="h-[26px] w-[26px] object-contain" loading="lazy" />
+                    <span className="whitespace-nowrap text-[14px] font-medium th-text-secondary">{s.name}</span>
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Edge fades */}
+      <div className="hero-edge-fade-top absolute top-0 left-0 right-0 h-20" aria-hidden="true" />
+      <div className="hero-edge-fade-bottom absolute bottom-0 left-0 right-0 h-40" aria-hidden="true" />
+    </section>
+  );
+}