CTA / Footer Live

sa-get-started-pagebreak v2026-06-15

Full-bleed centered Get Started page-break banner for aguiarinjurylawyers.com. Visible Depth navy-to-black gradient background, centered ALL-CAPS white headline, larger full-white body copy, and a single centered orange-outline GET STARTED button linking to /contact/.

Source skill: sa-get-started-pagebreak · Updated 2026-06-15 13:12:01

Edit

Live preview

Open ↗

When to use

Centered trust/CTA page-break between content sections or before the final CTA banner, when a non-call Get Started button is wanted.

Rules & constraints

Visible Depth gradient background only, never an orange fill. Centered uppercase white title, Poppins 700, 40px desktop / 30px mobile, no eyebrow. Full-opacity white body copy, Poppins 500, 22px desktop / 18px mobile, max-width 760px. Single centered GET STARTED pill: 2px solid #D97706 border, Visible Depth fill, orange text, hover inverts to orange fill + navy text. Non-call button to /contact/ (no tel: href, no phone). Foundry #D97706 only (never legacy #F89C22). Mobile breakpoint 768px. Wrap in wp:html markers in WordPress.
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.
UVP casing standard: use exactly "$0 Out-Of-Pocket Forever" for this benefit label, including title case and hyphens.

Deployment notes

Place as a direct child of .sa-page-wrapper or inside the main content column between sections. Edit headline, body copy, and button href per page; keep structure and CSS intact. Run pre-publish-qa and playwright-visual-qa before shipping. Distinct from sa-cta-image-banner (click-to-call CTA) and you-focus-pagebreak (call button). 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. 2026-06-15: Normalized the Out-Of-Pocket Forever UVP casing standard in the registry.

HTML

<section class="sa-gsb">
  <h2>You Focus On Getting Better</h2>
  <p>We handle everything else. With the Bigger Share Guarantee&reg;, you always walk away with more than the lawyer, and you pay $0 Out-Of-Pocket Forever.</p>
  <a class="sa-gsb-btn" href="/contact/">Get Started</a>
</section>

CSS

.sa-gsb {
  width: 100%;
  background: linear-gradient(0deg, #000000 0%, #0B212D 100%);
  border-radius: 14px;
  padding: 64px 40px;
  text-align: center;
  box-sizing: border-box;
}
.sa-gsb * { font-family: Poppins, sans-serif; box-sizing: border-box; }
.sa-gsb h2 {
  margin: 0 0 20px;
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}
.sa-gsb p {
  margin: 0 auto 36px;
  max-width: 760px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.sa-gsb .sa-gsb-btn {
  display: inline-block;
  padding: 18px 48px;
  border: 2px solid #D97706;
  border-radius: 999px;
  background: linear-gradient(0deg, #000000 0%, #0B212D 100%);
  color: #D97706 !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sa-gsb .sa-gsb-btn:hover {
  background: #D97706;
  color: #0B212D !important;
}
@media (max-width: 768px) {
  .sa-gsb { padding: 48px 24px; }
  .sa-gsb h2 { font-size: 30px; }
  .sa-gsb p { font-size: 18px; }
  .sa-gsb .sa-gsb-btn { padding: 16px 38px; font-size: 16px; }
}