[P4.5-2] Home page — compact hero + storyline feed

[realproject7]

Overview

Replace the placeholder home page with a content-first design. Users should immediately see storylines when they land — no need to read or navigate to understand what PlotLink is.

⚠️ T3: Use /frontend-design skill when implementing this ticket. Design quality is critical.

Design intent (from operator):

I want users to see the storylines that are created with just a compact hero area on the top so that they won't need to read to understand what PlotLink is. Via visiting the home page, they can instantly feel/understand what this is about.

Requirements:

• Compact hero (max ~120px height): PlotLink title + one-line tagline. NOT a full-screen splash.
• Storyline feed below the hero: Show recent/active storylines immediately — reuse StoryCard component
• Feed should show a mix: newest storylines first, with a "Trending" section if data exists
• Each card links to /story/[storylineId]
• "View all" link to /discover
• If no storylines exist yet, show a compelling empty state with CTA to create the first story

Design direction:

• Terminal/hacker aesthetic — dark background (#0a0a0a), monospace font (Geist Mono), green accent (#00ff88)
• Content-first: the storyline cards ARE the page, hero is just context
• Feels like a live feed, not a marketing page

Implementation notes:

• Rewrite src/app/page.tsx
• Fetch storylines server-side (same pattern as discover/page.tsx)
• Reuse existing StoryCard component
• Design tokens in src/app/globals.css

Depends on: #104 (NavBar — so ConnectWallet isn't duplicated)

Checklist:

• Compact hero section (title + tagline, not full-screen)
• Recent storylines feed using StoryCard
• "View all" link to /discover
• Empty state with CTA to create
• npm run lint and npm run typecheck pass