<?php
require_once('shared/conexionBD.php');
mysqli_query($conexion,"SET NAMES utf8");

$queryBanner = "SELECT * FROM ITT_ASW_BANN ORDER BY ORDE ASC";
$ress = mysqli_query($conexion, $queryBanner ) or die ( "ERROR #001 AL OBTENER LOS BANNERS");
$banners = array();
while ($datos = mysqli_fetch_assoc( $ress) )
{
	$banners[] = $datos;
}

?>

<!DOCTYPE html>
<html xml:lang="es" lang="es">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->

    <!--Producción-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125019062-2"></script>

    <!--Producción-->
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-125019062-2');
    </script>

    <!-- End Global site tag (gtag.js) - Google Analytics -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>Soler & Palau | Ventilation Group | Extractores de aire, cortinas de aire, ventiladores industriales, tipos
        de difusores</title>
    <meta name="description"
        content="S&amp;P líder mundial en sistemas de ventilación para entornos domésticos, comerciales e industriales." />
    <meta name="keywords" content="E-commerce" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <link rel="icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico"
        type="image/x-icon" />
    <link rel="shortcut icon" href="https://statics.solerpalau.com/skin/frontend/solerpalau/default/favicon.ico"
        type="image/x-icon" />

    <meta name="msapplication-TileColor" content="#000">
    <meta name="msapplication-TileImage"
        content="media/home/frontend/solerpalau/default/images/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#000">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script type="text/javascript">
    var $j = jQuery.noConflict();
    </script>
    <script type="text/javascript" src="js/events.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style-css01.css" media="all" />
    <link rel="alternate" hreflang="es" href="index.php" />
    
    <style>
            
            .title{
            font-size: 2.5vw;
            line-height: 3.8rem;
        }
        .carousel {
            position: relative;
        }
        .carousel.pointer-event {
            touch-action: pan-y;
        }
        .carousel-inner {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .carousel-inner::after {
            display: block;
            clear: both;
            content: "";
        }
        .carousel-item {
            position: relative;
            display: none;
            float: left;
            width: 100%;
            margin-right: -100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: transform 0.6s ease-in-out;
        }
        @media (prefers-reduced-motion: reduce) {
            .carousel-item {
                transition: none;
            }
        }
        .carousel-item-next,
        .carousel-item-prev,
        .carousel-item.active {
            display: block;
        }
        .active.carousel-item-end,
        .carousel-item-next:not(.carousel-item-start) {
            transform: translateX(100%);
        }
        .active.carousel-item-start,
        .carousel-item-prev:not(.carousel-item-end) {
            transform: translateX(-100%);
        }
        .carousel-fade .carousel-item {
            opacity: 0;
            transition-property: opacity;
            transform: none;
        }
        .carousel-fade .carousel-item-next.carousel-item-start,
        .carousel-fade .carousel-item-prev.carousel-item-end,
        .carousel-fade .carousel-item.active {
            z-index: 1;
            opacity: 1;
        }
        .carousel-fade .active.carousel-item-end,
        .carousel-fade .active.carousel-item-start {
            z-index: 0;
            opacity: 0;
            transition: opacity 0s 0.6s;
        }
        @media (prefers-reduced-motion: reduce) {
            .carousel-fade .active.carousel-item-end,
            .carousel-fade .active.carousel-item-start {
                transition: none;
            }
        }
        .carousel-control-next,
        .carousel-control-prev {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 15%;
            padding: 0;
            color: #fff;
            text-align: center;
            background: 0 0;
            border: 0;
            opacity: 0.5;
            transition: opacity 0.15s ease;
        }
        .carousel-control-prev:hover{
            background: linear-gradient(90deg, rgb(0 0 0 / 50%), rgb(249 249 249 / 0%));
        }
        .carousel-control-next:hover{
            background: linear-gradient(-90deg, rgb(0 0 0 / 50%), rgb(249 249 249 / 0%));
        }
        
        @media (prefers-reduced-motion: reduce) {
            .carousel-control-next,
            .carousel-control-prev {
                transition: none;
            }
        }
        .carousel-control-next:focus,
        .carousel-control-next:hover,
        .carousel-control-prev:focus,
        .carousel-control-prev:hover {
            color: #fff;
            text-decoration: none;
            outline: 0;
            opacity: 0.9;
        }
        .carousel-control-prev {
            left: 0;
        }
        .carousel-control-next {
            right: 0;
        }
        .carousel-control-next-icon,
        .carousel-control-prev-icon {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100% 100%;
        }
        .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        }
        .carousel-control-next-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .carousel-indicators {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 2;
            display: flex;
            justify-content: center;
            padding: 0;
            margin-right: 15%;
            margin-bottom: 1rem;
            margin-left: 15%;
            list-style: none;
        }
        .carousel-indicators [data-bs-target] {
            box-sizing: content-box;
            flex: 0 1 auto;
            width: 20px;
            height: 20px;
            padding: 0;
            margin-right: 3px;
            margin-left: 3px;
            text-indent: -999px;
            cursor: pointer;
            background-color: #fff;
            background-clip: padding-box;
            border: 0;
            /* border-top: 10px solid transparent;
            border-bottom: 10px solid transparent; */
            opacity: 0.5;
            transition: opacity 0.6s ease;
            border-radius: 50px;
        }

        .carousel-indicators [data-bs-target]:hover {
            background-color: #8b8585;
        }
        @media (prefers-reduced-motion: reduce) {
            .carousel-indicators [data-bs-target] {
                transition: none;
            }
        }
        .carousel-indicators .active {
            opacity: 1;
        }
        .carousel-caption {
            position: absolute;
            right: 15%;
            bottom: 15vw;
            left: 15%;
            padding-top: 1.25rem;
            padding-bottom: 1.25rem;
            color: #fff;
            /*text-align: center;*/
        }
        .carousel-dark .carousel-control-next-icon,
        .carousel-dark .carousel-control-prev-icon {
            filter: invert(1) grayscale(100);
        }
        .carousel-dark .carousel-indicators [data-bs-target] {
            background-color: #000;
        }
        .carousel-dark .carousel-caption {
            color: #000;
        }
        .d-block {
            display: block !important;
        }
        .w-100 {
            width: 100% !important;
        }
        [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
            cursor: pointer;
        }

        .carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
            color: #fff;
            text-decoration: none;
            outline: 0;
            opacity: 10;
        }
    </style>
