---
name: home
description: Landing page, shared shell components (header/footer), ShellLayout, and routing conventions for deepnimma.com
---

## Activation

This skill triggers when editing these files:
- `src/sections/home/**`
- `src/sections/elements/sharedHeader.tsx`
- `src/sections/elements/sharedFooter.tsx`
- `src/sections/elements/shellLayout.tsx`
- `src/App.tsx`
- `src/sections/routes/*.tsx`

Keywords: home, landing, SharedHeader, SharedFooter, ShellLayout, navigation, routes, tabs

---

You are working on the **home shell and routing layer** of deepnimma.com.

## Key Files
- `src/sections/home/body.tsx` — Minimal landing page; just a name + tagline in `.bodycon`
- `src/sections/elements/sharedHeader.tsx` — Nav via `tabs` from `src/objects/headerNavBar.tsx`; active tab detected via `useLocation().pathname`
- `src/sections/elements/sharedFooter.tsx` — Footer nav + social icons from `src/objects/socialsbuttons`; tabs from `src/objects/footerNavBar`
- `src/sections/elements/shellLayout.tsx` — `<SharedHeader /> + <Outlet /> + <SharedFooter />`; React Router layout route used by footer/blog zones
- `src/objects/headerNavBar.tsx` — Tab definitions (name + route); update here to add/remove nav items
- `src/App.tsx` — Root router; `Home` is the `/` route, wraps `SharedHeader + Body + SharedFooter` inline (does not use `ShellLayout`)
- `src/sections/routes/headerRoutes.tsx` — Top-level pages; still uses per-page `My*` wrappers around `SharedHeader`/`SharedFooter`

## Key Concepts
- **Two shell patterns coexist:**
  - `ShellLayout` layout route (preferred): one parent `<Route element={<ShellLayout />}>` renders header/footer once and `<Outlet />` for the page. Used in `footerRoutes.tsx` and `blogRoutes.tsx`.
  - Inline per-page wrappers (legacy): each route element is a local `FC` that hand-wires `SharedHeader + Page + SharedFooter`. Still used in `App.tsx` (Home) and `headerRoutes.tsx`.
- **Route split:** `App.tsx` handles `/`, `/creator`, `/camera/:year/:slug`. `HeaderRoutes`, `FooterRoutes`, `BlogRoutes` handle the rest — all rendered as sibling `<Routes>` inside the same `<Router>`.
- **Nav tabs:** Defined as parallel arrays in `src/objects/headerNavBar.tsx`, zipped into `NavBarButton[]`. Same pattern in `src/objects/footerNavBar.tsx`.

## Critical Rules
- Adding a new top-level page: (1) add a `<Route>` in the appropriate zone file (use the existing `ShellLayout` parent in `footerRoutes.tsx`/`blogRoutes.tsx`, or a `My*` wrapper in `headerRoutes.tsx`), (2) add to `src/objects/headerNavBar.tsx` arrays if it should appear in nav — order matters since arrays are index-zipped.
- Do NOT add routes directly in `App.tsx` unless they need special URL params (like `/camera/:year/:slug`) or must skip the shell (like `/creator`).
- CSS for home lives in `src/css/home/Body.css`; header/footer CSS in `src/css/elements/`.

## References
- **Patterns:** `.claude/guidelines/home/patterns.md`

---
**Last Updated:** 2026-04-25