# S06 Research: Landing Page Personality Pass

## Summary

Straightforward CSS/JS polish slice. The homepage (Home.tsx, ~290 lines) and styles (App.css, ~5800 lines) are well-understood from prior slices. Four deliverables: animated stat count-up, consistent section headings, above-fold content optimization, and header brand accent. No new libraries needed — all implementable with vanilla React hooks and CSS.

## Recommendation

Split into two tasks: T01 for the count-up hook + stagger animation CSS (JS + CSS), T02 for section heading unification + above-fold tightening + header accent (pure CSS + minor JSX).

## Implementation Landscape

### 1. Animated Stat Count-Up

**Current state:** `home-stats__number` renders `{stats.technique_count}` and `{stats.creator_count}` as static text. No animation exists.

**Approach:** Create a `useCountUp(target, duration)` hook using `requestAnimationFrame` + `useEffect` + `useRef`. Easing function (ease-out) makes the animation feel natural. Duration ~1.2s. The hook returns the current display value as an integer. Trigger when the stats section enters the viewport using `IntersectionObserver` (already proven pattern in the codebase — S04 used it for ToC active section tracking).

**Files:** New `frontend/src/hooks/useCountUp.ts`, modify `Home.tsx` to use the hook.

### 2. Consistent Section Headings

**Current state:** Four different heading styles across homepage sections:

| Selector | font-size | weight | color | transform |
|---|---|---|---|---|
| `.home-popular-topics__title` | 0.875rem | 600 | --color-text-secondary | uppercase |
| `.home-trending__title` | 0.75rem | 600 | --color-text-muted | uppercase |
| `.home-featured__label` | 0.6875rem | 700 | --color-accent | uppercase |
| `.recent-section__title` | 1.125rem | 700 | (default) | none |

**Approach:** Create a shared `.section-heading` utility class. Apply it to all four headings. Proposed unified style: `font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);`. The featured label can keep its accent color via a modifier (`.section-heading--accent`). Recently Added title should also get the treatment for consistency.

**Files:** `App.css` (add utility class, simplify per-section title rules), `Home.tsx` (add className to headings).

### 3. Content Above Fold

**Current state:** Hero section has `padding: 2rem 1rem 2.5rem`. The "How It Works" 3-card grid pushes the CTA and everything below it well below the fold.

**Approach:** Reduce hero padding, tighten vertical margins in the how-it-works section. Consider reducing `home-hero__value-prop` margin-top from 1.5rem. Goal: search bar + value prop + at least the start of the popular topics visible without scrolling on a 900px viewport.

**Files:** `App.css` only.

### 4. Header Brand Accent

**Current state:** Header (`app-header`) has `background: var(--color-bg-header)` with no accent treatment. Logo SVG uses `#22d3ee` (accent cyan) inline. The brand link is plain text + logo with no accent styling on the header bar itself.

**Approach:** Add a subtle accent bottom border on the header: `border-bottom: 2px solid var(--color-accent)` or a gradient fade. This ties the header to the cyan brand color already in the logo. Keep it minimal — a thin line is enough.

**Files:** `App.css` (`.app-header` rule).

### 5. Card Stagger Animation (Ghost CSS)

**Current state:** `card-stagger` class is applied to nav-cards, stats, trending pills, and recent cards in Home.tsx with `--stagger-index` CSS custom properties. **No corresponding CSS exists** — the class is inert.

**Approach:** Add `@keyframes fadeInUp` (translate + opacity) and `.card-stagger` rule with `animation-delay: calc(var(--stagger-index, 0) * 80ms)`. Use `animation-fill-mode: backwards` so elements start invisible. Subtle 400ms duration.

**Files:** `App.css` only.

## Constraints & Gotchas

- **No external dependencies.** Count-up is ~30 lines of hook code. No need for libraries like `react-countup`.
- **`card-stagger` is already in JSX.** The CSS just needs to exist — no JSX changes for stagger.
- **IntersectionObserver** for count-up trigger is optional but polished. If skipped, count-up runs immediately on mount (simpler, still acceptable).
- **R037** explicitly mentions "animated count-up" and "unified section headings" — these are the primary deliverables.
- **border-image gotcha** (KNOWLEDGE.md): Not relevant here since we're adding `border-bottom`, not `border-image`.

## Verification

`npm run build` passes with zero errors. Grep for `@keyframes fadeInUp`, `.section-heading`, `useCountUp`, and `border-bottom.*accent` in the output files.