</head>

<body class=" cms-index-index cms-home customer-logged-out">
    <!-- Aqui va el header -->
    <?php require 'header.php' ?>

    <script type="text/javascript">
    //<![CDATA[
    if (typeof HIB.menu == 'object' && typeof HIB.menu.init == 'function') {
        HIB.menu.init();
    }
    //]]>
    </script>

    <div class="main-container col1-layout">
        <div class="main">
            <div class="col-main">
                <main>
                    <div id="overlaySearch" class="overlay">
                        <!-- Overlay content -->
                        <div id="searchResults" class="overlay-content grid">
                        </div>
                    </div>
                    <div class="std">
                        <!-- Main slider -->
                        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" style="z-index: 1;">
                            <div class="carousel-indicators">
                                <?php $c=0; foreach ($banners as $dat): ?>   
                                    <button
                                        type="button"
                                        data-bs-target="#carouselExampleIndicators"
                                        data-bs-slide-to="<?php echo $c; ?>"
                                        class="<?php echo $c == 0 ? 'active' : '';?>"
                                        aria-current="true"
                                        aria-label="Slide <?php echo $c + 1; ?>"
                                    ></button>
                                <?php $c++; endforeach; ?>
                            </div>

                            <div class="carousel-inner">
                                <?php $c=0; foreach ($banners as $dat): ?>   
                                    <div class="carousel-item <?php echo $c == 0 ? 'active' : '';?>" data-bs-interval="5000">
                                        <?php if (!empty($dat['BREF'])) { ?>
                                            <a onclick="window.open('<?php echo $dat['BREF']; ?>', '_blank')" target="_blank" style="cursor: pointer;">
                                        <?php } else { ?>
                                            <a>
                                                <?php }?>
                                                <img src="<?php echo $dat['URLB']?>" class="d-block w-100" alt="<?php echo $dat['TITU']?>" />
                                                <div class="carousel-caption d-none d-md-block">
                                                    <?php
                                                        if (empty($dat['TITU']) || $dat['TITU'] == ".") {
                                                            echo "<p class='title'></p>";
                                                        } else {
                                                            echo "<h1 class='title'>".$dat['TITU']."</h1>";
                                                        }
                                                    ?>
                                                    <?php
                                                        if (empty($dat['SUBT'])) {
                                                        } else {
                                                            echo "<p class='subtitle'>".$dat['SUBT']."</p>";
                                                        }
                                                    ?>
                                                </div>
                                            </a>
                                    </div>
                                <?php $c++; endforeach; ?>
                            </div>
                            <button
                                class="carousel-control-prev"
                                type="button"
                                data-bs-target="#carouselExampleIndicators"
                                data-bs-slide="prev"
                            >
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <!-- <span class="visually-hidden">Previous</span> -->
                            </button>
                            <button
                                class="carousel-control-next"
                                type="button"
                                data-bs-target="#carouselExampleIndicators"
                                data-bs-slide="next"
                            >
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <!-- <span class="visually-hidden">Next</span> -->
                            </button>
                        </div>
                        <script src="js/slider.js"></script>

                        <div class="module-1">
                            <!-- Categorias grid -->
                            <p>
                                <div class="section-grid inicio">
                                    <div class="bar-title">
                                        <h2 class="h2">Explora nuestros sistemas de ventilación</h2>
                                        <p class="container">
                                            Características completas, documentación técnica y toda la información que necesitas.
                                        </p>
                                    </div>
                                    <div class="section-grid-content container grid grid-pad">
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="linea.php?linea=Hábitat">
                                                    <img alt="División Hábitat" src="media/home/categories_home/Global/habitat.jpg"/>
                                                    <div class="container-title-widget">
                                                        <h3>División Hábitat</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="linea.php?linea=Comercial">
                                                    <img alt="División Comercial" src="media/home/categories_home/Global/comercial.jpg"/>
                                                    <div class="container-title-widget">
                                                        <h3>División Comercial</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="linea.php?linea=Industrial">
                                                    <img alt="División Industrial" src="media/home/categories_home/Global/industrial.jpg" />
                                                    <div class="container-title-widget">
                                                        <h3>División Industrial</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="linea.php?linea=Atenuadores%20Acústicos">
                                                    <img alt="División Atenuadores" src="media/home/categories_home/Global/atenuadores.jpg" />
                                                    <div class="container-title-widget">
                                                        <h3>División Atenuadores</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="linea.php?linea=OEM">
                                                    <img alt="División OEM" src="media/home/categories_home/Global/oem.jpg" />
                                                    <div class="container-title-widget">
                                                        <h3>División OEM</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="recuperacion-energia.php">
                                                    <img alt="Unidades de Ventilación Para Recuperación de Energía" src="media/home/categories_home/Global/unidades.jpg" />
                                                    <div class="container-title-widget">
                                                        <h3>Unidades de Ventilación Para Recuperación de Energía</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <!-- <div class="section-grid-section hcol-6-12">
                                            <div class='wrapper'>
                                                <a href="apl.php">
                                                    <img alt="División APL" src="media/home/categories_home/Global/apl.jpg" />
                                                    <div class="container-title-widget">
                                                        <h3>División APL</h3>
                                                    </div>
                                                </a>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </p>
                        </div>

                        <!-- sección de recursos  -->
                        <p>
                        <div class="section-brief dark">
                            <div class="bar-title">
                                <h2 class="h2">Recursos para profesionales</h2>
                                <p class="container">Queremos hacer tu trabajo más fácil y eficiente</p>
                            </div>
                            <div class="section-brief-content container">
                                <div class="grid">
                                    <div class="section-brief-slide hcol-4-12">
                                        <a href="easyvent.php">
                                            <div class="section-brief-slide-image">
                                                <img src="media/home/easyvent.png" alt="EasyVent" class="" />
                                            </div>
                                            <h3 class="section-brief-slide-title">EasyVent</h3>
                                            <p class="section-brief-slide-description">Descubre el software de
                                                selección más completo del mercado de la ventilación que te ayudará
                                                a escoger el producto más adecuado a tus necesidades.</p>
                                        </a>
                                    </div>
                                    <div class="section-brief-slide hcol-4-12">
                                        <a href="normativa-1.php">
                                            <div class="section-brief-slide-image">
                                                <img src="media/home/normativas.png" alt="Normativas y regulaciones"
                                                    class="" />
                                            </div>
                                            <h3 class="section-brief-slide-title">Normativas y regulaciones</h3>
                                            <p class="section-brief-slide-description">Todo sobre las normativas y
                                                regulaciones que necesitas conocer en el mundo de la ventilación.
                                            </p>
                                        </a>
                                    </div>
                                    <div class="section-brief-slide hcol-4-12">
                                        <a href="http://campus.solerpalau.com/preindex.php">
                                            <div class="section-brief-slide-image">
                                                <img src="media/home/campus.png" alt="Campus" class="" />
                                            </div>
                                            <h3 class="section-brief-slide-title">Campus</h3>
                                            <p class="section-brief-slide-description">Obtén los conocimientos
                                                necesarios para reciclarte como profesional, mejorar tu negocio y
                                                ofrecer el mejor servicio a tus clientes.</p>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                        </p>


                    </div>
                </main>
            </div>
        </div>
    </div>
    <!-- aqui va el footer -->
    <?php include 'footer.php' ?>

    </div>
    </div>
    <!-- Ouibounce Modal -->
