# pine-creek-hoa

Public marketing website for the **Pine Creek** community in Kannapolis, NC.

It is a fully static site (HTML/CSS/JS) designed to be hosted at no cost on
**Cloudflare Pages**, and is responsive for desktop, tablet, and mobile.

## Structure

- `index.html` — the entire single-page site (nav, hero, sections, HOA board, contact, footer).
- `css/main.css` — compiled, **served** stylesheet. Edited directly (no build tooling required).
- `css/main.scss` + `css/components/*` — SCSS source, kept in sync with `main.css`.
- `js/main.js` — mobile nav, smooth-scroll, and the photo galleries.
- `img/` — images and the hero video (`hero.mp4`, `hero-mobile.mp4`, `hero-poster.jpg`),
  optimized estate/vineyard photos in `img/gallery/`, and `community-map.jpg`.

## Local preview

Any static file server works, e.g.:

```sh
# Python
python3 -m http.server 8080
# or Docker (nginx)
docker run --rm -p 8080:80 -v "$PWD":/usr/share/nginx/html:ro nginx:alpine
```

Then open http://localhost:8080/

## Editing styles

`css/main.css` is what the browser loads, so changes can be made there directly.
If you have the Dart Sass CLI installed and prefer the SCSS source, recompile with:

```sh
sass css/main.scss css/main.css
```

## Updating the HOA board

The board roster lives in a `<table class="board-table">` inside the
`#home-owners` section of `index.html`. Replace the placeholder name/email cells
with the real values (5 members: Name, Position, Email).