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

.hero-centered-block {
  background-image: radial-gradient(ellipse 60% 50% at 50% 0%, #{color-alpha('primary', 0.12)}, transparent);
  overflow: hidden;
  padding-block: spacer-clamp('l', 'xxl') spacer-clamp('xl', 'xxl');

  &__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: spacer('m');
    text-align: center;
  }

  &__eyebrow {
    align-items: center;
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('pill');
    color: color('heading');
    display: inline-flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');
    margin: 0;
    padding-block: spacer('xxs');
    padding-inline: spacer('xxs') spacer('s');
  }

  &__badge {
    background-color: color('primary');
    border-radius: radius('pill');
    color: color('primary-foreground', 'btn');
    font-weight: 700;
    padding-inline: spacer('xs');
  }

  &__title {
    font-size: responsive-font-size(4.25rem, 45, '5vw + 1rem');
    letter-spacing: -0.03em;
    margin: 0;
    max-inline-size: 18ch;
  }

  &__lead {
    color: color('muted');
    font-size: config('font-size-lead', $typography);
    margin: 0;
    max-inline-size: 40rem;
  }

  &__actions {
    @include layout-cluster('s', center);
  }

  &__proof {
    align-items: center;
    color: color('muted');
    display: flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');

    .avatar {
      box-shadow: 0 0 0 2px color('background');
    }
  }

  &__media {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    box-shadow: shadow('xl');
    inline-size: 100%;
    margin: spacer('l') 0 0;
    max-inline-size: 64rem;
    overflow: hidden;

    img {
      aspect-ratio: 16 / 10;
      inline-size: 100%;
      object-fit: cover;
    }
  }

  &__frame {
    border-block-end: config('border-width-base', $display) solid color('border');
    display: flex;
    gap: spacer('xxs');
    padding: spacer('xs') spacer('s');

    i {
      background-color: color('border-strong');
      block-size: 0.625rem;
      border-radius: 50%;
      inline-size: 0.625rem;
    }
  }
}

<section class="hero-centered-block" aria-labelledby="hero-centered-title">
    <div class="container">
        <div class="hero-centered-block__inner">
            <p class="hero-centered-block__eyebrow"><span class="hero-centered-block__badge">New</span> Design styles are here</p>
            <h1 class="hero-centered-block__title" id="hero-centered-title">The calm way to build beautiful websites</h1>
            <p class="hero-centered-block__lead">Spruce gives your team a solid CSS foundation, ready-made components and blocks, and eight design styles on the same markup.</p>
            <div class="hero-centered-block__actions">
                <a class="btn btn--primary btn--lg" href="#">Get started for free</a>
                <a class="btn btn--outline-primary btn--lg" href="#">See the components</a>
            </div>
            <div class="hero-centered-block__proof">
                <ul class="avatar-group" role="list" aria-hidden="true">
                    <li><span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&q=70&h=96" alt="" width="32" height="32"></span></li>
                    <li><span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&q=70&h=96" alt="" width="32" height="32"></span></li>
                    <li><span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&q=70&h=96" alt="" width="32" height="32"></span></li>
                </ul>
                <span>Loved by 12,000+ developers</span>
            </div>
            <figure class="hero-centered-block__media">
                <span class="hero-centered-block__frame" aria-hidden="true"><i></i><i></i><i></i></span>
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&amp;fit=crop&amp;w=1600&amp;q=70" alt="A product dashboard with charts and tables." width="1600" height="1000">
            </figure>
        </div>
    </div>
</section>