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

src/_includes/layouts/service.njk

@@ -0,0 +1,82 @@
+---
+layout: layouts/base.njk
+---
+
+{#
+  This layout supports two usage patterns:
+  1. Paginated from services.json — the `service` variable (pagination alias) is the full service object.
+  2. Individual page with frontmatter — individual `serviceTitle`, `eyebrow`, `lead`, `images`, `included` variables.
+#}
+{% if service %}
+  {% set _title    = service.name %}
+  {% set _eyebrow  = service.eyebrow %}
+  {% set _lead     = service.lead %}
+  {% set _images   = service.images %}
+  {% set _included = service.included %}
+{% else %}
+  {% set _title    = serviceTitle %}
+  {% set _eyebrow  = eyebrow %}
+  {% set _lead     = lead %}
+  {% set _images   = images %}
+  {% set _included = included %}
+{% endif %}
+
+<section class="page-hero bg-graphite">
+  <div class="page-hero__inner container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <ol role="list">
+        <li><a href="/">Home</a></li>
+        <li><a href="/services/">Services</a></li>
+        <li aria-current="page">{{ _title }}</li>
+      </ol>
+    </nav>
+    <p class="section-eyebrow">{{ _eyebrow }}</p>
+    <h1 class="page-hero__title">{{ _title }}</h1>
+    <p class="page-hero__lead">{{ _lead }}</p>
+    <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+  </div>
+</section>
+
+<section class="service-detail section">
+  <div class="container">
+
+    {% if _images and _images.length %}
+    <div class="service-detail__gallery">
+      {% for image in _images %}
+      <figure>
+        <img
+          src="/assets/{{ image.file }}"
+          alt="{{ image.alt }}"
+          loading="{% if loop.first %}eager{% else %}lazy{% endif %}"
+          width="800"
+          height="600"
+        >
+      </figure>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    <div class="service-detail__body">
+      <h2>What's included</h2>
+      {% if _included and _included.length %}
+      <ul class="service-detail__list">
+        {% for item in _included %}
+        <li>{{ item }}</li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+
+      <div class="service-detail__area">
+        <p>Diana serves San Francisco and the wider Bay Area within 50 miles, including Oakland, Berkeley, Marin County, Palo Alto, and beyond.</p>
+      </div>
+
+      <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+    </div>
+
+  </div>
+</section>
+
+{# Page body content (Eleventy compatibility) #}
+{{ content | safe }}
+
+{% include "components/cta-band.njk" %}