<section class="hero-announce-wrap">
  <a href="#" class="announce-bar">
    <span class="announce-badge">New</span>
    <span>Dark mode variants now available for all components</span>
    <span class="announce-arrow">→</span>
  </a>
  <div class="hero-centered">
    <h1 class="hero-title">Interface patterns<br/>worth referencing.</h1>
    <p class="hero-sub">A curated catalog of UI building blocks. Preview first, copy second.</p>
    <div class="hero-actions">
      <a href="#" class="btn btn-primary">Browse catalog →</a>
      <a href="#" class="btn btn-ghost">Learn more</a>
    </div>
  </div>
  <div class="scroll-indicator">
    <div class="scroll-dot"></div>
  </div>
</section>

<style>
.hero-announce-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 2.5rem; padding: clamp(3rem, 8vw, 7rem) 1rem;
}
.announce-bar {
  display: flex; align-items: center; gap: 0.625rem;
  border: 1px solid var(--border); border-radius: 9999px;
  padding: 0.375rem 1rem; font-size: 0.8125rem;
  background: var(--surface); text-decoration: none; color: var(--text);
  transition: border-color 0.2s;
}
.announce-bar:hover { border-color: var(--accent); }
.announce-badge {
  background: var(--accent); color: #fff;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 9999px;
}
.announce-arrow { color: var(--muted); }
.scroll-indicator {
  width: 1.5rem; height: 2.5rem; border: 2px solid var(--border);
  border-radius: 9999px; display: flex; justify-content: center; padding-top: 0.375rem;
}
.scroll-dot {
  width: 4px; height: 8px; background: var(--accent); border-radius: 9999px;
  animation: scrollBounce 1.5s infinite;
}
@keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
</style>