---
import { Image } from 'astro:assets';

import CalendarImage from '../../assets/img/calendar.png';
---

<div class="container">
  <div class="position-relative" style="z-index: 4">
    <div class="d-flex gap-2">
      <div class="tag tag-sm bg-blue-500 text-uppercase mb-4">Carrera</div>
      <div class="tag tag-sm bg-green-500 text-uppercase mb-4">Nueva</div>
    </div>
    <div class="mb-3">
      <h1 class="banner__title text-white">
        <strong class="fw-black"
          ><span class="trademark trademark--top-9">AWS</span> DEVOPS
        </strong><br />
        <span class="fw-normal">ENGINEER</span>
      </h1>
    </div>

    <div class="d-flex gap-3 align-items-center">
      <figure>
        <Image src={CalendarImage} alt="Calendar" />
      </figure>
      <p class="text-white mb-0">Duración: 6 meses</p>
    </div>

    <ul class="banner-list-links content-space-t-1">
      <li>
        <a
          class="btn btn-primary btn-transition px-5"
          href="#program"
          style="border-radius: 0.9rem; font-weight: bold"
          >Programa
        </a>
      </li>
      <li>
        <a
          class="btn btn-primary btn-transition px-5"
          href="#price"
          style="border-radius: 0.9rem; font-weight: bold"
          >Precio
        </a>
      </li>
      <li>
        <a
          class="btn btn-primary btn-transition px-5"
          href="#buy"
          style="border-radius: 0.9rem; font-weight: bold"
          >Comprar
        </a>
      </li>
    </ul>
  </div>
</div>
