Landing · Sections

Hero

A marketing hero for the AhaSlides landing sites: eyebrow, headline, lead, two calls to action and a live-poll product mock. Framework-free and bound entirely to the shared --aha-* tokens.

◆ generated from landing/hero.json — do not edit by hand

Preview

Interactive presentations

Turn every presentation into a conversation

Add live polls, quizzes and word clouds to your slides. Your audience joins from their phones and answers in real time — so you can see what the room thinks the moment they do.

Get started — it’s free Book a demo

3 million presenters at schools, universities and teams worldwide trust AhaSlides.

Which session do you want next?

Live

Live Q&A64%

Team quiz28%

Word cloud8%

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

hero.html

<style>
.aha-hero{
  background:var(--aha-white);
  color:var(--aha-text-default);
  font-family:var(--aha-font-product);
  padding:clamp(var(--aha-space-40),6vw,var(--aha-space-96)) var(--aha-space-24);
}
.aha-hero *{box-sizing:border-box}
.aha-hero__wrap{
  max-width:72rem;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(var(--aha-space-32),5vw,var(--aha-space-64));
  align-items:center;
}
.aha-hero__eyebrow{
  margin:0 0 var(--aha-space-16);
  font-size:var(--aha-size-sm);
  font-weight:var(--aha-weight-semibold);
  letter-spacing:var(--aha-letter-spacing-subheadings);
  text-transform:uppercase;
  color:var(--aha-color-primary);
}
.aha-hero__title{
  margin:0 0 var(--aha-space-20);
  font-family:var(--aha-font-display);
  font-size:clamp(var(--aha-size-h2),4.6vw,var(--aha-size-display1));
  line-height:var(--aha-line-height-tight);
  font-weight:var(--aha-weight-semibold);
  letter-spacing:var(--aha-letter-spacing-headlines);
  color:var(--aha-text-default);
}
.aha-hero__lead{
  margin:0 0 var(--aha-space-28);
  max-width:44ch;
  font-size:clamp(var(--aha-size-l),1.4vw,var(--aha-size-xl));
  line-height:var(--aha-line-height-body);
  color:var(--aha-text-secondary);
}
.aha-hero__actions{display:flex;flex-wrap:wrap;gap:var(--aha-space-12)}
.aha-hero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--aha-space-8);
  min-height:var(--aha-control-height-button-xl);
  padding:0 var(--aha-space-28);
  border:1px solid transparent;
  border-radius:var(--aha-radius-pill);
  font-family:inherit;
  font-size:var(--aha-size-l);
  font-weight:var(--aha-weight-semibold);
  text-decoration:none;
  cursor:pointer;
  background:var(--aha-button-primary-bg);
  color:var(--aha-button-primary-text);
  transition:background-color var(--aha-motion-mid) var(--aha-ease-in-out),transform var(--aha-motion-fast) var(--aha-ease-out);
}
.aha-hero__cta:hover{background:var(--aha-button-primary-bg-hover)}
.aha-hero__cta:active{background:var(--aha-button-primary-bg-press);transform:translateY(1px)}
.aha-hero__cta:focus-visible{outline:var(--aha-space-2) solid var(--aha-focus);outline-offset:var(--aha-space-2)}
.aha-hero__cta--ghost{
  background:var(--aha-button-default-bg);
  color:var(--aha-button-default-text);
  border-color:var(--aha-button-default-border);
}
.aha-hero__cta--ghost:hover{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-hover)}
.aha-hero__cta--ghost:active{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-press)}
.aha-hero__trust{
  margin:var(--aha-space-24) 0 0;
  display:flex;
  align-items:center;
  gap:var(--aha-space-8);
  font-size:var(--aha-size-sm);
  line-height:var(--aha-line-height-body);
  color:var(--aha-text-tertiary);
}
.aha-hero__trust b{color:var(--aha-text-secondary);font-weight:var(--aha-weight-semibold)}
.aha-hero__media{
  background:var(--aha-bg-container);
  border:1px solid var(--aha-split);
  border-radius:var(--aha-radius-marketing);
  padding:var(--aha-space-24);
  box-shadow:0 var(--aha-space-12) var(--aha-space-40) var(--aha-ink-a10);
}
.aha-hero__poll-head{display:flex;align-items:center;justify-content:space-between;gap:var(--aha-space-12);margin:0 0 var(--aha-space-20)}
.aha-hero__poll-q{margin:0;font-size:var(--aha-size-h6);font-weight:var(--aha-weight-semibold);color:var(--aha-text-default)}
.aha-hero__live{
  display:inline-flex;
  align-items:center;
  gap:var(--aha-space-6);
  flex:none;
  font-size:var(--aha-size-sm);
  font-weight:var(--aha-weight-semibold);
  color:var(--aha-color-primary);
}
.aha-hero__live::before{
  content:"";
  width:var(--aha-space-8);
  height:var(--aha-space-8);
  border-radius:var(--aha-radius-pill);
  background:var(--aha-color-primary);
}
.aha-hero__bar{margin:0 0 var(--aha-space-16)}
.aha-hero__bar:last-child{margin-bottom:0}
.aha-hero__bar-top{display:flex;justify-content:space-between;gap:var(--aha-space-12);margin:0 0 var(--aha-space-6);font-size:var(--aha-size-default);color:var(--aha-text-secondary)}
.aha-hero__bar-top b{color:var(--aha-text-default);font-weight:var(--aha-weight-semibold)}
.aha-hero__track{height:var(--aha-space-12);border-radius:var(--aha-radius-pill);background:var(--aha-purple-10);overflow:hidden}
.aha-hero__fill{height:100%;border-radius:var(--aha-radius-pill);background:var(--aha-color-primary)}
.aha-hero__fill--soft{background:var(--aha-purple-40)}
</style>
<section class="aha-hero">
  <div class="aha-hero__wrap">
    <div class="aha-hero__copy">
      <p class="aha-hero__eyebrow">Interactive presentations</p>
      <h1 class="aha-hero__title">Turn every presentation into a conversation</h1>
      <p class="aha-hero__lead">Add live polls, quizzes and word clouds to your slides. Your audience joins from their phones and answers in real time &mdash; so you can see what the room thinks the moment they do.</p>
      <div class="aha-hero__actions">
        <a class="aha-hero__cta" href="#get-started">Get started &mdash; it&rsquo;s free</a>
        <a class="aha-hero__cta aha-hero__cta--ghost" href="#book-a-demo">Book a demo</a>
      </div>
      <p class="aha-hero__trust"><b>3 million presenters</b> at schools, universities and teams worldwide trust AhaSlides.</p>
    </div>
    <div class="aha-hero__media" role="img" aria-label="A live AhaSlides poll showing audience responses updating in real time">
      <div class="aha-hero__poll-head">
        <p class="aha-hero__poll-q">Which session do you want next?</p>
        <span class="aha-hero__live">Live</span>
      </div>
      <div class="aha-hero__bar">
        <div class="aha-hero__bar-top"><span>Live Q&amp;A</span><b>64%</b></div>
        <div class="aha-hero__track"><div class="aha-hero__fill" style="width:64%"></div></div>
      </div>
      <div class="aha-hero__bar">
        <div class="aha-hero__bar-top"><span>Team quiz</span><b>28%</b></div>
        <div class="aha-hero__track"><div class="aha-hero__fill aha-hero__fill--soft" style="width:28%"></div></div>
      </div>
      <div class="aha-hero__bar">
        <div class="aha-hero__bar-top"><span>Word cloud</span><b>8%</b></div>
        <div class="aha-hero__track"><div class="aha-hero__fill aha-hero__fill--soft" style="width:8%"></div></div>
      </div>
    </div>
  </div>
</section>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head

<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">