# DCPH Website

![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square&logo=next.js)
![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=flat-square&logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=flat-square&logo=tailwind-css)

The official marketing website for the **Data Center Operators of the Philippines (DCPH)** — an industry alliance of the country's leading data center operators.

- **Framework:** [Next.js 16](https://nextjs.org/) (App Router)
- **Language:** [TypeScript](https://www.typescriptlang.org/)
- **UI library:** [React 19](https://react.dev/)
- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/)
- **Maps:** [Leaflet](https://leafletjs.com/) + [react-leaflet](https://react-leaflet.js.org/)

> This is a **static marketing site**. There is no database, backend, or CMS — all content (news, officers, facilities, etc.) is written directly in the source code. To change content you edit the code and redeploy. See the [Content Editing Recipes](docs/05-content-editing-recipes.md).

---

## 🚀 Quick start

```bash
# 1. Install dependencies (run once, and again whenever package.json changes)
npm install

# 2. Start the local dev server (hot-reloads as you edit)
npm run dev
```

Then open <http://localhost:3000> in your browser.

**Prerequisites:** [Node.js](https://nodejs.org/) v18.17 or higher and npm. Check with `node -v`.

### Other commands

| Command         | What it does                                                |
| --------------- | ----------------------------------------------------------- |
| `npm run dev`   | Start the local development server (hot reload).            |
| `npm run build` | Create an optimized production build (also catches errors). |
| `npm run start` | Serve the production build locally (run `build` first).     |
| `npm run lint`  | Run ESLint to check for code problems.                      |

---

## 📚 Documentation

Full handover documentation lives in the [`docs/`](docs/) folder:

| #   | Document                                                               | Read it when you want to…                                        |
| --- | --------------------------------------------------------------------- | ---------------------------------------------------------------- |
| 1   | [Overview & Architecture](docs/01-overview-and-architecture.md)       | Understand what the site is, the tech stack, and how it's wired. |
| 2   | [Getting Started](docs/02-getting-started.md)                         | Set up your machine, run the site, build, and deploy.            |
| 3   | [Project Structure](docs/03-project-structure.md)                     | Find where any file or folder lives and what it does.            |
| 4   | [Pages & Components](docs/04-pages-and-components.md)                  | Understand each page and reusable component in detail.           |
| 5   | [Content Editing Recipes](docs/05-content-editing-recipes.md) ⭐      | **Make a change** — add news, a facility, an officer, etc.       |
| 6   | [Styling & Design System](docs/06-styling-and-design-system.md)       | Work with colors, fonts, Tailwind, and animations.              |
| 7   | [Known Issues & Maintenance](docs/07-known-issues-and-maintenance.md) | See the quirks, tech debt, and upkeep checklist.                 |

**New here?** Start with [Overview & Architecture](docs/01-overview-and-architecture.md), then [Getting Started](docs/02-getting-started.md).

**Just need to update content?** Jump straight to the [Content Editing Recipes](docs/05-content-editing-recipes.md).

---

## 🛠️ Original authors

Initial build by Cohort 4 interns (Mar, Alex, Christian). Maintained by the DCPH team.