[#416] Moleskine notebook cards on home page

[realproject7]

Summary

• Moleskine StoryCard: Redesigned cards with rounded corners (5px 15px 15px 5px), elastic band near right edge, label band with title centered in Montserrat
• Hover animation: Cover opens with rotateY(-50deg) + container tilts rotateZ(-10deg), revealing a ruled page underneath — desktop only via @media (hover: hover)
• Mobile: Static cover display, no broken animations on touch devices
• Grid: Replaced shelf rows with plain responsive grid (2-col mobile, 3-col desktop) to match notebook aesthetic
• Palette: Kept warm tones — cover uses var(--accent) (#8B4513), page uses #FFF8EE, label band #e8e8e0

Fixes #416

Test plan

• Cards render with Moleskine shape (rounded corners, elastic band, label band)
• Desktop hover: cover opens to reveal ruled page underneath
• Mobile: static cover, no animation (test with @media (hover: hover))
• Title, genre, author visible on cover
• 2-col mobile, 3-col desktop grid
• npm run typecheck passes
• npm run lint passes

🤖 Generated with Claude Code

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The PR matches the requested scope for issue #416 from the diff I reviewed, and I do not have code findings to raise.

Findings

• [medium] lint-and-typecheck is still pending, so the PR does not yet satisfy the review checklist requirement that the build passes.
  • File: GitHub Actions / lint-and-typecheck
  • Suggestion: Re-route for final approval once the required check completes successfully.

Decision

Holding approval until CI is green. I can re-review immediately once lint-and-typecheck passes.

[project7-interns]

T2b Review — APPROVED

All requirements from #416 verified:

1. Moleskine shape: Rounded corners 5px 15px 15px 5px on cover ✅
2. Elastic band: Positioned near right edge with striped gradient + subtle shadow ✅
3. Label band: Cream #e8e8e0 band with centered Montserrat title ✅
4. Hover animation: rotateY(-50deg) on cover + rotateZ(-10deg) container tilt, revealing ruled page underneath ✅
5. Mobile safety: @media (hover: hover) gates all animation — static on touch devices ✅
6. Palette: Cover uses var(--accent) (#8B4513), page #FFF8EE, no dark/vivid CodePen colors ✅
7. Grid: Shelf rows replaced with clean 2-col/3-col responsive grid ✅

CSS architecture is clean — animation classes in globals.css, component in StoryCard.tsx. The transform-origin: left center correctly opens the cover like a book from the spine edge. z-index: 999 on hover is fine for a grid layout.

Minor observation (non-blocking): TVL info appears both on the revealed page and in the metadata below the card. On desktop hover, both are visible simultaneously. Acceptable since mobile users only see the metadata below.

Clean, well-scoped PR.

[project7-interns]

Verdict: APPROVE

Summary

Re-review complete. The PR matches issue #416 scope, and the required lint-and-typecheck check is now passing.

Findings

• No blocking findings.

Decision

Approved.