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

feat: new design

Browse Source
This commit is contained in:
Nik L
2026-04-13 13:09:46 -04:00
parent 14fcaea830
commit b2879e1a5e
34 changed files with 573 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/layers.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { Box, Lock, ShieldCheck, Eye, Wifi, Layers as LayersIcon, Shield, Terminal } from 'lucide-react'
import { Box, Lock, ShieldCheck, Eye, Wifi, Shield, Terminal } from 'lucide-react'
import { PlatformToggle, usePlatform } from './platform-toggle'
const linuxLayers = [
@@ -81,19 +81,16 @@ export function Layers() {
<div className="mx-auto max-w-5xl">
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-16">
<div className="max-w-2xl">
<div className="flex items-center gap-2 mb-4">
<LayersIcon className="h-4 w-4 text-primary" />
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
Defense in depth
</span>
</div>
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
<span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
Defense in depth
</span>
<h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
{platform === 'linux' ? 'Five orthogonal security layers.' : 'Kernel-enforced on every call.'}
</h2>
<p className="text-muted-foreground font-serif text-lg leading-relaxed">
<p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
{platform === 'linux'
? 'Each layer operates independently. A bug in one is caught by another. No single point of failure. Every constraint is enforced at the kernel level.'
: 'macOS Seatbelt enforces deny-by-default policies before any syscall completes. The sandbox profile is generated per-session with rules tailored to your project.'}
? 'Each layer constrains a different part of the runtime. If one mechanism misses something, another can still catch it at the kernel boundary.'
: 'macOS Seatbelt enforces deny-by-default rules before the call completes. The profile is generated per session from the project context you allow.'}
</p>
</div>
<PlatformToggle />
@@ -105,7 +102,7 @@ export function Layers() {
key={layer.name}
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">
<div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-muted/30 text-foreground">
<layer.icon className="h-5 w-5" />
</div>
<div className="flex-1 min-w-0">
@@ -113,7 +110,7 @@ export function Layers() {
<h3 className="font-sans font-semibold text-sm text-foreground">
{layer.name}
</h3>
<span className="px-2 py-0.5 rounded text-[10px] font-sans font-medium uppercase tracking-wider bg-primary/10 text-primary">
<span className="px-2 py-0.5 rounded text-[10px] font-sans font-medium uppercase tracking-wider bg-muted/30 text-muted-foreground">
{layer.tag}
</span>
</div>
@@ -135,22 +132,20 @@ export function Layers() {
{platform === 'linux' ? (
<>
<span className="text-primary font-medium">Graceful degradation.</span>{' '}
Greywall detects kernel features at runtime and activates every layer your system
supports. Run{' '}
Greywall checks the kernel features available on the host and enables the layers it can support. Run{' '}
<code className="font-mono text-xs text-foreground bg-card/50 px-1.5 py-0.5 rounded">
greywall --linux-features
</code>{' '}
to see what&apos;s available.
to inspect the active set.
</>
) : (
<>
<span className="text-primary font-medium">No dependencies.</span>{' '}
macOS sandboxing uses only built-in OS capabilities. No packages to install.
Run{' '}
macOS sandboxing uses the built-in system facilities. Run{' '}
<code className="font-mono text-xs text-foreground bg-card/50 px-1.5 py-0.5 rounded">
greywall check
</code>{' '}
to verify your setup.
to verify the local setup.
</>
)}
</p>