<!--
  DigiCard.pk — Stand Out (Tier 1, Rs 999) — Design 4: "Photo Strip" (v2 redesign, 2026-07-11)
  Story-style layout: deep-green masthead with identity + trust chips, a
  full-width scroll-snap category photo strip (hero/work/context lead the
  rail), numbered descriptive service rows (no prices), pull-quote reviews,
  location plaque, sticky WhatsApp bar. Exceeds the free page with a cinematic
  photo rail and stronger rhythm. Pure CSS scroll — zero JS, no external assets.

  ======================= SHARED TOKEN CONTRACT — v2 (2026-07-11) =======================
  Applies identically to all 12 DigiCard tier templates (tier1-*, tier2-*, tier3-*).

  DATA SOURCES (generator wiring):
  1. Category image defaults — assets/category-defaults/manifest.json
     - electrician selects the image set. Allowed keys:
       electrician | plumbing | ac | auto | electronics | motor-pump
     - Files per key: {key}-hero.webp, {key}-work.webp, {key}-context.webp
     - assets/category-defaults/electrician-hero.webp    -> {key}-hero.webp
       assets/category-defaults/electrician-work.webp    -> {key}-work.webp
       assets/category-defaults/electrician-context.webp -> {key}-context.webp
     -  defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Electrician hero example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - electrician selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Usman Electric Works — Electrician Example | DigiCard Illustrative DigiCard example page for a electrician business — not a real business. https://digicard.pk/example-stand-out-strip
    Usman Electric Works Electrician electrician Fast, reliable electrical work across Islamabad — same-day callouts.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: U
    Tier 3 only: electrician plus head/SEO extras Usman Electric Works — DigiCard Example See what a tier1 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ... 
 defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Electrician work example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - electrician selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Usman Electric Works — Electrician Example | DigiCard Illustrative DigiCard example page for a electrician business — not a real business. https://digicard.pk/example-stand-out-strip
    Usman Electric Works Electrician electrician Fast, reliable electrical work across Islamabad — same-day callouts.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: U
    Tier 3 only: electrician plus head/SEO extras Usman Electric Works — DigiCard Example See what a tier1 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ... 
 defaults to [hero, work, context] from the manifest. Owner-supplied,
       explicitly approved photos may replace/extend (max 6). NEVER auto-import Google
       Places photos. Electrician context example must describe the trade generically and must NOT
       imply the image shows this provider.
     - Tier 1 note: tier1-* designs already render the manifest set via the fixed
       HERO/WORK/CONTEXT slots, so in Tier 1 the {{#PHOTOS}} loop carries owner-approved
       EXTRA photos only and may render zero items (generator must emit an empty,
       whitespace-free block so :empty CSS collapses the rail).
     - Every rendered page must keep its visible "category imagery for illustration"
       disclosure while default images are in use.
  2. Service pricing — service_catalogue.json  (TIER 2 / TIER 3 ONLY)
     - electrician selects the price list. Per entry:
       "service" -> {{SERVICE_NAME}},  "label" -> {{SERVICE_PRICE}} (verbatim, e.g. "From Rs 600")
     - Curated non-zero Helpr.pk Islamabad examples only. NEVER invent a rate; never
       render Rs 0 / missing entries. Category "auto" has no authoritative Helpr
       catalogue yet — its only entry is "Price on inspection"; always show exactly
       that, never a number.
     - Helpr-derived values are example/starting prices, not provider-confirmed rates.
       Owner overrides live in business data, never edited into template HTML.
  3. Tier 1 service examples are editorial category content: {{SERVICE_NAME}} +
     {{SERVICE_DESC}} describe plausible work for the category, with NO prices.

  SCALAR TOKENS (all tiers unless noted):
    Usman Electric Works — Electrician Example | DigiCard Illustrative DigiCard example page for a electrician business — not a real business. https://digicard.pk/example-stand-out-strip
    Usman Electric Works Electrician electrician Fast, reliable electrical work across Islamabad — same-day callouts.
    4.9 38 Islamabad, Pakistan (illustrative example) https://maps.google.com/
    923395260500 (digits only, e.g. 923001234567)
    0339 5260500 (human-readable, e.g. 0300 1234567)
    https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. (https://wa.me/923395260500)
    Tier 2/3 only: https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested. — wa.me link with URL-encoded Request-a-Quote text
    Tier 2 "dashboard" only: U
    Tier 3 only: electrician plus head/SEO extras Usman Electric Works — DigiCard Example See what a tier1 DigiCard page looks like.
       summary  

  LOOP BLOCKS (generator repeats inner markup per item, strips {{#X}}/{{/X}} markers):
    {{#PHOTOS}} ...       1-6  -> {{PHOTO_URL}} {{PHOTO_ALT}}
     ... 
 ... 
 ... 
 ...   Tier 1: 2-6 -> {{SERVICE_NAME}} {{SERVICE_DESC}} (no prices)
                                     Tier 2/3: 1-6 -> {{SERVICE_NAME}} {{SERVICE_PRICE}}
     ... 
 ...     1-3  -> {{REVIEW_TEXT}} {{REVIEW_AUTHOR}}

  CONDITIONAL / SOCIAL BLOCKS (Tier 2/3 only — strip whole block when link absent):
    Tier 2 (icon style):  {{FACEBOOK_URL}}
                          {{INSTAGRAM_URL}}
                          {{TIKTOK_URL}}
    Tier 3 (pill style):  -> {{SOCIAL_URL}} {{SOCIAL_LABEL}}

  TIER BOUNDARIES (non-negotiable):
    - Tier 1 "Stand Out" (Rs 999): NO service pricing, NO social links, NO Request-a-Quote.
    - Paid-tier content must never leak into the free/unclaimed PREVIEW flow.
  =======================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23185c49'/%3E%3Ccircle cx='46' cy='18' r='6' fill='%23d9972e'/%3E%3Ctext x='31' y='46' font-family='Georgia,serif' font-size='38' font-weight='700' fill='%23ffffff' text-anchor='middle'%3ED%3C/text%3E%3C/svg%3E" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Usman Electric Works — Electrician Example | DigiCard</title>
<meta name="description" content="Illustrative DigiCard example page for a electrician business — not a real business.">
<link rel="canonical" href="https://digicard.pk/example-stand-out-strip">
<style>
  :root{
    --bg:#f7f3ea; --paper:#fffdf8; --paper-2:#fef8ed; --ink:#151b18;
    --muted:#59645f; --faint:#8a948f; --line:#e6dccb;
    --green:#185c49; --green-deep:#0f3d30; --gold:#d9972e; --gold-soft:#f3d9ad;
    --green-soft:#e7f2ed; --whatsapp:#22c55e;
    --r-lg:24px; --r-md:16px;
    --shadow-soft:0 10px 30px rgba(39,34,24,.09);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--bg);color:var(--ink);line-height:1.55;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  img{display:block;max-width:100%}
  .wrap{max-width:760px;margin:0 auto;padding:0 18px}

  /* ============ MASTHEAD ============ */
  .mast{background:var(--green-deep);color:#f5f1e6;padding:30px 0 96px;position:relative;overflow:hidden}
  .mast::before{
    content:"";position:absolute;top:-70px;right:-60px;width:260px;height:260px;
    border-radius:50%;background:radial-gradient(circle,rgba(217,151,46,.26),transparent 70%);
  }
  .mast .wrap{position:relative}
  .badge{
    display:inline-block;background:rgba(247,243,234,.94);color:var(--green);
    font-weight:800;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
    padding:5px 13px;border-radius:999px;
  }
  .mast h1{
    margin:14px 0 8px;font-size:clamp(1.9rem,7.5vw,3rem);font-weight:800;
    line-height:1.08;letter-spacing:-.02em;max-width:16ch;
  }
  .tagline{
    font-style:italic;color:#fce9c8;font-size:clamp(1rem,3.8vw,1.18rem);max-width:44ch;
    border-left:3px solid var(--gold);padding-left:13px;margin-top:12px;
  }
  .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
  .chip{
    display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
    font-size:.84rem;font-weight:700;
  }
  .chip-rate{background:var(--gold);color:#241a08;font-weight:800}
  .chip-rate small{font-weight:600;opacity:.85}
  .chip-area{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#f5f1e6}

  /* ============ PHOTO STRIP (overlaps masthead) ============ */
  .stripzone{margin-top:-64px;position:relative}
  .strip{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 18px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    max-width:1000px;margin:0 auto;
  }
  .strip::-webkit-scrollbar{display:none}
  .strip figure{flex:none;width:min(78%,360px);scroll-snap-align:center;position:relative}
  .strip img{
    width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);
    border:4px solid var(--paper);box-shadow:0 14px 34px rgba(21,27,24,.2);
  }
  .img-note{max-width:760px;margin:8px auto 0;padding:0 20px;font-size:.76rem;color:var(--faint);font-style:italic}

  /* ============ SECTIONS ============ */
  .page{padding:26px 0 130px}
  section{margin-top:32px}
  h2{
    font-size:.85rem;text-transform:uppercase;letter-spacing:.13em;color:var(--green);
    font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:10px;
  }
  h2::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}
  .sec-sub{font-size:.86rem;color:var(--muted);margin-bottom:14px}

  /* Numbered service rows — descriptive only, NO prices (Tier 2+ feature) */
  .svc-sheet{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
    overflow:hidden;box-shadow:var(--shadow-soft);
  }
  .svc{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-top:1px dashed var(--line)}
  .svc:first-child{border-top:0}
  .svc .no{
    flex:none;width:30px;height:30px;border-radius:9px;background:var(--green-soft);
    color:var(--green);font-size:.8rem;font-weight:800;
    display:flex;align-items:center;justify-content:center;margin-top:2px;
  }
  .svc h3{font-size:.97rem;font-weight:800}
  .svc p{font-size:.87rem;color:var(--muted);margin-top:2px}

  /* Reviews — pull-quote style */
  .review{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
    padding:18px 20px 15px;margin-bottom:13px;position:relative;box-shadow:var(--shadow-soft);
  }
  .review::before{
    content:"\201C";position:absolute;top:-2px;left:14px;font-size:3rem;line-height:1;
    color:var(--gold);font-family:Georgia,serif;
  }
  .review p{font-size:.96rem;font-style:italic;color:#2a332d;padding-left:28px}
  .review footer{margin-top:8px;padding-left:28px;font-size:.8rem;font-weight:700;color:var(--green)}
  .review footer::before{content:"— "}
  .g-note{font-size:.76rem;color:var(--faint)}

  /* Location plaque */
  .location{
    background:var(--green-soft);border:1px solid rgba(24,92,73,.2);
    border-radius:var(--r-lg);padding:20px 22px;
  }
  .location p{font-weight:700;margin-bottom:8px}
  .location a{color:var(--green);font-weight:800;font-size:.92rem}

  footer.credit{text-align:center;color:var(--faint);font-size:.78rem;padding-top:32px}
  footer.credit a{color:var(--green);font-weight:700}

  /* ============ STICKY WHATSAPP BAR ============ */
  .cta-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(247,243,234,0),rgba(247,243,234,.97) 38%);
  }
  .cta-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;max-width:560px;margin:0 auto;
    background:var(--whatsapp);color:#08290f;font-weight:800;font-size:1.05rem;
    text-decoration:none;padding:15px 18px;border-radius:999px;
    box-shadow:0 10px 26px rgba(34,197,94,.35);
  }
  .cta-sub{text-align:center;font-size:.78rem;color:var(--muted);margin-top:6px}

  @media(min-width:720px){
    .strip figure{width:340px}
  }
</style>
</head>
<body>

<!-- Masthead -->
<header class="mast">
  <div class="wrap">
    <span class="badge">Electrician · Islamabad</span>
    <h1>Usman Electric Works</h1>
    <p class="tagline">Fast, reliable electrical work across Islamabad — same-day callouts.</p>
    <div class="chips">
      <span class="chip chip-rate">★ 4.9 <small>(38 Google reviews)</small></span>
      <span class="chip chip-area">📍 Islamabad, Pakistan (illustrative example)</span>
    </div>
  </div>
</header>

<!-- Scroll-snap category photo strip overlapping the masthead -->
<div class="stripzone">
  <div class="strip">
    <figure><img src="assets/category-defaults/electrician-hero.webp" alt="Electrician at work — category imagery" loading="lazy"></figure>
    <figure><img src="assets/category-defaults/electrician-work.webp" alt="Electrician work detail — category imagery" loading="lazy"></figure>
    <figure><img src="assets/category-defaults/electrician-context.webp" alt="Electrician working environment — category imagery" loading="lazy"></figure>
    
    <figure><img src="assets/category-defaults/electrician-hero.webp" alt="Electrician hero example" loading="lazy"></figure>
    

    <figure><img src="assets/category-defaults/electrician-work.webp" alt="Electrician work example" loading="lazy"></figure>
    

    <figure><img src="assets/category-defaults/electrician-context.webp" alt="Electrician context example" loading="lazy"></figure>
    
  </div>
  <p class="img-note">Category imagery for illustration — owner-approved business photos may replace it.</p>
</div>

<main class="page wrap">

  <!-- Service examples — no rates -->
  <section aria-labelledby="svc-h">
    <h2 id="svc-h">Is kaam mein kya hota hai</h2>
    <p class="sec-sub">Typical Electrician jobs in Islamabad — WhatsApp karein aur apna kaam confirm karein.</p>
    <div class="svc-sheet">
      
      <article class="svc">
        <span class="no" aria-hidden="true">▸</span>
        <div>
          <h3>Wiring & Fitting</h3>
          <p>Internal wiring, switchboard and socket work for homes and shops.</p>
        </div>
      </article>
      

      <article class="svc">
        <span class="no" aria-hidden="true">▸</span>
        <div>
          <h3>Emergency Callout</h3>
          <p>Fast response for urgent electrical faults, any time of day.</p>
        </div>
      </article>
      

      <article class="svc">
        <span class="no" aria-hidden="true">▸</span>
        <div>
          <h3>Fan & Light Installation</h3>
          <p>Ceiling fans, light fittings and fixture upgrades.</p>
        </div>
      </article>
      

      <article class="svc">
        <span class="no" aria-hidden="true">▸</span>
        <div>
          <h3>Panel & Board Work</h3>
          <p>Distribution board repairs and safety upgrades.</p>
        </div>
      </article>
      
    </div>
  </section>

  <!-- Reviews -->
  <section aria-labelledby="rev-h">
    <h2 id="rev-h">Log kya kehte hain</h2>
    
    <article class="review">
      <p>Fair rate and on time. Recommended.</p>
      <footer>Sample Reviewer</footer>
    </article>
    

    <article class="review">
      <p>Good work, clean finish.</p>
      <footer>Sample Reviewer</footer>
    </article>
    
    <p class="g-note">4.9 average across 38 reviews on this business's public Google listing.</p>
  </section>

  <!-- Location -->
  <section aria-labelledby="loc-h">
    <h2 id="loc-h">Location</h2>
    <div class="location">
      <p>📍 Islamabad, Pakistan (illustrative example)</p>
      <a href="https://maps.google.com/" rel="noopener">Open in Google Maps →</a>
    </div>
  </section>

  <footer class="credit">
    Page by <a href="https://digicard.pk" rel="noopener">DigiCard.pk</a> · Islamabad
  </footer>
</main>

<div class="cta-bar">
  <a class="cta-btn" href="https://wa.me/923395260500?text=DIGICARD%20UPGRADE%0AI%20saw%20the%20tier1%20example%20%28Usman%20Electric%20Works%29%20%E2%80%94%20I%27m%20interested.">💬 WhatsApp — 0339 5260500</a>
  <p class="cta-sub">Seedha baat karein, jaldi jawab</p>
</div>

</body>
</html>