mobohubb

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Landing Mobohubb</title>
  <!-- Incluir Font Awesome para los íconos -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pIVU5Xad5Qhk6SnkG8QA+u1B4Y8xrlR3h+b/jowjiKH3ZXeunStG+59C+3bJvKklU+KjFQh6D0a5Y7hDDen3pg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

  <style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    min-height: 100vh;
  }

  /* Opcional: Elimina los márgenes y padding del contenedor de ReadMe si es posible */
  #content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
   * { margin: 0; padding: 0; box-sizing: border-box; }

  .wrapper {
    width: 100%; 
    flex: 1;
    padding: 40px 20px;
    background: linear-gradient(135deg, #F0F2FF 70%, #FFEDE0 100%);
  }
  
   .container {
      text-align: center;
   }

  .title {
    color: #333;
    font-size: 20px;
    margin-bottom: 16px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 24px;
  }

  .card {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(234, 241, 251, 0.3);
    border-radius: 20px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #333;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  }

  .card i {
    margin-right: 8px;
    font-size: 1.3rem;
  }

  .custom-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #e2e2e2;
    padding: 30px 20px 10px;
    text-align: center;
    color: #333;
  }

  .footer-top {
    margin-bottom: 16px;
  }

  .footer-logo {
    height: 40px;
    object-fit: contain;
  }

  .footer-bottom {
    border-top: 1px solid #e2e2e2; /* Línea separadora */
    padding-top: 16px;        
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666;
  }
    
  .footer-left {
    text-align: left;
    flex: 1;
  }

  .footer-right {
    text-align: right;
    flex: 1;
  }

  .footer-right a {
    color: #7dc242;
    margin-left: 12px;
    font-size: 16px;
    transition: color 0.3s;
  }

  .footer-right a:hover {
    color: #5da82b;
  }

  @media (max-width: 600px) {
    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }

    .footer-left, .footer-right {
      flex: unset;
    }
  }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <h1 class="title">Explore all our features and services:</h1>
      <div class="grid">
        <a href="https://mobohubb.readme.io/docs/onboarding#/" class="card" target="_blank" rel="noopener noreferrer">
          <i class="fas fa-book-open"></i> Portal
        </a>
        <a href="https://mobohubb.readme.io/v1.2/docs/mobohubb-mobile-app#/" class="card" target="_blank" rel="noopener noreferrer">
          <i class="fas fa-mobile-alt"></i> Mobile app
        </a>
        <a href="https://mobohubb.readme.io/v1.3/docs/mobohubb-web-app#/" class="card" target="_blank" rel="noopener noreferrer">
          <i class="fas fa-desktop"></i> Web app
        </a>
        <a href="https://mobohubb.readme.io/v1.4/docs/log-in-kiosk-app#/" class="card" target="_blank" rel="noopener noreferrer">
          <i class="fas fa-tv"></i> Kiosk app
        </a>
      </div>
    </div>
  </div>
  
  <!-- Footer -->
<footer class="custom-footer">
  <div class="footer-top">
    <img src="https://mobohubb.com/wp-content/uploads/2024/11/Principal-logo-black.webp" alt="mobohubb logo" class="footer-logo">
  </div>
  <div class="footer-bottom">
    <div class="footer-left">
      © <strong>mobohubb</strong> 2025. All Rights Reserved.
    </div>
    <div class="footer-right">
      <a href="https://www.linkedin.com/company/mobohubb/posts/?feedView=all" target="_blank"><i class="fab fa-linkedin-in"></i></a>
      <a href="https://www.instagram.com/mobohubb" target="_blank"><i class="fab fa-instagram"></i></a>
      <a href="https://www.youtube.com/@mobohubb" target="_blank"><i class="fas fa-video"></i></a>
    </div>
  </div>
</footer>

</body>
</html>