CTA / Footer Live

sa-bsg-cta-hero v2026-06-10

Reusable bottom-of-page CTA hero originally built for /about-us/bigger-share-guarantee/. Two-column layout: attorney headshot left (clean image, no caption overlay, no button), headline + tagline + bullets right. 2026-06-10: removed image caption overlay and Get Started button per Sam. BEM-scoped class namespace .sa-bsg-cta, no builder/theme dependency.

Source skill: sa-bsg-banner (closest packaged sibling); component files on Sam's Mac at ~/Documents/Projects/components/bigger-share-cta-hero/ · Updated 2026-06-15 13:12:00

Edit

Live preview

Open ↗

When to use

Pages where you want a stronger conversion close than the standard sa-cta-image-banner. Best on pages where the firm's BSG value-prop deserves repeated emphasis - homepage closer, marquee practice-area pages, location pages.

Rules & constraints

1. No CTA button in this element (removed 2026-06-10); image-only media column. Conversion comes from page-level CTAs.
2. No caption/overlay text on the image (removed 2026-06-10).
3. Tagline ALL CAPS via text-transform, clamp(22,2.3vw,32), weight 700, letter-spacing .04em.
4. Bullet capitalization standard: '$0 Out-Of-Pocket Forever' (matches trust strip).
5. Bigger Share Guarantee(R) always carries the registered mark inside the orange accent span so it inherits color.
6. Mobile (<900px): stacks media first then body. Bullets stay left-aligned.
7. No em or en dashes anywhere.
8. Class namespace .sa-bsg-cta - do not collide with .bsg-cta (legacy class on same page).
Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.

Live reference

https://aguiarinjurylawyers.com/about-us/bigger-share-guarantee/

Deployment notes

Deployed via REST POST to /wp-json/wp/v2/pages/9286. Component files on Sam's Mac: bigger-share-cta-hero-preview.html (browser preview), bigger-share-cta-hero.wp-html.html (templated with {{PLACEHOLDERS}}), bigger-share-cta-hero.populated.wp-html.html (drop-in for BSG page), README.md. Placeholders: CAPTION_TEXT, IMAGE_URL, IMAGE_ALT, CTA_LABEL, CTA_URL, HEADLINE_LINE1, HEADLINE_LINE2 (orange), BULLET_1..6, TAGLINE_LINE1, TAGLINE_LINE2. Deployment iterated 10+ times same day - reference the final state on the live page, not the early backup files. | 2026-06-10: caption overlay + Get Started button removed in registry; sitewide deployment planned just above footer / below FAQs on pages and posts (pending Sam approval). Rollback: all_elements_backup_2026-06-10.json in session outputs. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.

HTML

<!-- wp:html -->
<section class="sa-bsg-cta" aria-labelledby="sa-bsg-cta-title">
  <div class="sa-bsg-cta__inner">

    <div class="sa-bsg-cta__media">
      <figure class="sa-bsg-cta__frame">
        <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/01/Sam-Website-Home-1.webp"
             alt="Sam Aguiar, Kentucky personal injury attorney"
             width="520" height="640" loading="lazy">
      </figure>
    </div>

    <div class="sa-bsg-cta__body">
      <h2 id="sa-bsg-cta-title" class="sa-bsg-cta__title">
        Get More. Get It Faster.<br>
        <span class="sa-bsg-cta__accent">Get It With Sam Aguiar.</span>
      </h2>

      <ul class="sa-bsg-cta__list" role="list">
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Bigger Share Guarantee on every case</li>
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>$0 Out-Of-Pocket Forever</li>
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>No fee increase if your case goes to litigation</li>
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Dedicated three-person case team</li>
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>Forbes 2025 Best-In-State recognition</li>
        <li><span style="color:#D97706;font-weight:700;margin-right:8px;">&#10003;</span>1,000+ five-star Google reviews</li>
      </ul>

      <p class="sa-bsg-cta__tagline">
        You focus on getting better.<br>
        We handle everything else.
      </p>
    </div>

  </div>
</section>
<!-- /wp:html -->

CSS

.sa-bsg-cta{
  --bsg-navy:#0B212D; --bsg-navy-deep:#0a1520;
  --bsg-orange:#D97706; --bsg-white:#FFFFFF;
  --bsg-blue:#0B212D; --bsg-blue-hover:#D97706;
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--bsg-white);
  background:linear-gradient(0deg,#000000 0%,var(--bsg-navy) 100%);
  padding:72px 24px; box-sizing:border-box;
}
.sa-bsg-cta *{box-sizing:border-box;}
.sa-bsg-cta__inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(260px,420px) 1fr;
  gap:56px; align-items:center;
}
.sa-bsg-cta__media{display:flex;flex-direction:column;align-items:center;gap:24px;}
.sa-bsg-cta__frame{
  position:relative; margin:0; width:100%; max-width:420px;
  border:3px solid var(--bsg-orange); border-radius:4px; overflow:hidden;
  background:var(--bsg-navy-deep); box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.sa-bsg-cta__frame img{display:block;width:100%;height:auto;object-fit:cover;}
.sa-bsg-cta__body{display:flex;flex-direction:column;gap:24px;}
.sa-bsg-cta__title{
  margin:0; font-family:'Poppins',sans-serif;
  font-size:clamp(28px,3.4vw,46px); font-weight:700; line-height:1.15;
  color:var(--bsg-white); letter-spacing:-.005em;
}
.sa-bsg-cta__accent{color:var(--bsg-orange);}
.sa-bsg-cta__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.sa-bsg-cta__list li{
  position:relative; padding-left:36px;
  font-size:18px; font-weight:600; line-height:1.4; color:var(--bsg-white);
}
.sa-bsg-cta__list li::before{
   position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--bsg-orange); font-weight:700; font-size:18px;
}
.sa-bsg-cta__tagline{
  margin:8px 0 0 0; font-family:'Poppins',sans-serif;
  font-size:clamp(22px,2.3vw,32px); font-weight:700; line-height:1.25;
  letter-spacing:.04em; text-transform:uppercase; color:var(--bsg-white);
}
@media (max-width:900px){
  .sa-bsg-cta{padding:56px 20px;}
  .sa-bsg-cta__inner{grid-template-columns:1fr;gap:36px;}
  .sa-bsg-cta__media{order:1;}
  .sa-bsg-cta__body{order:2;text-align:center;align-items:center;}
  .sa-bsg-cta__list{align-items:flex-start;}
  .sa-bsg-cta__list li{text-align:left;}
  .sa-bsg-cta__title{text-align:center;}
  .sa-bsg-cta__tagline{text-align:center;}
}
@media (max-width:480px){
  .sa-bsg-cta{padding:44px 16px;}
  .sa-bsg-cta__list li{font-size:16px;}
}