gitspace 0.2.0-rc.1

package/landing-page/src/components/landing/Features.tsx

@@ -0,0 +1,201 @@
+import { TerminalWindow } from "./TerminalWindow";
+import { GitBranch, Globe, Layers, ArrowRight, Shield, Smartphone, Laptop } from "lucide-react";
+import { Badge } from "../../app/components/ui/badge";
+
+export function Features() {
+  return (
+    <section id="features" className="py-24 bg-black relative">
+      <div className="container px-4 mx-auto">
+        <div className="text-center mb-20">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">One tool. Three superpowers.</h2>
+            <div className="h-1 w-20 bg-green-500 mx-auto rounded-full" />
+        </div>
+
+        <div className="space-y-32">
+            
+            {/* SPACES */}
+            <div className="grid lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div className="inline-flex items-center gap-2 text-green-400 font-mono text-sm mb-4">
+                        <GitBranch className="w-5 h-5" />
+                        <span>SPACES</span>
+                    </div>
+                    <h3 className="text-3xl md:text-4xl font-bold mb-6">Work on everything at once.</h3>
+                    <p className="text-lg text-zinc-400 leading-relaxed mb-8">
+                        Git worktrees let you have multiple branches checked out simultaneously. No more stashing. No more "let me finish this first." Jump between features instantly.
+                    </p>
+                    <ul className="space-y-3 text-zinc-300">
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-green-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Each workspace is a full git worktree</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-green-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Run different branches simultaneously</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-green-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Custom setup scripts per project</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-green-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Integrates with Linear issues</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <TerminalWindow title="bash">
+                        <div className="space-y-2 font-mono text-sm">
+                            <div className="text-zinc-500"># Install</div>
+                            <div className="text-zinc-400">$ bun install -g https://github.com/inkibra/gitspace.sh</div>
+                            <br />
+                            <div className="text-zinc-500"># Launch the TUI</div>
+                            <div className="text-zinc-400">$ gssh</div>
+                            <br />
+                            <div className="text-zinc-500"># Or use commands</div>
+                            <div className="text-zinc-400">$ gssh add project</div>
+                            <div className="text-green-400">✓ Added project: my-api</div>
+                            <div className="text-zinc-400">$ gssh add feature-auth</div>
+                            <div className="text-green-400">✓ Created workspace: feature-auth</div>
+                        </div>
+                    </TerminalWindow>
+                </div>
+            </div>
+
+            {/* REMOTE */}
+            <div className="grid lg:grid-cols-2 gap-12 items-center lg:flex-row-reverse">
+                 <div className="lg:order-2">
+                    <div className="inline-flex items-center gap-2 text-blue-400 font-mono text-sm mb-4">
+                        <Globe className="w-5 h-5" />
+                        <span>REMOTE</span>
+                    </div>
+                    <h3 className="text-3xl md:text-4xl font-bold mb-6">Your terminal, from anywhere.</h3>
+                    <p className="text-lg text-zinc-400 leading-relaxed mb-8">
+                        Start an AI agent on a big task. Close your laptop. Check in from your phone. 
+                        Get notified when it's done. End-to-end encrypted - we can't see your terminal.
+                    </p>
+                    <ul className="space-y-3 text-zinc-300">
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-blue-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Encrypted access from your phone or any device</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-blue-500 mr-3 shrink-0 mt-0.5" />
+                            <div className="flex flex-col">
+                                <span className="text-zinc-300">Public subdomains & port forwarding</span>
+                                <span className="text-xs font-semibold text-blue-500 mt-1 uppercase tracking-wider">Coming Soon</span>
+                            </div>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-blue-500 mr-3 shrink-0 mt-0.5" />
+                            <span>End-to-end encrypted relay — we can't see your data</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-blue-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Share sessions (view-only or full access)</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-blue-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Inbox tracks what happened while you were away</span>
+                        </li>
+                    </ul>
+                </div>
+                <div className="lg:order-1">
+                    <TerminalWindow title="Connection Architecture">
+                        <div className="flex justify-between items-center text-center text-xs md:text-sm p-4">
+                            <div className="flex flex-col items-center gap-2">
+                                <Laptop className="w-8 h-8 text-zinc-300" />
+                                <span className="font-bold">Your Mac</span>
+                                <span className="text-green-500 text-[10px] border border-green-500/30 px-1 rounded bg-green-500/10">Has Keys</span>
+                            </div>
+                            
+                            <div className="flex-1 px-4 relative">
+                                <div className="h-px bg-zinc-700 absolute top-1/2 left-0 right-0 -z-10" />
+                                <div className="bg-black px-2 relative z-10 inline-block">
+                                    <Shield className="w-5 h-5 text-green-500 mx-auto mb-1" />
+                                    <span className="text-[10px] text-zinc-500 uppercase tracking-wider block bg-zinc-900 px-2 py-0.5 rounded border border-zinc-800">End-to-End Encrypted</span>
+                                </div>
+                            </div>
+
+                            <div className="flex flex-col items-center gap-2">
+                                <Smartphone className="w-8 h-8 text-zinc-300" />
+                                <span className="font-bold">Your Phone</span>
+                                <span className="text-green-500 text-[10px] border border-green-500/30 px-1 rounded bg-green-500/10">Has Keys</span>
+                            </div>
+                        </div>
+                        <div className="text-center mt-4 pt-4 border-t border-zinc-800">
+                             <div className="text-zinc-500 text-xs mb-1">gitspace.sh Relay</div>
+                             <div className="text-zinc-600 text-[10px] italic">Blind relay - cannot read data</div>
+                        </div>
+                    </TerminalWindow>
+                </div>
+            </div>
+
+            {/* GIT STACK */}
+            <div className="grid lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <div className="inline-flex items-center gap-2 text-purple-400 font-mono text-sm mb-4">
+                        <Layers className="w-5 h-5" />
+                        <span>GIT STACK</span>
+                        <Badge variant="outline" className="ml-2 border-purple-500/30 text-purple-400 bg-purple-500/10 text-[10px] h-5">COMING SOON</Badge>
+                    </div>
+                    <h3 className="text-3xl md:text-4xl font-bold mb-6">AI turns your mess into clean PRs.</h3>
+                    <p className="text-lg text-zinc-400 leading-relaxed mb-8">
+                        You've been hacking for hours. Your branch has 47 commits touching 30 files. 
+                        Git Stack analyzes your changes and splits them into logical, reviewable PRs - automatically.
+                    </p>
+                    <ul className="space-y-3 text-zinc-300">
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-purple-500 mr-3 shrink-0 mt-0.5" />
+                            <span>AI understands code dependencies</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-purple-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Splits by logical units, not just files</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-purple-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Creates dependent PR chains</span>
+                        </li>
+                        <li className="flex items-start">
+                            <ArrowRight className="w-5 h-5 text-purple-500 mr-3 shrink-0 mt-0.5" />
+                            <span>Explains its reasoning</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <TerminalWindow title="bash">
+                        <div className="space-y-2 font-mono text-sm">
+                            <div className="text-zinc-400">$ gitspace stack</div>
+                            <div className="text-blue-400 animate-pulse">Analyzing 47 commits across 30 files...</div>
+                            <br />
+                            <div className="text-zinc-300">Suggested stack:</div>
+                            
+                            <div className="pl-4 border-l-2 border-purple-500/30 space-y-3 mt-2">
+                                <div>
+                                    <div className="text-green-400 font-bold">PR #1: Add user authentication types</div>
+                                    <div className="text-zinc-500 text-xs">└─ src/types/auth.ts, src/types/user.ts</div>
+                                </div>
+                                <div>
+                                    <div className="text-green-400 font-bold">PR #2: Implement auth middleware</div>
+                                    <div className="text-zinc-500 text-xs">└─ src/middleware/auth.ts (depends on #1)</div>
+                                </div>
+                                <div>
+                                    <div className="text-green-400 font-bold">PR #3: Add login/logout endpoints</div>
+                                    <div className="text-zinc-500 text-xs">└─ src/routes/auth.ts (depends on #2)</div>
+                                </div>
+                            </div>
+
+                            <div className="mt-4 pt-2 border-t border-zinc-800 text-zinc-500 text-xs">
+                                [c] create stack  [e] edit  [?] explain reasoning
+                            </div>
+                        </div>
+                    </TerminalWindow>
+                </div>
+            </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

package/landing-page/src/components/landing/Hero.tsx

@@ -0,0 +1,142 @@
+import { Button } from "../../app/components/ui/button";
+import { Link } from "react-router-dom";
+import { ArrowRight, Play, Check, Activity, Clock, Laptop, Smartphone, Github } from "lucide-react";
+import { TerminalWindow } from "./TerminalWindow";
+import FaultyTerminal from "./FaultyTerminal";
+import { Badge } from "../../app/components/ui/badge";
+
+export function Hero() {
+  return (
+    <section className="relative pt-32 pb-32 overflow-hidden px-4">
+      
+      <div className="absolute inset-0 w-full h-full z-0 opacity-15">
+        <FaultyTerminal
+            scale={2}
+            gridMul={[2, 1]}
+            digitSize={1.2}
+            timeScale={0.5}
+            pause={false}
+            scanlineIntensity={0.35}
+            glitchAmount={1}
+            flickerAmount={1}
+            noiseAmp={1}
+            chromaticAberration={0}
+            dither={1}
+            curvature={0}
+            tint="#22c55e"
+            mouseReact={true}
+            mouseStrength={0.5}
+            pageLoadAnimation={false}
+            brightness={0.4}
+        />
+      </div>
+
+      <div className="container px-4 mx-auto text-center relative z-10">
+        
+        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-b from-white to-white/60">
+          The developer environment<br />for the AI age.
+        </h1>
+        
+        <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed">
+          Parallel workspaces. Remote access. AI-assisted shipping.
+        </p>
+        
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
+          <a href="https://github.com/inkibra/gitspace.sh" target="_blank" rel="noopener noreferrer">
+            <Button size="lg" className="bg-white text-black hover:bg-gray-200 h-12 px-8 text-base">
+              <Github className="w-5 h-5 mr-2" />
+              Star on GitHub
+            </Button>
+          </a>
+          <Link to="/docs">
+            <Button variant="outline" size="lg" className="h-12 px-8 text-base border-white/10 hover:bg-white/5">
+              Read the Docs <ArrowRight className="ml-2 w-4 h-4" />
+            </Button>
+          </Link>
+        </div>
+
+        <div className="max-w-4xl mx-auto text-left relative group">
+           <div className="absolute -inset-1 bg-gradient-to-b from-green-500/20 to-transparent blur-2xl opacity-50 rounded-[2rem] group-hover:opacity-75 transition duration-500" />
+           
+           <TerminalWindow title="gitspace" className="relative bg-black/90 backdrop-blur-xl">
+              <div className="flex flex-col md:flex-row gap-8 p-2 font-mono text-sm md:text-base">
+                
+                {/* Left Column: Projects */}
+                <div className="w-full md:w-1/3 border-r border-zinc-800 md:pr-4">
+                  <div className="text-zinc-500 mb-2 uppercase text-xs tracking-wider">Projects</div>
+                  <div className="h-px bg-zinc-800 mb-4" />
+                  <ul className="space-y-2">
+                    <li className="flex items-center text-green-400 font-bold bg-zinc-900/50 -mx-2 px-2 py-1 rounded">
+                      <span className="mr-2">&gt;</span> gitspace
+                    </li>
+                    <li className="text-zinc-400 px-2">website</li>
+                    <li className="text-zinc-400 px-2">relay-server</li>
+                  </ul>
+                </div>
+
+                {/* Right Column: Workspaces */}
+                <div className="w-full md:w-2/3">
+                  <div className="text-zinc-500 mb-2 uppercase text-xs tracking-wider">Workspaces (gitspace)</div>
+                  <div className="h-px bg-zinc-800 mb-4" />
+                  
+                  <ul className="space-y-3">
+                    <li className="flex items-center justify-between group/item p-1 hover:bg-zinc-900/50 rounded cursor-pointer transition-colors">
+                      <div className="flex items-center text-white">
+                        <span className="text-green-500 mr-2">&gt;</span> feat-remote-acl
+                      </div>
+                      <div className="flex items-center text-xs text-zinc-500">
+                         [main] *
+                      </div>
+                    </li>
+                    
+                    <li className="flex items-center justify-between group/item p-1 hover:bg-zinc-900/50 rounded cursor-pointer transition-colors">
+                      <div className="flex items-center text-zinc-400">
+                        <span className="w-3 mr-2"></span> fix-worktree-cleanup
+                      </div>
+                      <div className="flex items-center text-xs text-zinc-600">
+                         [main]
+                      </div>
+                    </li>
+
+                    <li className="flex items-center justify-between group/item p-1 hover:bg-zinc-900/50 rounded cursor-pointer transition-colors">
+                      <div className="flex items-center text-zinc-400">
+                        <span className="w-3 mr-2"></span> refactor-crypto
+                      </div>
+                      <div className="flex items-center text-xs text-zinc-600">
+                         [dev-v2]
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+
+              </div>
+
+              {/* Status Bar */}
+              <div className="mt-8 pt-3 border-t border-zinc-800 text-xs text-zinc-500 flex flex-wrap gap-4">
+                 <span><span className="text-zinc-300">[a]</span> add</span>
+                 <span><span className="text-zinc-300">[s]</span> switch</span>
+                 <span><span className="text-zinc-300">[r]</span> remove</span>
+                 <span><span className="text-zinc-300">[i]</span> identity</span>
+              </div>
+           </TerminalWindow>
+
+           {/* Device Labels */}
+           <div className="flex justify-between mt-4 text-xs md:text-sm font-medium text-zinc-500 px-4">
+              <div className="flex items-center gap-2">
+                 <Laptop className="w-4 h-4" />
+                 <span>On your Mac</span>
+              </div>
+              <div className="flex items-center gap-2 text-green-500/80 animate-pulse">
+                 <Smartphone className="w-4 h-4" />
+                 <span>Watching from phone</span>
+              </div>
+           </div>
+
+        </div>
+      </div>
+      
+      {/* Background Gradient */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[600px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-green-950/10 via-black/0 to-black/0 pointer-events-none" />
+    </section>
+  );
+}

package/landing-page/src/components/landing/Pricing.tsx

@@ -0,0 +1,140 @@
+import { Check, X, Github } from "lucide-react";
+import { Button } from "../../app/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardFooter, CardDescription } from "../../app/components/ui/card";
+import { Badge } from "../../app/components/ui/badge";
+
+export function Pricing() {
+  const plans = [
+    {
+      name: "Local",
+      price: "Free",
+      period: "forever",
+      description: "For individual developers working locally.",
+      features: [
+        "Unlimited workspaces",
+        "TUI & CLI",
+        "Setup scripts",
+        "Linear integration",
+        "Git Stack (when released)"
+      ],
+      notIncluded: [
+        "Remote access"
+      ],
+      cta: "Star on GitHub",
+      variant: "outline",
+      link: "https://github.com/inkibra/gitspace.sh"
+    },
+    {
+      name: "Pro",
+      price: "$4.99",
+      period: "/month",
+      description: "Remote access and AI workflow superpowers.",
+      features: [
+        "Everything in Local",
+        "Remote access",
+        "Unlimited machines",
+        "Session sharing",
+        "90-day inbox history",
+        "Priority support"
+      ],
+      cta: "Coming Soon",
+      variant: "default",
+      popular: true,
+      disabled: true
+    },
+    {
+      name: "Enterprise",
+      price: "Contact Us",
+      period: "",
+      description: "For organizations with custom security and scale needs.",
+      features: [
+        "Everything in Pro",
+        "Team sharing",
+        "Shared inbox",
+        "Audit logs",
+        "SSO & SAML",
+        "Dedicated support"
+      ],
+      cta: "Coming Soon",
+      variant: "outline",
+      disabled: true
+    }
+  ];
+
+  return (
+    <section id="pricing" className="py-24 bg-zinc-950">
+      <div className="container px-4 mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold mb-4">Simple Pricing</h2>
+          <p className="text-zinc-400">Local-only is always free. Pay for remote access.</p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          {plans.map((plan, i) => (
+            <Card key={i} className={`relative bg-zinc-900/50 border-zinc-800 hover:border-zinc-700 transition-all ${plan.popular ? 'border-green-500/50 shadow-green-900/20 shadow-2xl' : ''}`}>
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                    <Badge className="bg-green-500 text-black hover:bg-green-600">Most Popular</Badge>
+                </div>
+              )}
+              
+              <CardHeader>
+                <CardTitle className="text-xl text-zinc-300">{plan.name}</CardTitle>
+                <div className="flex items-baseline mt-4">
+                  <span className="text-4xl font-bold text-white">{plan.price}</span>
+                  <span className="text-zinc-500 ml-2">{plan.period}</span>
+                </div>
+                <CardDescription className="mt-2 text-zinc-400">
+                    {plan.description}
+                </CardDescription>
+              </CardHeader>
+              
+              <CardContent>
+                <ul className="space-y-4">
+                  {plan.features.map((feature, j) => (
+                    <li key={j} className="flex items-start">
+                      <Check className="w-5 h-5 text-green-500 mr-3 shrink-0" />
+                      <span className="text-sm text-zinc-300">{feature}</span>
+                    </li>
+                  ))}
+                  {plan.notIncluded?.map((feature, j) => (
+                    <li key={j} className="flex items-start opacity-50">
+                      <X className="w-5 h-5 text-zinc-600 mr-3 shrink-0" />
+                      <span className="text-sm text-zinc-500">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              
+              <CardFooter className="flex flex-col gap-4">
+                {plan.link ? (
+                  <a href={plan.link} target="_blank" rel="noopener noreferrer" className="w-full">
+                    <Button 
+                        variant={plan.variant as "default" | "outline"} 
+                        className={`w-full ${plan.variant === 'default' ? 'bg-white text-black hover:bg-gray-200' : 'border-zinc-700 text-white hover:bg-zinc-800'}`}
+                    >
+                      {plan.name === "Local" && <Github className="w-4 h-4 mr-2" />}
+                      {plan.cta}
+                    </Button>
+                  </a>
+                ) : (
+                  <Button 
+                      variant={plan.variant as "default" | "outline"} 
+                      className={`w-full ${plan.variant === 'default' ? 'bg-white text-black hover:bg-gray-200' : 'border-zinc-700 text-white hover:bg-zinc-800'}`}
+                      disabled={plan.disabled}
+                  >
+                    {plan.cta}
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        <div className="text-center mt-12 text-zinc-500 text-sm">
+            Self-host the relay? It's open source. Run it on your infra.
+        </div>
+      </div>
+    </section>
+  );
+}

package/landing-page/src/components/landing/Roadmap.tsx

@@ -0,0 +1,86 @@
+import { Badge } from "../../app/components/ui/badge";
+import { Terminal, Zap, Bug, PlayCircle } from "lucide-react";
+
+export function Roadmap() {
+  const plannedFeatures = [
+    {
+      title: "CI/CD via GitSpace",
+      description: "Use a remote GitSpace as your CI/CD runner. If a build fails, you don't just get a log—you get a machine. SSH into the runner instantly to see exactly what happened and fix it in real-time.",
+      icon: <Terminal className="w-5 h-5 text-green-500" />,
+      tag: "Planned",
+      status: "In Concept"
+    },
+    {
+      title: "Dev & Preview Deploys",
+      description: "Push a branch and see it running instantly as a GitSpace in a Firecracker VM. Only pay for what you use with sub-second startup times. Remote into the preview environment via GitSpace to debug live code.",
+      icon: <Zap className="w-5 h-5 text-blue-500" />,
+      tag: "Coming Soon",
+      status: "In Development"
+    }
+  ];
+
+  return (
+    <section className="py-24 bg-zinc-950 border-y border-zinc-900">
+      <div className="container px-4 mx-auto">
+        <div className="max-w-4xl">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-xs font-mono mb-6">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+            </span>
+            ROADMAP
+          </div>
+          
+          <h2 className="text-3xl md:text-5xl font-bold mb-6">Building the future of dev-ops.</h2>
+          <p className="text-xl text-zinc-400 mb-16 max-w-2xl leading-relaxed">
+            GitSpace isn't just about local development. We're rethinking the entire lifecycle from commit to production.
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {plannedFeatures.map((feature, i) => (
+              <div key={i} className="group p-8 rounded-2xl bg-black border border-zinc-800 hover:border-zinc-700 transition-all duration-300">
+                <div className="flex items-start justify-between mb-6">
+                  <div className="p-3 rounded-xl bg-zinc-900 border border-zinc-800 group-hover:bg-zinc-800 transition-colors">
+                    {feature.icon}
+                  </div>
+                  <Badge variant="outline" className="border-zinc-800 text-zinc-500 text-[10px] uppercase tracking-wider">
+                    {feature.tag}
+                  </Badge>
+                </div>
+                
+                <h3 className="text-xl font-bold mb-3 group-hover:text-white transition-colors">
+                  {feature.title}
+                </h3>
+                
+                <p className="text-zinc-400 text-sm leading-relaxed mb-6">
+                  {feature.description}
+                </p>
+
+                <div className="flex items-center gap-4 pt-4 border-t border-zinc-900">
+                  <div className="flex items-center gap-1.5 text-[10px] font-mono text-zinc-500">
+                    <div className="w-1.5 h-1.5 rounded-full bg-zinc-700" />
+                    STATUS: {feature.status}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-16 p-8 rounded-2xl bg-gradient-to-br from-green-500/5 to-transparent border border-green-500/10">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-8">
+              <div>
+                <h4 className="text-lg font-bold mb-2">Want to shape our roadmap?</h4>
+                <p className="text-sm text-zinc-400">Join our Discord to suggest features and test new builds.</p>
+              </div>
+              <a href="https://discord.gg/kHRWYPnR" target="_blank" rel="noopener noreferrer">
+                <button className="px-6 py-2.5 rounded-full bg-white text-black font-medium hover:bg-zinc-200 transition-colors shrink-0">
+                  Join Discord
+                </button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/landing-page/src/components/landing/Security.tsx

@@ -0,0 +1,81 @@
+import { Lock, Github, Server, FileCode, ShieldCheck, Eye, ArrowRight } from "lucide-react";
+import { Button } from "../../app/components/ui/button";
+import { Link } from "react-router-dom";
+
+export function Security() {
+  return (
+    <section id="security" className="py-24 bg-black relative">
+      <div className="container px-4 mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6">Open source. Self-hostable. <span className="text-green-500">Actually secure.</span></h2>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+            
+            {/* Open Source Card */}
+            <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-8 hover:border-zinc-700 transition-colors">
+                <div className="w-12 h-12 rounded-lg bg-blue-500/10 flex items-center justify-center border border-blue-500/20 mb-6">
+                    <Github className="w-6 h-6 text-blue-400" />
+                </div>
+                <h3 className="text-2xl font-bold mb-4">Fully Open Source</h3>
+                <p className="text-zinc-400 mb-8 leading-relaxed">
+                    The CLI, the relay, the protocol. All MIT licensed. 
+                    Run it yourself or use our managed service. We have nothing to hide.
+                </p>
+                
+                <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                        <Server className="w-5 h-5 text-zinc-500 mt-1" />
+                        <div>
+                            <h4 className="font-bold text-white">Self-Host Everything</h4>
+                            <p className="text-sm text-zinc-500">Don't trust us? Don't have to. Run your own relay. Same security. Your infrastructure.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="mt-8 pt-8 border-t border-zinc-800">
+                    <a href="https://github.com/inkibra/gitspace.sh" target="_blank" rel="noopener noreferrer">
+                        <Button variant="outline" className="text-blue-400 border-blue-500/20 hover:bg-blue-500/10 hover:text-blue-300 w-full justify-between group">
+                            View on GitHub
+                            <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+                        </Button>
+                    </a>
+                </div>
+            </div>
+
+            {/* Security Card */}
+            <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-8 hover:border-zinc-700 transition-colors">
+                <div className="w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center border border-green-500/20 mb-6">
+                    <Lock className="w-6 h-6 text-green-400" />
+                </div>
+                <h3 className="text-2xl font-bold mb-4">End-to-End Encrypted</h3>
+                <p className="text-zinc-400 mb-8 leading-relaxed">
+                    Your encryption keys never leave your devices. We route bytes but can't read them. 
+                    Even if our servers are compromised, your data is safe.
+                </p>
+                
+                <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                        <Eye className="w-5 h-5 text-zinc-500 mt-1" />
+                        <div>
+                            <h4 className="font-bold text-white">Auditable Protocol</h4>
+                            <p className="text-sm text-zinc-500">The crypto is standard. The protocol is documented. Third party audits coming.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="mt-8 pt-8 border-t border-zinc-800">
+                    <Link to="/docs?section=security-notes">
+                        <Button variant="outline" className="text-green-400 border-green-500/20 hover:bg-green-500/10 hover:text-green-300 w-full justify-between group">
+                            Read Security Docs
+                            <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}