# Learning Feed — Reels-Style Visual Redesign

## Goal
Transform the Learning Feed from a traditional card-based feed into an Instagram Reels / TikTok-style visual experience with full-bleed images and bold text overlays.

## Reference Style (from D J's examples)
1. **Hero/Title cards**: Full-bleed background image, large bold white text at bottom with dark gradient overlay, topic badge or author info subtle
2. **Content cards**: Dark solid background (#0a0a0a), clean white serif-ish text, numbered listicle format, generous line spacing
3. **Carousel/pagination**: Dots at bottom, slide counter badge top-right (e.g., "1/11")
4. **Mobile-first**: Cards should feel like full-viewport-height items on phone (not literal 100vh, but tall — aspect ratio ~4:5 or 9:16)

## Project Location
`/home/wdjones/.openclaw/workspace/projects/learning-feed`

## Stack
- Next.js 16 (App Router), Tailwind CSS v4, Framer Motion, ShadCN UI, Lucide Icons, TypeScript
- SQLite via better-sqlite3 (in `serverExternalPackages`)
- Database at `data/learning-feed.db`

## Current State
- 21 posts, 1 topic (Private Pilot License), 14 posts have Unsplash image URLs
- Post types: `quick_fact`, `quiz`, `deep_dive`
- Feed is a vertical scroll of traditional `Card` components (gray border, small image, text below)
- Interactions: save, got_it, more_like_this, expand, view

## What to Build

### 1. Redesign `PostCard` component (`components/post-card.tsx`)

**For posts WITH images (`image_url` is not null):**
- Full-width card, tall aspect ratio (min-height ~400px, or aspect-[4/5])
- Background image covers entire card (`object-cover`, `absolute inset-0`)
- Dark gradient overlay from bottom (~60% of card height, `bg-gradient-to-t from-black/90 via-black/50 to-transparent`)
- Title in **large, bold, uppercase white text** at the bottom over the gradient
- Topic badge (small pill) top-left
- Author avatar + name bottom-left (small, subtle, over gradient)
- Post type indicator subtle (icon or small badge)
- Rounded corners (`rounded-2xl`), overflow hidden

**For posts WITHOUT images (text-only content cards):**
- Same card dimensions
- Solid dark background (`bg-gray-950` or `bg-[#0a0a0a]`)
- Content text: white, serif-style font (use `font-serif` or a Google Font like Playfair Display), larger size (~text-lg or text-xl), generous leading (`leading-relaxed` or `leading-8`)
- Numbered items if content has multiple points
- Clean, minimal — no borders, no badges cluttering

**Both card types:**
- Rounded corners (`rounded-2xl`)
- No visible card border
- Subtle shadow or none
- Tap/click to expand (for deep_dive and quiz types)

### 2. Interaction overlay (bottom of card)
- Floating action buttons on right side (vertical stack, like Instagram Reels):
  - ⭐ Save (star icon, fills yellow when active)
  - ✅ Got it (check icon, turns green)
  - 🔄 More like this
- Semi-transparent, only visible on hover/tap or always subtle
- Remove the old horizontal action bar at the bottom

### 3. Feed layout changes (`components/feed-page.tsx`)
- Remove the `max-w-2xl` constraint — cards should be wider on mobile (full width with small padding `px-3`)
- On desktop, keep `max-w-lg` centered (phone-width experience even on desktop)
- Reduce gap between cards (`space-y-4` instead of `space-y-6`)
- Keep infinite scroll behavior
- Keep the sticky header but make it more minimal (just "Learning Feed" text, no border, transparent bg with blur)

### 4. Image handling
- Unsplash `source.unsplash.com` URLs are being deprecated. For now they work — keep using them.
- Add error fallback: if image fails to load, render as a text-only card instead (gradient background with topic-colored tint)
- Posts without images should NOT look broken — they should look intentionally text-only (like slides 2/3 in the reference)

### 5. Quiz post type special treatment
- Show question on the card face
- "Tap to reveal" hint text
- Tap flips/expands to show the answer (use Framer Motion)

### 6. Typography
- Title text on image cards: bold, possibly uppercase, large (text-2xl or text-3xl), tight leading
- Content text on text cards: slightly serif, comfortable reading size, generous spacing
- Use CSS `text-shadow: 0 2px 4px rgba(0,0,0,0.8)` on text over images for readability

## Files to Modify
- `components/post-card.tsx` — Complete redesign (main work)
- `components/feed-page.tsx` — Layout adjustments
- `app/globals.css` — Any custom CSS needed (text-shadow utility, font imports)
- `tailwind.config.ts` — If adding custom fonts

## Files NOT to Touch
- `lib/database.ts` — No schema changes
- `app/api/*` — No API changes
- `scripts/*` — No seed changes

## Build & Test
```bash
cd /home/wdjones/.openclaw/workspace/projects/learning-feed
npm run build
# Must succeed with 0 errors
# Start: PORT=3001 npm start
```

## Quality Bar
- Cards must look like Instagram/TikTok content — not like a blog or documentation
- Dark mode only
- Mobile-first (test at 390px width mentally)
- Images must have gradient overlays so text is always readable
- Text-only cards must look intentional, not like broken image cards
- Smooth animations (Framer Motion) on card entry and interactions
- No layout shift when images load

## DO NOT
- Change the database schema
- Add new dependencies unless truly necessary (prefer Tailwind + Framer Motion)
- Add carousel/swipe between slides (that's Phase 3 — each post is still one card for now)
- Add audio/video elements