# Boletim Diário BR — Technical Specification

## Overview
Single-page landing for a Brazilian daily news briefing subscription service. 8 scrollable sections, calm/professional aesthetic, emerald + sky-blue palette, React + Tailwind + GSAP.

---

## Dependencies

| Package | Version | Purpose |
|---------|---------|---------|
| react | ^18.3.1 | UI framework |
| react-dom | ^18.3.1 | DOM renderer |
| gsap | ^3.12.7 | Core animation engine |
| lucide-react | ^0.400.0 | All icons (no SVG files needed) |
| tailwindcss | ^3.4.19 | Utility-first CSS |
| @tailwindcss/typography | ^0.5.15 | Prose styling for news cards |
| @fontsource-variable/inter | ^5.0.0 | Inter font (self-hosted, variable) |

**Note:** No Lenis. All animations are entrance/scroll-reveal only. Native `scroll-behavior: smooth` on HTML element.

---

## Component Inventory

### Layout
| Component | Source | Reuse |
|-----------|--------|-------|
| Navbar | Custom | Once |
| Footer | Custom | Once |

### Sections
| # | Section | Custom? | Key Complexity |
|---|---------|---------|----------------|
| 1 | HeroSection | Custom | Canvas particle background + dual subscription form + countdown timer |
| 2 | DailyNewsSection | Custom | Flip-card grid with staggered hover reveal |
| 3 | WhyTrustSection | Custom | Staggered feature cards |
| 4 | BenefitsSection | Custom | Bento grid with scroll-reveal |
| 5 | StepsSection | Custom | Vertical zigzag step connector (desktop) + linear (mobile) |
| 6 | TestimonialsSection | Custom | Masonry grid, hover profile popup |
| 7 | FAQSection | Custom | Accordion with animated open/close |
| 8 | FinalCTASection | Custom | Reuses form + canvas emerald field |

### Reusable Components
| Component | Source | Used In |
|-----------|--------|---------|
| SubscriptionForm | Custom | HeroSection, FinalCTASection |
| CountdownTimer | Custom | HeroSection |
| FlipCard | Custom | DailyNewsSection |

---

## Animation Implementation Table

| # | Animation | Library | Implementation Approach | Complexity |
|---|-----------|---------|------------------------|------------|
| 1 | Floating Particles (Hero BG) | Canvas 2D API | Custom loop: Perlin noise displacement, radial gradient overlay, `requestAnimationFrame`, `willReadFrequently: true`. Fullscreen canvas behind content. | **High 🔒** |
| 2 | GSAP Entrance System | GSAP | `IntersectionObserver` (threshold 0.15) per section. Triggers `gsap.from` with opacity + y-translate. One-shot, non-repeating. | Medium |
| 3 | Hero Content Entrance | GSAP | Timeline on mount: headline → subheadline → form → timer, with staggered delays (0→0.3→0.5→0.7s). | Medium |
| 4 | Flip Card Hover | CSS 3D | `perspective: 1000px`, `transform-style: preserve-3d`, `rotateY(180deg)` on hover. Two-face card structure. Pure CSS transitions. | Medium |
| 5 | Card Stagger Reveal | GSAP | Child cards animate with incremental delay (i * 0.08s) after section enters viewport. | Low |
| 6 | Step Connector Draw | GSAP | SVG path `stroke-dasharray` / `stroke-dashoffset` animation, triggered by scroll. | Medium |
| 7 | FAQ Accordion | GSAP | `gsap.to` height auto + opacity on open, reverse on close. Content expansion, not just toggle. | Medium |
| 8 | Emerald Field (Final CTA BG) | Canvas 2D API | Same particle system as Hero, different emerald color palette. Shared canvas component with color prop. | **High 🔒** |
| 9 | News Card Noise Reveal | Canvas 2D | Perlin noise progressive fill on card front. Canvas overlay on each card front face. | **High 🔒** |
| 10 | Smooth Scroll | CSS | `html { scroll-behavior: smooth; }` + GSAP ScrollToPlugin for nav anchor clicks. | Low |

---

