openship 0.1.1 → 0.1.7

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

@@ -1,210 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,199 +0,0 @@
-"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>
-  );
-}
-