# Random Hero Variations Design

## Goal

Create six structurally different Hero Section variations for the portfolio home page. Each visit should pick one variation randomly using weighted probability, while preserving the existing visual identity: dark cinematic background, slash green accent, glass panels, mono labels, strong display typography, technical lines, and WhatsApp conversion CTA.

## Approved hero variants

1. **Command Center** — Main/default hero. Two-column mission-control layout with production status, deploy/operation language, and strong CTA.
2. **Launch Sequence** — Timeline/checklist layout showing discovery → build → deploy, focused on launching MVPs and putting systems in production.
3. **Before / After Rescue** — Split layout comparing technical chaos vs organized system, focused on legacy, instability, and rescue projects.
4. **IoT Signal Map** — Signal/network layout with nodes and telemetry language, focused on hardware + software, APIs, dashboards, and connected products.
5. **Diagnostic Report** — Report/audit layout with risk, architecture, and next-step panels, focused on technical diagnosis before more code.
6. **Cinematic Portrait** — More personal consultant-led layout with trust, direct conversation, and premium technical partner positioning.

## Weighted distribution

- Command Center: 22
- Launch Sequence: 18
- Before / After Rescue: 16
- IoT Signal Map: 15
- Diagnostic Report: 15
- Cinematic Portrait: 14

Weights are relative. Command Center appears most often because it is the clearest commercial positioning.

## Implementation approach

Keep the implementation lazy and maintainable: one data array defines copy, layout, side panel, points, CTA, and scene mode. `Hero.tsx` renders the same primitives with layout-specific branches instead of six separate full components. `HeroScene.tsx` accepts a `variant` prop and changes the 3D object composition per selected hero.

## Constraints

- Do not expose the WhatsApp number as a complete literal.
- Do not add dependencies.
- Keep accessibility basics: real buttons/links, visible text, keyboard focus.
- Avoid horizontal scroll.
- Reduced motion must continue to hide the 3D scene.