{% extends "base.html" %} {% load static %} {% block content %}

<style>
  .parallax-container {
    height: 100vh;
  }
  .parallaxblur {
    background-color: #4784a791;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .landing_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -79%);
    color: black;
  }
  .landing_title_text {
    font-size: 80px;
    text-align: center;
    margin-bottom: 0px;
    /*text-shadow: 2px 2px #000000b8;*/
  }
  .landing_subtitle {
    margin-top: 0px;
    font-size: 30px;
    text-align: center;
    /*text-shadow: 2px 2px #000000b8;*/
  }

  .landing_go_bottom {
    bottom: 0;
    font-size: 40px;
    color: black;
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -20%);
  }
  .landing_login_bottom {
    position: absolute;

    /*left: 0;*/
    right: 30px;
    bottom: 30px;
  }
  .landing1 {
    background-color: #f7f7f7;
  }
  .cv {
    position: relative;
    /*margin-top: 6%;*/
    text-align: justify;
    font-size: 18px;
  }
  .cv1 {
    position: relative;
    /*margin-top: 2%;*/
    text-align: justify;
    font-size: 18px;
  }
  .benefits {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  @media screen and (max-width: 600px) {
    .landing_title_text {
      font-size: 50px;
    }
    .landing_subtitle {
      font-size: 15px;
    }
    .landing_go_bottom {
      transform: translate(-50%, -80px);
    }
  }
  @media screen and (max-width: 998px) {
    .benefits {
      width: 100% !important;
    }
  }
  .header {
    text-shadow: 2px 2px #bfbfbfb8;
  }
  .section-tools div.text {
    font-size: 16px;
  }
  .tool {
    animation: fadeInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1s; /* don't forget to set a duration! */
  }
</style>

<div id="particles-js"></div>
<!-- stats - count particles -->

<div class="parallax-container">
  <div class="">
    <!-- <img src="/media/images/ornacol-camino1.jpg" width="10px"> -->
    <div class="">
      <div class="landing_title" style="text-align: center">
        <p class="landing_title_text animated fadeInDown">
          <!-- <i class="material-icons" style="font-size: 80px">trending_up</i> -->
          ORNALISIS <br />+ BI-ORNALISIS
        </p>
        <p class="landing_subtitle black-text animated fadeInUp">
          Sistema de análisis de datos de ORNACOL
        </p>
        <a
          href="login"
          class="waves-effect waves-light btn black white-text animated fadeInUp"
          ><i class="material-icons left">forward</i>Iniciar sesión</a
        >
      </div>
    </div>
  </div>

  <i class="material-icons landing_go_bottom">keyboard_arrow_down</i>
</div>
<div class="section white section-tools">
  <div class="row" style="margin-top: 3%">
    <div class="col s12 m6 l3 tool">
      <center>
        <i class="large material-icons grey-text text-darken-2">cloud_circle</i>
        <div class="text">Administra información en la nube</div>
      </center>
    </div>
    <div class="col s12 m6 l3 tool">
      <center>
        <i class="large material-icons grey-text text-darken-2">insert_chart</i>
        <div class="text">Herramientas dinámicas</div>
      </center>
    </div>
    <div class="col s12 m6 l3 tool">
      <center>
        <i class="large material-icons grey-text text-darken-2">people</i>
        <div class="text">Gestiona tus socios</div>
      </center>
    </div>
    <div class="col s12 m6 l3 tool">
      <center>
        <i class="large material-icons grey-text text-darken-2">grid_on</i>
        <div class="text">Reportes .PDF y .XLSX</div>
      </center>
    </div>
  </div>
  <br /><br />
  <!-- <center><button class="btn orange darken-4 btn-large ">Ver más</button></center> -->
</div>
<div class="section landing1">
  <div class="container-fluid">
    <div class="row" style="padding: 60px">
      <div class="col s12 m12 l6 cv" style="margin-bottom: 25px; padding: 20px">
        <center><h2 class="header">ORNALISIS</h2></center>
        ORNACOL análisis de datos (ORNALISIS) es un sistema web de apoyo a la
        toma de decisiones diseñado a la medida. ORNALISIS Utiliza herramientas
        con tablas y gráficas dinámicas para el análisis de información de la
        comercializacion de plantas ornamentales, reduciendo el tiempo de
        consulta y de procesamiento de los datos.
        <br /><br />
        ORNALISIS utiliza las mejores librerias para generación de reportes,
        puedes generar y exportar un reporte completo de ventas en un periodo
        específico en cuestion de segundos.
        <br /><br />
        <center>
          <img
            class="responsive-img"
            src="/media/images/ornalisis_inside.png"
            width="600px"
          />
        </center>
      </div>
      <div class="col s12 l6 m12 cv" style="padding: 20px">
        <center><h2 class="header">BI-ORNALISIS</h2></center>
        BI-ORNALISIS es un módulo Web de ORNACOL en conjunto con ORNALISIS; el
        cual, extiende las funcionalidades de éste último sistema. BI-ORNALISIS
        implementa la Inteligencia de Negocios (BI) por medio del algoritmo
        Apriori para la generación de reglas de asociación, además de responder
        a diferentes preguntas objetivo mediante la Minería de Datos. Para la
        visualización de las diferentesrespuestas se despliegan tablas y
        gráficas para el análisis de la información acerca de la
        comercialización de plantas ornamentales.
        <br /><br />
        <center>
          <img
            class="responsive-img"
            src="/media/images/biornalisis.jpeg"
            width="600px"
          />
        </center>
        <br /><br />
        BI-ORNALISIS utiliza librerías específicas para el área del Data Science
        implementando diferentes técnicas, procesos y herramientas para la
        manipulación de los datos de la empresa. Por otra parte, dicho módulo
        Web es considerado un proyecto con impacto de innovación en los procesos
        y/o modelo de negocios en el sector hortícola ornamental.
      </div>
    </div>
  </div>
</div>

<div class="section landing1">
  <div class="row">
    <div class="col s6 l6 cv1 benefits" style="padding: 0 20px">
      <center><h2 class="header">Beneficios ORNALISIS</h2></center>
      <ul>
        <li>
          <i class="material-icons">check</i> LLeva el control de la
          comercialización de plantas ornamentales.
        </li>
        <li>
          <i class="material-icons">check</i> Administra y supervisa la
          información de los pedidos.
        </li>
        <li>
          <i class="material-icons">check</i> Genera Reportes periodicos en PDF
          y EXCEL.
        </li>
        <li>
          <i class="material-icons">check</i> Analiza los datos a travez de
          tablas y gráficas dinámicas.
        </li>
        <li>
          <i class="material-icons">check</i> Construye tu propia herramienta de
          análisis.
        </li>
        <li>
          <i class="material-icons">check</i> Mejora la eficiencia del análisis
          de los datos.
        </li>
      </ul>
    </div>

    <div class="col s12 m12 l6 cv1 benefits" style="padding: 0 20px">
      <center><h2 class="header">Beneficios BI-ORNALISIS</h2></center>
      <ul>
        <li>
          <i class="material-icons">check</i> Comprender las necesidades de los
          clientes.
        </li>
        <li>
          <i class="material-icons">check</i> Rediseñar el catálogo de ventas
          online / en empresa física y/o viveros.
        </li>
        <li>
          <i class="material-icons">check</i> Realizar promociones y/u ofertas.
        </li>
        <li>
          <i class="material-icons">check</i> Recomendar plantas ornamentales.
        </li>
        <li>
          <i class="material-icons">check</i> Mejorar e implementar nuevas
          estrategias de ventas.
        </li>
        <li>
          <i class="material-icons">check</i> Incrementar la rentabilidad y
          alcance en clientes.
        </li>
      </ul>
    </div>
  </div>
</div>

{% endblock content%} {% block js %}

<script type="text/javascript">
  $(document).ready(function () {
    $(".materialboxed").materialbox();
  });

  $(document).ready(function () {
    $(".parallax").parallax();
  });
</script>

<script type="text/javascript">
  particlesJS.load(
    "particles-js",
    '{% static "particles/particlesjs-config.json" %}',
    function () {
      console.log("callback - particles.js config loaded");
    }
  );
</script>

{% endblock js %}