monadical/greywall-landing-page
13
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

205
app/globals.css
View File

@@ -4,77 +4,64 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: 240 240 236;
--foreground: 22 22 20;
--card: 249 249 247;
--card-foreground: 22 22 20;
--popover: 249 249 247;
--popover-foreground: 22 22 20;
--primary: 217 94 42;
--primary-foreground: 249 249 247;
--secondary: 240 240 236;
--secondary-foreground: 47 47 44;
--muted: 240 240 236;
--muted-foreground: 87 87 83;
--accent: 221 221 215;
--accent-foreground: 22 22 20;
--destructive: 180 50 50;
--destructive-foreground: 249 249 247;
--border: 196 196 189;
--input: 196 196 189;
--ring: 217 94 42;
--radius: 0.375rem;
}
.dark {
--background: 22 22 20;
--foreground: 249 249 247;
--card: 47 47 44;
--card-foreground: 249 249 247;
--popover: 47 47 44;
--popover-foreground: 249 249 247;
--primary: 217 94 42;
--primary-foreground: 249 249 247;
--secondary: 87 87 83;
--secondary-foreground: 249 249 247;
--muted: 87 87 83;
--muted-foreground: 196 196 189;
--accent: 87 87 83;
--accent-foreground: 249 249 247;
--destructive: 180 50 50;
--destructive-foreground: 249 249 247;
--border: 87 87 83;
--input: 87 87 83;
--ring: 217 94 42;
--radius: 0.625rem;
--background: #F0F0EC;
--foreground: #161614;
--card: #F9F9F7;
--card-foreground: #161614;
--popover: #F9F9F7;
--popover-foreground: #161614;
--primary: #D95E2A;
--primary-foreground: #F9F9F7;
--secondary: #F0F0EC;
--secondary-foreground: #161614;
--muted: #F0F0EC;
--muted-foreground: #575753;
--accent: #DDDDD7;
--accent-foreground: #161614;
--destructive: #B43232;
--destructive-foreground: #F9F9F7;
--border: #C4C4BD;
--input: #C4C4BD;
--ring: #D95E2A;
}
@theme inline {
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-offwhite: #F9F9F7;
--color-orange: #D95E2A;
--color-grey-1: #F0F0EC;
--color-grey-2: #DDDDD7;
--color-grey-3: #C4C4BD;
--color-grey-4: #A6A69F;
--color-grey-5: #7F7F79;
--color-grey-7: #575753;
--color-grey-8: #2F2F2C;
--color-grey-9: #161614;
--font-sans: var(--font-geist-sans);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--color-background: rgb(var(--background));
--color-foreground: rgb(var(--foreground));
--color-card: rgb(var(--card));
--color-card-foreground: rgb(var(--card-foreground));
--color-popover: rgb(var(--popover));
--color-popover-foreground: rgb(var(--popover-foreground));
--color-primary: rgb(var(--primary));
--color-primary-foreground: rgb(var(--primary-foreground));
--color-secondary: rgb(var(--secondary));
--color-secondary-foreground: rgb(var(--secondary-foreground));
--color-muted: rgb(var(--muted));
--color-muted-foreground: rgb(var(--muted-foreground));
--color-accent: rgb(var(--accent));
--color-accent-foreground: rgb(var(--accent-foreground));
--color-destructive: rgb(var(--destructive));
--color-destructive-foreground: rgb(var(--destructive-foreground));
--color-border: rgb(var(--border));
--color-input: rgb(var(--input));
--color-ring: rgb(var(--ring));
--radius-sm: calc(var(--radius) - 2px);
--radius-md: var(--radius);
--radius-lg: calc(var(--radius) + 2px);
--font-serif: var(--font-source-serif-pro);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-greyhaven-orange: #D95E2A;
@@ -89,6 +76,18 @@
--color-greyhaven-grey8: #2F2F2C;
}
* {
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
}
body {
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
width: 100%;
overflow-x: visible;
background: #DDDDD7;
min-height: 100vh;
}
@layer base {
* {
@apply border-border outline-ring/50;
@@ -101,22 +100,46 @@
}
}
/* Code block styling */
.code-block {
background: rgb(30 30 27);
border: 1px solid rgb(var(--border));
border-radius: var(--radius-lg);
.bg-gradient {
background: #DDDDD7;
}
/* Subtle glow effect for primary elements */
.glow-orange {
box-shadow: 0 0 40px rgba(217, 94, 42, 0.08);
.title-serif {
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
font-weight: 600;
letter-spacing: -2%;
}
.text-serif {
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
font-weight: 600;
}
.surface-card {
background: rgba(249, 249, 247, 0.92);
box-shadow: 0 8px 24px rgba(22, 22, 20, 0.05);
}
/* Code block styling */
.code-block {
background: rgb(47 47 44);
border: 1px solid rgb(87 87 83);
border-radius: var(--radius-lg);
box-shadow:
inset 0 1px 0 rgba(249, 249, 247, 0.04),
0 6px 18px rgba(22, 22, 20, 0.06);
}
.code-block,
.code-block * {
font-family: var(--font-mono);
}
/* Terminal prompt styling */
.terminal-line::before {
content: '$ ';
color: rgb(var(--muted-foreground));
color: var(--muted-foreground);
}
/* Smooth section transitions */
@@ -124,35 +147,21 @@ section {
scroll-margin-top: 5rem;
}
/* Custom scrollbar for dark theme */
.dark ::-webkit-scrollbar {
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
.dark ::-webkit-scrollbar-track {
background: rgb(22 22 20);
::-webkit-scrollbar-track {
background: rgb(240 240 236);
}
.dark ::-webkit-scrollbar-thumb {
background: rgb(87 87 83);
::-webkit-scrollbar-thumb {
background: rgb(166 166 159);
border-radius: 4px;
}
/* Animated gradient border */
@keyframes border-glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.border-glow {
animation: border-glow 3s ease-in-out infinite;
}
/* Layer card hover effect */
.layer-card {
transition: all 0.3s ease;
}
.layer-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s ease;
}
/* Carousel progress bar */
@@ -174,7 +183,7 @@ section {
}
.animate-fade-up {
animation: fade-up 0.6s ease-out forwards;
animation: fade-up 0.45s ease-out forwards;
}
/* Stagger children */

4
app/greyscan/layout.tsx
View File

@@ -2,13 +2,13 @@ import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Greyscan | Greywall',
description: 'Scan your repo and see what an unrestricted AI agent would attempt. Powered by Greywall.',
description: 'Inspect what an unrestricted AI agent would likely try on your machine from a public repository context.',
alternates: {
canonical: 'https://greywall.io/greyscan',
},
openGraph: {
title: 'Greyscan | Greywall',
description: 'Scan your repo and see what an unrestricted AI agent would attempt. Powered by Greywall.',
description: 'Inspect what an unrestricted AI agent would likely try on your machine from a public repository context.',
url: 'https://greywall.io/greyscan',
siteName: 'Greywall',
type: 'website',

29
app/greyscan/page.tsx
View File

@@ -5,6 +5,7 @@ import {
Shield, AlertTriangle, Globe, FolderOpen, Terminal,
ArrowLeft, Copy, Check, ArrowRight, Lock, Eye, MessageSquareWarning,
} from 'lucide-react'
import { GreywallLogo } from '@/components/logo'
// --- Types ---
@@ -354,23 +355,17 @@ export default function GamePage() {
return (
<main className="min-h-screen">
{/* Nav */}
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-md">
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/90 backdrop-blur-md">
<div className="mx-auto max-w-5xl flex items-center justify-between px-6 h-14">
<a href="/" className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
<ArrowLeft className="h-4 w-4" />
<span className="hidden sm:inline">Back to Greywall</span>
</a>
<div className="flex items-center gap-2.5">
<svg viewBox="0 0 32 32" fill="none" className="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2L4 7V15C4 22.18 9.11 28.79 16 30C22.89 28.79 28 22.18 28 15V7L16 2Z" fill="#D95E2A" />
<path d="M16 6L8 9.5V15C8 20.05 11.42 24.68 16 26C20.58 24.68 24 20.05 24 15V9.5L16 6Z" fill="#161614" />
<circle cx="16" cy="12" r="2" fill="#D95E2A" />
<circle cx="12" cy="17" r="1.5" fill="#D95E2A" />
<circle cx="20" cy="17" r="1.5" fill="#D95E2A" />
<circle cx="16" cy="21" r="1.5" fill="#D95E2A" />
<path d="M16 14V19.5M14 16L12.5 17M18 16L19.5 17" stroke="#D95E2A" strokeWidth="1" strokeLinecap="round" />
</svg>
<span className="font-serif font-semibold text-lg tracking-tight">Greyscan</span>
<div className="inline-flex items-center gap-3">
<GreywallLogo size="small" />
<span className="font-sans text-lg font-semibold tracking-[-0.03em] text-foreground">
Greyscan
</span>
</div>
<div className="w-20" />
</div>
@@ -380,7 +375,6 @@ export default function GamePage() {
{/* ── INPUT PHASE ── */}
{phase === 'input' && (
<section className="relative min-h-[calc(100vh-3.5rem)] flex items-center justify-center px-4 sm:px-6">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.06)_0%,transparent_50%)]" />
<div
className="absolute inset-0 opacity-[0.03]"
style={{
@@ -391,12 +385,11 @@ export default function GamePage() {
<div className="relative max-w-2xl w-full text-center animate-fade-up">
<h1 className="font-serif text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1] mb-4">
What would an AI agent{' '}
<em className="italic text-primary">try on your machine?</em>
What would an unrestricted agent try on your machine?
</h1>
<p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed mb-10 max-w-xl mx-auto">
AI agents run as you, with access to everything you have. Paste a repo and see what an unrestricted agent could attempt. This is an awareness tool, not a security assessment.
Paste a public repository and Greyscan will estimate the reads, writes, and calls an unrestricted agent would likely attempt from that context. This is an awareness tool, not a security assessment.
</p>
<form
@@ -421,7 +414,7 @@ export default function GamePage() {
</form>
<p className="text-xs text-muted-foreground/50 mt-4 font-sans">
Public repos only &middot; No code is stored &middot; Powered by <a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer" className="text-primary hover:text-primary/80 transition-colors">Greywall</a>
Public repos only &middot; No code is stored &middot; Built on <a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer" className="text-primary hover:text-primary/80 transition-colors">Greywall</a>
</p>
</div>
</section>
@@ -501,7 +494,7 @@ export default function GamePage() {
<section className="px-4 sm:px-6 py-12 sm:py-16">
<div className="max-w-2xl mx-auto">
{/* Report Card */}
<div className="border border-border/30 rounded-xl overflow-hidden bg-card/20 animate-fade-up glow-orange">
<div className="border border-border/30 rounded-xl overflow-hidden bg-card/20 animate-fade-up">
{/* Header */}
<div className="p-6 sm:p-8 border-b border-border/20">
<div className="flex items-start justify-between gap-4">

49
app/layout.tsx
View File

@@ -1,37 +1,46 @@
import type { Metadata } from 'next'
import { Inter, Source_Serif_4 } from 'next/font/google'
import { Geist } from 'next/font/google'
import localFont from 'next/font/local'
import './globals.css'
const inter = Inter({
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
const sourceSerif = Source_Serif_4({
subsets: ['latin'],
const sourceSerifPro = localFont({
src: [
{
path: '../public/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf',
style: 'normal',
},
{
path: '../public/fonts/Source_Serif_4/SourceSerif4-Italic-VariableFont_opsz,wght.ttf',
style: 'italic',
},
],
variable: '--font-source-serif-pro',
weight: '200 900',
display: 'swap',
variable: '--font-source-serif',
style: ['normal', 'italic'],
axes: ['opsz'],
preload: true,
})
export const metadata: Metadata = {
metadataBase: new URL('https://greywall.io'),
title: 'Greywall: Sandbox for AI Agents',
title: 'Greywall | Contained Sandboxing for AI Agents',
description:
'Container-free, default-deny sandboxing with real-time observability for AI agents on Linux and macOS. Five kernel-enforced security layers in one command. Open source.',
'Default-deny sandboxing with real-time observability for AI agents on Linux and macOS. Filesystem, network, and command boundaries stay under your control.',
icons: {
icon: [
{ url: '/icon.svg', type: 'image/svg+xml' },
{ url: '/greyhaven-mark.svg', type: 'image/svg+xml' },
{ url: '/icon-dark-32x32.png', sizes: '32x32', type: 'image/png', media: '(prefers-color-scheme: dark)' },
{ url: '/icon-light-32x32.png', sizes: '32x32', type: 'image/png', media: '(prefers-color-scheme: light)' },
],
apple: '/apple-icon.png',
},
openGraph: {
title: 'Greywall: Sandbox for AI Agents',
description: 'Container-free, default-deny sandboxing with real-time observability for AI agents. Five kernel-enforced security layers in one command.',
title: 'Greywall | Contained Sandboxing for AI Agents',
description: 'Default-deny sandboxing with real-time observability for AI agents on Linux and macOS.',
url: 'https://greywall.io',
siteName: 'Greywall',
type: 'website',
@@ -39,8 +48,8 @@ export const metadata: Metadata = {
},
twitter: {
card: 'summary_large_image',
title: 'Greywall: Sandbox for AI Agents',
description: 'Container-free, default-deny sandboxing with real-time observability for AI agents. Five kernel-enforced security layers in one command.',
title: 'Greywall | Contained Sandboxing for AI Agents',
description: 'Default-deny sandboxing with real-time observability for AI agents on Linux and macOS.',
images: ['/og-image.png'],
},
alternates: {
@@ -56,7 +65,7 @@ const jsonLd = {
'@id': 'https://greyhaven.co/#organization',
name: 'Greyhaven',
url: 'https://greyhaven.co',
logo: { '@type': 'ImageObject', url: 'https://greywall.io/icon.svg' },
logo: { '@type': 'ImageObject', url: 'https://greywall.io/greyhaven-mark.svg' },
sameAs: ['https://github.com/GreyhavenHQ'],
},
{
@@ -71,7 +80,7 @@ const jsonLd = {
'@id': 'https://greywall.io/#software',
name: 'Greywall',
description:
'Container-free, default-deny sandboxing with real-time observability and dynamic controls for AI agents on Linux and macOS.',
'Default-deny sandboxing with real-time observability and dynamic controls for AI agents on Linux and macOS.',
applicationCategory: 'SecurityApplication',
operatingSystem: 'Linux, macOS',
url: 'https://greywall.io',
@@ -107,14 +116,14 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en" className={`dark ${inter.variable} ${sourceSerif.variable}`}>
<html lang="en">
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
</head>
<body className="font-sans antialiased bg-background text-foreground">
<body className={`${geistSans.variable} ${sourceSerifPro.variable} min-h-dvh flex flex-col`}>
{children}
</body>
</html>

2
app/page.tsx
View File

@@ -18,7 +18,7 @@ import { Footer } from '@/components/footer'
export default function Home() {
return (
<PlatformProvider>
<main className="min-h-screen">
<main className="bg-gradient min-h-screen">
<Nav />
<Hero />
<Problem />