feat: new design

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

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">