# Vasundhara Infotech — Website Overview

Built with Next.js 16 (App Router), React 19, Tailwind CSS v4 and lucide-react icons.
Layout uses a Bootstrap-style `.container` (see section 6).

---

## 1. Pages and Sections

The site has **4 pages**. The Home page has **16 sections** (incl. Header and Footer).

### Home page — `/` (follows `vasundhara-website-uiux-changes.md`)

| # | Section | Anchor | Component |
|---|---------|--------|-----------|
| 1 | Header — Home, Products, About, What We Do, Industries, Our Process, Careers, Contact + **Let's Talk** CTA | — | `Header.tsx` |
| 2 | Intro / Hero — product ecosystem visual (browser + dashboard, mobile screens, animated analytics card, notification cards) | `#top` | `Hero.tsx` |
| 3 | Our Goal / Mission — split layout, 3 pillars, large team image | `#mission` | `MissionVision.tsx` |
| 4 | Trusted — verified metrics + 4 trust statements | `#trusted` | `Trusted.tsx` |
| 5 | What We Do — 6 numbered capability cards | `#services` | `WhatWeDo.tsx` |
| 6 | Foundation — 4 principles + product visual in a browser frame | `#foundation` | `Foundation.tsx` |
| 6b | Technology Stack (tabs with brand logos) — kept so the FAQ can link to it | `#technologies` | `Technologies.tsx` |
| 7 | Industries — 8 cards with abstract UI visuals | `#industries` | `Industries.tsx` |
| 8 | Our Process — animated 01→04 timeline (Discover, Design, Build, Improve) | `#process` | `Process.tsx` |
| 9 | Selected Work — Apps & Websites, category filters, featured card | `#work` | `SelectedWork.tsx` |
| 10 | Reviews — testimonial carousel | `#reviews` | `Reviews.tsx` |
| 11 | Why Choose Us — 6 cards | `#why` | `WhyChoose.tsx` |
| 12 | CTA Banner — dark navy, floating cards | `#cta` | `CtaBanner.tsx` |
| 13 | FAQ — 7-question accordion | `#faq` | `Faq.tsx` |
| 13b | Contact form (kept — nav "Contact" and all CTAs point here) | `#contact` | `Contact.tsx` |
| 14 | Footer — statement + CTA, 4 link columns, social, email, location | — | `Footer.tsx` |

