index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monitoreo Piscícola</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- CSS personalizado -->
  <link rel="stylesheet" href="styles.css">
  <!-- Google Fonts: Fuente profesional -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap" rel="stylesheet">

<!-- Favicon -->
<link rel="icon" type="image/png" href="logo.png" />

</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="#">
      <img src="logo.png" alt="AquaMonitor Logo" width="40" height="40" class="d-inline-block align-text-middle me-2">
      <span class="navbar-title">Aqualerta</span>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#caracteristicas">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#tecnologias">Technology</a></li>
        <li class="nav-item"><a class="nav-link" href="#funcionamiento">How it Works</a></li>
        <li class="nav-item"><a class="nav-link" href="#disenado-para">Designed For</a></li>
      </ul>
    </div>
  </div>
</nav>

  <!-- Hero/Home Section -->
  <section id="home" class="hero d-flex align-items-center justify-content-center text-center">
    <div class="container">
      <h1 class="hero-title">Monitoreo Inteligente para 
        <br> piscicultura</h1>
      <p class="hero-description">
        Sistema de monitoreo en tiempo real que combina sensores de agua
        <br>con alertas para prevenir pérdidas y maximizar la
        <br> productividad de sus estanques.
      </p>

    <div class="d-flex justify-content-center gap-3 mt-4">
        <a href="#caracteristicas" class="btn btn-primary px-4 py-2">Conocer el Sistema</a>
        <a href="#demo" class="btn btn-outline-primary px-4 py-2">Ver Demo</a>
    </div>
      <p class="hero-sub mt-5">
        Diseñado para productores piscícolas, Argentina.
      </p>
    </div>
  </section>


<!-- Características Section -->
<section id="caracteristicas" class="caracteristicas-section py-5">
  <div class="container text-center">
    <h2 class="caracteristicas-title mb-5">Características del Sistema</h2>
    <p class="mb-5">
      Una plataforma integral que combina tecnología avanzada con simplicidad de uso
      <br>
      para revolucionar la piscicultura moderna.
    </p>

    <div class="caracteristicas-grid">
      <!-- Tarjeta 1 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="monitoreo.png" alt="Monitoreo en Tiempo Real" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Monitoreo en Tiempo Real</h3>
          <p>Supervisión continua de pH, oxígeno disuelto y temperatura con sensores de precisión.</p>
        </div>
      </div>

      <!-- Tarjeta 2 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="timbre.png" alt="Alertas Inteligentes" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Alertas Inteligentes</h3>
          <p>Notificaciones automáticas por Telegram cuando los parámetros salen de rangos seguros.</p>
        </div>
      </div>

      <!-- Tarjeta 3 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="estadisticas.png" alt="Análisis Histórico" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Análisis Histórico</h3>
          <p>Tendencias de datos que permiten mejorar la planificación y toma de decisiones.</p>
        </div>
      </div>

      <!-- Tarjeta 4 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="perdida.png" alt="Prevención de Pérdidas" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Prevención de Pérdidas</h3>
          <p>Alertas tempranas evitan mortalidad masiva y pérdidas productivas significativas.</p>
        </div>
      </div>

      <!-- Tarjeta 5 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="nubes.png" alt="Integración Meteorológica" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Integración Meteorológica</h3>
          <p>Combina datos locales con información climática para mayor precisión predictiva.</p>
        </div>
      </div>

      <!-- Tarjeta 6 -->
      <div class="caracteristica-card d-flex align-items-start p-4">
        <div class="feature-icon me-3">
          <img src="usuarios.png" alt="Fácil de Usar" width="40" height="40">
        </div>
        <div class="feature-text">
          <h3>Fácil de Usar</h3>
          <p>Interfaz intuitiva diseñada para productores con diferentes niveles de experiencia.</p>
        </div>
      </div>

    </div>
  </div>
</section>

      
    </div>
  </div>
</section>



<!-- Tecnología de Sensores Avanzada -->
<section id="tecnologias" class="py-5 bg-light text-dark">
  <div class="container">
    <div class="row align-items-center">
      
      <!-- Columna izquierda: imagen -->
      <div class="col-md-6 text-center mb-4 mb-md-0">
        <img src="app1.jpg" alt="Sensores Piscícolas" class="img-fluid rounded shadow">
      </div>
      
      <!-- Columna derecha: texto -->
      <div class="col-md-6">
        <h2 class="fw-bold mb-3">Tecnología de Sensores Avanzada</h2>
        <p>
          Nuestros sensores de última generación proporcionan mediciones precisas y confiables 
          las 24 horas del día, garantizando el control total sobre las condiciones de sus estanques.
          <br><br>
          Con la integración de nuestra <strong>API meteorológica</strong>, el usuario podrá anticiparse
          a las variaciones del clima, planificar mejor la alimentación y manejo de sus peces, 
          y reaccionar rápidamente ante cambios ambientales, todo desde la misma plataforma.
        </p>
        <ul class="sensor-list">
          <li> 🔹Medición precisa de <strong>pH</strong> con calibración automática</li>
          <li> 🔹Sensores de <strong>oxígeno disuelto</strong> de grado industrial</li>
          <li> 🔹Termómetros digitales con precisión de <strong>±0.1°C</strong></li>
          <li> 🔹<strong>Predicción climática</strong> </li>
        </ul>
      </div>
      
    </div>
  </div>