<div id="ouibounce-modal" class="removeformobile">
    <div class="underlay"></div>
    <div class="modalNuevo">
        <p id="exit_modal"><img src="https://png.icons8.com/metro/50/000000/delete-sign.png" width="20px"></p>
        <div class="modal-body">
            <div id='load'>
                <div class="hcol-6-12">
                    <img class="img-producto modal-img" src="media/img/icon-per.png">
                </div>
                <div class="hcol-6-12 grid">
                    <center>
                        <h2 class="modal-t">Suscríbete a nuestro boletín</h2><br>
                        <p>Recibe novedades al instante sobre nuevos productos y servicios.</p>
                    </center>
                    <form>
                        <input id="emailModal1" type="email" placeholder="Ingrese su correo electrónico" required>
                        <input id='enviarModal1' type="submit" value="Sí, deseo suscribirme">
                        <label style="color:red;font-size: 12px" id="emailRequerido">El correo electrónico es requerido</label>
                        <label style="color:red;font-size: 12px" id="emailValido">Introduce un formato de correo electrónico válido</label>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <center>
                <p class="text-center" id="footer-modal" onclick="document.getElementById('ouibounce-modal').style.display = 'none';">No, Gracias</p>
            </center>
        </div>
    </div>
</div>
<!-- final oubonce Modal -->
</body>

</html>
