style: streamline marketing homepage

Author: New1Direction

website/app/(home)/page.tsx

@@ -3,7 +3,6 @@ import { VerdictDemo } from '@/components/home/VerdictDemo';
 import { FeatureBento } from '@/components/home/FeatureBento';
 import { HowItWorks } from '@/components/home/HowItWorks';
 import { ModelsPrivacy } from '@/components/home/ModelsPrivacy';
-import { ThemeShowcase } from '@/components/home/ThemeShowcase';
 import { FinalCta } from '@/components/home/FinalCta';
 import { SiteMotion } from '@/components/home/SiteMotion';
 import './styles/home.css';
@@ -16,7 +15,6 @@ export default function HomePage() {
       <FeatureBento />
       <HowItWorks />
       <ModelsPrivacy />
-      <ThemeShowcase />
       <FinalCta />
       <SiteMotion />
     </>

website/app/(home)/styles/home.css

@@ -19,16 +19,146 @@
   align-items: flex-start;
 }
 .hero-aside {
+  position: relative;
   display: flex;
   justify-content: center;
+  width: min(100%, 560px);
+}
+.hero-proof {
+  position: relative;
+  z-index: 3;
+  width: clamp(320px, 30vw, 410px);
+  border-radius: 22px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--surface-2) 94%, white);
+  border: 1px solid var(--border-2);
+  box-shadow: var(--shadow-lg);
+}
+.hero-proof::after {
+  content: '';
+  position: absolute;
+  inset: -30% -20% auto auto;
+  width: 180px;
+  height: 180px;
+  border-radius: 999px;
+  background: var(--accent-weak);
+  filter: blur(16px);
+  pointer-events: none;
+}
+.hero-proof-bar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-2) 64%, transparent);
+}
+.proof-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--border-2);
+}
+.proof-dot:first-child {
+  background: var(--pop);
+}
+.proof-dot:nth-child(2) {
+  background: var(--warm);
+}
+.proof-dot:nth-child(3) {
+  background: var(--accent-3);
+}
+.proof-url {
+  margin-left: auto;
+  font: 700 10px/1 var(--mono);
+  color: var(--muted);
+}
+.hero-proof-body {
+  position: relative;
+  z-index: 1;
+  padding: 18px;
+}
+.proof-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.proof-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 7px 10px;
+  font: 800 11px/1 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent-3);
+  background: color-mix(in srgb, var(--accent-3) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-3) 34%, transparent);
+}
+.proof-score {
+  font: 850 2.4rem/0.9 var(--font-display, var(--sans));
+  letter-spacing: -0.04em;
+  color: var(--accent);
+}
+.hero-proof h2 {
+  margin: 14px 0 8px;
+  font-size: clamp(1.18rem, 1rem + 0.6vw, 1.45rem);
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  color: var(--text-strong);
+}
+.hero-proof p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+.proof-meter {
+  height: 9px;
+  margin: 16px 0 14px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+}
+.proof-meter span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), var(--accent-3));
+}
+.proof-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 7px;
+}
+.proof-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  font: 700 11px/1 var(--mono);
+  color: var(--text);
 }
 
-/* Video mascot — framed "viewport", now a real focal asset on the right. */
+/* Video mascot — framed "viewport", now a supporting character beside product proof. */
 .hero-mascot {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
+  transform: translateY(-50%);
 }
 .hero-mascot-stage {
   position: relative;
@@ -131,7 +261,11 @@
     align-items: center;
   }
   .hero-aside {
-    order: -1;
+    width: 100%;
+    margin-top: 22px;
+  }
+  .hero-proof {
+    width: min(100%, 360px);
   }
   .hero-title,
   .hero-sub,
@@ -146,8 +280,11 @@
     margin-left: auto;
     margin-right: auto;
   }
+  .hero-mascot {
+    gap: 8px;
+  }
   .hero-mascot-stage {
-    width: clamp(190px, 52vw, 240px);
+    width: clamp(170px, 46vw, 220px);
   }
 }
 
@@ -859,7 +996,7 @@
 /* Pull the closing CTA up — the generic section top padding left it floating in
    a void between the showcase strip and the footer. */
 .site-root .final-cta {
-  padding-top: clamp(36px, 3.5vw, 60px);
+  padding: clamp(34px, 3vw, 56px) 0 0;
 }
 .final-cta-inner {
   text-align: center;
@@ -874,8 +1011,18 @@
   border: 1px solid var(--border-2);
   box-shadow: var(--shadow-lg);
 }
-.final-cta-inner .vee {
-  color: var(--text-strong);
+.final-cta-kicker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 8px 12px;
+  font: 800 11px/1 var(--mono);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: var(--accent-weak);
+  border: 1px solid var(--accent-line);
 }
 .final-cta-title {
   font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);

website/app/(home)/styles/shell.css

