feat: landing page mvp

components/comparison.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+import { ArrowRight, Check, X, Minus } from 'lucide-react'
+
+type CellValue = 'yes' | 'no' | 'partial' | string
+
+interface Row {
+  feature: string
+  greywall: CellValue
+  safehouse: CellValue
+  claudeSandbox: CellValue
+  containers: CellValue
+}
+
+const rows: Row[] = [
+  {
+    feature: 'Linux support',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'yes',
+    containers: 'yes',
+  },
+  {
+    feature: 'macOS support',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'yes',
+    containers: 'partial',
+  },
+  {
+    feature: 'Filesystem isolation',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'yes',
+    containers: 'yes',
+  },
+  {
+    feature: 'Network isolation',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'yes',
+    containers: 'yes',
+  },
+  {
+    feature: 'Transparent network capture',
+    greywall: 'Linux',
+    safehouse: 'no',
+    claudeSandbox: 'no',
+    containers: 'no',
+  },
+  {
+    feature: 'Command blocking',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'no',
+    containers: 'no',
+  },
+  {
+    feature: 'Real-time violation monitoring',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'no',
+    containers: 'no',
+  },
+  {
+    feature: 'Learning mode',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'no',
+    containers: 'no',
+  },
+  {
+    feature: 'Works with any agent',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'no',
+    containers: 'yes',
+  },
+  {
+    feature: 'Sandboxes entire process',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'partial',
+    containers: 'yes',
+  },
+  {
+    feature: 'Native tool access',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'yes',
+    containers: 'no',
+  },
+  {
+    feature: 'No image rebuilds on changes',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'yes',
+    containers: 'no',
+  },
+  {
+    feature: 'Open source',
+    greywall: 'yes',
+    safehouse: 'yes',
+    claudeSandbox: 'partial',
+    containers: 'yes',
+  },
+  {
+    feature: 'Syscall filtering',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'no',
+    containers: 'partial',
+  },
+  {
+    feature: 'Dynamic allow/deny',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'partial',
+    containers: 'no',
+  },
+  {
+    feature: 'No deprecated APIs',
+    greywall: 'yes',
+    safehouse: 'no',
+    claudeSandbox: 'yes',
+    containers: 'yes',
+  },
+]
+
+function CellIcon({ value }: { value: CellValue }) {
+  if (value === 'yes') {
+    return (
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400/10">
+        <Check className="h-3 w-3 text-green-400" />
+      </span>
+    )
+  }
+  if (value === 'no') {
+    return (
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-400/10">
+        <X className="h-3 w-3 text-red-400/70" />
+      </span>
+    )
+  }
+  if (value === 'partial') {
+    return (
+      <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-400/10">
+        <Minus className="h-3 w-3 text-yellow-400/70" />
+      </span>
+    )
+  }
+  return (
+    <span className="text-xs font-mono text-muted-foreground">{value}</span>
+  )
+}
+
+export function Comparison() {
+  return (
+    <section id="comparison" className="py-24 px-6 border-t border-border/30">
+      <div className="mx-auto max-w-5xl">
+        <div className="max-w-2xl mb-12">
+          <div className="flex items-center gap-2 mb-4">
+            <ArrowRight className="h-4 w-4 text-primary" />
+            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
+              How it compares
+            </span>
+          </div>
+          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
+            Not all sandboxes are equal.
+          </h2>
+          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
+            Greywall combines filesystem isolation, network control, syscall filtering,
+            and real-time monitoring in a single tool. Here&apos;s how it stacks up.
+          </p>
+        </div>
+
+        {/* Desktop table */}
+        <div className="hidden md:block rounded-lg border border-border/40 overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border/40 bg-card/40">
+                <th className="text-left py-3.5 px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                  Feature
+                </th>
+                <th className="text-center py-3.5 px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
+                  Greywall
+                </th>
+                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                  Safehouse
+                </th>
+                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                  Claude Sandbox
+                </th>
+                <th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                  Containers
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, i) => (
+                <tr
+                  key={row.feature}
+                  className={`border-b border-border/20 ${i % 2 === 0 ? 'bg-card/10' : ''}`}
+                >
+                  <td className="py-3 px-4 font-serif text-sm text-foreground">
+                    {row.feature}
+                  </td>
+                  <td className="py-3 px-3 text-center">
+                    <div className="flex justify-center">
+                      <CellIcon value={row.greywall} />
+                    </div>
+                  </td>
+                  <td className="py-3 px-3 text-center">
+                    <div className="flex justify-center">
+                      <CellIcon value={row.safehouse} />
+                    </div>
+                  </td>
+                  <td className="py-3 px-3 text-center">
+                    <div className="flex justify-center">
+                      <CellIcon value={row.claudeSandbox} />
+                    </div>
+                  </td>
+                  <td className="py-3 px-3 text-center">
+                    <div className="flex justify-center">
+                      <CellIcon value={row.containers} />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Mobile cards */}
+        <div className="md:hidden space-y-2">
+          {rows.map((row) => (
+            <div
+              key={row.feature}
+              className="p-4 rounded-lg border border-border/30 bg-card/20"
+            >
+              <div className="font-serif text-sm text-foreground mb-3">{row.feature}</div>
+              <div className="grid grid-cols-4 gap-1.5 text-center">
+                <div>
+                  <div className="text-[10px] font-sans text-primary font-medium mb-1">Greywall</div>
+                  <div className="flex justify-center"><CellIcon value={row.greywall} /></div>
+                </div>
+                <div>
+                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Safehouse</div>
+                  <div className="flex justify-center"><CellIcon value={row.safehouse} /></div>
+                </div>
+                <div>
+                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Claude</div>
+                  <div className="flex justify-center"><CellIcon value={row.claudeSandbox} /></div>
+                </div>
+                <div>
+                  <div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Containers</div>
+                  <div className="flex justify-center"><CellIcon value={row.containers} /></div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Legend */}
+        <div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground">
+          <div className="flex items-center gap-1.5">
+            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-400/10">
+              <Check className="h-3 w-3 text-green-400" />
+            </span>
+            Supported
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-yellow-400/10">
+              <Minus className="h-3 w-3 text-yellow-400/70" />
+            </span>
+            Partial
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-400/10">
+              <X className="h-3 w-3 text-red-400/70" />
+            </span>
+            Not supported
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}