gitspace 0.2.0-rc.20 → 0.2.0-rc.21

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

@@ -1,201 +0,0 @@
-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">$ npm install -g gitspace</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">$ gssh 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

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

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

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

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