openship 0.1.0 → 0.1.1

package/apps/web/src/components/blog/writer-sidebar.tsx

@@ -0,0 +1,81 @@
+interface Author {
+  name: string;
+  role: string;
+  bio: string;
+  twitter?: string;
+  github?: string;
+}
+
+const AUTHORS: Record<string, Author> = {
+  "Openship Team": {
+    name: "Openship Team",
+    role: "Core Team",
+    bio: "Building open-source deployment infrastructure for everyone.",
+    github: "openshiporg",
+  },
+};
+
+function getAuthor(name?: string): Author {
+  if (!name) return AUTHORS["Openship Team"];
+  return (
+    AUTHORS[name] ?? {
+      name,
+      role: "Contributor",
+      bio: "Contributing to Openship.",
+    }
+  );
+}
+
+interface WriterSidebarProps {
+  authorName?: string;
+}
+
+export default function BlogWriterSidebar({ authorName }: WriterSidebarProps) {
+  const author = getAuthor(authorName);
+
+  return (
+    <aside className="bp-writer">
+      {/* Avatar initial */}
+      <div className="bp-writer-avatar">{author.name[0].toUpperCase()}</div>
+
+      {/* Name & role */}
+      <div className="bp-writer-name">{author.name}</div>
+      <div className="bp-writer-role">{author.role}</div>
+
+      {/* Bio */}
+      <p className="bp-writer-bio">{author.bio}</p>
+
+      {/* Social links */}
+      {(author.twitter || author.github) && (
+        <div className="bp-writer-links">
+          {author.twitter && (
+            <a
+              href={`https://x.com/${author.twitter}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bp-writer-link"
+              aria-label={`${author.name} on X`}
+            >
+              <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+              </svg>
+            </a>
+          )}
+          {author.github && (
+            <a
+              href={`https://github.com/${author.github}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bp-writer-link"
+              aria-label={`${author.name} on GitHub`}
+            >
+              <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+              </svg>
+            </a>
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}

package/apps/web/src/components/landing/ai-native.tsx

@@ -0,0 +1,169 @@
+export function AiNative() {
+  return (
+    <section className="relative py-28 sm:py-36">
+      {/* Divider */}
+      <div className="section-divider mx-auto mb-28 max-w-4xl sm:mb-36" />
+
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
+          {/* Left — text content */}
+          <div>
+            <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">
+                AI Native
+              </span>
+            </div>
+            <h2>
+              <span className="block text-[clamp(2.75rem,6vw,4.75rem)] font-semibold leading-[1.06] tracking-[-0.035em] th-text-heading">
+                AI that handles
+              </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)" }}
+              >
+                everything.
+              </span>
+            </h2>
+            <p className="th-text-body mt-6 max-w-lg text-[16px] leading-[1.65]">
+              When a build fails, the AI reads the error, identifies the root
+              cause, and applies a fix — automatically. You see a green checkmark
+              in the app. Your server never sees the broken build.
+            </p>
+
+            <ul className="mt-8 space-y-4">
+              {[
+                "Monitors build logs and errors in real time",
+                "Diagnoses dependency conflicts, type errors, and misconfigs",
+                "Applies fixes automatically — you just approve in the UI",
+                "Configures servers, databases, and SSL without you touching a terminal",
+              ].map((item) => (
+                <li key={item} className="flex items-start gap-3">
+                  <svg
+                    className="mt-0.5 h-5 w-5 shrink-0"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    style={{ color: 'var(--th-accent-indigo)' }}
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75" />
+                  </svg>
+                  <span className="th-text-strong text-sm">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Right — terminal visual */}
+          <div className="terminal">
+            <div className="terminal-bar">
+              <div className="terminal-dot terminal-dot-red" />
+              <div className="terminal-dot terminal-dot-yellow" />
+              <div className="terminal-dot terminal-dot-green" />
+              <span className="ml-3 text-xs" style={{ color: 'rgba(255,255,255,.3)' }}>
+                Build Output
+              </span>
+            </div>
+            <div className="terminal-body text-[13px]">
+              {/* Build failure */}
+              <div>
+                <span className="t-muted">14:32:01</span>{" "}
+                <span className="t-red">ERROR</span>{" "}
+                Build failed with exit code 1
+              </div>
+              <div className="mt-1">
+                <span className="t-muted">14:32:01</span>{" "}
+                <span className="t-red">→</span>{" "}
+                Module not found: &apos;@utils/helpers&apos;
+              </div>
+              <div className="mt-1">
+                <span className="t-muted">14:32:01</span>{" "}
+                <span className="t-muted">  at ./src/lib/api.ts:3:1</span>
+              </div>
+
+              {/* AI kicks in */}
+              <div className="mt-4 border-t border-[rgba(255,255,255,.06)] pt-4">
+                <span className="t-yellow">⚡ AI Agent</span>{" "}
+                <span style={{ color: 'rgba(255,255,255,.5)' }}>analyzing build failure...</span>
+              </div>
+              <div className="mt-2">
+                <span className="t-yellow">→</span>{" "}
+                Path alias &quot;@utils&quot; not resolved. Found tsconfig paths
+                mapping to &quot;src/utils&quot;.
+              </div>
+              <div className="mt-1">
+                <span className="t-yellow">→</span>{" "}
+                Updating import to relative path:{" "}
+                <span className="t-green">&apos;../../utils/helpers&apos;</span>
+              </div>
+              <div className="mt-1">
+                <span className="t-yellow">→</span>{" "}
+                Adding path alias config to build:{" "}
+                <span className="t-green">done</span>
+              </div>
+
+              {/* Retry */}
+              <div className="mt-4 border-t border-[rgba(255,255,255,.06)] pt-4">
+                <span className="t-muted">14:32:08</span>{" "}
+                Retrying build with fix applied...
+              </div>
+              <div className="mt-1">
+                <span className="t-muted">14:32:31</span>{" "}
+                <span className="t-green">✓ Build succeeded</span>{" "}
+                <span className="t-muted">(23s)</span>
+              </div>
+              <div className="mt-1">
+                <span className="t-muted">14:32:32</span>{" "}
+                <span className="t-green">✓ Deployed to production</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Trust / safety callout */}
+        <div className="mt-16 grid gap-5 sm:grid-cols-3">
+          {[
+            {
+              icon: (
+                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8} style={{ color: 'var(--th-accent-indigo)' }}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                </svg>
+              ),
+              title: "Off by default",
+              desc: "AI is completely disabled until you explicitly turn it on. No background calls, no hidden requests.",
+            },
+            {
+              icon: (
+                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8} style={{ color: 'var(--th-accent-indigo)' }}>
+                  <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>
+              ),
+              title: "Human in the loop",
+              desc: "Every proposed change needs your explicit approval. Nothing ships until you click confirm.",
+            },
+            {
+              icon: (
+                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8} style={{ color: 'var(--th-accent-indigo)' }}>
+                  <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: "Your model, your data",
+              desc: "Use any provider — or a fully local model. Your code stays on your infrastructure, always.",
+            },
+          ].map((card) => (
+            <div
+              key={card.title}
+              className="rounded-xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-5"
+            >
+              <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--th-sf-02)]">
+                {card.icon}
+              </div>
+              <p className="text-[14px] font-semibold th-text-heading">{card.title}</p>
+              <p className="mt-1.5 text-[13px] leading-[1.6] th-text-body">{card.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,139 @@
+const FEATURES = [
+  {
+    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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    title: "Scheduled snapshots",
+    desc: "Automatic daily backups of every project, database, and config. Keep the last 7, 14, or 30 — your choice.",
+  },
+  {
+    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.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
+      </svg>
+    ),
+    title: "One-click restore",
+    desc: "Roll back to any snapshot instantly. Databases, environments, and deploy configs — everything comes back together.",
+  },
+  {
+    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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+      </svg>
+    ),
+    title: "Database dumps included",
+    desc: "Postgres, MySQL, Redis — all backed up automatically alongside your application volumes. No extra 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="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25" />
+      </svg>
+    ),
+    title: "Download anytime",
+    desc: "Export a full backup archive you can store anywhere — S3, your NAS, or a second VPS for disaster recovery.",
+  },
+];
+
+export function Backups() {
+  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="grid items-start gap-16 lg:grid-cols-2">
+          {/* Left — text */}
+          <div>
+            <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">
+                Backups
+              </span>
+            </div>
+            <h2>
+              <span className="block text-[clamp(2.25rem,5vw,3.75rem)] font-semibold leading-[1.08] tracking-[-0.035em] th-text-heading">
+                Built-in backups.
+              </span>
+              <span
+                className="block text-[clamp(2.25rem,5vw,3.75rem)] font-semibold leading-[1.08] tracking-[-0.035em]"
+                style={{ color: "var(--th-on-40)" }}
+              >
+                Set it and forget it.
+              </span>
+            </h2>
+            <p className="mt-6 max-w-md text-[16px] leading-[1.65] th-text-body">
+              The app ships with automatic scheduled backups — projects,
+              databases, volumes, SSL certs. Restore with one tap or download
+              the archive for off-site storage.
+            </p>
+          </div>
+
+          {/* Right — visual terminal */}
+          <div className="overflow-hidden rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] shadow-[var(--th-card-shadow)]">
+            <div className="border-b border-[var(--th-card-bd)] px-5 py-2.5 text-[11px] font-semibold uppercase tracking-[0.1em] th-text-muted">
+              Backup schedule
+            </div>
+            <div className="space-y-px font-mono text-[13px]">
+              {[
+                { time: "03:00 UTC", status: "completed", size: "142 MB", label: "Daily — Mar 7" },
+                { time: "03:00 UTC", status: "completed", size: "138 MB", label: "Daily — Mar 6" },
+                { time: "03:00 UTC", status: "completed", size: "135 MB", label: "Daily — Mar 5" },
+                { time: "00:00 UTC", status: "completed", size: "412 MB", label: "Weekly — Mar 2" },
+              ].map((b, i) => (
+                <div
+                  key={i}
+                  className="grid grid-cols-[1fr_auto_auto] gap-4 px-5 py-2.5"
+                  style={{
+                    background: i % 2 === 0 ? "transparent" : "rgba(0,0,0,.015)",
+                  }}
+                >
+                  <div>
+                    <span className="th-text-heading">{b.label}</span>
+                    <span className="ml-2 th-text-muted">{b.time}</span>
+                  </div>
+                  <span className="th-text-muted">{b.size}</span>
+                  <span
+                    className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold"
+                    style={{ background: "var(--th-clr-sea-bg)", color: "var(--th-clr-sea)" }}
+                  >
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                    {b.status}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className="border-t border-[var(--th-card-bd)] px-5 py-3 text-right">
+              <span className="cursor-default rounded-full border border-[var(--th-card-bd)] px-4 py-1.5 text-[12px] font-medium th-text-heading transition-colors hover:border-[var(--th-card-bd-hover)]">
+                Restore latest →
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── Feature cards ── */}
+        <div className="mx-auto mt-14 grid max-w-5xl gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {FEATURES.map((f) => (
+            <div
+              key={f.title}
+              className="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-terra-bg)", color: "var(--th-clr-terra)" }}>
+                {f.icon}
+              </div>
+              <h3 className="text-[15px] font-semibold th-text-heading">
+                {f.title}
+              </h3>
+              <p className="mt-1.5 text-[13px] leading-[1.6] th-text-body">
+                {f.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,109 @@
+const EDGES = [
+  { city: "Frankfurt", flag: "🇩🇪", ms: "8 ms" },
+  { city: "Ashburn", flag: "🇺🇸", ms: "12 ms" },
+  { city: "Singapore", flag: "🇸🇬", ms: "22 ms" },
+  { city: "São Paulo", flag: "🇧🇷", ms: "34 ms" },
+  { city: "Tokyo", flag: "🇯🇵", ms: "18 ms" },
+  { city: "Sydney", flag: "🇦🇺", ms: "28 ms" },
+];
+
+const BULLETS = [
+  "Automatic edge caching — no configuration",
+  "HTTP/3 and Brotli compression out of the box",
+  "Instant cache purge on every deploy",
+  "Custom cache rules per route when you need them",
+  "Works with any VPS — zero bottleneck on self-host",
+  "No separate CDN subscription required",
+];
+
+const CHECK = (
+  <svg className="mt-0.5 h-4 w-4 shrink-0" style={{ color: "var(--th-clr-sea)" }} 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 Cdn() {
+  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">
+        {/* Two-column layout */}
+        <div className="grid items-start gap-16 lg:grid-cols-2">
+          {/* Left — text */}
+          <div>
+            <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">
+                Global CDN
+              </span>
+            </div>
+            <h2>
+              <span className="block text-[clamp(2.25rem,5vw,3.75rem)] font-semibold leading-[1.08] tracking-[-0.035em] th-text-heading">
+                Built-in CDN.
+              </span>
+              <span
+                className="block text-[clamp(2.25rem,5vw,3.75rem)] font-semibold leading-[1.08] tracking-[-0.035em]"
+                style={{ color: "var(--th-on-40)" }}
+              >
+                Fast everywhere. No bottleneck.
+              </span>
+            </h2>
+            <p className="mt-6 max-w-md text-[17px] leading-[1.65] th-text-body">
+              Self-hosting doesn&apos;t mean slow. Every deploy is backed by a
+              global edge network that caches and compresses automatically —
+              so your self-hosted app loads just as fast as any managed platform,
+              with zero extra config.
+            </p>
+
+            <ul className="mt-8 space-y-3">
+              {BULLETS.map((b) => (
+                <li key={b} className="flex items-start gap-2.5 text-[14px] th-text-heading">
+                  {CHECK}
+                  {b}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Right — edge pops visual */}
+          <div className="rounded-2xl border border-[var(--th-card-bd)] bg-[var(--th-card-bg)] p-6 shadow-[var(--th-card-shadow)]">
+            <p className="mb-4 text-[11px] font-semibold uppercase tracking-[0.1em] th-text-muted">
+              Edge locations
+            </p>
+            <div className="space-y-2">
+              {EDGES.map((e) => (
+                <div
+                  key={e.city}
+                  className="flex items-center gap-4 rounded-lg bg-[rgba(0,0,0,.02)] px-4 py-3"
+                >
+                  <span className="text-lg">{e.flag}</span>
+                  <span className="flex-1 text-[14px] font-medium th-text-heading">
+                    {e.city}
+                  </span>
+                  {/* latency bar */}
+                  <span className="text-[13px] font-mono th-text-muted">
+                    {e.ms}
+                  </span>
+                  <div className="h-1.5 w-20 overflow-hidden rounded-full bg-[rgba(0,0,0,.06)]">
+                    <div
+                      className="h-full rounded-full"
+                      style={{
+                        width: `${Math.min(100, (parseInt(e.ms) / 40) * 100)}%`,
+                        background:
+                          parseInt(e.ms) <= 15
+                            ? "var(--th-clr-sea)"
+                            : parseInt(e.ms) <= 25
+                            ? "var(--th-clr-amber)"
+                            : "var(--th-clr-terra)",
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}