> **Notes**
> - The old About Us section was removed; "About" in the nav goes to Our Goal / Mission.
> - The Technology Stack tabs section and the Contact form are kept in addition to the spec list.
> - Brand blue stays `#0094EE` (decision made: the spec's `#1295E6` was **not** adopted).

### Careers page — `/careers`

Header · **Career Hero** (`careers/CareerHero.tsx`) · **Why Work With Us?** (`careers/WhyJoinUs.tsx`) · **Explore Open Positions** with department filter and Apply modal (`careers/OpenPositions.tsx`, `careers/ApplyModal.tsx`) · Contact form · Footer.
Details: see `CAREERS_PAGE.md` (written before the latest Careers page changes — verify against the code).

### Legal pages (text only, shared Header/Footer)

| Page | Route |
|------|-------|
| Privacy Policy | `/privacy-policy` |
| Terms & Conditions | `/terms-of-use` |

### Other generated routes

`/robots.txt`, `/sitemap.xml`

---

## 2. Images

All images are local files in `public/images/` and rendered with `next/image` (lazy-loaded, resized automatically).

| File | Used in | Notes |
|------|---------|-------|
| `team-office.jpg` | Our Goal / Mission — large rounded image (parallax + reveal) | Photo of engineers collaborating |
| `hero-dashboard.jpg` | Hero — browser window with dashboard UI | Analytics dashboard screenshot |
| `case-fintech.jpg` | Hero (mobile screens card) and Selected Work — PayStride (featured) | Mobile app screens |
| `case-commerce.jpg` | Selected Work — Nordwear (Website) | Commerce operations UI |
| `case-health.jpg` | Selected Work — CareBridge (Website) | Clinic suite UI |
| `case-logistics.jpg` | Foundation product visual and Selected Work — FleetPulse | Fleet tracking map UI |
| `avatar-1.jpg`, `avatar-2.jpg`, `avatar-3.jpg` | Reviews — client portraits | Round avatars |
| `tech/*.svg` (react, nextjs, nodejs, python, postgresql, mongodb, redis, flutter, kotlin, swift) | Foundation — technology logos | Brand marks from Devicon (MIT licence) |

The logo (`public/logo.svg`) and favicon (`public/favicon.svg`) are the original brand files.

---

## 3. Brand / Theme Colors

The theme is **light**, with one **sky-blue brand accent**.

### Primary brand color

| Name | Hex | Used for |
|------|-----|----------|
| **Accent Blue** (brand) | `#0094EE` | Buttons, links, icons, highlights, eyebrow labels |
| Accent hover / dark | `#0077BE` | Button hover, eyebrow text |
| Accent deep | `#005A8F` | Pressed states, strong text on light blue |
| Accent tint | `#E6F6FE` | Soft backgrounds |

Full accent scale: `50 #E6F6FE` · `100 #CCEAFD` · `200 #99D5FB` · `300 #66C1F9` · `400 #33ACF7` · **`500 #0094EE`** · `600 #0077BE` · `700 #005A8F` · `800 #003D60` · `900 #001F30`

### Neutral colors (Ink / Slate)

| Role | Hex |
|------|-----|
| Page background | `#F5F7FA` |
| Surface (cards, header) | `#FFFFFF` |
| Soft surface | `#F8FAFC` / `#F1F5F9` |
| Borders | `#E2E8F0` / `#CBD5E1` |
| Muted text | `#64748B` |
| Body text | `#475569` |
| Strong body text | `#334155` |
| Headings | `#0F172A` |

### Other colors

| Use | Hex |
|-----|-----|
| Hero code panel (dark card) | `#0C1322` |
| Success accents (hero terminal) | emerald |
| Review stars | amber-400 |
| Error text | red-600 |

---

## 4. Typography

| Role | Font |
|------|------|
| Body / UI | **Inter** |
| Headings | **Space Grotesk** |
| Code / mono / step numbers | **JetBrains Mono** |

---

## 5. Where Content Lives

| What | File |
|------|------|
| Colors, fonts, shadows, animations, container, utility classes | `src/app/globals.css` |
| Nav links, About, Mission/Vision, Technology Stack, How We Work steps, footer, careers data | `src/lib/content.ts` |
| Trusted stats, What We Do, Industries, Selected Work, Reviews, Why Choose, FAQ | `src/lib/home-content.ts` |
| Site metadata, SEO, fonts setup | `src/app/layout.tsx` |
| Shared section heading and background | `src/components/ui/SectionHeader.tsx`, `src/components/ui/SectionBackdrop.tsx` |
| Scroll-to-top button (site-wide, in layout) | `src/components/ScrollToTop.tsx` |
| Page fade-in on every navigation | `src/app/template.tsx` |
| Scroll-reveal / count-up hooks | `src/components/ScrollReveal.tsx`, `src/hooks/use-reveal.ts`, `src/hooks/use-count-up.ts` |

---

## 6. Layout Container

Bootstrap-style `.container` (in `globals.css`), 16px side padding:

| Screen width | Max width |
|--------------|-----------|
| < 576px | 100% |
| ≥ 576px | 540px |
| ≥ 768px | 720px |
| ≥ 992px | 960px |
| ≥ 1200px | 1140px |
| ≥ 1400px | 1320px |
| ≥ 1660px | 1420px |

`.container-fluid` is the full-width variant.

---

## 7. Placeholder Content To Replace Before Launch

The spec (`vasundhara-website-uiux-changes.md`) says to show **only verified content**. These items are still **sample data** and must be replaced with real entries in `src/lib/home-content.ts`:

- **Selected Work** — the four sample products (PayStride, Nordwear, CareBridge, FleetPulse), their descriptions, features, categories, platforms and screenshots. Add real product logos, `productUrl`, `appStoreUrl` and `googlePlayUrl`; the "AI" filter appears automatically once a product has the `AI` category.
- **Reviews** — the three sample testimonials, names, positions, companies and portraits. Use only genuine, authorised testimonials.
- **Trusted** — 10+ years, 800+ projects and 140+ specialists are the figures previously published on the company's own site; confirm they are still accurate. No logos, ratings, download or user counts are shown.
- **Hero dashboard numbers** (24,860 users, +12.5%) — these are illustrative UI mock-up values inside the dashboard picture and cards, not company statistics.
- **Industries, What We Do, Foundation, Why Choose Us, FAQ** — written from the spec; review the wording.
- **Careers** — the job list is now the embedded Superworks listing. `NEXT_PUBLIC_CAREERS_FORM_ENDPOINT` is no longer used by the page.
- **Footer social links** still point to `#`.