Home services service areas page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home services service areas page</title>
  <style>
    body{margin:0;font-family:'Open Sans',Arial,sans-serif;color:#1a2633;background:#ffffff}
    .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
    section{padding:72px 0}
    h1,h2,h3{font-family:'Poppins',Arial,sans-serif;color:#1a2633;margin:0}
    h1{font-size:44px;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;color:#ffffff}
    h2{font-size:32px;line-height:1.2;margin:0 0 14px}
    h3{font-size:19px;line-height:1.3;margin:0 0 8px}
    p{margin:0;line-height:1.75;color:#5b6b7c;font-size:16px}
    .btn{display:inline-block;white-space:nowrap;padding:15px 26px;border-radius:8px;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:16px}
    .btn-orange{background:#f2711c;color:#1a2633}
    .btn-blue{background:#14365d;color:#ffffff}
    .intro{background:#14365d}
    .intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    .intro p{color:#eef2f6;font-size:18px;margin:0 0 26px}
    .intro-img{width:100%;min-width:0;background:#eef2f6;height:380px;object-fit:cover;border-radius:14px;display:block}
    .head{max-width:700px;margin:0 0 34px}
    .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .zone{padding:30px;border:2px solid #eef2f6;border-radius:12px}
    .zone > p{margin:0 0 18px}
    .towns{display:flex;flex-direction:column;gap:12px}
    .towns > div{display:flex;gap:10px;align-items:center;font-size:16px;color:#1a2633;font-weight:600}
    .dot{color:#f2711c;font-size:12px}
    .ring{color:#5b6b7c;font-size:12px}
    .tint{background:#eef2f6}
    .time{padding:28px;border-radius:12px;background:#ffffff}
    .icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:#14365d;color:#ffffff;font-size:20px;margin:0 0 16px}
    .fine{margin:20px 0 0;font-size:14px}
    .rcard{padding:28px;border:2px solid #eef2f6;border-radius:12px;background:#ffffff}
    .rcard h3{font-size:16px;margin:0 0 10px}
    .stars{color:#f2711c;font-size:20px;letter-spacing:2px;margin:0 0 12px}
    .rcard figure{margin:0}
    .rcard blockquote{margin:0 0 16px;font-size:16px;line-height:1.75;color:#1a2633}
    .rcard figcaption{font-size:14px;color:#5b6b7c}
    .base{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:36px;border-radius:14px;background:#eef2f6}
    .base p + p{margin-top:12px}
    .addr{color:#1a2633;font-weight:600}
    @media(max-width:780px){section{padding:50px 0}.wrap{padding:0 16px}.intro .wrap,.grid2,.grid3,.base{grid-template-columns:1fr}.intro .wrap{gap:28px}h1{font-size:32px}h2{font-size:26px}.intro-img{height:240px}.zone,.base{padding:22px}.base .btn{text-align:center}}
  </style>
</head>
<body>
  <section class="intro">
    <div class="wrap">
      <div>
        <h1>Areas we cover</h1>
        <p>We work across Larkfield County from our base in Larkfield. If your town is not listed, call anyway — we often cover streets just outside these boundaries.</p>
        <a class="btn btn-orange" href="tel:+15550142290">Call (555) 014-2290</a>
      </div>
      <img class="intro-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/homeservices/technician-van.jpg" width="1600" height="900" alt="White service van parked on a quiet residential street with a technician unloading a toolbox">
    </div>
  </section>

  <section id="areas">
    <div class="wrap">
      <div class="head">
        <h2>Towns we serve</h2>
        <p>The core area has no travel charge. Extended-area visits add a flat travel fee, which is included in your quote.</p>
      </div>
      <div class="grid2">
        <div class="zone">
          <h3>Core area</h3>
          <p>Within about 15 miles of our base.</p>
          <div class="towns">
            <div><span class="dot">●</span><span>Larkfield</span></div>
            <div><span class="dot">●</span><span>Westmere</span></div>
            <div><span class="dot">●</span><span>Oakhurst</span></div>
            <div><span class="dot">●</span><span>Brindle Creek</span></div>
            <div><span class="dot">●</span><span>North Hallam</span></div>
            <div><span class="dot">●</span><span>Fenwick Mills</span></div>
          </div>
        </div>
        <div class="zone">
          <h3>Extended area</h3>
          <p>Flat travel fee of [your travel fee] per visit.</p>
          <div class="towns">
            <div><span class="ring">○</span><span>Sorrel Bay</span></div>
            <div><span class="ring">○</span><span>Pinecrest Ridge</span></div>
            <div><span class="ring">○</span><span>Ashby Hollow</span></div>
            <div><span class="ring">○</span><span>Marlow Junction</span></div>
            <div><span class="ring">○</span><span>East Tamsin</span></div>
            <div><span class="ring">○</span><span>Grayford</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="tint">
    <div class="wrap">
      <div class="head">
        <h2>How quickly we can get to you</h2>
        <p>Typical times for the core area on a normal working day. Extended-area visits can take longer.</p>
      </div>
      <div class="grid3">
        <article class="time"><span class="icon">●</span><h3>Emergencies: within 2 hours</h3><p>Active leaks, no water, burning smells, sparking outlets and total power loss.</p></article>
        <article class="time"><span class="icon">↻</span><h3>Urgent repairs: same or next day</h3><p>No hot water, a blocked toilet when it is the only one, or a circuit that will not reset.</p></article>
        <article class="time"><span class="icon">◎</span><h3>Planned work: within a week</h3><p>New fixtures, water heater replacements, panel upgrades and anything you can schedule ahead.</p></article>
      </div>
      <p class="fine">Set these to times you can keep on a busy week. A promise you miss costs more than a modest one you beat.</p>
    </div>
  </section>

  <section id="reviews">
    <div class="wrap">
      <div class="head">
        <h2>Reviews from around the county</h2>
        <p>Sample reviews for layout only — replace them with real ones, naming the town so neighbors recognize the area.</p>
      </div>
      <div class="grid3">
        <article class="rcard">
          <h3>Brindle Creek</h3>
          <div class="stars">★★★★★</div>
          <figure><blockquote>Called at 8am about no hot water and had a new heating element fitted before lunch. They explained the price on the doorstep.</blockquote><figcaption><strong>Tom R.</strong> · water heater repair</figcaption></figure>
        </article>
        <article class="rcard">
          <h3>Sorrel Bay</h3>
          <div class="stars">★★★★★</div>
          <figure><blockquote>We are at the edge of their area and they were upfront about the travel fee. Two outdoor lights and a new outlet on the deck, all tidy.</blockquote><figcaption><strong>Leah K.</strong> · outdoor lighting</figcaption></figure>
        </article>
        <article class="rcard">
          <h3>North Hallam</h3>
          <div class="stars">★★★★☆</div>
          <figure><blockquote>A part had to be ordered so it took two visits, but they told us that on day one and came back exactly when they said.</blockquote><figcaption><strong>Marcus D.</strong> · leak repair</figcaption></figure>
        </article>
      </div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="base">
        <div>
          <h2>Where we are based</h2>
          <p class="addr">Hollis & Reed, 418 Kettle Row, Larkfield</p>
          <p>This is our workshop and parts store, not a walk-in shop. Every job is done at your property, so there is no need to visit — call or send a quote request and we come to you.</p>
        </div>
        <a class="btn btn-blue" href="#quote">Request a quote</a>
      </div>
    </div>
  </section>
</body>
</html>