@use 'sprucecss/scss/spruce' as *;

.site-footer-cta {
  padding-block: spacer-clamp('l', 'xl') spacer('l');

  &__band {
    @include set-css-variable((
      --base-color-heading: color('primary-foreground', 'btn'),
      --base-color-text: color('primary-foreground', 'btn'),
    ));
    @include selection(color('secondary-background', 'btn'), color('secondary-foreground', 'btn'));
    align-items: center;
    background-color: color('primary-background', 'btn');
    background-image: radial-gradient(circle at 100% 0%, #{color-alpha('secondary-background', 0.55, 'btn')}, transparent 55%);
    border-radius: radius('lg');
    color: color('primary-foreground', 'btn');
    display: grid;
    gap: spacer('m');
    padding: spacer-clamp('m', 'xl');

    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  &__content {
    @include layout-stack('xs'); // heading, text
  }

  &__heading {
    font-size: responsive-font-size(2.25rem, 30, '3vw + 1rem');
  }

  &__text {
    opacity: 0.9;
  }

  &__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
  }

  // Inverted buttons on the brand background.
  &__primary {
    background-color: color('primary-foreground', 'btn');
    border-color: color('primary-foreground', 'btn');
    color: color('primary-background', 'btn');

    &:hover {
      background-color: color-alpha('primary-foreground', 0.9, 'btn');
      color: color('primary-background', 'btn');
    }
  }

  &__secondary {
    background-color: transparent;
    border-color: color-alpha('primary-foreground', 0.6, 'btn');
    color: color('primary-foreground', 'btn');

    &:hover {
      background-color: color-alpha('primary-foreground', 0.12, 'btn');
      border-color: color('primary-foreground', 'btn');
      color: color('primary-foreground', 'btn');
    }
  }

  &__columns {
    display: grid;
    gap: spacer('l');
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: spacer-clamp('l', 'xl');

    @include breakpoint('md') {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  &__column {
    @include layout-stack('s');
  }

  &__title {
    font-size: font-size('h6');
  }

  &__links {
    list-style: none;
    padding: 0;
    @include layout-stack('xs');

    a {
      color: color('muted');
      text-decoration: none;

      &:hover {
        color: color('primary');
        text-decoration: underline;
      }
    }
  }

  &__bottom {
    align-items: center;
    border-block-start: config('border-width-base', $display) solid color('border');
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s') spacer('m');
    padding-block-start: spacer('l');
  }

  &__logo {
    align-items: center;
    color: color('heading');
    display: inline-flex;
    font-family: config('font-family-heading', $typography);
    font-weight: config('font-weight-heading', $typography);
    gap: spacer('xs');
    text-decoration: none;

    img {
      block-size: 1.75rem;
      inline-size: 1.75rem;
    }
  }

  &__copyright {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    margin: 0;

    a {
      color: inherit;
    }
  }

  &__language {
    align-items: center;
    color: color('muted');
    display: flex;
    gap: spacer('xs');
    margin-inline-start: auto;

    svg {
      block-size: 1.1rem;
      inline-size: 1.1rem;
    }

    .form-control {
      inline-size: auto;
    }
  }
}

<footer class="site-footer-cta">
    <div class="container">
        <section class="site-footer-cta__band" aria-labelledby="footer-cta-title">
            <div class="site-footer-cta__content">
                <h2 class="site-footer-cta__heading" id="footer-cta-title">Ready to build something great?</h2>
                <p class="site-footer-cta__text">Start for free, no credit card needed. Upgrade when your team grows.</p>
            </div>
            <div class="site-footer-cta__buttons">
                <a class="btn btn--lg site-footer-cta__primary" href="#">Start for free</a>
                <a class="btn btn--lg site-footer-cta__secondary" href="#">Talk to sales</a>
            </div>
        </section>
        <nav class="site-footer-cta__columns" aria-label="Footer">
            <div class="site-footer-cta__column">
                <h2 class="site-footer-cta__title" id="footer-cta-column-1">Product</h2>
                <ul class="site-footer-cta__links" aria-labelledby="footer-cta-column-1">
                    <li><a href="#">Overview</a></li>
                    <li><a href="#">Integrations</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Security</a></li>
                </ul>
            </div>
            <div class="site-footer-cta__column">
                <h2 class="site-footer-cta__title" id="footer-cta-column-2">Developers</h2>
                <ul class="site-footer-cta__links" aria-labelledby="footer-cta-column-2">
                    <li><a href="#">Documentation</a></li>
                    <li><a href="#">API reference</a></li>
                    <li><a href="#">Status</a></li>
                    <li><a href="#">Open source</a></li>
                </ul>
            </div>
            <div class="site-footer-cta__column">
                <h2 class="site-footer-cta__title" id="footer-cta-column-3">Company</h2>
                <ul class="site-footer-cta__links" aria-labelledby="footer-cta-column-3">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </div>
            <div class="site-footer-cta__column">
                <h2 class="site-footer-cta__title" id="footer-cta-column-4">Support</h2>
                <ul class="site-footer-cta__links" aria-labelledby="footer-cta-column-4">
                    <li><a href="#">Help center</a></li>
                    <li><a href="#">Community</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Partners</a></li>
                </ul>
            </div>
        </nav>
        <div class="site-footer-cta__bottom">
            <a class="site-footer-cta__logo" href="#">
                <img src="/img/cone-logo.svg" alt="" width="40" height="40">
                <span>Cone</span>
            </a>
            <p class="site-footer-cta__copyright">© 2026 Cone, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
            <form class="site-footer-cta__language" action="#" method="get">
                <label class="sr-only" for="footer-cta-language">Language</label>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg>
                <select class="form-control form-control--sm" id="footer-cta-language" name="lang">
                    <option lang="en" value="en" selected>English</option>
                    <option lang="de" value="de">Deutsch</option>
                    <option lang="fr" value="fr">Français</option>
                    <option lang="hu" value="hu">Magyar</option>
                </select>
            </form>
        </div>
    </div>
</footer>

CTA

Anatomy

.site-footer-cta__band: a section on the brand background with the __heading, a short text and the __buttons (__primary and __secondary, inverted for the colored background).
.site-footer-cta__columns: a nav with four link __columns (two per row on small screens).
.site-footer-cta__bottom: the __logo, the __copyright with the legal links and the __language select.

Accessibility

The band is a section labeled by its heading, so it's a named region.
The band keeps its contrast in every style: the text uses the primary button's foreground color on the primary button's background, and the text selection uses the secondary button colors, so it's visible on the brand background.
Every link list is labeled by its column title; the column titles are h2s.
The language select has a hidden label, the icon is decorative, and every option has its lang attribute, so screen readers pronounce the language names correctly.

Technical Details

The band overrides the --base-color-heading and --base-color-text custom properties, so the heading and the text inside it follow the colored background.
The language form submits with GET (?lang=de); submit it on change with a line of JavaScript, or link to the translated pages instead (see Lang Switcher).