<!--
  DigiCard.pk — Stand Out (Tier 1, Rs 999) — Design 1: "Photo Hero" (v2 redesign, 2026-07-11)
  Full-bleed category hero image, overlapping trust strip, descriptive service
  cards (no prices), category image duo with disclosure, reviews, location,
  sticky WhatsApp bar. Exceeds the free page: bigger photo treatment, stronger
  trust presentation, deeper service storytelling. 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
    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
    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
    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">
<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:26px; --r-md:16px;
    --shadow:0 22px 60px rgba(39,34,24,.14);
    --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%}

  /* ============ FULL-BLEED CATEGORY HERO ============ */
  .hero{
    position:relative;min-height:66vh;min-height:66svh;
    display:flex;align-items:flex-end;
    background:
      linear-gradient(180deg,rgba(13,31,25,.10) 0%,rgba(13,31,25,.28) 42%,rgba(13,31,25,.92) 100%),
      url('assets/category-defaults/electrician-hero.webp') center/cover no-repeat,
      linear-gradient(135deg,#1d352b,#0f1916);
  }
  .hero-inner{width:100%;max-width:840px;margin:0 auto;padding:28px 20px 58px;color:#fffdf8}
  .badge{
    display:inline-block;background:rgba(247,243,234,.94);color:var(--green);
    font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
    padding:6px 15px;border-radius:999px;
  }
  .hero h1{
    margin:14px 0 8px;font-size:clamp(1.9rem,7vw,3rem);line-height:1.1;
    letter-spacing:-.015em;font-weight:800;text-shadow:0 2px 16px rgba(0,0,0,.4);
  }
  .tagline{
    font-size:clamp(1.02rem,3.9vw,1.25rem);color:#fce9c8;font-style:italic;
    max-width:44ch;text-shadow:0 1px 10px rgba(0,0,0,.45);
  }
  .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
  .pill{
    display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
    font-weight:700;font-size:.88rem;backdrop-filter:blur(3px);
  }
  .pill-rate{background:rgba(217,151,46,.96);color:#241a08;font-weight:800}
  .pill-rate small{font-weight:600;opacity:.85}
  .pill-area{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fffdf8}

  /* ============ OVERLAPPING TRUST STRIP ============ */
  .page{max-width:840px;margin:0 auto;padding:0 18px 130px}
  .trust{
    position:relative;z-index:2;margin-top:-34px;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr);
    overflow:hidden;
  }
  .trust .cell{padding:16px 8px;text-align:center;border-left:1px solid var(--line)}
  .trust .cell:first-child{border-left:0}
  .trust .big{font-size:1.25rem;font-weight:800;color:var(--green);line-height:1.2}
  .trust .big .star{color:var(--gold)}
  .trust .lbl{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}

  /* ============ SECTIONS ============ */
  section{margin-top:34px}
  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}

  /* Service example cards — descriptive only, NO prices (Tier 2+ feature) */
  .svc-grid{display:grid;gap:12px}
  .svc{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
    padding:16px 18px;box-shadow:var(--shadow-soft);
    border-top:3px solid var(--gold);
  }
  .svc h3{font-size:1rem;font-weight:800;margin-bottom:4px}
  .svc p{font-size:.9rem;color:var(--muted)}

  /* Category image duo */
  .duo{display:grid;grid-template-columns:1fr;gap:12px}
  .duo figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
  .duo img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .img-note{font-size:.76rem;color:var(--faint);font-style:italic;margin-top:10px}

  /* Extra photos rail (owner-approved additions) — hides when empty */
  .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:12px}
  .rail:empty{display:none}
  .rail img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}

  /* Reviews */
  .reviews{display:grid;gap:12px}
  .review{
    background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);
    border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow-soft);
  }
  .review .stars{color:var(--gold);letter-spacing:2px;font-size:.85rem}
  .review blockquote{margin:6px 0 8px;font-size:.96rem;font-style:italic;color:#2a332d}
  .review figcaption{color:var(--green);font-size:.84rem;font-weight:700}
  .review figcaption::before{content:"— "}
  .g-note{font-size:.78rem;color:var(--faint);margin-top:8px}

  /* Location */
  .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:34px}
  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:700px){
    .hero{min-height:520px}
    .svc-grid{grid-template-columns:1fr 1fr}
    .duo{grid-template-columns:1fr 1fr}
    .duo img{aspect-ratio:4/3}
  }
</style>
</head>
<body>

<header class="hero">
  <div class="hero-inner">
    <span class="badge">Electrician</span>
    <h1>Usman Electric Works</h1>
    <p class="tagline">&ldquo;Fast, reliable electrical work across Islamabad — same-day callouts.&rdquo;</p>
    <div class="hero-meta">
      <span class="pill pill-rate">★ 4.9 <small>(38 Google reviews)</small></span>
      <span class="pill pill-area">📍 Islamabad, Pakistan (illustrative example)</span>
    </div>
  </div>
</header>

<main class="page">

  <!-- Trust strip overlapping the hero -->
  <div class="trust" aria-label="Trust summary">
    <div class="cell"><div class="big"><span class="star">★</span> 4.9</div><div class="lbl">Google rating</div></div>
    <div class="cell"><div class="big">38</div><div class="lbl">Reviews</div></div>
    <div class="cell"><div class="big">💬</div><div class="lbl">WhatsApp pe jawab</div></div>
  </div>

  <!-- Category-specific service examples — descriptive only, 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-grid">
      
      <article class="svc">
        <h3>Wiring & Fitting</h3>
        <p>Internal wiring, switchboard and socket work for homes and shops.</p>
      </article>
      

      <article class="svc">
        <h3>Emergency Callout</h3>
        <p>Fast response for urgent electrical faults, any time of day.</p>
      </article>
      

      <article class="svc">
        <h3>Fan & Light Installation</h3>
        <p>Ceiling fans, light fittings and fixture upgrades.</p>
      </article>
      

      <article class="svc">
        <h3>Panel & Board Work</h3>
        <p>Distribution board repairs and safety upgrades.</p>
      </article>
      
    </div>
  </section>

  <!-- Category imagery -->
  <section aria-labelledby="work-h">
    <h2 id="work-h">Kaam ki jhalak</h2>
    <div class="duo">
      <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>
    </div>
    <div class="rail">
      
      <img src="assets/category-defaults/electrician-hero.webp" alt="Electrician hero example" loading="lazy">
      

      <img src="assets/category-defaults/electrician-work.webp" alt="Electrician work example" loading="lazy">
      

      <img src="assets/category-defaults/electrician-context.webp" alt="Electrician context example" loading="lazy">
      
    </div>
    <p class="img-note">Category imagery for illustration — owner-approved business photos may replace it.</p>
  </section>

  <!-- Reviews -->
  <section aria-labelledby="rev-h">
    <h2 id="rev-h">Log kya kehte hain</h2>
    <div class="reviews">
      
      <figure class="review">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <blockquote>&ldquo;Fair rate and on time. Recommended.&rdquo;</blockquote>
        <figcaption>Sample Reviewer</figcaption>
      </figure>
      

      <figure class="review">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <blockquote>&ldquo;Good work, clean finish.&rdquo;</blockquote>
        <figcaption>Sample Reviewer</figcaption>
      </figure>
      
    </div>
    <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>