feat: landing page mvp

2026-03-09 13:39:15 -04:00
commit 4a1d666ee2
28 changed files with 3441 additions and 0 deletions
--- a/components/getting-started.tsx
+++ b/components/getting-started.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { Download, Copy, Check } from 'lucide-react'
+import { PlatformToggle, usePlatform } from './platform-toggle'
+
+const linuxSteps = [
+  {
+    label: 'Install',
+    cmd: 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh',
+  },
+  {
+    label: 'Dependencies',
+    cmd: 'sudo apt install bubblewrap socat',
+  },
+  {
+    label: 'Setup proxy',
+    cmd: 'greywall setup',
+  },
+  {
+    label: 'Run sandboxed',
+    cmd: 'greywall -- claude',
+  },
+]
+
+const macosSteps = [
+  {
+    label: 'Install',
+    cmd: 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh',
+  },
+  {
+    label: 'Setup proxy',
+    cmd: 'greywall setup',
+  },
+  {
+    label: 'Run sandboxed',
+    cmd: 'greywall -- claude',
+  },
+]
+
+export function GettingStarted() {
+  const [platform] = usePlatform()
+  const [copiedIdx, setCopiedIdx] = useState<number | null>(null)
+
+  const steps = platform === 'linux' ? linuxSteps : macosSteps
+
+  function copy(text: string, idx: number) {
+    navigator.clipboard.writeText(text)
+    setCopiedIdx(idx)
+    setTimeout(() => setCopiedIdx(null), 2000)
+  }
+
+  return (
+    <section id="getting-started" className="py-24 px-6 border-t border-border/30">
+      <div className="mx-auto max-w-5xl">
+        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-12">
+          <div className="max-w-2xl">
+            <div className="flex items-center gap-2 mb-4">
+              <Download className="h-4 w-4 text-primary" />
+              <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
+                Getting started
+              </span>
+            </div>
+            <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
+              {platform === 'linux' ? 'Four steps. Full isolation.' : 'Three commands. Done.'}
+            </h2>
+            <p className="text-muted-foreground font-serif text-lg leading-relaxed">
+              {platform === 'linux'
+                ? 'A single Go binary plus two standard packages. No containers, no daemon, no build step.'
+                : 'A single Go binary. No extra packages, no containers, no daemon. Uses built-in macOS sandboxing.'}
+            </p>
+          </div>
+          <PlatformToggle />
+        </div>
+
+        <div className="space-y-4 max-w-2xl">
+          {steps.map((step, i) => (
+            <div key={`${platform}-${i}`} className="flex items-center gap-4">
+              <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold">
+                {i + 1}
+              </div>
+              <div className="flex-1 code-block p-3 flex items-center gap-3">
+                <span className="text-xs font-sans text-muted-foreground shrink-0 w-24">
+                  {step.label}
+                </span>
+                <code className="flex-1 font-mono text-sm text-greyhaven-offwhite truncate">
+                  {step.cmd}
+                </code>
+                <button
+                  onClick={() => copy(step.cmd, i)}
+                  className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {copiedIdx === i ? (
+                    <Check className="h-3.5 w-3.5 text-primary" />
+                  ) : (
+                    <Copy className="h-3.5 w-3.5" />
+                  )}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl">
+          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
+            <div className="font-mono text-2xl font-semibold text-primary mb-1">
+              {platform === 'linux' ? '5' : '3'}
+            </div>
+            <div className="text-xs text-muted-foreground font-sans">
+              {platform === 'linux' ? 'Security layers' : 'Enforcement layers'}
+            </div>
+          </div>
+          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
+            <div className="font-mono text-2xl font-semibold text-primary mb-1">0</div>
+            <div className="text-xs text-muted-foreground font-sans">Containers needed</div>
+          </div>
+          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
+            <div className="font-mono text-2xl font-semibold text-primary mb-1">1</div>
+            <div className="text-xs text-muted-foreground font-sans">Binary to install</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}