{#def page #}
<Layout
  title={{ page.title }}
  description={{ page.description }}
>
  <style>
    body {
      background-color: black;
    }
    .sc1 {
      width: 1200px;
      height: 630px;
      margin: 0;
      font-family: SF Pro Display, system-ui, sans-serif;
      color: black;
      background-color: white
    }
    .sc1 > * {
      position: absolute;
      left: 100px;
      width: 900px;
      text-align: center;
      overflow: hidden;
    }
    .sc1__logo {
      top: 100px;
    }
    .sc1__logo img {
      display: inline-block;
      height: 200px;
      width: auto;
      margin: 0 auto;
    }
    .sc1__description {
      top: 350px;
      font-weight: bold;
      font-size: 60px;
      line-height: 1.2;
      letter-spacing: -0.05em;
      text-align: center;
    }
    .sc1__description .g1 {
      background-image: linear-gradient(to bottom right, #fbbf24, #fb923c);
      background-clip: text;
      color: transparent;
    }

    .sc1__description .g2 {
      background-image: linear-gradient(to bottom right, #34d399, #3b82f6);
      background-clip: text;
      color: transparent;
    }
  </style>

  <article class="sc1">
    <div class="sc1__logo">
      <img src="/static/img/jinjax-logo.png" />
    </div>
    <div class="sc1__description">
      Super
      <span class="g1">components powers</span>
      for your
      <span class="g2">Jinja templates</span>
    </div>
  </article>
</Layout>