# Project: ANL Homepage Development

## Architecture
- Framework: Next.js 14.2.35 (App Router, static SSG output)
- Tech Stack: React 18.3.1, TypeScript 5.5.3, Tailwind CSS 3.4.6
- Active Codebase Location: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page`
- Target Workspace Path: `/home/godopu16/PuKi/lab/canary_projects/landing_page/website` (symlink to `refer_landing_page`)
- Verification Pipeline:
  - ESLint: `npm run lint`
  - TypeScript: `npx tsc --noEmit`
  - Static SSG Build: `npm run build`
  - Data Integrity Gate: `python3 scripts/extract/verify_counts.py`

## Feature Inventory
| # | Feature | Description | Milestone | Source |
|---|---------|-------------|-----------|--------|
| 1 | Target Directory Symlink / Alignment | Create symlink `website -> refer_landing_page` so target directory is fully populated and buildable | M1 | Prompt / Workspace |
| 2 | Light & Dark Mode Support (System Sync + Toggle) | Implement Dark Mode theme variables, system preference detection (`prefers-color-scheme`), and manual toggle switch component in Header | M2 | R3 / AC-04 |
| 3 | Core Research Pillars & Home Page (PR-03) | 3 home sections (Lab Overview, 4 Pillars, Location) + responsive design | M3 | PR-03 / AC-01~03 |
| 4 | Members IA & Data Integrity (PR-01, PR-02) | Active (16) & Alumni (60) layout, filtering, card view | M3 | PR-01 / AC-07 |
| 5 | Publications IA & Static SSG Routes (PR-04) | 4 category SSG routes (`intl-conf`, `intl-journal-conf`, `domestic-journal-conf`, `patent`) for 223 items | M3 | PR-04 / AC-08 |
| 6 | Lectures & Standardization Pages | 45 semesters lectures + 44 standard docs across 6 bodies | M3 | AC-10 / AC-11 |
| 7 | Full Quality Gate & Acceptance Verification | Pass 100% E2E test suite, linting, type-checking, SSG build, data integrity, responsive design, dark mode | M4 (Final) | All ACs |

## Milestones
| # | Name | Scope | Dependencies | Status |
|---|------|-------|-------------|--------|
| 1 | M1: Workspace Setup & Directory Alignment | Create symlink `website -> refer_landing_page`, verify build/test scripts work in both paths | none | DONE |
| 2 | M2: Light & Dark Mode Implementation | Implement Dark/Light mode theme toggle in Header, system preference detection, and CSS theme variables | M1 | PLANNED |
| 3 | M3: Responsive Layout & Feature Verification | Verify and refine mobile/tablet/desktop responsive design across Home, Members, Publications, Lectures, Standardization | M2 | PLANNED |
| 4 | M4: Final Integration & Dual-Track E2E Hardening | Pass 100% E2E test suite (Tiers 1-4) + Tier 5 Adversarial Coverage Hardening (Challenger + Auditor) | M3 | PLANNED |

## Interface Contracts
### Header ↔ Theme Manager
- Theme state: `'light' | 'dark' | 'system'`
- Persistence: `localStorage` (`theme` key) + `document.documentElement` class/attribute (`dark`)
- System sync: `window.matchMedia('(prefers-color-scheme: dark)')` listener
- Default behavior: Respect system color scheme preference, allow user manual override via toggle button, persist setting.

## Code Layout
- Root: `/home/godopu16/PuKi/lab/canary_projects/landing_page/`
- App Directory: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/` (and `website/` symlink)
- Pages: `app/page.tsx`, `app/members/page.tsx`, `app/publications/page.tsx`, `app/publications/[category]/page.tsx`, `app/lectures/page.tsx`, `app/standardization/page.tsx`
- Data Content: `content/members.ts`, `content/publications.ts`, `content/lectures.ts`, `content/standards.ts`, `content/categories.ts`, `content/types.ts`
- Styles: `app/globals.css`
- Components: `components/Header.tsx`, `components/Footer.tsx`, `components/ThemeToggle.tsx`, etc.
- Scripts: `scripts/extract/verify_counts.py`