# Hero Section — Summary & Build Guide

## 1. Summary

The Hero (`id="top"`) is the first section visitors see. It has two columns: product-focused copy with one call to action on the left, and a large product dashboard image with a few floating labels on the right. A row of three feature highlights sits underneath.

- Component: `src/components/Hero.tsx` (client component)
- Image: `public/images/hero-dashboard.png` (1672×941 dashboard screenshot, "Metricly" style)
- Icons (`lucide-react`): `ArrowRight`, `Boxes`, `RefreshCcw`, `Rocket`, `ShieldCheck`, `Users`
- Data: hard-coded in the component (the `FEATURES` array); it does not use `home-content.ts`
- Not used any more: `useCountUp` and all fake-metric cards from the earlier version

### Copy

| Element | Text |
|---------|------|
| Eyebrow pill | Products • Technology • Innovation |
| Heading | We Build Digital Products / **That Make a Difference.** (accent colour with an animated underline stroke) |
| Sub-copy | From idea to launch and beyond, we design, build and continuously improve products that solve real problems. |
| CTA | Explore Our Products → `#work` |
| Feature 1 | Product-First — Built around real user needs (Boxes) |
| Feature 2 | Scalable & Secure — Built for long-term growth (ShieldCheck) |
| Feature 3 | Continuous Improvement — Always getting better (RefreshCcw) |
| Floating card | New experience shipped / Product update (Rocket) |
| Floating card | Designed for users (Users) |
| Pill | ● iOS ● Android |

## 2. How It Is Built

### 2.1 Section shell

```tsx
<section id="top" ref={sectionRef}
  className="relative overflow-x-clip pt-28 pb-20 sm:pt-32 sm:pb-24 lg:pt-44 lg:pb-36">
  <HeroBackground />
  <div className="container">
    <div className="grid grid-cols-[minmax(0,1fr)] items-center gap-14 lg:grid-cols-[minmax(0,40fr)_minmax(0,60fr)] lg:gap-12">
      <div>…left content…</div>
      <MobileProductEcosystem />
    </div>
    <FeatureList className="mt-12 lg:mt-20" />
  </div>
  {/* fade into next section */}
</section>
```

- One column on mobile, 40/60 columns from `lg`. The wide top padding leaves room for the fixed header.
- On mobile the order is headline, description, CTA, image, then feature highlights stacked. On desktop the highlights become a row beneath.
- The heading scales from `2.4rem` (about 38px) up to `3.8rem` at 2xl. The second line is `block w-fit` so the underline SVG matches its width.
- A bottom gradient fades the hero into the next section.

### 2.2 Left column

1. Eyebrow pill: accent-tinted, small dot, uppercase tracking.
2. `h1` with two staggered `animate-fade-up` lines; the underline is an SVG path drawn by `animate-draw-line`.
3. Paragraph with a fade-up delay.
4. A single pill CTA: lifts and glows on hover, arrow slides right, visible focus ring, and no lift under reduced motion.

### 2.3 `FeatureList`

Icon in a circular `accent-50` chip, a bold title and a caption. On mobile each item is a bordered card; on desktop the items sit in a row separated by dividers, with titles kept on one line. The items fade up with delays of `0.85 + i * 0.12` s.

### 2.4 `HeroBackground`

Decorative, `aria-hidden`, all CSS and no images:
- A white → `accent-50` vertical wash.
- A static blurred glow on the left and a large blurred soft blob on the right (right one hidden below `sm`). Both use `blur-3xl` and have no continuous animation.
- A faint 48px grid masked to a radial fade, and mouse parallax on the glows through `--px` / `--py`.

### 2.5 Mouse parallax

A `useEffect` on the section listens for `mousemove` and writes `--px` and `--py` (−1…1), throttled with `requestAnimationFrame`. It runs only when `(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)` matches. The `parallax(amount)` helper turns the variables into a small `translate3d`. It is applied to the background glows (±8 and ±10 px), to the rings layer (±8 px) and to the whole image composition (±6 px), so the movement is subtle.

### 2.6 `MobileProductEcosystem` (right column)

A relatively positioned stage (`h-80` → `sm:29rem` → `lg:34rem`, `max-w-[38rem]` below `lg`) with layers:

| Layer | Position / z | Details |
|-------|--------------|---------|
| Glow, rings, dots | behind | soft blue glow, a solid ring and a dashed ring (from `sm`), two drifting shapes |
| Dashboard image | `inset-x-0 top-[10%]`, z-20 | rounded card with border and blue shadow; the image is cropped to drop the left sidebar |
| Notification | top-right, z-30, from `sm` | "New experience shipped / Product update", gentle float |
| Positioning label | bottom-left, z-30, from `sm` | "Designed for users" |
| Platform pill | bottom-centre, z-30 | "iOS / Android" |

**Image crop.** The PNG's left sidebar is about 15% of its width. The image sits in a wrapper with `aspect-[1413/941]` and `overflow-hidden`, and the `<Image>` is `h-full w-auto max-w-none` with `left: -18.3%`. That removes the sidebar and shows the cards, charts and tables about 18% larger at the same width, without clipping any of them. It is loaded with `priority` (the only above-the-fold image), `quality={92}` and `sizes="(min-width: 1024px) 65vw, 120vw"`.

Every layer fades up with an increasing delay (0.2 s for the image up to 0.8 s for the cards).

### 2.7 Step-by-step to recreate

1. Add the animation utilities in `globals.css`: `animate-fade-up`, `animate-draw-line`, `animate-float-card-b`, `animate-drift-a/b`.
2. Put the dashboard PNG in `public/images/`.
3. Create `Hero.tsx` with `FEATURES`, `parallax()`, the parallax effect, `FeatureList`, `HeroBackground` and `MobileProductEcosystem`.
4. Render `<Hero />` first in `src/app/page.tsx`. The header is `fixed`, so keep the hero's top padding.

## 3. Notes & Things to Review

- **Image vs. positioning:** the dashboard is a desktop analytics screen, which works against the "mobile app product company" message used in Selected Work, the CTA and the Hero copy. A purpose-made visual (for example real app screens in phone frames) would fit better. Until then, the platform pill and floating cards are the only mobile cues.
- **Image content:** the screenshot is AI-generated and contains its own brand ("Metricly"), a sample user ("John Doe") and sample numbers (24,860 total users, conversion rate, country counts). It also shows some small garbled labels. These could be read as real product claims; check the image at display size and consider replacing it with an original or a screenshot of a real Vasundhara product.
- **Legibility:** the dashboard has very small text. On desktop it is readable after the crop; on mobile (about 343px wide) it is mostly a visual texture. A simpler image with fewer, larger elements would read better on phones.
- **Generic floating cards:** "New experience shipped" and "Designed for users" contain no numbers but look like real product events. They are decorative.
- **Reduced motion:** the mouse parallax is gated correctly, and the global reduced-motion CSS covers the fade-up, draw and drift animations. Only the CTA lift has an explicit `motion-reduce` variant.
- **Performance:** the section uses two `blur-3xl` glows and a few small animated shapes, which is much lighter than the earlier version. Only the dashboard image is prioritised; it is about 1.1 MB as a PNG before Next's optimisation, so check the optimised output size.
- **Section IDs:** the CTA targets `#work`, which matches Selected Work.
- **Alt text:** "Product analytics dashboard". If the image changes to real app screens, update this to describe them.