From b2879e1a5eaf7b3bc1596e9b2409d1c350b11975 Mon Sep 17 00:00:00 2001 From: Nik L Date: Mon, 13 Apr 2026 13:09:46 -0400 Subject: [PATCH] feat: new design --- app/globals.css | 205 +++++++++--------- app/greyscan/layout.tsx | 4 +- app/greyscan/page.tsx | 29 +-- app/layout.tsx | 49 +++-- app/page.tsx | 2 +- components/about.tsx | 36 +-- components/agents.tsx | 17 +- components/beta-signup.tsx | 109 ++++++++++ components/comparison.tsx | 22 +- components/control.tsx | 101 ++++----- components/cta-button.tsx | 38 ++++ components/faq.tsx | 24 +- components/footer.tsx | 19 +- components/getting-started.tsx | 18 +- components/hero.tsx | 159 ++++---------- components/layers.tsx | 33 ++- components/logo.tsx | 26 +++ components/nav.tsx | 43 ++-- components/observability.tsx | 21 +- components/platform-toggle.tsx | 4 +- components/problem.tsx | 45 ++-- components/waitlist.tsx | 121 ++--------- public/fonts/Aspekta-500.woff2 | Bin 0 -> 22124 bytes public/fonts/Aspekta-600.woff2 | Bin 0 -> 22140 bytes public/fonts/Aspekta-700.woff2 | Bin 0 -> 22168 bytes ...ceSerif4-Italic-VariableFont_opsz,wght.ttf | Bin 0 -> 843444 bytes .../SourceSerif4-VariableFont_opsz,wght.ttf | Bin 0 -> 1196808 bytes public/fonts/source-serif-pro-600.woff2 | Bin 0 -> 76988 bytes public/fonts/source-serif-pro-700.woff2 | Bin 0 -> 77096 bytes public/greyhaven-lockup.svg | 19 ++ public/greyhaven-mainbg.svg | 9 + public/greyhaven-mark.svg | 3 + public/greywall-logo.png | Bin 0 -> 8575 bytes public/icon.svg | 25 +-- 34 files changed, 573 insertions(+), 608 deletions(-) create mode 100644 components/beta-signup.tsx create mode 100644 components/cta-button.tsx create mode 100644 components/logo.tsx create mode 100644 public/fonts/Aspekta-500.woff2 create mode 100644 public/fonts/Aspekta-600.woff2 create mode 100644 public/fonts/Aspekta-700.woff2 create mode 100644 public/fonts/Source_Serif_4/SourceSerif4-Italic-VariableFont_opsz,wght.ttf create mode 100644 public/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf create mode 100644 public/fonts/source-serif-pro-600.woff2 create mode 100644 public/fonts/source-serif-pro-700.woff2 create mode 100644 public/greyhaven-lockup.svg create mode 100644 public/greyhaven-mainbg.svg create mode 100644 public/greyhaven-mark.svg create mode 100644 public/greywall-logo.png diff --git a/app/globals.css b/app/globals.css index 8356a1f..edae4d3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 */ diff --git a/app/greyscan/layout.tsx b/app/greyscan/layout.tsx index 49f2471..370964a 100644 --- a/app/greyscan/layout.tsx +++ b/app/greyscan/layout.tsx @@ -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', diff --git a/app/greyscan/page.tsx b/app/greyscan/page.tsx index d4192c7..91fcb51 100644 --- a/app/greyscan/page.tsx +++ b/app/greyscan/page.tsx @@ -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 (
{/* Nav */} -