@@ -411,14 +411,14 @@
 /* ── Footer ──────────────────────────────────────────────────────────── */
 .site-footer {
   flex-shrink: 0;
-  margin-top: clamp(36px, 3.5vw, 64px);
+  margin-top: clamp(22px, 2.4vw, 38px);
   border-top: 1px solid var(--border);
   background: color-mix(in srgb, var(--surface) 50%, transparent);
 }
 .site-footer-inner {
   max-width: var(--site-max);
   margin: 0 auto;
-  padding: 52px 24px 36px;
+  padding: 42px 24px 30px;
   display: grid;
   grid-template-columns: 1.4fr 2fr;
   gap: 40px;
@@ -472,7 +472,7 @@
 .site-footer-base {
   max-width: var(--site-max);
   margin: 0 auto;
-  padding: 18px 24px 46px;
+  padding: 16px 24px 32px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;

website/components/home/FeatureBento.tsx

@@ -11,65 +11,37 @@ type Feature = {
 const FEATURES: Feature[] = [
   {
     icon: 'verdict',
-    title: 'Verdict-first',
-    body: 'A fit call — strong / solid / care / risky — plus a one-line bottom line, before anything else. The decision, then the evidence.',
-    tags: ['fit', 'bottom line', 'health'],
+    title: 'Scan the dependency page',
+    body: 'Open a GitHub, GitLab, npm, or PyPI page and get a verdict-first briefing: fit, risk, maintenance, license, and the bottom line.',
+    tags: ['scan', 'verdict', 'risk'],
     span: 'wide',
   },
   {
-    icon: 'search',
-    title: 'Discovery & recommendations',
-    body: 'Search GitHub from inside the extension, or let RepoLens recommend peers from the repos you’ve already adopted — same capabilities, same language, ones you haven’t seen yet.',
-    tags: ['discover', 'recommend', 'github'],
+    icon: 'layers',
+    title: 'Read the evidence',
+    body: 'Deep Dive explains the actual shape of the project — files, dependency graph, tests, lineage, and plain-English reasoning.',
+    tags: ['evidence', 'deep dive'],
     span: 'wide',
   },
   {
     icon: 'rows',
-    title: 'Library + triage',
-    body: 'Every scan becomes a sortable, filterable grid. Decide with the keyboard, in flow.',
-    tags: ['triage', 'keyboard'],
-    span: 'normal',
-  },
-  {
-    icon: 'kanban',
-    title: 'Boards',
-    body: 'Group the repos you’re weighing into collections you can compare and revisit.',
-    tags: ['collections'],
-    span: 'normal',
-  },
-  {
-    icon: 'star',
-    title: 'Evaluations',
-    body: 'Score repos 1–5 against your own weighted rubric. The badge follows each card.',
-    tags: ['rubric', 'scoring'],
+    title: 'Triage the shortlist',
+    body: 'Every scan lands in a sortable library with boards, evaluations, drift alerts, and keyboard-first decisions.',
+    tags: ['library', 'boards'],
     span: 'normal',
   },
   {
     icon: 'bars',
-    title: 'N-way compare',
-    body: 'Put any 2–10 repos side-by-side in a structured matrix; export to CSV or Markdown.',
-    tags: ['matrix', 'export'],
-    span: 'normal',
-  },
-  {
-    icon: 'layers',
-    title: 'Deep Dive',
-    body: 'Atoms → lineage → a Feynman-style explanation, optionally grounded in measured facts from the source: real file counts, the dependency graph, tests, and a secret scan.',
-    tags: ['eli5', 'lineage', 'grounded'],
-    span: 'wide',
-  },
-  {
-    icon: 'clock',
-    title: 'Drift alerts',
-    body: 'A daily background check flags repos that have gone stale, so your shortlist stays honest.',
-    tags: ['stale', 'daily'],
+    title: 'Compare alternatives',
+    body: 'Put candidates side-by-side, search GitHub for peers, and export the reasoning to CSV or Markdown.',
+    tags: ['compare', 'export'],
     span: 'normal',
   },
   {
     icon: 'sliders',
-    title: 'Bring any model',
-    body: 'Your keys, 20+ providers, route each part of a scan to a different model — or run local Ollama for $0.',
-    tags: ['byo-keys', 'local'],
+    title: 'Keep it local/private',
+    body: 'Bring your own keys, route scans across 20+ providers, or run local Ollama. No server account required.',
+    tags: ['local', 'byo keys'],
     span: 'normal',
   },
 ];
@@ -80,11 +52,11 @@ export function FeatureBento() {
       <div className="container">
         <span className="eyebrow">The case file</span>
         <h2 id="features-heading" className="section-title">
-          A research tool, not a bookmark folder.
+          The dependency decision workflow.
         </h2>
         <p className="section-note">
-          Thirty-plus releases of compounding workflow — from the first verdict to a library that
-          finds its own peers.
+          Fewer moving parts up front: scan a package, read the evidence, compare alternatives,
+          and keep the whole evaluation local/private.
         </p>
 
         <div className="bento">

website/components/home/FinalCta.tsx

@@ -1,12 +1,11 @@
 import Link from 'next/link';
-import { Vee } from '@/components/site/Vee';
 import { GITHUB_URL } from '@/components/site/SiteHeader';
 
 export function FinalCta() {
   return (
     <section className="section final-cta reveal" aria-labelledby="cta-heading">
       <div className="container final-cta-inner">
-        <Vee state="strong" size={56} label="Vee, ready" />
+        <span className="final-cta-kicker">Local/private by default</span>
         <h2 id="cta-heading" className="final-cta-title">
           Stop trusting the README.
         </h2>
@@ -16,7 +15,7 @@ export function FinalCta() {
         </p>
         <div className="hero-cta">
           <Link href="/docs/getting-started" className="btn btn-primary">
-            Install RepoLens
+            Add to Chrome — local/private
           </Link>
           <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
             Star on GitHub →