# Why Choose Us Section — Summary & Build Guide

## 1. Summary

The Why Choose Us section (`id="why"`) is a static grid of 6 cards, each giving one product-focused reason to work with Vasundhara. Each card has an icon, a title, a one-line description and a small accent bar. There are no controls or state, so it is a server component.

- Component: `src/components/WhyChoose.tsx`
- Data: `src/lib/home-content.ts` (`whyChoose`, type `WhyItem`)
- Shared UI: `SectionHeader` + `Highlight`, `SectionBackdrop` (glow right, `tinted`), `ScrollReveal`
- Rendered in `src/app/page.tsx` via `<WhyChoose />`, right after Reviews and before the CTA banner

### Header copy

- Eyebrow: "Why Choose Us"
- Title: "Why teams choose **Vasundhara.**"
- Description: "Six product-focused reasons teams stay with us from the first prototype to the tenth release."

### Cards (from `whyChoose`)

| # | Title | Description | Icon |
|---|-------|-------------|------|
| 1 | Product Ownership | Think beyond individual features and releases. | Telescope |
| 2 | User-Centered Design | Design around real user needs. | Target |
| 3 | One Product Team | Product, design and engineering work together. | Puzzle |
| 4 | Scalable Technology | Architecture designed for long-term growth. | Gauge |
| 5 | Continuous Improvement | Continue improving products after launch. | Repeat |
| 6 | Long-Term Thinking | Build for sustainable product value. | Lock |

## 2. How It Is Built

### 2.1 Data model

```ts
export type WhyItem = { icon: LucideIcon; title: string; description: string };
export const whyChoose: WhyItem[] = [ /* 6 items */ ];
```

To add or edit a reason, change only this array and import the icon from `lucide-react` at the top of the file. The grid is laid out for 6 items (3 × 2 on desktop); other counts will still render but leave an uneven last row.

### 2.2 Section shell

```tsx
<section id="why" className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28">
  <SectionBackdrop glow="right" tinted />
  <div className="container">
    <SectionHeader eyebrow=… title=… description=… />
    <ul className="mt-14 grid gap-5 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-6"> … </ul>
  </div>
</section>
```

- Grid: 1 column on mobile, 2 on tablet (`sm`), 3 on desktop (`lg`).
- `scroll-mt-24` keeps the section clear of the fixed header when linked to by id. The tinted backdrop gives a soft blue wash between the neighbouring sections.

### 2.3 Card anatomy

Each `<li>` wraps a `ScrollReveal` (variant `scale`) with a stagger of `(i % 3) * 90 + floor(i / 3) * 80` ms, so each row reveals left to right and the second row follows slightly after.

Inside is a `div.group` card with `rounded-3xl border border-slate-200 bg-white p-7 shadow-card`, containing:

1. A decorative corner glow in the top-right (a blurred-free gradient circle, `aria-hidden`) that scales up on hover.
2. A 48px rounded icon tile (`bg-accent/10 text-accent`) with a slight scale and soft glow on hover.
3. The `h3` title in the display font.
4. The description in muted text with a 1.7 line height.
5. A short gradient accent bar that widens from `w-8` to `w-14` on hover.

Hover on the card lifts it 4px, tints the border and adds a soft blue shadow. The card has no link or button, so it isn't focusable.

### 2.4 Step-by-step to recreate

1. Add `WhyItem` and the `whyChoose` array (with icon imports) in `home-content.ts`.
2. Make sure `SectionHeader`/`Highlight`, `SectionBackdrop` and `ScrollReveal` exist.
3. Create `WhyChoose.tsx` with the section, header and grid above.
4. Place `<WhyChoose />` in `src/app/page.tsx`. There is no nav link to `#why`.

## 3. Notes & Things to Review

- **Wording vs. positioning:** the header says "Why teams choose Vasundhara" and "teams stay with us from the first prototype to the tenth release". That reads like a services or partner pitch. Since the site now presents Vasundhara as a product-based mobile app company, consider wording aimed at users and products, for example "Why people choose our apps" or "How we build", and check that "tenth release" isn't an unverified claim.
- **Unverified claims:** the cards are principles, not numbers, so there are no fake metrics. "Scalable Technology" and "Long-Term Thinking" are still general promises with no proof behind them.
- **Icon choice:** the `Lock` icon for "Long-Term Thinking" reads as security. `Hourglass` or `Compass` would match the meaning better.
- **Hover and touch:** the hover effects don't apply on touch devices. The cards are otherwise fully readable without them.
- **Reduced motion:** the hover transforms have no `motion-reduce:` variants; only the global reduced-motion CSS applies. Consider adding them.
- **Six cards only:** the layout is tuned for 6. If you add a 7th, the last row will have a single card.
- **Navigation:** nothing in the header links to `#why`; the section is only reachable by scrolling.