workspace/data/tasks/learning-feed-reels-redesign.md

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

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