<!--
  DigiCard.pk — Stand Out (Tier 1, Rs 999) — Design 3: "Sidebar Profile" (v2 redesign, 2026-07-11)
  Two-pane profile: sticky deep-green identity sidebar (category hero image on
  top, name, rating, tagline, address, WhatsApp button) beside a scrolling
  content column (descriptive services, category imagery, reviews, location).
  Mobile collapses to a stacked profile with a fixed bottom WhatsApp bar.
  Exceeds the free page with a premium two-column composition. Zero JS.

  ======================= 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-sidebar
    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-sidebar
    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-sidebar
    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-sidebar">
<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%}
  .shell{max-width:1100px;margin:0 auto;padding:0 0 110px}

  /* ============ SIDEBAR / MOBILE PROFILE HEADER ============ */
  .side{background:var(--green-deep);color:#f5f1e6;overflow:hidden;position:relative}
  .side::after{
    content:"";position:absolute;bottom:-90px;right:-70px;width:260px;height:260px;
    border-radius:50%;background:radial-gradient(circle,rgba(217,151,46,.22),transparent 70%);
  }
  .side>*{position:relative}
  .side-photo{
    height:260px;
    background:
      linear-gradient(180deg,rgba(13,31,25,0) 55%,rgba(15,61,48,.95) 100%),
      url('assets/category-defaults/electrician-hero.webp') center/cover no-repeat,
      linear-gradient(135deg,#1d352b,#0f1916);
  }
  .side-body{padding:0 24px 28px;margin-top:-38px}
  .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;
  }
  .side h1{margin:12px 0 6px;font-size:1.75rem;font-weight:800;line-height:1.15;letter-spacing:-.015em}
  .rating{font-size:.9rem;color:#d8d2c2}
  .rating .stars{color:var(--gold);letter-spacing:2px}
  .rating b{color:#fff}
  .tagline{
    margin-top:14px;font-style:italic;color:#e9e3d2;font-size:.98rem;
    border-left:3px solid var(--gold);padding-left:12px;
  }
  .addr{margin-top:14px;font-size:.84rem;color:#b9c4bd}
  .addr::before{content:"📍 "}
  .addr a{color:var(--gold-soft);font-weight:700}
  .side-cta{margin-top:22px;display:none}
  .wa-btn{
    display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--whatsapp);color:#08290f;font-weight:800;font-size:1rem;
    text-decoration:none;padding:14px 18px;border-radius:999px;
    box-shadow:0 10px 24px rgba(34,197,94,.35);
  }
  .wa-sub{text-align:center;font-size:.76rem;color:#8fa398;margin-top:8px}
  .credit{display:block;margin-top:24px;font-size:.72rem;color:#8fa398}
  .credit a{color:var(--gold-soft);text-decoration:none;font-weight:700}

  /* ============ CONTENT COLUMN ============ */
  .main{padding:26px 20px 0}
  section{margin-bottom:32px}
  h2{
    font-size:.84rem;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}

  /* Services — descriptive only, NO prices (Tier 2+ feature) */
  .svc-list{display:grid;gap:10px}
  .svc{
    display:flex;gap:14px;align-items:flex-start;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
    padding:14px 16px;box-shadow:var(--shadow-soft);
  }
  .svc .tick{
    flex:none;width:30px;height:30px;border-radius:9px;background:var(--green-soft);
    color:var(--green);font-weight:900;display:flex;align-items:center;justify-content:center;
  }
  .svc h3{font-size:.96rem;font-weight:800}
  .svc p{font-size:.87rem;color:var(--muted);margin-top:2px}

  /* Category imagery */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .duo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
  .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin-top:10px}
  .rail:empty{display:none}
  .rail img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
  .img-note{font-size:.76rem;color:var(--faint);font-style:italic;margin-top:10px}

  /* Reviews */
  .review{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;
    padding:15px 17px;margin-bottom:12px;box-shadow:var(--shadow-soft);
  }
  .review .stars{color:var(--gold);letter-spacing:2px;font-size:.82rem}
  .review p{font-size:.94rem;font-style:italic;color:#2a332d;margin:5px 0 5px}
  .review b{font-size:.8rem;color:var(--green)}
  .g-note{font-size:.76rem;color:var(--faint)}

  /* Location */
  .location{
    background:var(--green-soft);border:1px solid rgba(24,92,73,.2);
    border-radius:var(--r-lg);padding:18px 20px;
  }
  .location p{font-weight:700;margin-bottom:6px}
  .location a{color:var(--green);font-weight:800;font-size:.9rem}

  /* ============ MOBILE FIXED WHATSAPP BAR ============ */
  .dock{
    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%);
  }
  .dock .wa-btn{max-width:560px;margin:0 auto}

  /* ============ DESKTOP SPLIT ============ */
  @media(min-width:880px){
    .shell{
      display:grid;grid-template-columns:360px minmax(0,1fr);gap:0;
      padding:26px 18px 60px;
    }
    .side{
      position:sticky;top:26px;height:calc(100vh - 52px);overflow-y:auto;
      border-radius:var(--r-lg);
    }
    .side-photo{height:300px}
    .side-cta{display:block}
    .dock{display:none}
    .main{padding:6px 0 0 34px}
    .duo img{aspect-ratio:16/11}
  }
</style>
</head>
<body>

<div class="shell">

  <!-- Identity sidebar / mobile profile header -->
  <aside class="side">
    <div class="side-photo" role="img" aria-label="Electrician — category imagery for illustration"></div>
    <div class="side-body">
      <span class="badge">Electrician</span>
      <h1>Usman Electric Works</h1>
      <div class="rating"><span class="stars" aria-hidden="true">★★★★★</span> <b>4.9</b> · 38 Google reviews</div>
      <p class="tagline">&ldquo;Fast, reliable electrical work across Islamabad — same-day callouts.&rdquo;</p>
      <p class="addr">Islamabad, Pakistan (illustrative example) · <a href="https://maps.google.com/" rel="noopener">Maps</a></p>
      <div class="side-cta">
        <a class="wa-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="wa-sub">Seedha baat karein, jaldi jawab</p>
      </div>
      <small class="credit">Page by <a href="https://digicard.pk" rel="noopener">DigiCard.pk</a> · Islamabad</small>
    </div>
  </aside>

  <!-- Scrolling content column -->
  <main class="main">

    <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-list">
        
        <article class="svc">
          <span class="tick" 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="tick" 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="tick" 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="tick" aria-hidden="true">✓</span>
          <div>
            <h3>Panel & Board Work</h3>
            <p>Distribution board repairs and safety upgrades.</p>
          </div>
        </article>
        
      </div>
    </section>

    <section aria-labelledby="work-h">
      <h2 id="work-h">Kaam ki jhalak</h2>
      <div class="duo">
        <img src="assets/category-defaults/electrician-work.webp" alt="Electrician work detail — category imagery" loading="lazy">
        <img src="assets/category-defaults/electrician-context.webp" alt="Electrician working environment — category imagery" loading="lazy">
      </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>

    <section aria-labelledby="rev-h">
      <h2 id="rev-h">Log kya kehte hain</h2>
      
      <article class="review">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <p>&ldquo;Fair rate and on time. Recommended.&rdquo;</p>
        <b>— Sample Reviewer</b>
      </article>
      

      <article class="review">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <p>&ldquo;Good work, clean finish.&rdquo;</p>
        <b>— Sample Reviewer</b>
      </article>
      
      <p class="g-note">4.9 average across 38 reviews on this business's public Google listing.</p>
    </section>

    <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>

  </main>
</div>

<!-- Mobile fixed WhatsApp bar -->
<div class="dock">
  <a class="wa-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>
</div>

</body>
</html>