Bootstrap Hero Section with Gradient Background — Free Snippet

<section class="bshero-section">
  <div class="container py-5">
    <div class="row align-items-center gy-4">
      <div class="col-lg-6 text-center text-lg-start">
        <span class="badge rounded-pill bshero-badge mb-3">New · v2.4 launched</span>
        <h1 class="bshero-title">Ship your product page in an afternoon.</h1>
        <p class="bshero-sub">A Bootstrap 5 hero section with a real, working email capture form — type an address, submit, and watch it get validated and added to the list below, no page reload.</p>
        <form id="bsheroForm" class="row g-2 justify-content-center justify-content-lg-start bshero-form" novalidate>
          <div class="col-sm-7">
            <input type="email" class="form-control form-control-lg" id="bsheroEmail" placeholder="[email protected]" required>
            <div class="invalid-feedback" id="bsheroError">Enter a valid email address.</div>
          </div>
          <div class="col-sm-auto">
            <button class="btn btn-light btn-lg fw-bold text-nowrap" type="submit">Get early access</button>
          </div>
        </form>
        <div class="bshero-signups" id="bsheroSignups">
          <span class="text-white-50 small">No signups yet — be the first.</span>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="bshero-card">
          <div class="bshero-card-dots"><span></span><span></span><span></span></div>
          <div class="bshero-card-body">
            <div class="bshero-stat">
              <div class="bshero-stat-label">Weekly signups</div>
              <div class="bshero-stat-value" id="bsheroCount">0</div>
            </div>
            <div class="bshero-bars">
              <div class="bshero-bar" style="--h:40%"></div>
              <div class="bshero-bar" style="--h:65%"></div>
              <div class="bshero-bar" style="--h:52%"></div>
              <div class="bshero-bar" style="--h:80%"></div>
              <div class="bshero-bar bshero-bar-active" style="--h:95%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

body { margin: 0; }

.bshero-section {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  color: #fff;
}

.bshero-badge {
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
}

.bshero-title {
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.bshero-sub {
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 480px;
}

.bshero-form .form-control {
  border: none;
}
.bshero-form .form-control.is-invalid { box-shadow: 0 0 0 3px rgba(220,38,38,.35); }

.bshero-signups {
  margin-top: 14px;
  min-height: 20px;
  font-size: 13px;
}
.bshero-signups .badge { margin-right: 6px; }

.bshero-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.bshero-card-dots {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bshero-card-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.bshero-card-body { padding: 26px; }

.bshero-stat-label { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.bshero-stat-value { font-size: 32px; font-weight: 800; margin-bottom: 20px; transition: transform .15s ease; }
.bshero-stat-value.bshero-pop { transform: scale(1.12); }

.bshero-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100px;
}
.bshero-bar {
  flex: 1;
  height: var(--h);
  background: rgba(255,255,255,.28);
  border-radius: 5px 5px 0 0;
  transition: height .3s ease, background .3s ease;
}
.bshero-bar-active { background: #fff; }

const form = document.getElementById('bsheroForm');
const emailInput = document.getElementById('bsheroEmail');
const signupsEl = document.getElementById('bsheroSignups');
const countEl = document.getElementById('bsheroCount');
const lastBar = document.querySelector('.bshero-bar-active');

let count = 0;
const added = [];

form.addEventListener('submit', e => {
  e.preventDefault();
  const value = emailInput.value.trim();

  if (!emailInput.checkValidity()) {
    emailInput.classList.add('is-invalid');
    return;
  }
  emailInput.classList.remove('is-invalid');

  count++;
  added.unshift(value);
  countEl.textContent = count;
  countEl.classList.add('bshero-pop');
  setTimeout(() => countEl.classList.remove('bshero-pop'), 200);

  // Grow the live bar a little with each signup, capped so it never
  // overflows the chart — a small visual payoff tied to a real action.
  const currentH = parseFloat(lastBar.style.getPropertyValue('--h'));
  lastBar.style.setProperty('--h', Math.min(100, currentH + 3) + '%');

  signupsEl.innerHTML = added.slice(0, 4).map(e =>
    '<span class="badge bg-light text-dark">' + e + '</span>'
  ).join('');

  form.reset();
});

emailInput.addEventListener('input', () => emailInput.classList.remove('is-invalid'));