---
layout: layouts/base.njk
title: "Handywoman San Francisco"
description: "San Francisco's trusted handywoman — precise, reliable, and easy to work with. Diana brings aerospace-level project coordination to your home. Request a quote."
ogImage: "diana_photo-cropped.png"
---

{# ── Hero ─────────────────────────────────────────────────────────────────── #}
<section class="hero">
  <div class="hero__inner container">

    <div class="hero__content">
      <p class="section-eyebrow">San Francisco Handywoman</p>
      <h1 class="display-title">Fix it right.<br>The first time.</h1>
      <p class="lead-text">Precise, reliable, and easy to work with — Diana brings aerospace-level project coordination to your home improvement project.</p>

      <div class="hero__actions">
        <a href="{{ rootPath }}contact/index.html" class="btn btn--primary">Request a Quote</a>
        <div class="hero__contact">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16h.5a2 2 0 0 1 .02.92z"/>
          </svg>
          <a href="{{ site.phone | telHref }}">{{ site.phoneDisplay }}</a>
        </div>
      </div>
    </div>

    <div class="hero__image">
      <img
        src="{{ rootPath }}assets/diana_photo-cropped.png"
        alt="Diana on a sailboat with the Golden Gate Bridge in the background, smiling."
        loading="eager"
        fetchpriority="high"
        width="1440"
        height="1920"
      >
    </div>

  </div>
</section>

{# ── Services ─────────────────────────────────────────────────────────────── #}
<section class="services-section section bg-linen">
  <div class="services-section__header container">
    <p class="section-eyebrow">What Diana does</p>
    <h2>Services for every room &mdash; and beyond.</h2>
  </div>

  <div class="services-grid container">
    {% for service in services %}
    <a href="{{ rootPath }}services/{{ service.slug }}/index.html" class="service-card fade-up">
      <div class="service-card__image">
        <img
          src="{{ rootPath }}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>

{# ── Why HER ──────────────────────────────────────────────────────────────── #}
<section class="why-her section bg-mist">
  <div class="why-her__header container">
    <p class="section-eyebrow">Why choose HER</p>
    <h2>What makes Diana different.</h2>
  </div>

  <div class="why-her__grid container">

    <div class="trust-pillar fade-up">
      <div class="trust-pillar__icon" aria-hidden="true">&#x2713;</div>
      <h3 class="trust-pillar__title">Reliable &amp; Accountable</h3>
      <p class="trust-pillar__body">Diana sets a schedule and sticks to it. No chasing, no surprises &mdash; just clear communication and work delivered on time.</p>
    </div>

    <div class="trust-pillar fade-up">
      <div class="trust-pillar__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <polyline points="23 4 23 10 17 10"/>
          <polyline points="1 20 1 14 7 14"/>
          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
        </svg>
      </div>
      <h3 class="trust-pillar__title">Project Coordination</h3>
      <p class="trust-pillar__body">With a background managing multimillion-dollar aerospace projects, Diana brings big-picture thinking and attention to detail to every home job.</p>
    </div>

    <div class="trust-pillar fade-up">
      <div class="trust-pillar__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      </div>
      <h3 class="trust-pillar__title">Easy to Work With</h3>
      <p class="trust-pillar__body">Homeowners consistently describe working with Diana as refreshingly straightforward &mdash; honest pricing, calm approach, and no attitude.</p>
    </div>

  </div>
</section>

{# ── Testimonials strip ────────────────────────────────────────────────────── #}
<section class="testimonials-strip section bg-linen">
  <div class="testimonials-strip__header container">
    <p class="section-eyebrow">Client reviews</p>
    <h2>What people say.</h2>
    <a href="{{ rootPath }}testimonials/index.html" class="btn btn--secondary">All reviews</a>
  </div>

  <div class="testimonials-grid container">
    {% for testimonial in testimonials %}
    {% if testimonial.featured %}
    <div class="testimonial-card fade-up">
      <blockquote>
        <p class="testimonial-card__quote">&#x201C;{{ testimonial.pullQuote }}&#x201D;</p>
        <footer>
          <p class="testimonial-card__author">{{ testimonial.author }}</p>
          {% if testimonial.city %}
          <p class="testimonial-card__city">{{ testimonial.city }}</p>
          {% endif %}
        </footer>
      </blockquote>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</section>

{# ── Service area ─────────────────────────────────────────────────────────── #}
<section class="service-area section">
  <div class="container">
    <h2 class="service-area__title">Serving San Francisco and the Bay Area</h2>
    <p>Within 50 miles of San Francisco &mdash; from Marin County to Palo Alto and across the East Bay.</p>
    <ul class="service-area__cities" role="list">
      {% for city in site.serviceAreaCities %}
      <li class="service-area__city">{{ city }}</li>
      {% endfor %}
    </ul>
  </div>
</section>

{# ── CTA band ─────────────────────────────────────────────────────────────── #}
{% include "components/cta-band.njk" %}
