<div class="hero">
  <div class="hero__background">
    <svg
      class="background-svg"
      viewBox="0 0 1200 800"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <!-- Grid pattern -->
        <pattern
          id="gridPattern"
          width="40"
          height="40"
          patternUnits="userSpaceOnUse"
        >
          <path
            d="M 40 0 L 0 0 0 40"
            fill="none"
            stroke="rgba(148, 163, 184, 0.15)"
            stroke-width="1"
          />
        </pattern>
        <!-- Radial fade mask -->
        <radialGradient id="fadeGradient" cx="50%" cy="50%" r="60%">
          <stop offset="0%" style="stop-color: white; stop-opacity: 1" />
          <stop offset="70%" style="stop-color: white; stop-opacity: 0.8" />
          <stop offset="100%" style="stop-color: white; stop-opacity: 0" />
        </radialGradient>
        <mask id="fadeMask">
          <rect width="100%" height="100%" fill="url(#fadeGradient)" />
        </mask>
      </defs>
      <!-- Grid background with radial fade -->
      <rect
        width="100%"
        height="100%"
        fill="url(#gridPattern)"
        mask="url(#fadeMask)"
      />
    </svg>
  </div>

  <section class="hero__content">
    <hgroup class="hero__heading">
      <h1>
        The world's simplest <br />
        landing page<mark>UI blocks</mark>.
      </h1>
      <p>
        Vona helps developers and entrepreneurs validate ideas with
        ready-to-use, dependency-free landing page UI blocks.
      </p>
    </hgroup>

    <menu class="hero__menu">
      <li><a href="/docs/installation" role="button">Get Started</a></li>
      <li><a href="/docs/introduction" class="secondary">Read Docs</a></li>
    </menu>
  </section>
</div>
 

 
<div class="hero-img-right">
  <div class="hero-img-right__container">
    <section class="hero-img-right__content">
      <hgroup class="hero__heading">
        <h1>
          The world's simplest <br />
          landing page<mark>UI blocks</mark>.
        </h1>
        <p>
          Vona helps developers and entrepreneurs validate ideas quickly with a
          ready-to-use, dependency-free UI library for simple landing pages and
          email signups.
        </p>
      </hgroup>

      <form class="hero-img-right__menu">
        <fieldset role="group">
          <input
            id="newsletter-email"
            name="email"
            type="email"
            placeholder="Enter your email"
            autocomplete="email"
            required
          />
          <input type="submit" value="Subscribe" />
        </fieldset>
      </form>
    </section>
  </div>
  <img
    class="hero-img-right__img"
    src="/static/img/image.png"
    alt="https://unsplash.com/photos/photo-of-mountain-alps-a562ZEFKW8I"
  />
</div>