# Industries Section — Summary & Build Guide

## 1. Summary

The Industries section is a home-page block (`#industries`) showing the verticals Vasundhara builds products for. It is a responsive grid of 8 cards. Each card has a small abstract UI mock-up (no stock imagery), an icon, a title, a one-line description and an "Explore" link.

- Nav entry: `{ label: "Industries", href: "/#industries" }` in `src/lib/content.ts`
- Rendered in `src/app/page.tsx` via `<Industries />`
- Component: `src/components/Industries.tsx`
- Data: `src/lib/home-content.ts` (`industries`, type `Industry`)
- Shared UI: `SectionHeader` + `Highlight`, `SectionBackdrop` (`src/components/ui/`), `ScrollReveal`

### Content

| # | Title | Description | Icon | Visual |
|---|-------|-------------|------|--------|
| 1 | Finance & FinTech | Payments, lending and financial insight tools. | Landmark | chart |
| 2 | Healthcare | Patient engagement, scheduling and care platforms. | HeartPulse | cards |
| 3 | Education | Learning platforms and progress tracking. | GraduationCap | list |
| 4 | E-commerce | Storefronts, catalogues and order operations. | ShoppingBag | grid |
| 5 | Productivity | Tools that help people plan, track and get things done. | ListChecks | list |
| 6 | Lifestyle | Consumer apps for everyday habits and wellbeing. | Sparkles | cards |
| 7 | Media & Entertainment | Content, streaming and community experiences. | Clapperboard | grid |
| 8 | Business & Enterprise | Internal platforms, dashboards and operations tools. | Building2 | chart |

Header copy: eyebrow "Industries"; title "Products built for **real-world industries.**" (highlighted phrase); description "Where our products and technology create impact."

## 2. How It Is Built

### 2.1 Data model (`src/lib/home-content.ts`)

```ts
export type Industry = {
  icon: LucideIcon;
  title: string;
  description: string;
  visual: "chart" | "cards" | "list" | "grid"; // card illustration variant
};
export const industries: Industry[] = [ /* 8 items */ ];
```

To add or edit an industry, change only this array. Import the icon from `lucide-react` at the top of the file.

### 2.2 Section shell

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

- `id="industries"` + `scroll-mt-24` lets the fixed header nav anchor land correctly.
- `SectionBackdrop` gives the soft wash, blurred glows and faint dot grid.
- Grid: 1 column on mobile, 2 on `sm`, 4 on `lg` (two rows of four).

### 2.3 Card anatomy

Each `<li>` wraps `ScrollReveal` (variant `scale`, staggered delay `(i % 4) * 80 + floor(i / 4) * 80` ms) around a `Link` to `/#contact`.

1. **Visual panel** (`h-32`): gradient `from-accent-50 via-white to-accent-100/60`, radial dot pattern masked to a soft spot, a large faint watermark icon top-right that scales and rotates on hover, and `IndustryVisual`.
2. **Body** (`p-5`): 10×10 rounded icon chip (turns solid accent on hover), `h3` title, description (`flex-1` so cards align), and an "Explore" label with an `ArrowUpRight` that nudges on hover.
3. **Card styling**: `rounded-3xl border border-slate-200 bg-white shadow-card`; on hover it lifts (`-translate-y-1.5`), border tints to accent and a blue glow shadow appears.

### 2.4 `IndustryVisual`

A small white mock-up card absolutely positioned in the visual panel. It switches on `variant`:

- `chart`: title bar + 6 gradient bars of varying height
- `cards`: avatar circle + line, two tiles, an accent line
- `list`: three rows with ring bullets and lines of different widths
- `grid` (default): 3×2 tiles with two highlighted

All are `aria-hidden` and built from plain divs and Tailwind classes, so there are no image assets to load. The shell lifts slightly on card hover.

### 2.5 Step-by-step to recreate

1. Add `industries` data and the `Industry` type in `home-content.ts`.
2. Make sure the shared pieces exist: `SectionHeader`/`Highlight`, `SectionBackdrop`, `ScrollReveal`.
3. Create `Industries.tsx` with the section, header, grid and cards described above.
4. Add `IndustryVisual` in the same file.
5. Import and place `<Industries />` in `src/app/page.tsx` between the neighbouring sections.
6. Add the nav link `/#industries` to `navLinks` in `content.ts`.

## 3. Notes & Possible Improvements

- All cards link to `/#contact`. Since the header's "Let's Talk" button was removed, these cards and the footer are the main routes to contact. Consider dedicated per-industry pages or anchors.
- "Explore" text implies a destination; either add real pages or reword to "Get in touch".
- `Industries` is a server component (no `"use client"`); interactivity is CSS-only apart from `ScrollReveal`.
- Respect reduced motion: consider `motion-reduce:` variants on the hover transforms.
- Accent colour tokens used: `accent`, `accent-50/100/200/300/600`, `ink-300/400/950`.