Hero simple

<style>
/* Toutes les classes commencent par "hero-simple" : c'est la règle
   à suivre pour CHAQUE nouveau composant, ça évite qu'un style
   d'un composant vienne casser un autre composant sur la même page. */
.hero-simple {
  text-align: center;
  padding: 4rem 1.5rem;
  background: #f4f4f4;
}

.hero-simple__title {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  font-family: sans-serif;
}

.hero-simple__subtitle {
  color: #555;
  margin-bottom: 1.5rem;
  font-family: sans-serif;
}

.hero-simple__btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-family: sans-serif;
}

</style>

<section class="hero-simple">
  <h1 class="hero-simple__title">Votre titre accrocheur ici</h1>
  <p class="hero-simple__subtitle">Une phrase qui explique la promesse en une ligne.</p>
  <a href="#" class="hero-simple__btn">Découvrir</a>
</section>