</section>



<!-- Cómo Funciona el Sistema -->
<section id="funcionamiento" class="py-5 bg-light text-dark">
  <div class="container text-center">
    <!-- Título -->
    <h2 class="fw-bold mb-3">Cómo Funciona el Sistema</h2>
    <p class="mb-5">
      Un proceso simple y automatizado que transforma la manera de monitorear y gestionar sus estanques piscícolas.
    </p>

    <!-- Tarjetas -->
    <div class="row g-4">
      
      <!-- Tarjeta 1 -->
      <div class="col-md-3">
        <div class="func-card h-100 p-4">
          <h3 class="number">01</h3>
          <h5 class="fw-bold">Sensores en Tiempo Real</h5>
          <p>
            Los sensores instalados en sus estanques monitorean continuamente pH, 
            oxígeno disuelto y temperatura del agua.
          </p>
        </div>
      </div>

      <!-- Tarjeta 2 -->
      <div class="col-md-3">
        <div class="func-card h-100 p-4">
          <h3 class="number">02</h3>
          <h5 class="fw-bold">Integración de Datos</h5>
          <p>
            La aplicación Java combina datos de sensores con información meteorológica para análisis completo.
          </p>
        </div>
      </div>

      <!-- Tarjeta 3 -->
      <div class="col-md-3">
        <div class="func-card h-100 p-4">
          <h3 class="number">03</h3>
          <h5 class="fw-bold">Alertas Inteligentes</h5>
          <p>
            Reciba notificaciones automáticas por Telegram cuando los parámetros excedan los rangos seguros.
          </p>
        </div>
      </div>

      <!-- Tarjeta 4 -->
      <div class="col-md-3">
        <div class="func-card h-100 p-4">
          <h3 class="number">04</h3>
          <h5 class="fw-bold">Análisis y Decisiones</h5>
          <p>
            Utilice datos históricos y tendencias para optimizar alimentación, 
            manejo y planificación estacional.
          </p>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- Beneficios Tangibles -->
<section id="beneficios-tangibles" class="py-5 bg-light text-dark">
  <div class="container">

    <!-- Box degradado -->
    <div class="why-system p-5 rounded text-white text-center">
      <h3 class="fw-bold mb-4">¿Por qué elegir nuestro sistema?</h3>
      <div class="row text-start justify-content-center">
        <div class="col-md-4 mb-3">
          <h5>24/7</h5>
          <p>Monitoreo continuo sin interrupciones</p>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Seguimiento</h5>
          <p>Monitoreo constante de parámetros críticos</p>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Estadísticas</h5>
          <p>Análisis de datos históricos para toma de decisiones</p>
        </div>
      </div>
    </div>

  </div>
</section>


<!-- Diseñado para Productores -->
<section id="disenado-para" class="py-5">
  <div class="container text-center">
    <h2 class="fw-bold mb-4">Diseñado para Productores</h2>
    <p class="mb-5">
      Nuestra solución está específicamente adaptada a las necesidades de productores piscícolas de la región.
    </p>

    <!-- Primera fila de 3 cards -->
    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="producer-card p-4">
          <h4>Pequeños Productores</h4>
          <p>Ideal para emprendedores que inician en piscicultura y necesitan herramientas accesibles para profesionalizar su operación.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="producer-card p-4">
          <h4>Medianos o Grandes Productores</h4>
          <p>Perfecta para operaciones establecidas que buscan tecnificar sus procesos y aumentar la eficiencia productiva.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="producer-card p-4">
          <h4>Región del NEA</h4>
          <p>Desarrollado considerando las condiciones climáticas y características específicas de la region.</p>
        </div>
      </div>
    </div>

    <!-- Card más grande con info adicional -->
    <div class="row g-4 justify-content-center">
      <div class="col-md-10">
        <div class="producer-card-large p-4 d-flex flex-wrap justify-content-between">
          <div class="mb-3 mb-md-0 flex-fill me-md-3">
            <h5>Adaptado al Clima Subtropical</h5>
            <ul>
              <li>Rangos de temperatura optimizados para la región</li>
              <li>Integración con datos meteorológicos locales</li>
              <li>Alertas adaptadas a variaciones estacionales</li>
            </ul>
          </div>
          <div class="flex-fill ms-md-3">
            <h5>Interfaz Intuitiva</h5>
            <ul>
              <li>No requiere conocimientos técnicos avanzados</li>
              <li>Instalación y configuración simplificada</li>
              <li>Soporte en español con terminología local</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</section>





  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Footer -->
<footer class="footer py-4">
  <div class="container d-flex flex-wrap justify-content-between align-items-center">
    
    <!-- Izquierda -->
    <div class="footer-left mb-3 mb-md-0">
      <h3 class="footer-logo">Aqualerta</h3>
      <p class="footer-desc">Sistema de Monitoreo Piscícola Inteligente</p>
    </div>

    <!-- Derecha -->
    <div class="footer-right text-md-end">
      <p class="footer-copy">© 2024 Aqualerta. Todos los derechos reservados.</p>
      <p class="footer-location">Desarrollado para productores, Argentina</p>
    </div>

  </div>
</footer>


</body>
</html>