<section class="hero">
  <p class="eyebrow">// introducing v2</p>
  <h1>Build faster with
    <em>beautiful components</em>
  </h1>
  <p class="sub">
    Drop-in snippets, no dependencies.
  </p>
  <div class="btn-row">
    <button class="btn-primary">Get Started</button>
    <button class="btn-ghost">View Docs</button>
  </div>
</section>

.hero {
  text-align: center;
  padding: 6rem 2rem;
  background: #0d0f14;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -150px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse,
    rgba(90,240,196,0.07) 0%,
    transparent 70%);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg,
    #5af0c4, #7b8cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<section class="features">
  <h2>Everything you need</h2>
  <div class="feature-grid">
    <div class="feature-item">
      <div class="icon">⚡</div>
      <h3>Fast</h3>
      <p>Zero runtime overhead.</p>
    </div>
    <!-- repeat .feature-item -->
  </div>
</section>

.feature-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.feature-item {
  background: #1c2030;
  border: 1px solid #2a2f42;
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color 0.2s,
    transform 0.2s;
}
.feature-item:hover {
  border-color: rgba(90,240,196,0.3);
  transform: translateY(-2px);
}

<section class="cta-banner">
  <div class="cta-text">
    <h2>Ready to ship something great?</h2>
    <p>Join 12,000+ developers.</p>
  </div>
  <div class="cta-actions">
    <button class="btn-main">Start for Free</button>
    <button class="btn-sec">See Examples</button>
  </div>
</section>

.cta-banner {
  background: linear-gradient(135deg,
    #1c2030, #0d0f14);
  border: 1px solid #2a2f42;
  border-radius: 16px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.btn-main {
  background: linear-gradient(135deg,
    #5af0c4, #7b8cff);
  color: #0d0f14;
  border: none;
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

<section class="stats">
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-num"
           data-count="12400">0</div>
      <div class="stat-label">Developers</div>
    </div>
    <!-- repeat .stat-card -->
  </div>
</section>

.stats-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(140px,1fr));
  gap: 1rem;
}
.stat-card {
  background: #151820;
  border: 1px solid #2a2f42;
  border-radius: 14px;
  padding: 1.5rem 1rem;
  transition: border-color .25s,
    transform .25s;
}
.stat-card:hover {
  border-color: rgba(90,240,196,.4);
  transform: translateY(-3px);
}
.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #5af0c4;
  line-height: 1;
}

const animateCounter = (el) => {
  const target = +el.dataset.count;
  const suffix = el.querySelector('span')
    ?.textContent ?? '';
  const duration = 1800;
  let start = null;
  const ease = t =>
    t < .5 ? 2*t*t : -1+(4-2*t)*t;
  const step = (ts) => {
    if (!start) start = ts;
    const p = ease(
      Math.min((ts-start)/duration,1));
    el.textContent =
      Math.floor(p*target)+suffix;
    if (p < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
};
new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting)
      animateCounter(e.target);
  });
}, { threshold: 0.5 })
.observe(document.querySelector(
  '.stat-num'));

<div class="marquee-wrap">
  <div class="marquee-track">
    <span>Vercel</span>
    <span>Stripe</span>
    <span>Linear</span>
    <!-- ...duplicate all items -->
    <span>Vercel</span>
    <span>Stripe</span>
    <span>Linear</span>
  </div>
</div>

.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: ticker 22s
    linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

<div class="bento-grid">
  <div class="bento-card bento-card--large">
    <!-- spans 2 cols × 2 rows -->
    <h3>Ship faster</h3>
  </div>
  <div class="bento-card">
    <h3>Dark-first</h3>
  </div>
  <div class="bento-card bento-card--wide">
    <!-- spans 2 cols -->
    <h3>Pure CSS</h3>
  </div>
</div>

.bento-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap: 0.75rem;
}
.bento-card--large {
  grid-column: span 2;
  grid-row: span 2;
}
.bento-card--wide {
  grid-column: span 2;
}
.bento-card::before {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle,
    rgba(90,240,196,.15) 0%,
    transparent 70%);
  left: calc(var(--mx) - 120px);
  top:  calc(var(--my) - 120px);
}

const cards =
  document.querySelectorAll('.bento-card');
cards.forEach(card => {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    card.style.setProperty('--mx',
      (e.clientX - r.left) + 'px');
    card.style.setProperty('--my',
      (e.clientY - r.top)  + 'px');
  });
});

<div class="timeline">
  <div class="tl-item">
    <div class="tl-card">
      <div class="tl-date">May 2026</div>
      <h3>v3.0 — New Sections</h3>
      <p>Bento, timeline & more.</p>
    </div>
  </div>
  <!-- repeat .tl-item -->
</div>

.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    #5af0c4, #7b8cff, transparent);
}
.tl-item {
  opacity: 0;
  transform: translateX(-10px);
  animation: tlFade .5s forwards;
}
.tl-item:hover .tl-card {
  border-color:
    rgba(90,240,196,0.3);
  transform: translateX(4px);
}
@keyframes tlFade {
  to { opacity:1;
    transform:translateX(0); }
}