openship 0.1.0 → 0.1.1

package/apps/web/src/components/landing/how-it-works.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+
+/*
+ * ── Curated palette ─────────────────────────────────────────
+ * Now sourced from theme.css CSS custom properties.
+ * Inspired by Linear / Raycast / Stripe design systems.
+ */
+const P = {
+  // Card 1 — plum / lavender
+  plum:      "var(--th-clr-plum)",
+  plumSoft:  "var(--th-clr-plum-soft)",
+  plumWash:  "var(--th-clr-plum-wash)",
+  plumBdr:   "var(--th-clr-plum-bdr)",
+  plumTag:   "var(--th-clr-plum-tag)",
+
+  // Card 2 — terracotta / apricot
+  terra:     "var(--th-clr-terra)",
+  terraSoft: "var(--th-clr-terra-soft)",
+  terraWash: "var(--th-clr-terra-wash)",
+  terraBdr:  "var(--th-clr-terra-bdr)",
+  terraTag:  "var(--th-clr-terra-tag)",
+
+  // Card 3 — seafoam / mint
+  sea:       "var(--th-clr-sea)",
+  seaSoft:   "var(--th-clr-sea-soft)",
+  seaWash:   "var(--th-clr-sea-wash)",
+  seaBdr:    "var(--th-clr-sea-bdr)",
+  seaTag:    "var(--th-clr-sea-tag)",
+
+  // Shared
+  ghost:     "var(--th-on-06, rgba(45,52,54,.06))",
+};
+
+const STEPS = [
+  {
+    tag: "Step 01",
+    tagColor: P.plumTag,
+    accent: P.plum,
+    accentSoft: P.plumSoft,
+    bdr: P.plumBdr,
+    title: "Push your code",
+    desc: "Connect your GitHub repo. Openship detects your framework, language, and build config automatically — no setup files needed.",
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} className="h-7 w-7">
+        <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>
+    ),
+    details: [
+      { label: "Repo", value: "Auto-detected" },
+      { label: "Framework", value: "Next.js, Rails, Go..." },
+      { label: "Config", value: "AI-generated" },
+    ],
+  },
+  {
+    tag: "Step 02",
+    tagColor: P.terraTag,
+    accent: P.terra,
+    accentSoft: P.terraSoft,
+    bdr: P.terraBdr,
+    title: "Connect",
+    desc: "Use Openship Cloud for instant hosting, or connect your own server. AI installs Docker, sets up your environment, and provisions SSL automatically.",
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} className="h-7 w-7">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.431.992a7.723 7.723 0 010 .255c-.007.378.138.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    details: [
+      { label: "Hosting", value: "Cloud or your server" },
+      { label: "Setup", value: "AI-configured" },
+      { label: "SSL", value: "Auto-provisioned" },
+    ],
+  },
+  {
+    tag: "Step 03",
+    tagColor: P.seaTag,
+    accent: P.sea,
+    accentSoft: P.seaSoft,
+    bdr: P.seaBdr,
+    title: "Deploy",
+    desc: "Hit deploy. AI builds your project, runs checks, and pushes production containers. Preview URLs for every PR, rollback in one click.",
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} className="h-7 w-7">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.58-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
+      </svg>
+    ),
+    details: [
+      { label: "Build", value: "Local (your machine)" },
+      { label: "Deploy", value: "34s to production" },
+      { label: "URL", value: "app.example.com" },
+    ],
+  },
+];
+
+/* ── Arrow connector (desktop only) ─────────────────────────── */
+function ConnectorArrow() {
+  return (
+    <div className="hidden md:flex items-center justify-center w-12 pt-12" aria-hidden="true">
+      <svg
+        className="w-5 h-5"
+        style={{ color: "var(--th-on-10)" }}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={1.5}
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+      </svg>
+    </div>
+  );
+}
+
+/* ── Component ──────────────────────────────────────────────── */
+export function HowItWorks() {
+  return (
+    <section
+      className="relative mt-[clamp(100px,12vw,180px)] max-md:mt-20 px-4"
+    >
+      {/* Ambient glow */}
+      <div
+        className="pointer-events-none absolute top-[30%] left-1/2 -translate-x-1/2 w-[700px] h-[500px] blur-[50px] z-0"
+        style={{
+          background: `radial-gradient(ellipse 55% 60% at 50% 50%, ${P.plumWash} 0%, ${P.terraWash} 40%, transparent 70%)`,
+        }}
+        aria-hidden="true"
+      />
+
+      <div className="relative z-[1] max-w-[1120px] mx-auto pb-10">
+        {/* ── Header ──────────────────────────────────────── */}
+        <div className="hiw-hdr text-center mb-[72px]">
+          <span
+            className="inline-block px-4 py-1.5 text-[12px] font-medium tracking-[0.02em] th-text-secondary rounded-full mb-6"
+            style={{ background: P.ghost, border: `1px solid ${P.ghost}` }}
+          >
+            How It Works
+          </span>
+          <h2 className="text-[clamp(2.75rem,6vw,4.75rem)] font-semibold tracking-[-0.035em] leading-[1.06]">
+            <span className="block th-text-heading">From your code to production</span>
+            <span className="block" style={{ color: "var(--th-on-40)" }}>in minutes</span>
+          </h2>
+          <p className="mt-6 mx-auto max-w-[480px] text-[16px] leading-[1.65] th-text-body">
+            Three steps. No terminal. That&apos;s all it takes.
+          </p>
+        </div>
+
+        {/* ── Cards ───────────────────────────────────────── */}
+        <div className="group grid grid-cols-1 gap-4 md:grid-cols-[1fr_48px_1fr_48px_1fr] md:gap-0">
+
+          {STEPS.map((step, i) => (
+            <React.Fragment key={step.title}>
+              {i > 0 && <ConnectorArrow />}
+              <div
+                className="hiw-card rounded-3xl backdrop-blur-xl overflow-hidden transition-all duration-300 ease-[cubic-bezier(.22,1,.36,1)] hover:-translate-y-1.5 hover:shadow-[0_24px_64px_rgba(0,0,0,.07),0_8px_20px_rgba(0,0,0,.04)]"
+                style={{
+                  background: "var(--th-card-bg, rgba(255,255,255,.70))",
+                  border: `1px solid ${P.ghost}`,
+                  "--bdr-h": step.bdr,
+                } as React.CSSProperties}
+              >
+                {/* Accent bar */}
+                <div
+                  className="h-[3px]"
+                  style={{ background: `linear-gradient(90deg, ${step.accent}, ${step.accentSoft})` }}
+                />
+                <div className="p-6 pb-7">
+                  {/* Visual panel instead of terminal */}
+                  <div
+                    className="mb-7 rounded-2xl p-5 flex flex-col gap-3.5"
+                    style={{ background: P.ghost, border: `1px solid ${P.ghost}` }}
+                  >
+                    {/* Icon */}
+                    <div
+                      className="flex h-12 w-12 items-center justify-center rounded-xl"
+                      style={{ background: `linear-gradient(135deg, ${step.accent}, ${step.accentSoft})`, color: "var(--th-btn-text)" }}
+                    >
+                      {step.icon}
+                    </div>
+                    {/* Detail rows */}
+                    <div className="flex flex-col gap-2">
+                      {step.details.map((d) => (
+                        <div key={d.label} className="flex items-center justify-between gap-4">
+                          <span className="text-[12px] th-text-muted">{d.label}</span>
+                          <span className="text-[12px] font-medium th-text-heading">{d.value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <span
+                    className="block text-[11px] font-semibold uppercase tracking-[0.12em] mb-3.5"
+                    style={{ color: step.tagColor }}
+                  >
+                    {step.tag}
+                  </span>
+                  <h3 className="text-[20px] font-semibold tracking-[-0.02em] mb-2 th-text-heading">
+                    {step.title}
+                  </h3>
+                  <p className="text-[14px] leading-[1.65] th-text-body">
+                    {step.desc}
+                  </p>
+                </div>
+              </div>
+            </React.Fragment>
+          ))}
+
+        </div>
+      </div>
+    </section>
+  );
+}

package/apps/web/src/components/landing/index.ts

@@ -0,0 +1,21 @@
+export { Navbar } from "./navbar";
+export { Hero } from "./hero";
+export { Features } from "./features";
+export { Dashboard } from "./dashboard";
+export { HowItWorks } from "./how-it-works";
+export { WhyOpenship } from "./why-openship";
+export { DarkSection } from "./dark-section";
+export { AiNative } from "./ai-native";
+export { DeveloperExperience } from "./developer-experience";
+export { Pricing } from "./pricing";
+export { NoLockin } from "./no-lockin";
+export { MailServer } from "./mail-server";
+export { Cdn } from "./cdn";
+export { DnsDomains } from "./dns-domains";
+export { Scaling } from "./scaling";
+export { Backups } from "./backups";
+export { Portability } from "./portability";
+export { OpenSourceCta } from "./open-source-cta";
+export { ComingSoon } from "./coming-soon";
+export { FinalCta } from "./final-cta";
+export { Footer } from "./footer";

package/apps/web/src/components/landing/mail-server.tsx

@@ -0,0 +1,122 @@
+const PERKS = [
+  {
+    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="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>
+    ),
+    title: "Unlimited domains",
+    desc: "Add as many custom domains as you need — every one gets its own inbox.",
+  },
+  {
+    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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+      </svg>
+    ),
+    title: "DKIM, SPF & DMARC",
+    desc: "Full authentication out of the box so your emails land in inboxes, not spam.",
+  },
+  {
+    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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+      </svg>
+    ),
+    title: "Zero monthly cost",
+    desc: "No Sendgrid, no Resend, no per-email bills. Your server, your mail.",
+  },
+  {
+    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="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    title: "One-click setup",
+    desc: "Connect a domain, DNS records are auto-configured — mail just works.",
+  },
+];
+
+export function MailServer() {
+  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">
+              Built-in mail
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Free mail server.
+            </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)" }}
+            >
+              Unlimited domains.
+            </span>
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-[16px] leading-[1.65] th-text-body">
+            Stop paying per email. Every Openship instance includes a
+            production-grade mail server — add as many domains as you want, no
+            third-party service required.
+          </p>
+        </div>
+
+        {/* Perks grid */}
+        <div className="mx-auto mt-16 grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {PERKS.map((p) => (
+            <div
+              key={p.title}
+              className="relative 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)]"
+            >
+              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: "var(--th-clr-plum-bg)", color: "var(--th-clr-plum)" }}>
+                {p.icon}
+              </div>
+              <h3 className="text-[15px] font-semibold th-text-heading">
+                {p.title}
+              </h3>
+              <p className="mt-1.5 text-[13px] leading-[1.6] th-text-body">
+                {p.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Visual: example DNS records */}
+        <div className="mx-auto mt-12 max-w-3xl overflow-hidden rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] font-mono text-[13px] shadow-[var(--th-card-shadow)]">
+          <div className="border-b border-[var(--th-card-bd)] px-5 py-2.5 text-[11px] uppercase tracking-[0.1em] th-text-muted">
+            Auto-configured DNS records
+          </div>
+          <div className="space-y-px">
+            {[
+              { type: "MX", name: "mail.example.com", value: "10 mx.openship.app" },
+              { type: "TXT", name: "example.com", value: "v=spf1 include:openship.app ~all" },
+              { type: "TXT", name: "_dmarc.example.com", value: "v=DMARC1; p=quarantine;" },
+              { type: "CNAME", name: "dkim._domainkey", value: "dkim.openship.app" },
+            ].map((r, i) => (
+              <div
+                key={i}
+                className="grid grid-cols-[56px_1fr_1fr] gap-4 px-5 py-2"
+                style={{
+                  background:
+                    i % 2 === 0 ? "transparent" : "rgba(0,0,0,.015)",
+                }}
+              >
+                <span style={{ color: "var(--th-clr-plum)" }}>{r.type}</span>
+                <span className="th-text-heading">{r.name}</span>
+                <span className="th-text-muted truncate">{r.value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,199 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+
+const NAV_ITEMS = [
+  { label: "Features", href: "/#features" },
+  { label: "Download", href: "/download" },
+  { label: "Docs", href: "/docs" },
+  { label: "Pricing", href: "/pricing" },
+];
+
+const GITHUB_URL = "https://github.com/openshiporg/openship";
+
+export function Navbar() {
+  const [dark, setDark] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const handleScroll = useCallback(() => {
+    const navBottom = 80;
+    const darkEls = document.querySelectorAll('[data-section="dark"]');
+    let inDark = false;
+    darkEls.forEach((el) => {
+      const rect = el.getBoundingClientRect();
+      if (rect.top <= navBottom && rect.bottom > 0) inDark = true;
+    });
+    setDark(inDark);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  return (
+    <header className="fixed top-0 z-50 w-full">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 pt-5">
+        {/* ── Logo ────────────────────────────────────────────── */}
+        <Link href="/" className="relative z-10 flex items-center gap-2.5">
+          <div
+            className="h-[30px] w-[30px] shrink-0 rounded-full"
+            style={{
+              borderWidth: "2.5px",
+              borderStyle: "solid",
+              borderColor: dark ? "rgba(255,255,255,.9)" : "var(--th-text-heading)",
+              transition: "border-color .3s",
+            }}
+            aria-hidden="true"
+          />
+          <span
+            className="text-[16px] font-semibold tracking-[-0.01em]"
+            style={{
+              color: dark ? "rgba(255,255,255,.95)" : "var(--th-text-heading)",
+              transition: "color .3s",
+            }}
+          >
+            Openship
+          </span>
+        </Link>
+
+        {/* ── Center pill nav ─────────────────────────────────── */}
+        <nav
+          className="absolute left-1/2 top-5 hidden -translate-x-1/2 items-center gap-0.5 rounded-full px-1.5 py-1.5 backdrop-blur-xl md:flex"
+          style={{
+            background: dark ? "rgba(255,255,255,.08)" : "rgba(255,255,255,.72)",
+            border: dark ? "1px solid rgba(255,255,255,.10)" : "1px solid var(--th-on-05)",
+            boxShadow: dark ? "none" : "0 0 0 1px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04)",
+            transition: "background .3s, border .3s, box-shadow .3s",
+          }}
+        >
+          {NAV_ITEMS.map((item) => (
+            <Link
+              key={item.label}
+              href={item.href}
+              className="nav-pill-item rounded-full px-4 py-2 text-[14px] font-medium transition-all"
+              style={{
+                color: dark ? "rgba(255,255,255,.55)" : "var(--th-text-secondary)",
+              }}
+            >
+              {item.label}
+            </Link>
+          ))}
+          <a
+            href={GITHUB_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="nav-pill-item flex items-center gap-1.5 rounded-full px-4 py-2 text-[14px] font-medium transition-all"
+            style={{
+              color: dark ? "rgba(255,255,255,.55)" : "var(--th-text-secondary)",
+            }}
+          >
+            <svg className="h-4 w-4" 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>
+            GitHub
+          </a>
+        </nav>
+
+        {/* ── Right side CTA ──────────────────────────────────── */}
+        <div className="relative z-10 flex items-center gap-3">
+          <Link
+            href="/login"
+            className="hidden rounded-full px-5 py-2 text-[14px] font-medium transition-colors sm:inline-block"
+            style={{
+              color: dark ? "rgba(255,255,255,.55)" : "var(--th-text-secondary)",
+            }}
+          >
+            Log in
+          </Link>
+          <Link
+            href="/download"
+            className="hidden rounded-full px-5 py-2 text-[14px] font-medium transition-all sm:inline-block"
+            style={{
+              background: dark ? "#fff" : "var(--th-btn-bg)",
+              color: dark ? "#000" : "var(--th-btn-text)",
+            }}
+          >
+            Download
+          </Link>
+
+          {/* ── Hamburger (mobile only) ──────────────────────── */}
+          <button
+            onClick={() => setMobileOpen((v) => !v)}
+            className="relative z-10 flex h-10 w-10 items-center justify-center rounded-full md:hidden"
+            style={{
+              background: dark ? "rgba(255,255,255,.10)" : "var(--th-sf-04)",
+            }}
+            aria-label={mobileOpen ? "Close menu" : "Open menu"}
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke={dark ? "#fff" : "var(--th-text-heading)"} strokeWidth={2}>
+              {mobileOpen ? (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+              )}
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* ── Mobile slide-out panel ──────────────────────────── */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-40 md:hidden" aria-modal="true">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/30 backdrop-blur-sm"
+            onClick={() => setMobileOpen(false)}
+          />
+          {/* Panel */}
+          <nav
+            className="absolute right-0 top-0 flex h-full w-[280px] flex-col gap-1 bg-[var(--th-bg-page)] px-6 pt-24 shadow-2xl"
+          >
+            {NAV_ITEMS.map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className="rounded-xl px-4 py-3 text-[15px] font-medium th-text-body transition-colors hover:bg-[var(--th-sf-04)]"
+              >
+                {item.label}
+              </Link>
+            ))}
+            <a
+              href={GITHUB_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => setMobileOpen(false)}
+              className="flex items-center gap-2 rounded-xl px-4 py-3 text-[15px] font-medium th-text-body transition-colors hover:bg-[var(--th-sf-04)]"
+            >
+              <svg className="h-4 w-4" 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>
+              GitHub
+            </a>
+
+            <div className="my-3 h-px bg-[var(--th-divider)]" />
+
+            <Link
+              href="/login"
+              onClick={() => setMobileOpen(false)}
+              className="rounded-xl px-4 py-3 text-[15px] font-medium th-text-secondary transition-colors hover:bg-[var(--th-sf-04)]"
+            >
+              Log in
+            </Link>
+            <Link
+              href="/download"
+              onClick={() => setMobileOpen(false)}
+              className="mt-1 rounded-xl bg-[var(--th-btn-bg)] px-4 py-3 text-center text-[15px] font-medium text-[var(--th-btn-text)]"
+            >
+              Download
+            </Link>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}
+