# 3. Project Structure ## Top-level layout The repository contains the Next.js app inside the `dcph_website/` subfolder: ``` DCPH-Website-Main/ ├── .git/ ├── .gitignore └── dcph_website/ ← the actual Next.js project (run npm here) ├── app/ ← routes/pages + global styles (App Router) ├── components/ ← reusable React components ├── assets/ ← images imported by code (optimized by Next) ├── public/ ← static files served as-is (images, video, svg) ├── docs/ ← this documentation ├── package.json ← dependencies + npm scripts ├── package-lock.json ← exact dependency versions (do not hand-edit) ├── tsconfig.json ← TypeScript configuration ├── next.config.ts ← Next.js configuration (currently empty/default) ├── postcss.config.mjs ← PostCSS config (loads Tailwind) ├── eslint.config.mjs ← ESLint config ├── .gitignore └── README.md ``` ## The `app/` folder (routes + layout) Every route is a folder with a `page.tsx`. Special files (`layout.tsx`, `globals.css`, `favicon.ico`, `icon.png`) are Next.js conventions. ``` app/ ├── layout.tsx Root layout — wraps every page; loads fonts + site metadata. ├── globals.css Global styles, Tailwind import, custom CSS animations. ├── favicon.ico Browser tab icon (auto-served by Next.js). ├── icon.png App icon (auto-served by Next.js). ├── page.tsx HOME page → / │ ├── about/ │ └── page.tsx ABOUT page → /about │ ├── whyph/ │ └── page.tsx WHY PHILIPPINES page → /whyph │ ├── data-centers/ │ ├── page.tsx DATA CENTERS page → /data-centers │ └── FacilityMap.tsx Leaflet map component (client-only, used by page.tsx). │ ├── contact-us/ │ └── page.tsx CONTACT page → /contact-us │ └── news/ ├── page.tsx NEWS listing → /news └── [slug]/ ├── page.tsx NEWS ARTICLE → /news/ (holds all article text) └── BackButton.tsx "Back" button (client component used by the article page). ``` ### File-by-file: `app/` | File | Type | What it does | | ------------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | | `layout.tsx` | Server | HTML shell for all pages; loads **Montserrat** + **Orbitron** fonts; sets default ``/SEO. | | `globals.css` | CSS | `@import "tailwindcss"`, theme variables, Leaflet tweaks, and custom keyframe animations. | | `page.tsx` | Server | Home page. Composes `Header`, `Landing_bg`, `Landing`, `Footer`. | | `about/page.tsx` | **Client** | About page: hero, "who we are", Purpose/Mission/Vision flip-card carousel, officers grid. | | `whyph/page.tsx` | **Client** | Why-Philippines page: hero with video modal, and a 6-section advantages accordion. | | `data-centers/page.tsx` | **Client** | Data Centers page: search, location filter, facility cards, and the map. | | `data-centers/FacilityMap.tsx` | **Client** | The Leaflet map: pins per facility, custom markers, filtered-results overlay. | | `contact-us/page.tsx` | Server | Contact page: email/phone/social, and a "mailto:" button. | | `news/page.tsx` | **Client** | News listing: featured carousel (`newsItems`) + searchable grid (`newsArticles`). | | `news/[slug]/page.tsx` | Server | Renders a single article from the `articles` object; also builds per-article SEO metadata. | | `news/[slug]/BackButton.tsx` | **Client** | A back button that calls `router.back()`. | ## The `components/` folder Reusable pieces shared across pages. | File | Type | Used by | What it is | | ----------------- | ---------- | -------------------------------- | ------------------------------------------------------------------------------------------- | | `Header.tsx` | **Client** | Almost every page | Top navigation bar. Desktop pill-nav + mobile hamburger menu. Highlights the active link. | | `Footer.tsx` | Server | Almost every page | Footer with brand block, link columns, gradient divider, and dynamic copyright year. | | `Landing.tsx` | **Client** | Home (`app/page.tsx`) | The bulk of the home page: operator marquee, "Meet our Operators" panels, "Why PH", news, contact CTA. | | `Landing_bg.tsx` | **Client** | Home (`app/page.tsx`) | The hero section with an auto-rotating background image and the main headline. | | `Officers.tsx` | Server | About (`app/about/page.tsx`) | Officer card + the officers grid section. **Default export is `OfficersSection`** (see note). | | `News.tsx` | Server | *(nothing — currently unused)* | A standalone news-card component. Not imported anywhere; safe to ignore or delete. | > **Naming gotcha:** `components/Officers.tsx` default-exports a component named `OfficersSection`, but `app/about/page.tsx` imports it as `OfficerCard`. They are the same thing — `import OfficerCard from "@/components/Officers"` just renames the default export locally. Don't let the mismatched name confuse you. ## `assets/` vs `public/` This is a key distinction in Next.js. Both hold images, but they're used differently. ### `assets/` — *imported* images Files here are brought into code with an `import`: ```tsx import dcph_logo from "../assets/dcph_logo.png"; // ...later... <Image src={dcph_logo} alt="DCPH Logo" width={110} height={110} /> ``` Next.js **optimizes** these (resizes, compresses, lazy-loads) and gives you build-time guarantees (a typo in the path fails the build). Use `assets/` for logos, photos, and icons that appear inside `<Image>` components. Current contents of `assets/`: - **Logos:** `dcph_logo.png`, `digiedge_logo.png`, `digihalo_logo.png`, `flow_logo.png`, `stt_logo.png`, `vitro_logo.png`, `yco_logo.png`, `cloudlogo.png` - **Operator photos (panels/hero):** `AFLOW.jpg`, `DIGITALEDGE.jpg`, `DIGITALHALO.png`, `STT.jpeg`, `VITRO.jpg`, `YCO.jpeg` - **Officer portraits:** `Victor.png`, `Malana.png`, `Barrios.png`, `Nik.png`, `Maricar.png`, `Patrick.png` - **Page art / maps:** `about_bg.png`, `leaders.png`, `Ph_map.png`, `ph.png`, `phbg.png` - **Why-PH accordion icons:** `location.png`, `Globe.png`, `Infra.png`, `trend.png`, `talentdriven.png`, `People.png`, `Educ.png`, `policies.png`, `Paper.png`, `energy.png`, `Electricity.png`, `Water.png`, `Sun.png`, `connection.png`, `Cable.png`, `Wifi.png`, `Sparkle.png`, `Cloud.png` - **Misc UI icons:** `Check.png`, `Up.png`, `arrow_right.png`, `arrowhead.png`, `phone.png` - **Unused (no imports found):** `purpose.png`, `mission.png`, `vision.png`, `stt_bg.png` — see [Known Issues](07-known-issues-and-maintenance.md). ### `public/` — *served-as-is* files Files here are **not** imported. They're served at the root URL by their path. A file at `public/images/Article 1.jpg` is reachable at the URL `/images/Article 1.jpg` and used like: ```tsx <img src="/images/Article 1.jpg" alt="..." /> // or in CSS: url('/images/datacenters.png') // or video: <source src="/WHY_PHILIPPINES.mp4" /> ``` Use `public/` for: news article images, the hero video, CSS background images, and anything referenced by a plain string URL. Current contents of `public/`: ``` public/ ├── WHY_PHILIPPINES.mp4 Video shown in the Why-Philippines modal. ├── images/ │ ├── Article 1.jpg MOU-signing article image. │ ├── Article 2.jpg Officers/trustees article image. │ ├── Article 3_1.jpg … 3_5.jpg PTC 2026 article images. │ ├── Article 4_1.jpg … 4_3.jpg February-session article images. │ └── datacenters.png Background used in the Data Centers & News page headers. ├── file.svg, globe.svg, next.svg, vercel.svg, window.svg Default Next.js template SVGs (mostly unused). ``` > **When do I use which?** If you'll reference the image with `<Image src={imported}>`, put it in `assets/` and import it. If you'll reference it by a string URL (`<img src="/...">`, a CSS `url(...)`, or a `<video>`), put it in `public/`. News article images use `public/` by convention in this project. ## Configuration files | File | Purpose | | ------------------- | -------------------------------------------------------------------------------------------------------- | | `package.json` | Lists dependencies and the `dev`/`build`/`start`/`lint` scripts. | | `package-lock.json` | Locks exact installed versions. Auto-managed by npm — don't edit by hand; commit it when it changes. | | `tsconfig.json` | TypeScript settings. Note the `@/*` path alias → the project root (so `@/components/Header` works). | | `next.config.ts` | Next.js config. Currently empty (all defaults). This is where you'd add image domains, redirects, etc. | | `postcss.config.mjs`| Wires Tailwind into the CSS build via `@tailwindcss/postcss`. | | `eslint.config.mjs` | ESLint rules (extends Next.js core-web-vitals + TypeScript configs). | | `.gitignore` | Files git ignores: `node_modules/`, `.next/`, `.env*`, `.vercel`, `.DS_Store`, etc. | > **Path alias:** `tsconfig.json` maps `@/*` to the project root. So `@/components/Header` and `../../components/Header` refer to the same file. Both styles appear in the codebase; either works. Next: [Pages & Components →](04-pages-and-components.md)