openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,263 @@
+const CHECK = (
+  <svg className="h-4 w-4 shrink-0" 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>
+);
+
+const TIERS = [
+  {
+    name: "Free",
+    price: "$0",
+    period: "/month",
+    description: "For side-projects and personal apps. Free forever.",
+    cta: "Start Free",
+    ctaHref: "/login",
+    ctaStyle: "ghost" as const,
+    featured: false,
+    features: [
+      "3 projects",
+      "Unlimited deployments",
+      "Wildcard SSL",
+      "Built-in mail server",
+      "CLI & REST API",
+      "Git-push deploys",
+      "Community support",
+    ],
+  },
+  {
+    name: "Pro",
+    price: "$19",
+    period: "/month",
+    description: "For growing teams that need more power and priority support.",
+    cta: "Start Pro",
+    ctaHref: "/login",
+    ctaStyle: "ghost" as const,
+    featured: false,
+    features: [
+      "Unlimited projects",
+      "Custom domains",
+      "Preview deployments",
+      "Team collaboration (5 seats)",
+      "Advanced analytics",
+      "MCP integration",
+      "Email support",
+    ],
+  },
+  {
+    name: "Scale",
+    badge: "Most Popular",
+    price: "$79",
+    period: "/month",
+    description: "For production workloads. Auto-scaling, SLA, and zero-downtime.",
+    cta: "Start Scale",
+    ctaHref: "/login",
+    ctaStyle: "primary" as const,
+    featured: true,
+    features: [
+      "Everything in Pro",
+      "Auto-scaling",
+      "99.9% uptime SLA",
+      "Zero-downtime deploys",
+      "Built-in CDN & edge caching",
+      "Unlimited team seats",
+      "Priority support",
+    ],
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    period: "",
+    description: "Dedicated infrastructure, compliance, and SLA guarantees.",
+    cta: "Contact Sales",
+    ctaHref: "mailto:sales@openship.dev",
+    ctaStyle: "ghost" as const,
+    featured: false,
+    features: [
+      "Everything in Scale",
+      "Dedicated infrastructure",
+      "SSO & SAML",
+      "Custom SLAs",
+      "Audit logs & SOC 2",
+      "On-premise option",
+      "Dedicated support channel",
+    ],
+  },
+];
+
+export function Pricing() {
+  return (
+    <section className="relative py-28 sm:py-36">
+      {/* Divider */}
+      <div className="section-divider mx-auto mb-28 max-w-4xl sm:mb-36" />
+
+      <div className="mx-auto max-w-7xl px-6">
+        {/* Header */}
+        <div className="mx-auto max-w-2xl 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">
+              Transparent pricing
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Start free.
+            </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)" }}
+            >
+              Scale when ready.
+            </span>
+          </h2>
+          <p className="mt-6 text-[16px] leading-[1.65] th-text-body">
+            Start free with 3 projects. Upgrade when you need more power. No surprise
+            bills, no usage caps.
+          </p>
+        </div>
+
+        {/* Cards */}
+        <div className="mx-auto mt-16 grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {TIERS.map((tier) => (
+            <div
+              key={tier.name}
+              className="relative flex flex-col rounded-2xl"
+              style={
+                tier.featured
+                  ? {
+                      background: "rgba(0,0,0,.92)",
+                      boxShadow:
+                        "0 24px 64px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08)",
+                    }
+                  : {
+                      background: "var(--th-card-bg)",
+                      border: "1px solid var(--th-card-bd)",
+                      boxShadow: "var(--th-card-shadow)",
+                    }
+              }
+            >
+              {tier.badge && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <span className="rounded-full bg-[var(--th-accent-violet)] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.1em] text-white whitespace-nowrap">
+                    {tier.badge}
+                  </span>
+                </div>
+              )}
+
+              <div className="p-6 pb-5">
+                {/* Tier name */}
+                <p
+                  className="text-[13px] font-semibold uppercase tracking-[0.1em]"
+                  style={{
+                    color: tier.featured
+                      ? "rgba(255,255,255,.45)"
+                      : "var(--th-text-muted)",
+                  }}
+                >
+                  {tier.name}
+                </p>
+
+                {/* Price */}
+                <div className="mt-4 flex items-baseline gap-1">
+                  <span
+                    className="text-[2.75rem] font-semibold leading-none tracking-[-0.03em]"
+                    style={{
+                      color: tier.featured ? "#fff" : "var(--th-text-heading)",
+                    }}
+                  >
+                    {tier.price}
+                  </span>
+                  {tier.period && (
+                    <span
+                      className="text-[14px]"
+                      style={{
+                        color: tier.featured
+                          ? "rgba(255,255,255,.4)"
+                          : "var(--th-text-muted)",
+                      }}
+                    >
+                      {tier.period}
+                    </span>
+                  )}
+                </div>
+
+                {/* Description */}
+                <p
+                  className="mt-3 text-[14px] leading-[1.6]"
+                  style={{
+                    color: tier.featured
+                      ? "rgba(255,255,255,.55)"
+                      : "var(--th-text-body)",
+                  }}
+                >
+                  {tier.description}
+                </p>
+
+                {/* CTA */}
+                <a
+                  href={tier.ctaHref}
+                  target={
+                    tier.ctaHref.startsWith("http") ? "_blank" : undefined
+                  }
+                  rel={
+                    tier.ctaHref.startsWith("http")
+                      ? "noopener noreferrer"
+                      : undefined
+                  }
+                  className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full px-5 py-2.5 text-[14px] font-medium transition-all"
+                  style={
+                    tier.featured
+                      ? { background: "#fff", color: "rgba(0,0,0,.88)" }
+                      : {
+                          border: "1px solid var(--th-btn-ghost-bd)",
+                          color: "var(--th-btn-ghost-text)",
+                          background: "transparent",
+                        }
+                  }
+                >
+                  {tier.cta}
+                </a>
+              </div>
+
+              {/* Divider */}
+              <div
+                className="mx-6 h-px"
+                style={{
+                  background: tier.featured
+                    ? "rgba(255,255,255,.08)"
+                    : "var(--th-card-bd)",
+                }}
+              />
+
+              {/* Features */}
+              <div className="flex flex-1 flex-col gap-2.5 p-6 pt-5">
+                {tier.features.map((f) => (
+                  <div key={f} className="flex items-center gap-2.5">
+                    <span
+                      style={{
+                        color: tier.featured
+                          ? "rgba(255,255,255,.5)"
+                          : "var(--th-text-muted)",
+                      }}
+                    >
+                      {CHECK}
+                    </span>
+                    <span
+                      className="text-[13px]"
+                      style={{
+                        color: tier.featured
+                          ? "rgba(255,255,255,.7)"
+                          : "var(--th-text-body)",
+                      }}
+                    >
+                      {f}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,209 @@
+/* ── scaling paths ── */
+const PATHS = [
+  {
+    tag: "Openship Cloud",
+    tagColor: "var(--th-clr-plum)",
+    tagBg: "var(--th-clr-plum-bg)",
+    title: "Auto-scale. Zero config.",
+    desc: "Deploy to Openship Cloud and scaling is handled for you — containers spin up automatically when traffic spikes and wind down when it drops. Manage it all from the app. You never touch a load balancer.",
+    features: [
+      "Horizontal auto-scaling per service",
+      "Built-in load balancing & app controls",
+      "Zero-downtime rolling deploys",
+      "Pay only for what you use",
+    ],
+    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>
+    ),
+    blob: "var(--th-clr-plum-blob)",
+  },
+  {
+    tag: "Self-hosted",
+    tagColor: "var(--th-clr-sea)",
+    tagBg: "var(--th-clr-sea-bg)",
+    title: "One tap. Bigger server.",
+    desc: "Outgrew your VPS? Spin up a larger server and move everything with a single tap in the app. Data, configs, and domains carry over — nothing is lost, ever.",
+    features: [
+      "Export & import from the app or CLI",
+      "All data, certs & configs migrate",
+      "Multi-node cluster when you're ready",
+      "No re-deploy, no re-config",
+    ],
+    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>
+    ),
+    blob: "var(--th-clr-sea-blob)",
+  },
+];
+
+const SCALE_STEPS = [
+  {
+    num: "1",
+    title: "You grow",
+    desc: "Traffic doubles, your team ships faster, services multiply.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
+      </svg>
+    ),
+  },
+  {
+    num: "2",
+    title: "Upgrade the box",
+    desc: "Buy a bigger VPS or add a second node — 60 seconds in the app.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+    ),
+  },
+  {
+    num: "3",
+    title: "Move everything",
+    desc: "One tap migrates data, certs, domains. Zero downtime.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="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>
+    ),
+  },
+  {
+    num: "4",
+    title: "Nothing lost",
+    desc: "Same projects, same domains, same certs. Just faster hardware.",
+    icon: (
+      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+  },
+];
+
+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 Scaling() {
+  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">
+              Scaling
+            </span>
+          </div>
+          <h2>
+            <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+              Scale without fear.
+            </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)" }}
+            >
+              Lose nothing.
+            </span>
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.65] th-text-body">
+            Whether you auto-scale on Openship Cloud or upgrade your own VPS,
+            scaling never means starting over. Your projects, domains, certs, and
+            data move with you — manage it all from the app.
+          </p>
+        </div>
+
+        {/* ── Two scaling paths ── */}
+        <div className="mx-auto mt-16 grid max-w-6xl gap-6 lg:grid-cols-2">
+          {PATHS.map((p) => (
+            <div
+              key={p.tag}
+              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)]"
+            >
+              {/* ambient blob */}
+              <div
+                className="pointer-events-none absolute -right-16 -top-16 h-[200px] w-[200px] rounded-full blur-[70px]"
+                style={{ background: p.blob }}
+              />
+
+              <div className="relative">
+                {/* Tag + icon */}
+                <div className="mb-4 flex items-center gap-3">
+                  <div
+                    className="flex h-10 w-10 items-center justify-center rounded-xl"
+                    style={{ background: p.tagBg, color: p.tagColor }}
+                  >
+                    {p.icon}
+                  </div>
+                  <span
+                    className="rounded-full px-3 py-0.5 text-[11px] font-bold uppercase tracking-[0.08em]"
+                    style={{ background: p.tagBg, color: p.tagColor }}
+                  >
+                    {p.tag}
+                  </span>
+                </div>
+
+                <h3 className="text-[22px] font-bold leading-tight tracking-tight th-text-heading">
+                  {p.title}
+                </h3>
+                <p className="mt-2 text-[14px] leading-[1.65] th-text-body">
+                  {p.desc}
+                </p>
+
+                <ul className="mt-5 space-y-2.5">
+                  {p.features.map((f) => (
+                    <li
+                      key={f}
+                      className="flex items-start gap-2.5 text-[14px] font-medium th-text-heading"
+                    >
+                      <span style={{ color: p.tagColor }}>{CHECK}</span>
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* ── Self-host scale flow (horizontal steps) ── */}
+        <div className="mx-auto mt-16 max-w-5xl">
+          <p className="mb-6 text-center text-[13px] font-semibold uppercase tracking-[0.08em] th-text-muted">
+            How self-host scaling works
+          </p>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {SCALE_STEPS.map((s) => (
+              <div
+                key={s.num}
+                className="group relative 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="mb-3 flex h-9 w-9 items-center justify-center rounded-lg"
+                  style={{ background: "var(--th-clr-sea-bg)", color: "var(--th-clr-sea)" }}
+                >
+                  {s.icon}
+                </div>
+                <p className="mb-0.5 text-[11px] font-bold uppercase tracking-[0.1em] th-text-muted">
+                  Step {s.num}
+                </p>
+                <h4 className="text-[15px] font-semibold th-text-heading">
+                  {s.title}
+                </h4>
+                <p className="mt-1 text-[13px] leading-[1.55] th-text-body">
+                  {s.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}