Phase 4: implement full static site (Eleventy, 15 pages, CSS, JS)

src/services/index.njk

@@ -0,0 +1,43 @@
+---
+layout: layouts/base.njk
+title: "Handywoman Services in San Francisco"
+description: "Browse Diana's services — painting, tile setting, drywall, plumbing, electrical, carpentry, flooring, security equipment, and boat work. San Francisco + 50 miles."
+---
+
+{# ── Page hero ─────────────────────────────────────────────────────────────── #}
+<section class="page-hero bg-graphite">
+  <div class="page-hero__inner container">
+    <p class="section-eyebrow">Services</p>
+    <h1 class="page-hero__title">Services done right.</h1>
+    <p class="page-hero__lead">Every job, every trade &mdash; handled with precision, care, and a contractor you can actually trust.</p>
+  </div>
+</section>
+
+{# ── Services hub ─────────────────────────────────────────────────────────── #}
+<section class="services-hub section bg-linen">
+  <div class="services-hub__intro container">
+    <p>From a leaky faucet to a full room repaint, Diana handles home improvement projects of all sizes across San Francisco and the Bay Area. Every job is approached with the same care and precision that defined her aerospace career.</p>
+  </div>
+
+  <div class="services-grid container">
+    {% for service in services %}
+    <a href="/services/{{ service.slug }}/" class="service-card fade-up">
+      <div class="service-card__image">
+        <img
+          src="/assets/{{ service.images[0].file }}"
+          alt="{{ service.images[0].alt }}"
+          loading="lazy"
+        >
+      </div>
+      <div class="service-card__body">
+        <p class="service-card__name">{{ service.name }}</p>
+        <p class="service-card__desc">{{ service.description }}</p>
+        <span class="service-card__arrow" aria-hidden="true">&rarr;</span>
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+</section>
+
+{# ── CTA band ─────────────────────────────────────────────────────────────── #}
+{% include "components/cta-band.njk" %}