Hero image + texte

<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap');

.bn-hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 2.5rem;

  padding: 3rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-hero-split__media img {
  width: 100%;
  border-radius: 6px;
  display: block;

  --fx-shadow: none;
  --fx-glow: none;
  box-shadow: var(--fx-shadow), var(--fx-glow);
  transition: box-shadow 0.3s ease;
}

.bn-hero-split.fx-shadow .bn-hero-split__media img {
  --fx-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

.bn-hero-split.fx-glow .bn-hero-split__media img {
  --fx-glow: 0 0 90px 6px rgba(230, 228, 221, 0.12);
}

.bn-hero-split__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #979793;
  margin: 0 0 1rem;
}

.bn-hero-split__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #E6E4DD;
  margin: 0 0 1rem;
}

.bn-hero-split__text {
  color: #979793;
  max-width: 340px;
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.bn-hero-split__link {
  color: #E6E4DD;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(230, 228, 221, 0.3);
  padding-bottom: 3px;
}

.bn-hero-split__link:hover {
  border-color: #E6E4DD;
}

@media (max-width: 700px) {
  .bn-hero-split { grid-template-columns: 1fr; }
}

</style>

<section class="bn-hero-split" data-fx-root>
  <div class="bn-hero-split__media">
    <img src="https://placehold.co/700x500/1D2324/1D2324" alt="Paysage brumeux" />
  </div>

  <div class="bn-hero-split__content">
    <p class="bn-hero-split__kicker">Blaig Nova</p>
    <h1 class="bn-hero-split__title">Partagez<br />votre passion</h1>
    <p class="bn-hero-split__text">
      Connectez-vous à des esprits créatifs, partagez vos idées et donnez vie
      à vos projets.
    </p>
    <a href="#" class="bn-hero-split__link">Explorer la plateforme →</a>
  </div>
</section>