<!--
  DigiCard.pk — Stand Out (Tier 1, Rs 999) — Design 2: "Bento" (v2 redesign, 2026-07-11)
  Bento-box tile grid: dominant category hero tile, rating stat tiles,
  descriptive service tiles (no prices), work/context image tiles, review
  tiles, location tile, sticky WhatsApp bar. Exceeds the free page with a
  dense, modern, image-rich composition. 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-bento
    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-bento
    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-bento
    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-bento">
<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:20px;
    --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.5;
    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:880px;margin:0 auto;padding:16px 14px 130px}

  /* ============ BENTO GRID ============ */
  .bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .tile{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    padding:18px;box-shadow:var(--shadow-soft);overflow:hidden;
  }

  /* Hero image tile — the visual anchor */
  .t-hero{
    grid-column:1/-1;position:relative;padding:0;border:none;min-height:340px;
    display:flex;align-items:flex-end;
    background:
      linear-gradient(180deg,rgba(13,31,25,.06) 0%,rgba(13,31,25,.25) 45%,rgba(13,31,25,.9) 100%),
      url('assets/category-defaults/electrician-hero.webp') center/cover no-repeat,
      linear-gradient(135deg,#1d352b,#0f1916);
  }
  .t-hero .in{padding:22px;color:#fffdf8;width:100%}
  .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;
  }
  .t-hero h1{
    margin:10px 0 4px;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800;
    line-height:1.12;letter-spacing:-.015em;text-shadow:0 2px 14px rgba(0,0,0,.4);
  }
  .t-hero .tagline{font-style:italic;color:#fce9c8;font-size:clamp(.95rem,3.4vw,1.1rem);text-shadow:0 1px 8px rgba(0,0,0,.45)}

  /* Stat tiles */
  .t-stat{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:104px}
  .t-stat .big{font-size:1.7rem;font-weight:800;color:var(--green)}
  .t-stat .big .star{color:var(--gold)}
  .t-stat .lbl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .t-stat.gold{background:linear-gradient(140deg,#fdf3df,#fbeccb);border-color:#ecd7a8}

  /* Section label inside tiles */
  .tile h2{
    font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--green);margin-bottom:12px;display:flex;align-items:center;gap:8px;
  }
  .tile h2::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}

  /* Services tile — descriptive only, NO prices (Tier 2+ feature) */
  .t-svc{grid-column:1/-1}
  .svc-row{padding:11px 0;border-bottom:1px dashed var(--line)}
  .svc-row:last-child{border-bottom:0}
  .svc-row h3{font-size:.95rem;font-weight:800}
  .svc-row p{font-size:.86rem;color:var(--muted);margin-top:2px}
  .svc-sub{font-size:.8rem;color:var(--muted);margin-bottom:8px}

  /* Image tiles */
  .t-img{padding:0;border:none;position:relative;min-height:190px}
  .t-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

  /* Extra photos rail (owner-approved additions) — hides when empty */
  .t-rail{grid-column:1/-1;padding:0;border:none;background:none;box-shadow:none}
  .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
  .rail:empty{display:none}
  .rail img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
  .img-note{grid-column:1/-1;font-size:.76rem;color:var(--faint);font-style:italic;padding:0 4px}

  /* Review tiles */
  .t-rev{grid-column:1/-1;background:var(--paper-2)}
  .rev{padding:12px 0;border-bottom:1px dashed var(--line)}
  .rev:last-of-type{border-bottom:0}
  .rev .stars{color:var(--gold);letter-spacing:2px;font-size:.82rem}
  .rev p{font-size:.94rem;font-style:italic;color:#2a332d;margin:4px 0 3px}
  .rev b{font-size:.8rem;color:var(--green)}
  .g-note{font-size:.76rem;color:var(--faint);margin-top:8px}

  /* Location tile */
  .t-loc{grid-column:1/-1;background:var(--green-soft);border-color:rgba(24,92,73,.2)}
  .t-loc p{font-weight:700;margin-bottom:6px}
  .t-loc a{color:var(--green);font-weight:800;font-size:.9rem}

  footer.credit{text-align:center;color:var(--faint);font-size:.78rem;padding-top:30px}
  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){
    .bento{grid-template-columns:repeat(4,1fr)}
    .t-hero{grid-column:1/-1;min-height:420px}
    .t-stat{grid-column:span 1}
    .t-svc{grid-column:span 2;grid-row:span 2}
    .t-img{grid-column:span 2;min-height:230px}
    .t-rev{grid-column:1/-1}
    .t-loc{grid-column:1/-1}
  }
</style>
</head>
<body>

<main class="wrap">
  <div class="bento">

    <!-- Hero tile -->
    <header class="tile t-hero">
      <div class="in">
        <span class="badge">Electrician · Islamabad</span>
        <h1>Usman Electric Works</h1>
        <p class="tagline">&ldquo;Fast, reliable electrical work across Islamabad — same-day callouts.&rdquo;</p>
      </div>
    </header>

    <!-- Trust stat tiles -->
    <div class="tile t-stat gold"><span class="big"><span class="star">★</span> 4.9</span><span class="lbl">Google rating</span></div>
    <div class="tile t-stat"><span class="big">38</span><span class="lbl">Google reviews</span></div>

    <!-- Services tile — category examples, no rates -->
    <section class="tile t-svc" aria-labelledby="svc-h">
      <h2 id="svc-h">Is kaam mein kya hota hai</h2>
      <p class="svc-sub">Typical Electrician jobs — WhatsApp karein aur apna kaam confirm karein.</p>
      
      <div class="svc-row">
        <h3>Wiring & Fitting</h3>
        <p>Internal wiring, switchboard and socket work for homes and shops.</p>
      </div>
      

      <div class="svc-row">
        <h3>Emergency Callout</h3>
        <p>Fast response for urgent electrical faults, any time of day.</p>
      </div>
      

      <div class="svc-row">
        <h3>Fan & Light Installation</h3>
        <p>Ceiling fans, light fittings and fixture upgrades.</p>
      </div>
      

      <div class="svc-row">
        <h3>Panel & Board Work</h3>
        <p>Distribution board repairs and safety upgrades.</p>
      </div>
      
    </section>

    <!-- Category image tiles -->
    <figure class="tile t-img"><img src="assets/category-defaults/electrician-work.webp" alt="Electrician work detail — category imagery" loading="lazy"></figure>
    <figure class="tile t-img"><img src="assets/category-defaults/electrician-context.webp" alt="Electrician working environment — category imagery" loading="lazy"></figure>

    <!-- Extra photos (owner-approved) -->
    <div class="t-rail">
      <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>
    </div>
    <p class="img-note">Category imagery for illustration — owner-approved business photos may replace it.</p>

    <!-- Reviews tile -->
    <section class="tile t-rev" aria-labelledby="rev-h">
      <h2 id="rev-h">Log kya kehte hain</h2>
      
      <div class="rev">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <p>&ldquo;Fair rate and on time. Recommended.&rdquo;</p>
        <b>— Sample Reviewer</b>
      </div>
      

      <div class="rev">
        <span class="stars" aria-hidden="true">★★★★★</span>
        <p>&ldquo;Good work, clean finish.&rdquo;</p>
        <b>— Sample Reviewer</b>
      </div>
      
      <p class="g-note">4.9 average across 38 reviews on this business's public Google listing.</p>
    </section>

    <!-- Location tile -->
    <section class="tile t-loc" aria-labelledby="loc-h">
      <h2 id="loc-h">Location</h2>
      <p>📍 Islamabad, Pakistan (illustrative example)</p>
      <a href="https://maps.google.com/" rel="noopener">Open in Google Maps →</a>
    </section>

  </div>

  <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>