## State & Logic Plan

### Shared State
- **None** — This is a pure landing page. No global state management needed.

### Local State (per component)
| Component | State | Type | Purpose |
|-----------|-------|------|---------|
| CountdownTimer | timeLeft | `useState` | Recalculates every second, triggers re-render |
| FAQSection | activeIndex | `useState<number \| null>` | Tracks which accordion item is open |
| Navbar | isScrolled | `useState<boolean>` | Toggles navbar background after 50px scroll |
| SubscriptionForm | formData | `useState<{name, email, whatsapp}>` | Form input values |
| SubscriptionForm | isSubmitted | `useState<boolean>` | Shows success message |

### Refs (no re-render)
| Component | Ref | Purpose |
|-----------|-----|---------|
| ParticleCanvas | canvasRef | Canvas element access for rAF loop |
| ParticleCanvas | animationFrameRef | Store rAF id for cleanup |
| GSAP sections | sectionRefs[] | IntersectionObserver targets |
| Step connector | pathRef | SVG path for stroke-dash animation |

### Data Flow
- All sections are independent — no props drilling
- SubscriptionForm receives `variant` prop (`"hero"` | `"footer"`) for styling differences
- Canvas particle system receives `palette` prop (`"emerald"` | `"gold"`) for color theming

---

## Key Implementation Notes

### Canvas Performance (Particle System)
- Single `requestAnimationFrame` loop per canvas instance
- `willReadFrequently: true` on getContext for noise sampling
- Store particle positions in Float32Array for GC efficiency
- Cleanup: cancelAnimationFrame on component unmount

### Mobile-First Responsive
- Breakpoints: `sm:640px`, `md:768px`, `lg:1024px`, `xl:1280px`
- Hero: stacked on mobile, 2-col on lg
- Steps: zigzag on desktop, vertical line on mobile
- Testimonials: single col on mobile, 3-col masonry on desktop
- News cards: 2-col on mobile, 3-col on lg

### Form Handling
- No backend — client-side validation only
- On submit: show success state with visual confirmation
- WhatsApp input: format as Brazilian number (DDD + número)

---

## Font Strategy
- **Primary:** `Inter` (variable weight) via `@fontsource-variable/inter`
- Weights used: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
- Set on `<html>`/`body` with `font-sans` class

---

## Color Tokens (Tailwind Config Extension)

```js
colors: {
  emerald: { accent: '#059669', dark: '#047857' },
  sky: { accent: '#0ea5e9', light: '#38bdf8' },
  cream: { DEFAULT: '#f8fafc', warm: '#f1f5f9' },
  dark: '#0f172a',
}
```

---

## File Structure

```
src/
├── sections/
│   ├── HeroSection.tsx          (Canvas particles + form + timer)
│   ├── DailyNewsSection.tsx     (Flip cards grid)
│   ├── WhyTrustSection.tsx      (Feature cards)
│   ├── BenefitsSection.tsx      (Bento grid)
│   ├── StepsSection.tsx         (4-step flow)
│   ├── TestimonialsSection.tsx  (Masonry + hover popup)
│   ├── FAQSection.tsx           (Accordion)
│   └── FinalCTASection.tsx      (Canvas + repeated form)
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── SubscriptionForm.tsx     (Reusable form)
│   ├── CountdownTimer.tsx       (Next briefing timer)
│   ├── ParticleCanvas.tsx       (Shared canvas component)
│   └── FlipCard.tsx             (3D flip card)
├── hooks/
│   └── useScrollReveal.ts       (GSAP + IntersectionObserver)
├── types/
│   └── index.ts
├── App.tsx                      (Compose all sections)
├── main.tsx
└── index.css                    (Tailwind directives + custom styles)
```

---

## Asset Requirements

| Asset | Count | Purpose |
|-------|-------|---------|
| Hero background image | 1 | Lifestyle photo (person 40-55 with phone) |
| Avatar photos | 5 | Testimonial portraits (diverse 45+ Brazilians) |

All other visuals (icons, step illustrations) are code-generated via Lucide icons or Canvas.