# Careers Page — Details

**Route:** `/careers` · **File:** `src/app/careers/page.tsx`
**Page title (SEO):** Careers | Join Our Team
**Meta description:** Explore career opportunities and join our team of passionate people building innovative technology products and digital solutions.
**Canonical:** `/careers`

Shared with the rest of the site: fixed **Header** (solid style) and **Footer**.

---

## 1. Page Sections (in order)

| # | Section | Component | Anchor |
|---|---------|-----------|--------|
| 1 | Career Hero | `careers/CareerHero.tsx` | — |
| 2 | Why Work With Us? | `careers/WhyJoinUs.tsx` | — |
| 3 | A Place to Learn, Build & Grow (Culture) | `careers/OurCulture.tsx` | `#our-culture` |
| 4 | Explore Open Positions | `careers/OpenPositions.tsx` | `#open-positions` |
| 5 | Career CTA — "Don't See the Right Role?" | `careers/CareerCta.tsx` | — |
| — | Apply modal (opens from a job or the CTA) | `careers/ApplyModal.tsx` | — |

---

## 2. Section Content

### 2.1 Career Hero
- **Eyebrow:** Careers
- **Heading:** Build Your Future **With Us**
- **Text:** Join a team of passionate people building innovative digital products and technology solutions that make a real impact.
- **Buttons:** *View Open Positions* → `#open-positions` · *Meet Our Team* → `#our-culture`
- **Visual:** abstract product-UI card with floating icons (no photos).

### 2.2 Why Work With Us?
Six benefit cards (data: `careerBenefits` in `src/lib/content.ts`):

| Title | Description |
|-------|-------------|
| Growth & Learning | Continuously improve your skills through real-world projects and new technologies. |
| Innovation | Work on meaningful products and explore modern technologies and ideas. |
| Collaborative Culture | Work with a supportive team where ideas, feedback, and collaboration matter. |
| Career Growth | Take ownership, build expertise, and grow with the company. |
| Meaningful Work | Build products used by real users and solve practical problems. |
| Recognition | Your contribution matters and great work is recognized. |

### 2.3 Our Culture — "A Place to Learn, Build & Grow"
Highlight stats (data: `careerHighlights`):

| Value | Label |
|-------|-------|
| 10+ | Years of Experience |
| 800+ | Projects Delivered |
| 140+ | In-House Specialists |

### 2.4 Explore Open Positions
Four job cards (data: `jobOpenings`). Each card shows title, department, location, type, work mode, experience, short description and skill tags, and expands to show full details.

> **Note:** these are **sample / placeholder** postings. Replace them with real openings (or connect an ATS) before launch.

| Job | Department | Location | Type | Work mode | Experience | Skills |
|-----|------------|----------|------|-----------|------------|--------|
| Senior React Developer | Engineering | Surat, India | Full Time | On-site / Hybrid | 3+ years | React, TypeScript, Tailwind CSS, REST API |
| Mobile App Developer (React Native) | Engineering | Surat, India | Full Time | On-site | 2+ years | React Native, TypeScript, iOS, Android |
| DevOps Engineer | Cloud & DevOps | Remote | Full Time | Remote | 3+ years | AWS, Azure, Kubernetes, CI/CD |
| UI/UX Designer | Design | Surat, India | Full Time | Hybrid | 2+ years | Figma, Design Systems, Prototyping, User Research |

Each job also has: **About the role**, **Responsibilities**, **Requirements**, **Nice to have**, **What we offer**, and an **Apply Now** button that opens the Apply modal for that role. Every job has a unique `slug`:
`senior-react-developer`, `mobile-app-developer-react-native`, `devops-engineer`, `ui-ux-designer`.

### 2.5 Career CTA — "Don't See the Right Role?"
- **Text:** We're always interested in meeting talented people. Send us your resume and tell us how you'd like to contribute.
- **Button:** Send Your Resume → opens the Apply modal as a **General Application**.

---

## 3. Apply Modal (application form)

Opens from *Apply Now* (per job) or *Send Your Resume* (general application). Closes with the close button or the **Esc** key.

| Field | Type | Required |
|-------|------|----------|
| Position | hidden (job title, or "General Application") | — |
| Full name | text | Yes |
| Email | email | Yes |
| Phone | text | Yes |
| Resume | file — `.pdf`, `.doc`, `.docx`, **max 5 MB** | Yes |
| LinkedIn | text | No |
| Portfolio | text | No |
| Message | textarea | No |

- **Validation:** client-side, with inline error messages (required fields, valid email, resume type and size).
- **Submission:** posts to the endpoint in the environment variable `NEXT_PUBLIC_CAREERS_FORM_ENDPOINT`.
- **If the endpoint is not set:** the form shows *"Applications aren't wired up to a backend yet. Please email your resume to hr@vasundharainfotechllp.com."*
- **On success:** a confirmation message is shown in the modal.

---

## 4. Contact for Careers

| | |
|---|---|
| Email | hr@vasundharainfotechllp.com |
| Phone | +91 70415 71890 |
| Address | Opp. Nayara Petrol Pump, Singanpore Road, Katargam, Surat-395004, Gujarat, India |

---

## 5. Where to Edit

| What | File |
|------|------|
| Job openings, benefits, culture stats | `src/lib/content.ts` (`jobOpenings`, `careerBenefits`, `careerHighlights`) |
| Page assembly and SEO metadata | `src/app/careers/page.tsx` |
| Section layouts and copy | `src/components/careers/*.tsx` |
| Application form logic | `src/components/careers/ApplyModal.tsx` |
| Form endpoint | `.env` → `NEXT_PUBLIC_CAREERS_FORM_ENDPOINT` |

---

## 6. Open Items

- Replace the four sample job postings with real openings.
- Set `NEXT_PUBLIC_CAREERS_FORM_ENDPOINT` so applications are actually delivered.
- Optionally restyle the section headings in *Why Work With Us?*, *Our Culture* and *Open Positions* to match the redesigned home-page sections (Space Grotesk, blue highlighted phrase).