62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# Random Hero Variations Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Build six weighted, randomly selected Hero Section layouts with matching 3D scene modes.
|
|
|
|
**Architecture:** Add data-driven hero variant configuration in `Hero.tsx`, choose a variant once on client mount, and render layout-specific panel/accent components from that config. Update `HeroScene.tsx` to accept a scene variant prop and switch geometry composition without adding dependencies.
|
|
|
|
**Tech Stack:** Next.js, React 19, TypeScript, Framer Motion, @react-three/fiber, @react-three/drei, Three.js.
|
|
|
|
---
|
|
|
|
### Task 1: Add variant data and weighted picker
|
|
|
|
**Files:**
|
|
- Modify: `app/components/Hero.tsx`
|
|
|
|
- [ ] Define `HeroVariantId`, `HeroSceneVariant`, and `HeroVariant` types.
|
|
- [ ] Add six approved variant objects with copy, points, proof items, side panel mode, layout mode, CTA text, and weights.
|
|
- [ ] Add `pickWeightedHeroVariant()` using `Math.random()` and relative weights.
|
|
- [ ] Keep `HERO_VARIANTS[0]` as deterministic SSR/default fallback.
|
|
|
|
### Task 2: Render six hero layouts from shared primitives
|
|
|
|
**Files:**
|
|
- Modify: `app/components/Hero.tsx`
|
|
|
|
- [ ] Replace fixed hero text with selected variant data.
|
|
- [ ] Add layout-specific class maps for Command Center, Launch Sequence, Rescue Split, IoT Signal Map, Diagnostic Report, and Cinematic Portrait.
|
|
- [ ] Add side panel renderer that draws distinct visual panels for each mode using existing CSS/Tailwind utilities.
|
|
- [ ] Keep primary WhatsApp CTA and secondary cases/CV actions.
|
|
|
|
### Task 3: Parameterize the 3D scene
|
|
|
|
**Files:**
|
|
- Modify: `app/components/cinematic/HeroScene.tsx`
|
|
|
|
- [ ] Export/accept a `HeroSceneVariant`-compatible prop locally as string union.
|
|
- [ ] Pass the selected scene mode from `Hero.tsx` into `HeroScene`.
|
|
- [ ] Change floating geometry positions/geometries per scene mode.
|
|
- [ ] Keep reduced motion behavior unchanged: no `HeroScene` render when reduced motion is enabled.
|
|
|
|
### Task 4: Update tests
|
|
|
|
**Files:**
|
|
- Modify: `app/components/Hero.test.tsx`
|
|
- Modify: `app/components/Hero.reducedMotion.test.tsx`
|
|
|
|
- [ ] Update assertions to current commercial CTA/copy.
|
|
- [ ] Assert at least one approved hero layout renders.
|
|
- [ ] Assert CTA remains a button and cases/CV remain available.
|
|
- [ ] Assert reduced-motion content still renders without animation-specific failures.
|
|
|
|
### Task 5: Verify
|
|
|
|
**Commands:**
|
|
- `pnpm exec tsc --noEmit --pretty false`
|
|
- `pnpm test -- Hero.test.tsx Hero.reducedMotion.test.tsx --runInBand`
|
|
- `pnpm build`
|
|
|
|
**Expected:** all commands exit 0.
|