Files

Chris Olson 50e8b1bcd3 Enhance Pine Creek marketing site: real media, galleries, HOA info

Content & media
- Replace placeholder slides with optimized real estate photos (img/gallery)
- Rebuild hero video from the HD intro clip + drone "common area" clips
  (gate -> vineyard -> home front -> Vineyard sign -> pavilion -> fountain),
  cutting the private backyard segment; add mobile variant + poster
- Add "Community & Common Areas" aerial gallery and a community map
- Galleries split strictly by style: Vineyard = Tuscan homes only,
  Custom Homes = non-Tuscan estates

HOA / Homeowner Information
- Real board roster (sourced from pinecreekhoa.com) in a responsive table
- Homeowner Information document library (CC&Rs, Vineyard covenants, safety
  rules, architectural review form, delinquency policy, event reimbursement)
  linking the live PDFs; Premier Management Company reference
- Real general contact email

Design & UX
- Modern full-screen video hero with overlay, sticky nav, refined typography
- Click-to-zoom lightbox for all galleries (keyboard + swipe)
- Google Maps embed in the Kannapolis section
- Favicon set generated from the Pine Creek emblem (svg/png/ico)
- Positive reframe of the Custom Homes copy + lot-availability note
- SEO/Open Graph meta, lazy-loaded images, responsive board/doc layouts

Housekeeping
- SCSS source kept in sync (new partials: hero, sections, gallery, board,
  features); remove stale placeholders, old.index.php, and map artifact
- Add .gitignore (.DS_Store, .claude/, css map); fix docs (index.php -> index.html)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-22 22:09:46 -04:00

1.4 KiB

Raw Blame History

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.:

# 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:

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).