[Design] Sub-2: Book card and shelf layout

[realproject7]

Parent Ticket

Part 2 of 3 for #403 (Book Shelf Design Trial). Depends on Sub-1 (#404) being merged first.

Reference Design

T1 will upload reference images below.

Reference	Image
Full shelf layout	(upload here)
Book card close-up	(upload here)
Mobile layout	(upload here)

Scope

The core visual transformation: make story cards look like physical books displayed on shelves.

1. StoryCard Redesign (src/components/StoryCard.tsx)

Current: flat card with layered border "page thickness" effect.

New book cover design:

• 3D book perspective using CSS transforms (subtle rotateY + perspective)
• Left edge "spine" with darker shade + depth gradient
• Slight shadow beneath as if book is sitting on a surface
• Book cover fills full card — title displayed as if printed on cover
• Hover: subtle lift effect (translate-y + shadow increase)
• Keep 2:3 aspect ratio (already book-like)
• Genre tag styled as a small gold-foil badge
• Author name at bottom like a printed book
• Use creative freedom — the reference shows angled books with real depth; aim for that quality

2. StoryGrid + Shelf Layout (src/components/StoryGrid.tsx, src/app/page.tsx)

Bookshelf concept:

• Each row of books sits on a visible "shelf" — a horizontal surface rendered with CSS
• Shelf: subtle gradient, thin line for edge, drop shadow below to create depth
• On desktop (3 cols): each row of 3 books = one shelf
• On mobile (2 cols): each row of 2 books = one shelf
• Books should look like they're resting ON the shelf, not floating

Home page hero area:

• Replace current text-only hero with a "Featured / New & Trending" section
• Optionally show one featured book larger (like the reference hero book)
• Keep FilterBar functional but restyle with warm palette
• Serif font for "New & Trending" heading (Libre Caslon Text)

3. StoryCardStats (src/components/StoryCardStats.tsx)

• Restyle TVL/price display with warm palette
• Use gold accent for values instead of green
• Small rating stars if applicable (like reference's star ratings)

Files to Change

File	Change
src/components/StoryCard.tsx	Full redesign as 3D book cover
src/components/StoryGrid.tsx	Add shelf rendering between rows
src/app/page.tsx	Hero section redesign, heading typography
src/components/StoryCardStats.tsx	Restyle with warm palette
src/components/FilterBar.tsx	Restyle filters with warm palette (gold accents, rounded pills)

Creative Direction for T3

The reference design shows:

• Books with physical depth (spine, page edges, shadows)
• A literal shelf surface that books rest on
• Warm, inviting bookstore aesthetic
• Some books slightly tilted or overlapping for visual interest

Use your creativity to translate PlotLink's story cards into this metaphor. The exact implementation is up to you — the reference is inspiration, not a pixel-perfect spec. Make it feel like browsing a beautiful bookshelf.

DO NOT

• Do not change data fetching, API calls, or business logic
• Do not remove any existing functionality (filters, pagination, batch token data)
• Do not change detail pages (that's Sub-3)

Acceptance Criteria

• StoryCard looks like a physical book with depth/spine/shadow
• Books visually sit on shelf surfaces
• Responsive: 2-col mobile, 3-col desktop, shelves adapt
• FilterBar restyled with warm palette
• Hover states feel like picking up a book
• npm run typecheck passes
• npm run lint passes

Branch

task/{issue-number}-book-card-shelf