<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
        .background-radial-gradient {
            background-color: hsl(218, 41%, 15%);
            background-image: radial-gradient(650px circle at 0% 0%,
                hsl(218, 41%, 35%) 15%,
                hsl(218, 41%, 30%) 35%,
                hsl(218, 41%, 20%) 75%,
                hsl(218, 41%, 19%) 80%,
                transparent 100%),
                radial-gradient(1250px circle at 100% 100%,
                hsl(218, 41%, 45%) 15%,
                hsl(218, 41%, 30%) 35%,
                hsl(218, 41%, 20%) 75%,
                hsl(218, 41%, 19%) 80%,
                transparent 100%);
        }

        #radius-shape-1 {
            height: 220px;
            width: 220px;
            top: -60px;
            left: -130px;
            background: radial-gradient(#44006b, #ad1fff);
            overflow: hidden;
        }

        #radius-shape-2 {
            border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
            bottom: -60px;
            right: -110px;
            width: 300px;
            height: 300px;
            background: radial-gradient(#44006b, #ad1fff);
            overflow: hidden;
        }

        .bg-glass {
            background-color: hsla(0, 0%, 100%, 0.9) !important;
            backdrop-filter: saturate(200%) blur(25px);
        }

        .navbar .btn, .navbar .logo {
            margin: 10px;
        }

        .content-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 70px); /* Ajusta la altura para tener en cuenta la altura de la barra de navegación */
        }

        .card {
            max-width: 500px;
            width: 100%;
        }

        .cart-btn {
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        .cart-btn i {
            font-size: 24px; /* Adjust the size as needed */
            color: #333; /* Adjust the color as needed */
        }

    </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-glass fixed-top">
      <div class="container-fluid">
          <a href="/agregar-producto"><button class="btn btn-primary">Vende tu producto</button></a>
          <a href="/carrito-compra"><button class="btn btn-primary">Carrito<i class="fas fa-shopping-cart"></i></button></a>
          <a href="/conocenos"><img src="/uploads/logo.jpeg" alt="Logo" class="logo"></a>
      </div>
  </nav>
  <section class="background-radial-gradient overflow-hidden">
      <div class="container px-4 py-5 px-md-5 text-center text-lg-start my-5">
          <div class="row gx-lg-5 align-items-center mb-5">
              <div class="col-12 content-wrapper">
                  <div class="card bg-glass">
                      <div class="card-body px-4 py-5 px-md-5 text-center">
                          <h1 class="mb-4">Bienvenido</h1>
                          <div class="d-grid gap-2 col-12 mx-auto">
                              <a href="/dibujo-tecnico" class="btn btn-primary">Dibujo Técnico</a>
                              <a href="/programacion" class="btn btn-primary">Programación</a>
                              <a href="/mecatronica" class="btn btn-primary">Mecatrónica</a>
                              <a href="/sistemas-digitales" class="btn btn-primary">Sistemas Digitales</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>