Files
diana/src/_includes/layouts/service.njk

83 lines
2.4 KiB
Plaintext

---
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" %}