From 839e9c5d96a1133a99b512af566814dda3bcf5a0 Mon Sep 17 00:00:00 2001
From: Sebastian Jaque <72231436+sjaquer@users.noreply.github.com>
Date: Wed, 4 Dec 2024 18:07:48 -0500
Subject: [PATCH] index.html

---
 index.html | 342 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 342 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ed2e640
--- /dev/null
+++ b/index.html
@@ -0,0 +1,342 @@
+<html lang="es">
+<head>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>UPYAY Drinks</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Pacifico&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"/>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #fff;
+            color: #333;
+            overflow-x: hidden; /* Hide horizontal scrollbar */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .header {
+            text-align: center;
+            padding: 20px;
+        }
+        .header img {
+            width: 150px;
+        }
+        .main-title {
+            font-size: 2.5em;
+            font-weight: 700;
+            margin: 20px 0;
+            font-family: 'Pacifico', cursive;
+        }
+        .main-content {
+            text-align: center;
+            padding: 20px;
+        }
+        .main-content img {
+            width: 200px;
+        }
+        .section {
+            padding: 40px 20px;
+            text-align: center;
+            width: 100%;
+        }
+        .section-title {
+            font-size: 1.5em;
+            font-weight: 700;
+            margin-bottom: 20px;
+        }
+        .section-content {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        .products {
+            display: flex;
+            overflow: hidden;
+            gap: 20px;
+            padding: 20px 0;
+            position: relative;
+        }
+        .product {
+            min-width: 150px;
+            text-align: center;
+            flex-shrink: 0;
+            transform: translateZ(0);
+            animation: scrollProducts 20s linear infinite;
+        }
+        .product img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        @keyframes scrollProducts {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(-100%);
+            }
+        }
+        .carousel {
+            position: relative;
+            max-width: 800px;
+            margin: 20px auto;
+        }
+        .carousel-item {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            opacity: 0;
+            transition: opacity 0.5s ease, transform 0.5s ease;
+        }
+        .carousel-item.active {
+            opacity: 1;
+            transform: scale(1.05);
+            position: relative;
+        }
+        .carousel img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        .carousel-text {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            color: #fff;
+            padding: 10px;
+            box-sizing: border-box;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+        .carousel-item:hover .carousel-text {
+            opacity: 1;
+        }
+        .carousel-dots {
+            text-align: center;
+            margin-top: 10px;
+        }
+        .carousel-dots span {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            background-color: #ccc;
+            border-radius: 50%;
+            margin: 0 5px;
+            cursor: pointer;
+        }
+        .carousel-dots .active {
+            background-color: #333;
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #333;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        .cta-button:hover {
+            background-color: #555;
+        }
+        .carousel-nav {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+        }
+        .carousel-nav i {
+            background-color: rgba(0, 0, 0, 0.5);
+            color: #fff;
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        .footer {
+            background-color: #333;
+            color: #fff;
+            padding: 20px;
+            text-align: center;
+            width: 100%;
+        }
+        .footer p {
+            margin: 5px 0;
+        }
+        .footer a {
+            color: #fff;
+            text-decoration: none;
+        }
+        .footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <img alt="UPYAY logo" height="50" src="https://storage.googleapis.com/a1aa/image/OfoqUDqmxJyMDq9xjtdRNlFRec0sjn0cc4cK8uWlvaIpIo3TA.jpg" width="150"/>
+    </header>
+    <main>
+        <section class="main-content">
+            <h1 class="main-title">Te da Aaalas</h1>
+            <img alt="UPYAY Clasica bottle" height="400" src="https://storage.googleapis.com/a1aa/image/1ruaDVdIepWgf0t1qS4pHYWyhUCJfiT7qrBvdh2QcU8bRQvnA.jpg" width="200"/>
+        </section>
+        <section class="section">
+            <h2 class="section-title">PRODUCTOS UPYAY DRINKS</h2>
+            <div class="section-content">
+                <h3>Vitaliza Mente y Cuerpo©</h3>
+                <p>UPYAY Drinks es apreciado en todo el mundo por atletas, estudiantes, en ocasiones de alta demanda, en viajes largos y en el trabajo.</p>
+                <div class="products">
+                    <div class="product">
+                        <img alt="UPYAY Lucuma" height="300" src="https://storage.googleapis.com/a1aa/image/EwqTqJzQySq0Ipv30X4fOjn1GwmGmQeaRTukO08ZYXClLo3TA.jpg" width="150"/>
+                        <p>UPYAY Lucuma</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Maracuya" height="300" src="https://storage.googleapis.com/a1aa/image/NEz9UMInZGZMMFaSIAs7oZNegQj19YtxqD9RdHxq7HNyF07JA.jpg" width="150"/>
+                        <p>UPYAY Maracuya</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Cacao" height="300" src="https://storage.googleapis.com/a1aa/image/ACvakMhq1Sa8PduPNtVrGu3SIC2ICCe4ZgmArLWKyDSzF07JA.jpg" width="150"/>
+                        <p>UPYAY Cacao</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Fresa" height="300" src="https://storage.googleapis.com/a1aa/image/ZnglYtw2C0rKAhmfAwBUGnuA3T40v7n6ZjCouFi3sAN0F07JA.jpg" width="150"/>
+                        <p>UPYAY Fresa</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Mango" height="300" src="https://storage.googleapis.com/a1aa/image/dS1bfjHNHLylZa8sxTOZJvqq5mJB59paOwG108cG6lb1F07JA.jpg" width="150"/>
+                        <p>UPYAY Mango</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Piña" height="300" src="https://storage.googleapis.com/a1aa/image/EQTuHxSxOfzRH62iTU5tFzTcCZs3T6Vae3qWeN8G4kROXQvnA.jpg" width="150"/>
+                        <p>UPYAY Piña</p>
+                    </div>
+                    <!-- Repeat products to create infinite scroll effect -->
+                    <div class="product">
+                        <img alt="UPYAY Lucuma" height="300" src="https://storage.googleapis.com/a1aa/image/EwqTqJzQySq0Ipv30X4fOjn1GwmGmQeaRTukO08ZYXClLo3TA.jpg" width="150"/>
+                        <p>UPYAY Lucuma</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Maracuya" height="300" src="https://storage.googleapis.com/a1aa/image/NEz9UMInZGZMMFaSIAs7oZNegQj19YtxqD9RdHxq7HNyF07JA.jpg" width="150"/>
+                        <p>UPYAY Maracuya</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Cacao" height="300" src="https://storage.googleapis.com/a1aa/image/ACvakMhq1Sa8PduPNtVrGu3SIC2ICCe4ZgmArLWKyDSzF07JA.jpg" width="150"/>
+                        <p>UPYAY Cacao</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Fresa" height="300" src="https://storage.googleapis.com/a1aa/image/ZnglYtw2C0rKAhmfAwBUGnuA3T40v7n6ZjCouFi3sAN0F07JA.jpg" width="150"/>
+                        <p>UPYAY Fresa</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Mango" height="300" src="https://storage.googleapis.com/a1aa/image/dS1bfjHNHLylZa8sxTOZJvqq5mJB59paOwG108cG6lb1F07JA.jpg" width="150"/>
+                        <p>UPYAY Mango</p>
+                    </div>
+                    <div class="product">
+                        <img alt="UPYAY Piña" height="300" src="https://storage.googleapis.com/a1aa/image/EQTuHxSxOfzRH62iTU5tFzTcCZs3T6Vae3qWeN8G4kROXQvnA.jpg" width="150"/>
+                        <p>UPYAY Piña</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="section">
+            <h2 class="section-title">Funcionalidad</h2>
+            <div class="carousel">
+                <div class="carousel-item active">
+                    <img alt="Lúcuma" height="400" src="https://storage.googleapis.com/a1aa/image/1.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Lúcuma: Superalimento con alto contenido de carbohidratos complejos y fibra, aporta energía sostenida y favorece la salud digestiva.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img alt="Camú Camú" height="400" src="https://storage.googleapis.com/a1aa/image/2.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Camú Camú: Fruto amazónico con alta concentración de vitamina C y antioxidantes, refuerza el sistema inmunológico y combate el estrés oxidativo.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img alt="Granadilla" height="400" src="https://storage.googleapis.com/a1aa/image/3.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Granadilla: Rica en fibra dietética y antioxidantes, contribuye a la salud intestinal y mejora el sabor dulce y refrescante de la bebida.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img alt="Maca" height="400" src="https://storage.googleapis.com/a1aa/image/4.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Maca: Planta conocida por sus propiedades energizantes, mejora la resistencia y el rendimiento físico, ideal para personas activas.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img alt="Cacao" height="400" src="https://storage.googleapis.com/a1aa/image/5.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Cacao: Proporciona un sabor agradable y contiene propiedades estimulantes y antioxidantes, mejorando el bienestar general.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img alt="Guaraná" height="400" src="https://storage.googleapis.com/a1aa/image/6.jpg" width="800"/>
+                    <div class="carousel-text">
+                        <p>Guaraná: El guaraná es una planta nativa de la región amazónica, especialmente conocida por su alto contenido en cafeína y su uso en bebidas energéticas.</p>
+                    </div>
+                </div>
+                <div class="carousel-nav">
+                    <i class="fas fa-chevron-left"></i>
+                    <i class="fas fa-chevron-right"></i>
+                </div>
+                <div class="carousel-dots">
+                    <span class="active"></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+        </section>
+        <footer class="footer">
+            <p><a href="#">Términos y Condiciones</a></p>
+            <p><a href="#">Contáctenos</a></p>
+            <p><a href="#">Política de Privacidad</a></p>
+            <p>&copy; 2023 UPYAY Drinks. Todos los derechos reservados.</p>
+        </footer>
+    </main>
+    <script>
+        const carousel = document.querySelector('.carousel');
+        const carouselItems = carousel.querySelectorAll('.carousel-item');
+        const prevButton = carousel.querySelector('.fa-chevron-left');
+        const nextButton = carousel.querySelector('.fa-chevron-right');
+        const dots = carousel.querySelectorAll('.carousel-dots span');
+        let currentIndex = 0;
+
+        function updateCarousel() {
+            carouselItems.forEach((item, index) => {
+                item.classList.toggle('active', index === currentIndex);
+            });
+            dots.forEach((dot, index) => {
+                dot.classList.toggle('active', index === currentIndex);
+            });
+        }
+
+        prevButton.addEventListener('click', () => {
+            currentIndex = (currentIndex > 0) ? currentIndex - 1 : carouselItems.length - 1;
+            updateCarousel();
+        });
+
+        nextButton.addEventListener('click', () => {
+            currentIndex = (currentIndex < carouselItems.length - 1) ? currentIndex + 1 : 0;
+            updateCarousel();
+        });
+
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', () => {
+                currentIndex = index;
+                updateCarousel();
+            });
+        });
+
+        updateCarousel();
+    </script>
+</body>
+</html>
