Feat/landing cleanup

app/components/landing/Hero.tsx

@@ -1,15 +1,15 @@
 'use client'
 
-import { ArrowRight, Bot, CheckCircle2, Chrome, Code2, FileText, Link2, StickyNote, Zap } from 'lucide-react'
+import { ArrowRight, Bot, CheckCircle2, Code2, FileText, Link2, StickyNote, Terminal, Zap } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
 import { useRouter } from 'next/navigation'
 
+// Only features that are actually live today
 const trustItems = [
-  { icon: Link2, label: 'Links & PDFs' },
-  { icon: Bot, label: 'AI search' },
+  { icon: Link2, label: 'Save links & notes' },
+  { icon: Bot, label: 'AI search (RAG)' },
   { icon: Code2, label: 'REST API' },
   { icon: FileText, label: 'Claude MCP' },
-  { icon: Chrome, label: 'Browser extension' },
 ]
 
 const Hero = () => {
@@ -45,13 +45,49 @@ const Hero = () => {
               finally useful.
             </span>
           </h1>
+          {/* Honest subhead — describes only what's live today */}
           <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300">
-            DumpIt indexes everything you save — links, notes, PDFs — and lets you ask questions across it all. Via web, browser extension, API, or Claude MCP.
+            Save links and notes, then ask questions across everything — via the web app, REST API, or Claude MCP.{' '}
+            <span className="text-slate-400 dark:text-slate-500">PDF upload and browser extension coming soon.</span>
+          </p>
+        </div>
+
+        {/* MCP differentiator snippet — visible above the fold */}
+        <div className="mx-auto mt-10 max-w-xl">
+          <div className="overflow-hidden rounded-xl border border-slate-800 bg-slate-900 shadow-xl shadow-black/20">
+            {/* Terminal chrome */}
+            <div className="flex items-center gap-2 border-b border-slate-800 bg-slate-950 px-4 py-2.5">
+              <div className="flex gap-1.5">
+                <span className="h-2.5 w-2.5 rounded-full bg-red-500/60" />
+                <span className="h-2.5 w-2.5 rounded-full bg-amber-500/60" />
+                <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/60" />
+              </div>
+              <Terminal className="ml-2 h-3.5 w-3.5 text-slate-500" />
+              <span className="text-xs font-medium text-slate-400">Claude Desktop · DumpIt MCP</span>
+            </div>
+            {/* Conversation snippet */}
+            <div className="space-y-3 p-4 text-sm">
+              <div className="flex items-start gap-2.5">
+                <span className="mt-0.5 shrink-0 rounded bg-slate-700 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-300">You</span>
+                <span className="text-slate-200">What did I save about RAG citation patterns?</span>
+              </div>
+              <div className="flex items-start gap-2.5">
+                <span className="mt-0.5 shrink-0 rounded bg-blue-900/70 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-blue-300">Claude</span>
+                <div className="text-slate-300">
+                  <span className="text-slate-500 text-xs">[via DumpIt MCP]</span> Found 3 resources in your vault —
+                  <br />
+                  <span className="text-blue-400 text-xs">[1] RAG citation patterns guide · [2] Vector design notes · [3] Citation UX article</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <p className="mt-2 text-center text-xs text-slate-400 dark:text-slate-500">
+            Query your saved knowledge directly from Claude Desktop
           </p>
         </div>
 
         {/* CTAs */}
-        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
+        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
           {user ? (
             <button
               onClick={() => router.push('/dashboard')}
@@ -79,7 +115,7 @@ const Hero = () => {
           )}
         </div>
 
-        {/* Trust strip */}
+        {/* Trust strip — live features only */}
         <div className="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-3">
           {trustItems.map(({ label }) => (
             <div key={label} className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
@@ -140,8 +176,8 @@ const Hero = () => {
                 <div className="space-y-2.5">
                   {[
                     { icon: Link2, label: 'RAG citation patterns guide', type: 'Link', color: 'text-blue-500' },
-                    { icon: FileText, label: 'Gemini Flash prompt design.pdf', type: 'PDF', color: 'text-violet-500' },
                     { icon: StickyNote, label: 'API design notes — v2 endpoints', type: 'Note', color: 'text-amber-500' },
+                    { icon: Link2, label: 'Firestore vector index setup', type: 'Link', color: 'text-blue-500' },
                   ].map((item) => {
                     const ItemIcon = item.icon
                     return (

app/components/landing/Pricing.tsx

@@ -65,25 +65,20 @@ const Pricing = () => {
                 <span className="text-sm font-bold uppercase tracking-wider text-blue-700 dark:text-blue-300">Founding Member Offer</span>
               </div>
               <h3 className="text-2xl font-extrabold text-slate-900 dark:text-white sm:text-3xl">
-                First 500 get 50% off Pro — forever.
+                Early supporters get 50% off Pro — forever.
               </h3>
               <p className="mt-2 text-slate-600 dark:text-slate-300">
                 <strong>$4.50/month</strong> instead of $9. Locked in as long as your subscription is active.
               </p>
-              <div className="mt-3 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
-                <div className="h-2 w-32 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
-                  <div className="h-full w-[65%] rounded-full bg-blue-500" />
-                </div>
-                <span><strong className="text-slate-700 dark:text-slate-200">327 spots remaining</strong> of 500</span>
-              </div>
+              {/* No scarcity counter — add a real claimed-spot number here when you have one */}
             </div>
             <div className="flex flex-col gap-2 sm:shrink-0">
               <a
                 href="https://buy.stripe.com/founding"
                 className="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-blue-500/20 transition hover:bg-blue-700"
               >
                 <Zap className="h-4 w-4" />
-                Claim your spot — $9
+                Get Founding Access — $4.50/mo
                 <ArrowRight className="h-4 w-4" />
               </a>
               <div className="flex items-center justify-center gap-3 text-xs text-slate-500 dark:text-slate-400">

app/components/landing/Roadmap.tsx

@@ -0,0 +1,100 @@
+// Roadmap — compact 4-item visual strip, consistent with zinc/Space Grotesk design system
+
+const roadmapItems = [
+  {
+    label: 'Save links & notes',
+    description: 'Bookmark any URL or write plain-text notes. Both are indexed and AI-searchable.',
+    status: 'live' as const,
+  },
+  {
+    label: 'Ask DumpIt (AI / RAG)',
+    description: 'Semantic search and answer generation across your entire saved knowledge base.',
+    status: 'live' as const,
+  },
+  {
+    label: 'PDF upload',
+    description: 'Upload documents and make their full text AI-searchable alongside your links.',
+    status: 'building' as const,
+  },
+  {
+    label: 'Browser extension',
+    description: 'Clip pages and highlights directly from Chrome without switching tabs.',
+    status: 'next' as const,
+  },
+]
+
+const statusConfig = {
+  live: {
+    label: 'Live',
+    dot: 'bg-emerald-500',
+    pill: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400',
+  },
+  building: {
+    label: 'Building now',
+    dot: 'bg-blue-500 animate-pulse',
+    pill: 'bg-blue-100 text-blue-700 dark:bg-blue-950/60 dark:text-blue-400',
+  },
+  next: {
+    label: 'Next',
+    dot: 'bg-violet-400',
+    pill: 'bg-violet-100 text-violet-700 dark:bg-violet-950/60 dark:text-violet-400',
+  },
+  planned: {
+    label: 'Planned',
+    dot: 'bg-slate-300 dark:bg-slate-600',
+    pill: 'bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400',
+  },
+}
+
+const Roadmap = () => {
+  return (
+    <section id="roadmap" className="scroll-mt-20 border-b border-slate-200 bg-stone-50 py-16 dark:border-slate-800 dark:bg-[#0b0f17]">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-10 flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <span className="app-chip mb-2">Roadmap</span>
+            <h2 className="text-2xl font-extrabold tracking-tight text-slate-950 dark:text-white">
+              What's live, what's next.
+            </h2>
+          </div>
+          <p className="max-w-xs text-sm leading-6 text-slate-500 dark:text-slate-400">
+            Building in public. This is the honest current state of the product.
+          </p>
+        </div>
+
+        {/* Item grid */}
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {roadmapItems.map((item, index) => {
+            const cfg = statusConfig[item.status]
+            return (
+              <div
+                key={item.label}
+                className="app-panel relative flex flex-col gap-3 p-5"
+              >
+                {/* Step number */}
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold text-slate-400 dark:text-slate-600">
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  {/* Status pill */}
+                  <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${cfg.pill}`}>
+                    <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />
+                    {cfg.label}
+                  </span>
+                </div>
+
+                <div>
+                  <h3 className="font-bold text-slate-950 dark:text-white">{item.label}</h3>
+                  <p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">{item.description}</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Roadmap

app/components/landing/Vision.tsx

@@ -1,44 +1,38 @@
-// Social Proof Bar — replaces old Vision section
-const avatars = [
-  { initials: 'RK', color: 'bg-blue-500' },
-  { initials: 'AS', color: 'bg-violet-500' },
-  { initials: 'MJ', color: 'bg-emerald-500' },
-  { initials: 'PT', color: 'bg-amber-500' },
-  { initials: 'DN', color: 'bg-rose-500' },
-]
+// FounderNote — replaces old Social Proof / Vision section
+// Honest "why I'm building this" note. No fabricated stats or avatars.
 
-const SocialProof = () => {
+const FounderNote = () => {
   return (
-    <section className="border-b border-slate-200 bg-white py-10 dark:border-slate-800 dark:bg-slate-950">
-      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 px-4 sm:flex-row sm:px-6 lg:px-8">
-        {/* Avatar stack + user count */}
-        <div className="flex items-center gap-3">
-          <div className="flex -space-x-2.5">
-            {avatars.map((a) => (
-              <div
-                key={a.initials}
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-[11px] font-bold text-white ring-2 ring-white dark:ring-slate-950 ${a.color}`}
-              >
-                {a.initials}
-              </div>
-            ))}
+    <section className="border-b border-slate-200 bg-white py-14 dark:border-slate-800 dark:bg-slate-950">
+      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
+        <div className="rounded-2xl border border-slate-200 bg-stone-50 p-8 dark:border-slate-800 dark:bg-slate-900/60">
+          {/* Author row */}
+          <div className="mb-5 flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white">
+              R
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-slate-900 dark:text-white">Rayan</div>
+              <div className="text-xs text-slate-500 dark:text-slate-400">Building DumpIt</div>
+            </div>
           </div>
-          <div className="text-sm font-medium text-slate-600 dark:text-slate-300">
-            <span className="font-bold text-slate-950 dark:text-white">200+ developers</span> and knowledge workers already saving smarter
-          </div>
-        </div>
 
-        {/* Founding offer pill */}
-        <a
-          href="#pricing"
-          className="inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-4 py-2 text-sm font-semibold text-blue-700 transition hover:bg-blue-100 dark:border-blue-900/50 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-950/70"
-        >
-          <span className="h-2 w-2 animate-pulse rounded-full bg-blue-500" />
-          First 500 founding members get 50% off Pro — forever
-        </a>
+          {/* Founder note body — REPLACE THE PLACEHOLDER BELOW WITH YOUR ACTUAL TEXT */}
+          <blockquote className="text-base leading-8 text-slate-700 dark:text-slate-300">
+            <p>
+              I&apos;m building DumpIt because I kept losing things I&apos;d already learned — a link I read last month, a note I wrote last week, a PDF I forgot I even saved. Most tools just dump your stuff in a folder and leave you to search for it later.
+            </p>
+            <p className="mt-4">
+              What I actually want is a second brain — for me and my team — that doesn&apos;t just store things but understands them. Something where you can save anything digital, ask questions across all of it, share what&apos;s useful, and keep the rest private. And eventually, not just a place to retrieve knowledge but a system that can act on it.
+            </p>
+            <p className="mt-4">
+              It&apos;s early. Links and notes work today, more is coming. If this sounds like something you&apos;ve been looking for, I&apos;d love to build it with your feedback.
+            </p>
+          </blockquote>
+        </div>
       </div>
     </section>
   )
 }
 
-export default SocialProof
+export default FounderNote

app/page.tsx

@@ -2,10 +2,11 @@
 
 import Navbar from './components/landing/Navbar'
 import Hero from './components/landing/Hero'
-import Vision from './components/landing/Vision'      // Social Proof Bar
+import FounderNote from './components/landing/Vision'    // Founder note (replaces Social Proof)
+import Roadmap from './components/landing/Roadmap'
 import HowItWorks from './components/landing/HowItWorks'
 import Platform from './components/landing/Platform'
-import Features from './components/landing/Features'  // Content Types
+import Features from './components/landing/Features'     // Content Types
 import ApiSection from './components/landing/ApiSection'
 import Pricing from './components/landing/Pricing'
 import FAQ from './components/landing/FAQ'
@@ -17,12 +18,13 @@ export default function Home() {
     <div className="min-h-screen bg-stone-50 text-slate-950 dark:bg-slate-950 dark:text-slate-50">
       <Navbar />
       <Hero />
-      <Vision />        {/* Social Proof Bar */}
-      <HowItWorks />    {/* 4-step process */}
-      <Platform />      {/* Web / Extension / API / MCP */}
-      <Features />      {/* Content Types: links, notes, PDFs, etc. */}
-      <ApiSection />    {/* API & MCP code block */}
-      <Pricing />       {/* Founding CTA + 3 tiers */}
+      <FounderNote />      {/* Founder note — replaces fake social proof */}
+      <Roadmap />          {/* Compact roadmap: Live / Building now / Next */}
+      <HowItWorks />       {/* 4-step process */}
+      <Platform />         {/* Web / Extension / API / MCP */}
+      <Features />         {/* Content Types: links, notes, PDFs, etc. */}
+      <ApiSection />       {/* API & MCP code block */}
+      <Pricing />          {/* Founding CTA + 3 tiers */}
       <FAQ />           {/* 6 FAQ accordion */}
       <FinalCTA />      {/* Stop losing what you learn */}
       <Footer />