<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avenida 10</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/x-icon" href="/icono-pestaña/favicon.ico">

</head>
<body>
    <div class="header">
        <a href="/index.html">
        <img src="/logos/logoav.png" width="130" height="70" class="logo-img">
    </a>
        <div class="header-option">
            <i class="fas fa-map-marker-alt"></i>San Jose-Hospital <i class="fas fa-chevron-down"></i>
        </div>
        <div class="search-container">
            <i class="fas fa-search"></i>
            <input type="text" id="searchInput" placeholder="Buscá un producto...">
            <div id="suggestions" class="suggestions"></div> <!-- Contenedor para sugerencias -->
        </div>
        <div class="icons">
            <i class="fas fa-shopping-cart"></i>
        </div>
    </div>

    <!-- Contenedor del carrusel y la barra de navegación -->
    <div class="banner-container">
        <!-- Carrusel de imágenes -->
        <div class="carousel">
            <img src="banners/banner3.png" alt="Imagen 3"> <!-- Última imagen al inicio -->
            <img src="banners/banner.png" alt="Imagen 1">
            <img src="banners/banner2.png" alt="Imagen 2">
            <img src="banners/banner3.png" alt="Imagen 3">
            <img src="banners/banner.png" alt="Imagen 1"> <!-- Primera imagen al final -->
        </div>
    
        <!-- Botones de control del carrusel -->
        <button id="pauseBtn" class="carousel-btn">❚❚</button>
        <button id="playBtn" class="carousel-btn" style="display: none;">▶</button>
    
        <!-- Barra de navegación -->
        <div class="nav-bar">
            <a href="/barra de navegacion/ofertas/Ofertas.html">Ofertas</a>
            <a href="/barra de navegacion/catalogo/Catalogo.html">Catalago</a>
            <a href="/barra de navegacion/eventoss/Eventos.html">Eventos</a>
            <a href="/barra de navegacion/promociones/promociones.html">promociones</a>
            <a href="/barra de navegacion/recetas/recetas.html">Recetas</a>
            <a href="#">Siempre Fresco</a>
            <a href="/barra de navegacion/transporte/Transporte.html">Transporte</a>
            <a href="/barra de navegacion/sobre nosotros/sobre_nosotros.html">Sobre nosotros</a>
        </div>
    </div>
<!-- Contenido principal -->
<section class="categorias">
    <h2>Paseá por nuestros pasillos</h2>
    <div class="categorias-container">
        <!-- Categoría 1 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
                <img src="snacks.png" alt="Productos Snack">
                <p>Productos Snack</p>
            </a>
        </div>
        <!-- Categoría 2 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
            <img src="productos de limpieza.png" alt="Productos de limpieza">
            <p>Productos de limpieza</p>
        </a>
        </div>
        <!-- Categoría 3 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
            <img src="vinos.jpeg" alt="Productos Vinos">
            <p>Productos Vinos</p>
        </a>
        </div>
        <!-- Categoría 4 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
            <img src="carniceria.png" alt="Productos de carniceria">
            <p>Productos de Carniceria</p>
        </a>
        </div>
        <!-- Categoría 5 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
            <img src="verduras.jpeg" alt="Productos de Frutas y verduras">
            <p>Productos de Frutas y Verduras</p>
        </a>
        </div>
        <!-- Categoría 6 -->
        <div class="categoria">
            <a href="/barra de navegacion/catalogo/Catalogo.html">
            <img src="panaderia.png" alt="Productos de Panadería y repostería">
            <p>Productos de Panadería</p>
        </a>
        </div>
        <!-- Agrega más categorías según necesites -->
    </div>
</section>

<section class="about-page">
    <div class="about-container">
        <img src="equipo.jpg" alt="Propósito" class="about-image">
        <div class="about-text">
            <h2>¿Qué somos en Avenida 10?</h2>
            <p>
                Avenida 10 es más que un supermercado. Somos un espacio diseñado para ofrecerte productos de calidad,
                promociones exclusivas, y experiencias únicas para mejorar tu día a día.
            </p>
            <p>
                Desde tus compras básicas hasta momentos especiales, estamos aquí para acompañarte, con una oferta
                variada, siempre fresca y al alcance de todos.
            </p>
            <a href="/barra de navegacion/sobre nosotros/sobre_nosotros.html" class="about-btn">Explorar Más</a>
        </div>
    </div>
</section>

<section class="productos-page">
    <div class="productos-container">
        <img src="/productos-equipo.jpg" alt="Propósito" class="productos-image">
        <div class="productos-text">
            <h2>Excelentes productos</h2>
            <p>
                En Avenida 10, nos especializamos en ofrecerte productos cuidadosamente seleccionados para cubrir
                todas tus necesidades. Desde alimentos frescos hasta artículos del hogar, encontrarás todo lo que
                buscas en un solo lugar.
            </p>
            <p>
                Explora nuestras categorías y descubre ofertas exclusivas que harán de tus compras una experiencia
                inigualable.
            </p>
            <a href="/barra de navegacion/catalogo/Catalogo.html" class="productos-btn">Explorar Más</a>
        </div>
    </div>
</section>



<section class="info-section">
    <h2>Descubrí Más</h2>
    <div class="info-cards">
        <a href="/barra de navegacion/ofertas/Ofertas.html" class="info-card">
            <img src="Loco.jpeg" alt="Ofertas">
            <h3>Ofertas</h3>
            <p>Explorá las mejores ofertas del día.</p>
        </a>
        <a href="/barra de navegacion/eventoss/Eventos.html" class="info-card">
            <img src="/fortuna-navideña.jpg" alt="Novedades">
            <h3>Eventos</h3>
            <p>Mirá los ultimos eventos</p>
        </a>
        <a href="/barra de navegacion/recetas/recetas.html" class="info-card">
            <img src="/receta.png" alt="Recetas">
            <h3>Recetas</h3>
            <p>Descubrí recetas fáciles y deliciosas.</p>
        </a>
    </div>
</section>


<!-- Pie de página -->
<footer class="footer">
    <div class="footer-content">
        <div class="footer-logo">
            <a href="/index.html">
                <img src="/logos/logo-24.png" alt="Logo Avenida 10" width="100">
            </a>
        </div>
        <div class="footer-links">
            <ul>
                <li><a href="/barra de navegacion/sobre nosotros/sobre_nosotros.html">Sobre Nosotros</a></li>
                <li><a href="#">Política de Privacidad</a></li>
                <li><a href="#">Términos y Condiciones</a></li>
                <li><a href="/barra de navegacion/sobre nosotros/contacto.html">Contáctanos</a></li>
            </ul>
        </div>
        <div class="footer-social">
            <a href="https://www.facebook.com/Ave10cr/?locale=es_LA" target="_blank" class="social-icon"><i class="fab fa-facebook-f"></i></a>
            <a href="https://www.instagram.com/supermercado_avenida10/" target="_blank" class="social-icon"><i class="fab fa-instagram"></i></a>
            <a href="https://www.tiktok.com/@supermercado_avenida10" target="_blank" class="social-icon"><i class="fab fa-tiktok"></i></a>
        </div>
    </div>
    <div class="footer-bottom">
        <p>Llamanos por nuestro Whatsapp al numero:</p> <p style="color:#14b805";>7060-8021.</p>
    </div>
</footer>


    <!-- Archivo JavaScript -->
    <script src="/script.js"></script">
</body>
</html>