Update index.html

small tweakes to wording and picture order

_headers

@@ -0,0 +1,22 @@
+# Cache-Control for static, stable-by-filename assets
+/img/*
+  Cache-Control: public, max-age=2592000
+/favicon.svg
+  Cache-Control: public, max-age=2592000
+/favicon-16.png
+  Cache-Control: public, max-age=2592000
+/favicon-32.png
+  Cache-Control: public, max-age=2592000
+/apple-touch-icon.png
+  Cache-Control: public, max-age=2592000
+
+# CSS/JS have no cache-busting hash yet; cache modestly
+/css/*
+  Cache-Control: public, max-age=86400
+/js/*
+  Cache-Control: public, max-age=86400
+
+# Baseline security headers on every response
+/*
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin

css/components/_grid.scss

@@ -0,0 +1,49 @@
+// Minimal grid & utilities — self-hosted replacement for the small subset of
+// Bootstrap 4 this site used. Removes a render-blocking ~160 KB external
+// stylesheet. Breakpoint lg = 992px (one past $m-break: 991px).
+
+.container {
+  width: 100%;
+  max-width: 1140px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -15px;
+  margin-right: -15px;
+
+  > [class*="col-"] {
+    position: relative;
+    width: 100%;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+// mobile-first: columns are full width until the lg breakpoint
+[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
+
+.align-items-center { align-items: center; }
+.text-center { text-align: center; }
+.mb-4 { margin-bottom: 1.5rem; }
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 992px) {
+  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
+  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
+  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
+  .order-lg-1 { order: 1; }
+  .order-lg-2 { order: 2; }
+  .mb-lg-0 { margin-bottom: 0; }
+}

css/main.css

@@ -34,9 +34,71 @@ html { scroll-behavior: smooth; }
 p, a, li, span, div, td, th { font-family: "Lato", sans-serif; }
 h1, h2, h3, h4, h5, h6 { font-family: "Libre Baskerville", serif; }
 
-img { max-width: 100%; }
+img { max-width: 100%; vertical-align: middle; }
+h1, h2, h3, h4, h5, h6 { margin-top: 0; }
+p { margin-top: 0; margin-bottom: 1rem; }
+
+/* ============================================================
+   MINIMAL GRID & UTILITIES
+   Self-hosted replacement for the small subset of Bootstrap 4
+   this site used (grid, a few utilities, button base). Removes a
+   render-blocking ~160 KB external stylesheet. Breakpoint lg = 992px.
+   ============================================================ */
+.container {
+  width: 100%;
+  max-width: 1140px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.row > [class*="col-"] {
+  position: relative;
+  width: 100%;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+/* mobile-first: columns are full width until the lg breakpoint */
+[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
+
+.align-items-center { align-items: center; }
+.text-center { text-align: center; }
+
+.mb-4 { margin-bottom: 1.5rem; }
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 992px) {
+  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
+  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
+  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
+  .order-lg-1 { order: 1; }
+  .order-lg-2 { order: 2; }
+  .mb-lg-0 { margin-bottom: 0; }
+}
 
 /* ---------- Buttons ---------- */
+.btn {
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  border: 1px solid transparent;
+  line-height: 1.5;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+}
 .btn {
   font-family: "Libre Baskerville", serif;
   font-size: 14px;
@@ -46,10 +108,18 @@ img { max-width: 100%; }
 }
 .btn + .btn { margin-left: 0.5rem; }
 
+.btn-light {
+  color: #212529;
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+
 .btn-primary {
+  color: var(--white);
   background-color: var(--gold);
   border-color: var(--gold);
 }
+.btn-primary:hover { color: var(--white); }
 .btn-primary:hover {
   background-color: var(--gold-dark);
   border-color: var(--gold-dark);

css/main.scss

@@ -22,9 +22,19 @@ $l-break: 1199px;
 
 * { box-sizing: border-box; }
 
+@import 'components/grid';
+
 //btns
 .btn {
   @include Libre;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  border: 1px solid transparent;
+  line-height: 1.5;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
   font-size: 14px;
   letter-spacing: 0.3px;
   padding: 0.55rem 1.5rem;
@@ -33,10 +43,19 @@ $l-break: 1199px;
   & + .btn { margin-left: 0.5rem; }
 }
 
+.btn-light {
+  color: #212529;
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+
 .btn-primary {
+  color: $white;
   background-color: $gold;
   border-color: $gold;
 
+  &:hover { color: $white; }
+
   &:hover {
     background-color: darken($gold, 10%);
     border-color: darken($gold, 10%);
@@ -73,9 +92,12 @@ p, a, li, span, div, td, th {
 
 h1, h2, h3, h4, h5, h6 {
   @include Libre;
+  margin-top: 0;
 }
 
-img { max-width: 100%; }
+p { margin-top: 0; margin-bottom: 1rem; }
+
+img { max-width: 100%; vertical-align: middle; }
 
 .page-content {
   padding-top: 92px;

docs/README.md

@@ -1,19 +1,16 @@
 # Homeowner Documents
 
-The Homeowner Information section of `index.html` currently links to the live
+These PDFs are self-hosted and linked from the Homeowner Information section of
-PDFs hosted on **pinecreekhoa.com** (they could not be downloaded automatically
+`index.html`. They were copied from the production site (pinecreekhoa.com).
-because that site sits behind a browser-isolation proxy, but they open fine in a
-normal browser).
 
-When this site takes over the `pinecreekhoa.com` domain, make the documents
+| File | Document |
-self-hosted so the links keep working:
+|------|----------|
+| `PineCreekCCR.pdf` | Pine Creek Neighborhood Covenants |
+| `vineyardccr.pdf` | The Vineyard Supplemental Covenants |
+| `Pine-Creek-Safety-Rules.pdf` | Safety Rules & Regulations |
+| `HOAApprovalForm.pdf` | Architectural Review Approval Form |
+| `Pine-Creek-Delinquency-Policy.pdf` | Delinquency Policy |
+| `Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf` | Community Event Reimbursement Form |
 
-1. Save these six PDFs from the current site into this `docs/` folder:
+To update a document, replace the file here (keep the same name) or update both
-   - `PineCreekCCR.pdf` — Pine Creek Neighborhood Covenants
+the file and its `href` in the `.doc-grid` of `index.html`.
-   - `vineyardccr.pdf` — The Vineyard Supplemental Covenants
-   - `Pine-Creek-Safety-Rules.pdf` — Safety Rules & Regulations
-   - `HOAApprovalForm.pdf` — Architectural Review Approval Form
-   - `Pine Creek Delinquency Policy.pdf` — Delinquency Policy
-   - `Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf` — Community Event Reimbursement Form
-2. In `index.html`, change each `.doc-card` `href` from
-   `https://www.pinecreekhoa.com/<file>` to `docs/<file>`.

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Pine Creek &mdash; Kannapolis' Premier Gated Community</title>
+  <title>Pine Creek - Kannapolis' Premier Gated Community</title>
   <meta name="description" content="Pine Creek is one of the Greater Charlotte area's premier gated communities, offering custom-built luxury homes on one-acre-plus lots in Kannapolis, North Carolina.">
 
   <!-- Open Graph / social preview -->
@@ -19,8 +19,6 @@
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#231F20">
 
-  <!-- Bootstrap grid/utilities -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <!-- Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -45,9 +43,9 @@
         <li><a class="nav-item" href="#vineyard">The Vineyard</a></li>
         <li><a class="nav-item" href="#custom-homes">Custom Homes</a></li>
         <li class="main-nav--logo"><a href="#top"><img src="img/logo.svg" alt="Pine Creek"></a></li>
+        <li><a class="nav-item" href="#community">Community</a></li>
         <li><a class="nav-item" href="#kannapolis">Kannapolis</a></li>
         <li><a class="nav-item" href="#home-owners">HOA</a></li>
-        <li><a class="nav-item" href="#contact">Contact</a></li>
       </ul>
     </div>
   </nav>
@@ -67,7 +65,7 @@
       <div class="hero-content">
         <p class="hero-eyebrow">Kannapolis, North Carolina</p>
         <h1 class="hero-title">Pine Creek</h1>
-        <p class="hero-sub">A premier gated community of custom luxury homes</p>
+        <p class="hero-sub">Cabarrus County's premier gated community of custom estates</p>
         <a class="btn btn-primary hero-btn" href="#welcome">Explore the Community</a>
       </div>
       <a href="#welcome" class="hero-scroll" aria-label="Scroll down">
@@ -82,12 +80,33 @@
           <span class="eyebrow">Welcome</span>
           <h2 class="section-title">Welcome to Pine Creek</h2>
           <h5 class="section-subtitle">Kannapolis' Premier Gated Community</h5>
-          <p>Pine Creek is one of the Greater Charlotte area's premier gated communities, offering custom-built homes in North Carolina's Cabarrus County.</p>
+          <p>Pine Creek is Cabarrus County's premier gated community, offering custom-built homes in Kannapolis, North Carolina.</p>
           <p>The neighborhood features elegant custom homes based on French country designs and influences, ranging in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more to preserve the natural beauty of the original landscape and protect each homeowner's privacy.</p>
-          <p>Create lifelong memories with your family in a luxury, custom home within a secure and quiet community. Welcome home to Pine Creek.</p>
+          <p>Create lifelong memories with your family in a luxury, custom home within a secure and quiet community that is conveniently located. Welcome home to Pine Creek.</p>
         </div>
         <div class="col-lg-6">
-          <img class="feature-img" src="img/gallery/IMG_1964.jpg" alt="A stately custom stone home in Pine Creek" loading="lazy">
+          <div class="gallery" data-gallery="welcome" aria-roledescription="carousel">
+            <div class="gallery-track">
+              <img class="gallery-img is-active" src="img/community/community-entrance-gate.jpg" alt="The gated stone entrance to Pine Creek" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/community/community-vineyard-monument.jpg" alt="The Vineyard entrance monument and landscaping" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/community/community-vineyard-rows.jpg" alt="Manicured vineyard rows lining a community street" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/community/community-pavilion-ground.jpg" alt="The community pavilion and pond fountain framed by manicured gardens" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1964.jpg" alt="Stately custom stone home with manicured gardens in Pine Creek" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1921.jpg" alt="Brick French country estate on a terraced lawn" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1968.jpg" alt="Stone French country home beneath a dramatic sky" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1954.jpg" alt="Cream brick French country chateau with arched windows" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1926.jpg" alt="Red brick French country home nestled among the trees" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1979.jpg" alt="Brick and stone French country home with a manicured lawn" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/gallery/IMG_1974.jpg" alt="Stone and stucco French country home with steep gables" loading="lazy" decoding="async">
+            </div>
+            <button class="gallery-arrow prev" aria-label="Previous image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <button class="gallery-arrow next" aria-label="Next image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+            </button>
+            <div class="gallery-dots" aria-hidden="true"></div>
+          </div>
         </div>
       </div>
     </section>
@@ -100,15 +119,14 @@
         <div class="col-lg-5 mb-4 mb-lg-0">
           <span class="eyebrow">The Vineyard</span>
           <h2 class="section-title">The Vineyard</h2>
-          <p>A subsection of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard's custom homes feature Spanish and Tuscan-inspired architectural designs along streets such as Tuscany Drive and Chardonnay Circle.</p>
+          <p>An enclave within Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard's custom homes feature Spanish and Tuscan-inspired architectural designs along streets such as Tuscany Drive, Chardonnay Circle, and Merlot Trace.</p>
-          <a class="btn btn-primary" href="#contact">Learn More</a>
         </div>
         <div class="col-lg-7">
           <div class="gallery" data-gallery="vineyard" aria-roledescription="carousel">
             <div class="gallery-track">
-              <img class="gallery-img is-active" src="img/gallery/IMG_1937.jpg" alt="Tuscan-style Vineyard home with terracotta tile roof" loading="lazy">
+              <img class="gallery-img is-active" src="img/gallery/IMG_1937.jpg" alt="Tuscan-style Vineyard home with terracotta tile roof" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1941.jpg" alt="Mediterranean-style Vineyard home with terracotta tile roof" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1941.jpg" alt="Mediterranean-style Vineyard home with terracotta tile roof" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1943.jpg" alt="Spanish-Tuscan Vineyard estate with stucco and stone" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1943.jpg" alt="Spanish-Tuscan Vineyard estate with stucco and stone" loading="lazy" decoding="async">
             </div>
             <button class="gallery-arrow prev" aria-label="Previous image">
               <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
@@ -130,24 +148,24 @@
         <div class="col-lg-5 order-lg-2 mb-4 mb-lg-0">
           <span class="eyebrow">Custom Homes</span>
           <h2 class="section-title">Build Your Custom Home in Pine Creek</h2>
-          <p>Pine Creek owners enjoy the freedom to choose their own builder. Rather than limiting you to a pre-approved list, the Pine Creek Homeowners' Association reviews proposed plans in accordance with the Pine Creek Covenants &mdash; giving you the flexibility to bring your own vision to life.</p>
+          <p>Pine Creek owners enjoy the freedom to choose their own custom home builder. Rather than limiting you to a pre-approved list, the Pine Creek Architectural Review Committee reviews proposed plans in accordance with the Pine Creek Covenants &mdash; giving you the flexibility to bring your own vision to life.</p>
-          <p>This review ensures that every home design, architectural detail, and landscape plan is in harmony with the established character of Pine Creek. The HOA is glad to offer early feedback on your renderings, so you can move forward with confidence.</p>
+          <p>This review ensures that every home design, architectural detail, and landscape plan is in harmony with the established character of Pine Creek. The Architectural Review Committee is glad to talk with you and review preliminary renderings before you purchase in the neighborhood, so you can move forward with confidence.</p>
-          <p class="availability-note">Interested in building? A limited number of homesites are available. <a href="#contact">Contact us for lot availability.</a></p>
+          <p class="availability-note">Considering building in Pine Creek or The Vineyard? <a href="#contact">Contact the Architectural Review Committee</a> early &mdash; we're glad to discuss your vision before you buy.</p>
-          <a class="btn btn-primary" href="#contact">Contact the HOA</a>
+          <a class="btn btn-primary" href="#contact">Contact Us</a>
         </div>
         <div class="col-lg-7 order-lg-1">
           <div class="gallery" data-gallery="estate" aria-roledescription="carousel">
             <div class="gallery-track">
-              <img class="gallery-img is-active" src="img/gallery/IMG_1947.jpg" alt="Brick and stone French country estate" loading="lazy">
+              <img class="gallery-img is-active" src="img/gallery/IMG_1947.jpg" alt="Brick and stone French country estate" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1922.jpg" alt="Stately brick custom home on a manicured lawn" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1922.jpg" alt="Stately brick custom home on a manicured lawn" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1945.jpg" alt="Stone custom home with circular drive" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1945.jpg" alt="Stone custom home with circular drive" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1971.jpg" alt="French country home with stone accents" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1971.jpg" alt="French country home with stone accents" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1977.jpg" alt="Brick and stone estate with mature landscaping" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1977.jpg" alt="Brick and stone estate with mature landscaping" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_2978.jpg" alt="Custom estate framed by trees" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_2978.jpg" alt="Custom estate framed by trees" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1985.jpg" alt="Stone manor home at dusk" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1985.jpg" alt="Stone manor home at dusk" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1955.jpg" alt="Stone and stucco custom home with circular drive" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1955.jpg" alt="Stone and stucco custom home with circular drive" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1980.jpg" alt="Sprawling brick and stone estate" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1980.jpg" alt="Sprawling brick and stone estate" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/gallery/IMG_1914.jpg" alt="Brick estate with formal fountain garden" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1914.jpg" alt="Brick estate with formal fountain garden" loading="lazy" decoding="async">
             </div>
             <button class="gallery-arrow prev" aria-label="Previous image">
               <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
@@ -170,17 +188,19 @@
           <span class="eyebrow">Life at Pine Creek</span>
           <h2 class="section-title">Community &amp; Common Areas</h2>
           <p>Beyond its custom homes, Pine Creek is defined by the spaces neighbors share. A gated stone entrance opens to winding, tree-lined streets and the manicured vineyard rows that give The Vineyard its name.</p>
-          <p>At the heart of the community, a lakeside pavilion overlooks a tranquil pond with a fountain &mdash; a gathering place framed by mature woods and meticulously kept grounds.</p>
+          <p>At the heart of the community, a lakeside pavilion sits between two ponds and overlooks the lower tranquil pond with its fountain &mdash; a gathering place framed by mature woods and meticulously kept grounds.</p>
         </div>
         <div class="col-lg-7">
           <div class="gallery" data-gallery="community" aria-roledescription="carousel">
             <div class="gallery-track">
-              <img class="gallery-img is-active" src="img/community/community-pavilion-pond.jpg" alt="Lakeside pavilion overlooking the community pond and fountain" loading="lazy">
+              <img class="gallery-img is-active" src="img/community/community-entrance-gate.jpg" alt="The gated stone entrance to Pine Creek" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/community/community-pavilion.jpg" alt="Aerial view of the community pavilion and gardens" loading="lazy">
+              <img class="gallery-img" src="img/community/community-vineyard-street.jpg" alt="Stone-columned vineyard terraces along a tree-lined street" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/community/community-vineyard-gate.jpg" alt="The Vineyard entrance monument with stone cupola" loading="lazy">
+              <img class="gallery-img" src="img/community/community-pavilion-pond.jpg" alt="Lakeside pavilion overlooking the community pond and fountain" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/community/community-vineyard-rows.jpg" alt="Manicured vineyard rows lining a community street" loading="lazy">
+              <img class="gallery-img" src="img/community/community-pavilion.jpg" alt="Aerial view of the community pavilion and gardens" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/community/community-aerial.jpg" alt="Aerial view of Pine Creek's tree-lined streets and estates" loading="lazy">
+              <img class="gallery-img" src="img/community/community-pond-bench.jpg" alt="A shaded bench overlooking the community pond" loading="lazy" decoding="async">
-              <img class="gallery-img" src="img/community/community-forest-pond.jpg" alt="Pine Creek homes nestled among the woods near the pond" loading="lazy">
+              <img class="gallery-img" src="img/community/community-pond-bridge.jpg" alt="The wooden footbridge across the community pond" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/community/community-aerial.jpg" alt="Aerial view of Pine Creek's tree-lined streets and estates" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/community/community-forest-pond.jpg" alt="Pine Creek homes nestled among the woods near the pond" loading="lazy" decoding="async">
             </div>
             <button class="gallery-arrow prev" aria-label="Previous image">
               <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
@@ -201,10 +221,10 @@
       <div class="text-center mb-4">
         <span class="eyebrow">The Neighborhood</span>
         <h2 class="section-title">Community Map</h2>
-        <p class="section-lead">Winding, tree-lined streets &mdash; Tuscany Drive, Chardonnay Circle, Willowood Road, Stone Ridge Road, Richwood Circle, and Rolling Ridge Drive &mdash; thread through Pine Creek's gently rolling, one-acre-plus homesites.</p>
+        <p class="section-lead">Winding, tree-lined streets thread through Pine Creek's gently rolling, one-acre-plus homesites and the adjoining Vineyards enclave &mdash; the tranquil ponds and common areas are centrally located in the neighborhood.</p>
       </div>
       <div class="map-frame">
-        <img class="map-img" src="img/community-map.jpg" alt="Map of the Pine Creek community streets" loading="lazy">
+        <img class="map-img" src="img/community-map-2026.jpg" alt="Illustrated map of the Pine Creek and The Vineyards neighborhood" loading="lazy" decoding="async">
       </div>
     </section>
 
@@ -217,18 +237,36 @@
           <span class="eyebrow">The Area</span>
           <h2 class="section-title">Call Kannapolis, NC 'Home'</h2>
           <p>Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Originally developed in 1906 as the home of Cannon Mills, Kannapolis has since blossomed with residential and business development, drawing families who want to live close to uptown Charlotte while keeping a small-town, country feel.</p>
-          <p>The town is conveniently located right off I-85, within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, sought-after Cabarrus County and private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.</p>
+          <p>The town is conveniently located right off I-85, within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful revitalized downtown, sought-after Cabarrus County and private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.</p>
         </div>
         <div class="col-lg-6">
-          <img class="feature-img" src="img/kannapolis-nc.jpg" alt="Downtown Kannapolis, North Carolina" loading="lazy">
+          <div class="gallery" data-gallery="kannapolis" aria-roledescription="carousel">
+            <div class="gallery-track">
+              <img class="gallery-img is-active" src="img/kannapolis-city-hall.jpg" alt="Kannapolis City Hall in downtown Kannapolis, North Carolina" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/kannapolis-west-avenue.jpg" alt="The West Avenue plaza in revitalized downtown Kannapolis at dusk" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/kannapolis-gem-theatre.jpg" alt="The historic GEM Theatre marquee welcoming visitors to Kannapolis" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/kannapolis-old-armour.jpg" alt="Old Armour Beer Garden and fountains in downtown Kannapolis" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/kannapolis-ballpark.jpg" alt="Atrium Health Ballpark, home of the Kannapolis Cannon Ballers, lit up at night" loading="lazy" decoding="async">
+              <img class="gallery-img" src="img/kannapolis-downtown-night.jpg" alt="Downtown Kannapolis and West Avenue in the evening" loading="lazy" decoding="async">
+            </div>
+            <button class="gallery-arrow prev" aria-label="Previous image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <button class="gallery-arrow next" aria-label="Next image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+            </button>
+            <div class="gallery-dots" aria-hidden="true"></div>
           </div>
         </div>
+      </div>
+      <!-- Remove embedded Google Map 
       <div class="map-embed">
         <iframe
           title="Map of Pine Creek in Kannapolis, North Carolina"
           src="https://www.google.com/maps?q=Tuscany%20Dr%2C%20Kannapolis%2C%20NC%2028081&z=15&output=embed"
-          loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
+          loading="lazy" decoding="async" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
       </div>
+      -->
     </section>
 
     <div class="container"><hr class="section-divider"></div>
@@ -238,7 +276,7 @@
       <div class="text-center mb-4">
         <span class="eyebrow">Governance</span>
         <h2 class="section-title">Pine Creek Homeowners' Association</h2>
-        <p class="section-lead">The Pine Creek Homeowners' Association consists of board members voted into position by homeowners within the neighborhood. The Association approves proposed building plans and oversees the ongoing maintenance of homes to ensure they meet the aesthetics of Pine Creek and The Vineyard.</p>
+        <p class="section-lead">The Pine Creek Homeowners' Association is led by 5 board members holding 2-year terms, voted into position by the property owners in the neighborhood. The Association Board holds owner meetings several times each year and governs the community based on the provisions of the governing documents and NC Statutes. The Board and its Committees oversee the architectural review and covenant compliance processes to protect and enhance the value, attractiveness, and desirability of the homes and properties in Pine Creek and The Vineyard.</p>
       </div>
 
       <h3 class="board-heading">Meet the Board</h3>
@@ -285,11 +323,9 @@
       <!-- HOMEOWNER INFORMATION / DOCUMENTS -->
       <h3 class="board-heading" id="documents">Homeowner Information</h3>
       <p class="section-lead text-center">Governing documents, rules, and forms for current and prospective Pine Creek and Vineyard homeowners.</p>
-      <!-- Documents currently link to the live files on pinecreekhoa.com (they open in real browsers).
+      <!-- Documents are self-hosted in /docs (copied from pinecreekhoa.com). -->
-           When this site takes over the domain, copy the PDFs into /docs and switch each href to
-           the local path (e.g. docs/PineCreekCCR.pdf). -->
       <div class="doc-grid">
-        <a class="doc-card" href="https://www.pinecreekhoa.com/PineCreekCCR.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/PineCreekCCR.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -298,7 +334,7 @@
             <span class="doc-meta">The CC&amp;Rs governing Pine Creek &middot; PDF</span>
           </span>
         </a>
-        <a class="doc-card" href="https://www.pinecreekhoa.com/vineyardccr.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/vineyardccr.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -307,7 +343,7 @@
             <span class="doc-meta">Additional covenants for The Vineyard &middot; PDF</span>
           </span>
         </a>
-        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine-Creek-Safety-Rules.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/Pine-Creek-Safety-Rules.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -316,7 +352,7 @@
             <span class="doc-meta">Community safety rules and regulations &middot; PDF</span>
           </span>
         </a>
-        <a class="doc-card" href="https://www.pinecreekhoa.com/HOAApprovalForm.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/HOAApprovalForm.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -325,7 +361,7 @@
             <span class="doc-meta">Submit improvements for board approval &middot; PDF</span>
           </span>
         </a>
-        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine%20Creek%20Delinquency%20Policy.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/Pine-Creek-Delinquency-Policy.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -334,7 +370,7 @@
             <span class="doc-meta">Assessment collection &amp; delinquency policy &middot; PDF</span>
           </span>
         </a>
-        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf" target="_blank" rel="noopener">
+        <a class="doc-card" href="docs/Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf" target="_blank" rel="noopener">
           <span class="doc-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
           </span>
@@ -353,7 +389,7 @@
         <span class="eyebrow light">Get in Touch</span>
         <h2 class="section-title">Contact Us</h2>
         <p class="section-lead">Questions about Pine Creek, available lots, or the home-plan approval process? We'd love to hear from you.</p>
-        <a class="btn btn-light contact-btn" href="mailto:general@pinecreekhoa.com">Email the HOA</a>
+        <a class="btn btn-light contact-btn" href="mailto:president@pinecreekhoa.com">Email the HOA</a>
       </div>
     </section>
   </main>