[Design] Option 3 Sub-1: Moleskine notebook cards on home page

[realproject7]

Parent Ticket

Part 1 of 2 for #415 (Option 3: Moleskine Notebook)

Reference Design

T1 will upload reference images below.

Reference	Image
Moleskine notebook shape + hover	(upload here)

Scope

Replace the current book cover StoryCards with Moleskine-style notebook cards that open on hover.

StoryCard Redesign (src/components/StoryCard.tsx)

Structure: Each card is a notebook with two layers:

1. Cover (front, visible by default) — rounded Moleskine shape, elastic band, label area with title
2. Page (behind cover) — plain or ruled page, revealed when cover opens on hover

Key CSS from CodePen (adapt to React/Tailwind):

// Notebook container
.moleskine-notebook {
  height: 250px; width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  perspective: 800px;
  &:hover {
    transform: rotateZ(-10deg);
    .notebook-cover {
      transform: rotateY(-50deg);
      z-index: 999;
      box-shadow: 20px 10px 50px rgba(0,0,0,0.2);
    }
  }
}

// Cover
.notebook-cover {
  position: absolute; height: 100%; width: 100%;
  border-radius: 5px 15px 15px 5px;
  z-index: 10;
  transition: .5s linear;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
  // Elastic band (vertical stripe near right edge)
  &:before {
    content: "";
    position: absolute;
    width: 10px; height: calc(100% + 2px);
    top: -1px; right: 25px;
    z-index: 100;
    border-radius: 2px;
    // Ribbed elastic texture via repeating gradient
  }
}

// Label band
.notebook-skin {
  height: 50px;
  background: #e8e8e0;
  margin-top: 80px;
  padding: 15px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

// Page underneath
.notebook-page {
  position: absolute; height: 100%; width: 100%;
  background-color: #fbfae8;
  border-radius: 5px 16px 16px 5px;
  z-index: 0;
}

Color adaptation — DO NOT use the CodePen's dark/vivid colors. Use:

• Cover background: var(--accent) (#8B4513 saddle brown) or similar warm tone from current palette
• Elastic band: Darker shade of cover color (e.g. #6B3410)
• Label band: #e8e8e0 (light cream — same as CodePen, this works)
• Page background: #FFF8EE (current paper texture color)
• Overall page background: Keep var(--bg) (#E8DFD0)

Content layout on cover:

• Genre badge at top
• Title on the label band (Montserrat, centered)
• Author name below label band
• Keep 2:3 aspect ratio

Mobile consideration:

• The rotateZ(-10deg) + rotateY(-50deg) hover animation won't work well on touch
• On mobile: either disable the cover-open animation (just show the cover statically) or use a simpler tap effect
• Use @media (hover: hover) to conditionally apply the open animation

StoryGrid (src/components/StoryGrid.tsx)

• Keep the shelf row structure OR simplify to a plain grid if shelves conflict with the notebook aesthetic
• Maintain 2-col mobile / 3-col desktop

Home Page (src/app/page.tsx)

• Keep headline and tagline as-is
• Restyle FilterBar if needed to match notebook aesthetic

Files to Change

File	Change
src/components/StoryCard.tsx	Full Moleskine redesign
src/components/StoryGrid.tsx	Adjust grid/shelf if needed
src/app/page.tsx	Minor styling adjustments
src/app/globals.css	Add notebook-specific CSS if needed

DO NOT

• Do not change data fetching, business logic, or API routes
• Do not use dark background or vivid CodePen colors
• Do not change story detail page (that's Sub-2)
• Do not remove FilterBar, pagination, or BatchTokenDataProvider

Acceptance Criteria

• StoryCard looks like a Moleskine notebook with rounded corners + elastic band
• Hover opens the cover to reveal page underneath (desktop only)
• Mobile: graceful fallback (no broken animation)
• Title, genre, author visible on the cover
• Responsive: 2-col mobile, 3-col desktop
• npm run typecheck passes
• npm run lint passes

Branch

task/{issue-number}-moleskine-cards