116 lines
5.4 KiB
Markdown
116 lines
5.4 KiB
Markdown
# 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
|