Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vivero Los Cocos - Plantas y Jardinería en Mendoza</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1534710961216-75c88202f43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .product-of-day { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| transition: all 0.3s ease; | |
| } | |
| .product-of-day:hover { | |
| transform: translateY(-5px); | |
| } | |
| .tutorial-card:hover .play-icon { | |
| transform: scale(1.1); | |
| } | |
| .play-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: rotate(-5deg) scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-pagelines text-green-600 text-2xl"></i> | |
| <h1 class="text-2xl font-bold text-gray-800 font-serif">Vivero Los Cocos</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="text-gray-700 hover:text-green-600 font-medium">Inicio</a> | |
| <a href="#plantas" class="text-gray-700 hover:text-green-600 font-medium">Plantas</a> | |
| <a href="#tutoriales" class="text-gray-700 hover:text-green-600 font-medium">Tutoriales</a> | |
| <a href="#contacto" class="text-gray-700 hover:text-green-600 font-medium">Contacto</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="cart-button" class="relative"> | |
| <i class="fas fa-shopping-basket text-gray-700 hover:text-green-600 text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button class="md:hidden" id="menu-button"> | |
| <i class="fas fa-bars text-gray-700 text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> | |
| <a href="#inicio" class="text-gray-700 hover:text-green-600 font-medium">Inicio</a> | |
| <a href="#plantas" class="text-gray-700 hover:text-green-600 font-medium">Plantas</a> | |
| <a href="#tutoriales" class="text-gray-700 hover:text-green-600 font-medium">Tutoriales</a> | |
| <a href="#contacto" class="text-gray-700 hover:text-green-600 font-medium">Contacto</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero-bg text-white py-24 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 font-serif">Vivero Los Cocos</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Naturaleza y belleza cultivadas en Mendoza</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> | |
| <a href="#plantas" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Explorar Plantas | |
| </a> | |
| <a href="#tutoriales" class="bg-white hover:bg-gray-100 text-green-600 px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Aprender Jardinería | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product of the Day --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-6 font-serif">Planta del Día</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Descubre nuestra selección especial de hoy con un 10% de descuento</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="product-of-day bg-white rounded-xl overflow-hidden flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8"> | |
| <img src="https://images.unsplash.com/photo-1598971861713-54ad16a7e72e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Monstera Deliciosa" | |
| class="w-full h-64 md:h-80 object-contain"> | |
| </div> | |
| <div class="md:w-1/2 p-8 flex flex-col justify-center"> | |
| <div class="bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full inline-block mb-4"> | |
| ¡Oferta especial! | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Monstera Deliciosa</h3> | |
| <p class="text-gray-600 mb-4">La famosa "Costilla de Adán" con sus espectaculares hojas perforadas. Perfecta para interiores con luz indirecta.</p> | |
| <div class="flex items-center mb-6"> | |
| <span class="text-3xl font-bold text-green-600">$4,050</span> | |
| <span class="ml-3 text-gray-500 line-through">$4,500</span> | |
| <span class="ml-3 bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded">10% OFF</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="add-to-cart bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium flex-grow transition transform hover:scale-105" | |
| data-name="Monstera Deliciosa" | |
| data-price="4050" | |
| data-image="https://images.unsplash.com/photo-1598971861713-54ad16a7e72e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"> | |
| Añadir al carrito | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-3 rounded-lg transition"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-100"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-600"> | |
| <i class="fas fa-truck text-green-600"></i> | |
| <span>Envío gratis en Mendoza capital</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="feature-icon bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-green-600 text-2xl"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2 text-center">Plantas Saludables</h3> | |
| <p class="text-gray-600 text-center">Cultivadas con los más altos estándares de calidad en nuestro vivero mendocino.</p> | |
| </div> | |
| <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="feature-icon bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-green-600 text-2xl"> | |
| <i class="fas fa-hand-holding-heart"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2 text-center">Asesoramiento Personalizado</h3> | |
| <p class="text-gray-600 text-center">Nuestros expertos te guiarán en el cuidado de tus plantas.</p> | |
| </div> | |
| <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="feature-icon bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-green-600 text-2xl"> | |
| <i class="fas fa-recycle"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2 text-center">Cultivo Sostenible</h3> | |
| <p class="text-gray-600 text-center">Practicamos métodos de cultivo respetuosos con el medio ambiente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tutorials Section --> | |
| <section id="tutoriales" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2 font-serif">Aprende con Nuestros Tutoriales</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Video guías prácticas para cuidar tus plantas como un experto</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Tutorial 1 --> | |
| <div class="tutorial-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1597848212624-a19eb35e2651?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Cuidado de plantas" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <div class="play-icon bg-white bg-opacity-80 rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-lg">Cuidado básico de plantas de interior</h3> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Nuevo</span> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Aprende los fundamentos para mantener tus plantas de interior saludables y vibrantes.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>8 min</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span>1.2k vistas</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial 2 --> | |
| <div class="tutorial-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1132&q=80" alt="Cactus y suculentas" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <div class="play-icon bg-white bg-opacity-80 rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-lg mb-2">Guía completa para cactus y suculentas</h3> | |
| <p class="text-gray-600 text-sm mb-4">Todo lo que necesitas saber sobre el riego, luz y cuidados de estas resistentes plantas.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>12 min</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span>2.4k vistas</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial 3 --> | |
| <div class="tutorial-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1603048719539-6f7e2b0a1b3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Huerta orgánica" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <div class="play-icon bg-white bg-opacity-80 rounded-full w-12 h-12 flex items-center justify-center"> | |
| <i class="fas fa-play text-green-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-lg mb-2">Cómo trasplantar correctamente</h3> | |
| <p class="text-gray-600 text-sm mb-4">Técnicas profesionales para trasplantar tus plantas sin dañarlas y favorecer su crecimiento.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>15 min</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span>3.1k vistas</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#tutoriales" class="inline-block bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Ver todos los tutoriales | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Plants Section --> | |
| <section id="plantas" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2 font-serif">Nuestras Plantas</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Selección de las mejores especies para tu hogar y jardín</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Plant 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition transform hover:-translate-y-1"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1512428813834-c702c7702cd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Costilla de Adán" class="w-full h-48 object-cover"> | |
| <span class="absolute top-3 right-3 bg-green-600 text-white text-xs px-2 py-1 rounded-full">Interior</span> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Costilla de Adán</h3> | |
| <p class="text-gray-600 text-sm mb-3">Planta de interior con hojas grandes y decorativas</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">$3,900</span> | |
| <button class="add-to-cart bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg text-sm transition" | |
| data-name="Costilla de Adán" | |
| data-price="3900" | |
| data-image="https://images.unsplash.com/photo-1512428813834-c702c7702cd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"> | |
| <i class="fas fa-plus mr-1"></i> Añadir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition transform hover:-translate-y-1"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Rosa de Mendoza" class="w-full h-48 object-cover"> | |
| <span class="absolute top-3 right-3 bg-pink-600 text-white text-xs px-2 py-1 rounded-full">Exterior</span> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Rosa de Mendoza</h3> | |
| <p class="text-gray-600 text-sm mb-3">Variedad autóctona de flores rosadas intensas</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">$3,200</span> | |
| <button class="add-to-cart bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg text-sm transition" | |
| data-name="Rosa de Mendoza" | |
| data-price="3200" | |
| data-image="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| <i class="fas fa-plus mr-1"></i> Añadir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition transform hover:-translate-y-1"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1132&q=80" alt="Cactus San Pedro" class="w-full h-48 object-cover"> | |
| <span class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">Cactus</span> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Cactus San Pedro</h3> | |
| <p class="text-gray-600 text-sm mb-3">Cactus columnar originario de los Andes</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">$2,800</span> | |
| <button class="add-to-cart bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg text-sm transition" | |
| data-name="Cactus San Pedro" | |
| data-price="2800" | |
| data-image="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1132&q=80"> | |
| <i class="fas fa-plus mr-1"></i> Añadir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant 4 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition transform hover:-translate-y-1"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1603048719539-6f7e2b0a1b3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Romero" class="w-full h-48 object-cover"> | |
| <span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded-full">Aromática</span> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Romero</h3> | |
| <p class="text-gray-600 text-sm mb-3">Hierba aromática ideal para cocina y jardín</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">$1,500</span> | |
| <button class="add-to-cart bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg text-sm transition" | |
| data-name="Romero" | |
| data-price="1500" | |
| data-image="https://images.unsplash.com/photo-1603048719539-6f7e2b0a1b3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| <i class="fas fa-plus mr-1"></i> Añadir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#plantas" class="inline-block bg-white border border-green-600 text-green-600 hover:bg-green-50 px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Ver más plantas | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gardening Tips --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2 font-serif">Consejos de Jardinería</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Aprende los secretos para mantener tus plantas saludables</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Tip 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition"> | |
| <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-green-600"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Luz adecuada</h3> | |
| <p class="text-gray-600 text-sm">La mayoría de plantas de interior prefieren luz indirecta brillante. Evita el sol directo que puede quemar las hojas.</p> | |
| </div> | |
| <!-- Tip 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition"> | |
| <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-green-600"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Riego correcto</h3> | |
| <p class="text-gray-600 text-sm">Riega cuando los primeros centímetros de tierra estén secos. Es mejor regar menos que encharcar.</p> | |
| </div> | |
| <!-- Tip 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition"> | |
| <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-green-600"> | |
| <i class="fas fa-spa"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Humedad ambiental</h3> | |
| <p class="text-gray-600 text-sm">Muchas plantas tropicales necesitan humedad. Usa humidificadores o bandejas con agua y piedras.</p> | |
| </div> | |
| <!-- Tip 4 --> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition"> | |
| <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-green-600"> | |
| <i class="fas fa-cut"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Poda y limpieza</h3> | |
| <p class="text-gray-600 text-sm">Retira hojas amarillas y limpia el polvo de las hojas para permitir una mejor fotosíntesis.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-green-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4 font-serif">Únete a Nuestra Comunidad</h2> | |
| <p class="max-w-2xl mx-auto mb-8">Suscríbete para recibir consejos exclusivos, ofertas especiales y novedades sobre plantas directamente en tu correo.</p> | |
| <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-2"> | |
| <input type="email" placeholder="Tu correo electrónico" class="flex-grow px-4 py-3 rounded-lg focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-white text-green-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium whitespace-nowrap transition transform hover:scale-105"> | |
| Suscribirse | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contacto" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 font-serif">Visítanos en Mendoza</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-4">Información de Contacto</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Dirección</p> | |
| <p class="text-gray-600">Av. Los Cocos 1234, Mendoza</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Teléfono</p> | |
| <p class="text-gray-600">+54 261 987 6543</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Email</p> | |
| <p class="text-gray-600">info@viveroloscocos.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Horario</p> | |
| <p class="text-gray-600">Lunes a Viernes: 8:30 - 18:30</p> | |
| <p class="text-gray-600">Sábados: 9:00 - 13:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-3">Síguenos en redes</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-200 hover:bg-gray-300 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f text-gray-700"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-gray-300 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-instagram text-gray-700"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-gray-300 w-10 h-10 rounded-full flex items-center justify-center transition"> | |
| <i class="fab fa-youtube text-gray-700"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Envía un mensaje</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-1">Nombre</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-1">Mensaje</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Enviar mensaje | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map --> | |
| <div class="h-96 bg-gray-200"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d53609.03719086435!2d-68.8644575!3d-32.8834105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x967e093ec45179bf%3A0x205a78f6d20efa3a!2sMendoza%2C%20Capital%2C%20Mendoza!5e0!3m2!1ses-419!2sar!4v1689209764771!5m2!1ses-419!2sar" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-pagelines text-green-400 text-2xl"></i> | |
| <h3 class="text-xl font-bold font-serif">Vivero Los Cocos</h3> | |
| </div> | |
| <p class="text-gray-400">Cultivando belleza y naturaleza en Mendoza desde 1985.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Enlaces rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#inicio" class="text-gray-400 hover:text-white transition">Inicio</a></li> | |
| <li><a href="#plantas" class="text-gray-400 hover:text-white transition">Plantas</a></li> | |
| <li><a href="#tutoriales" class="text-gray-400 hover:text-white transition">Tutoriales</a></li> | |
| <li><a href="#contacto" class="text-gray-400 hover:text-white transition">Contacto</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Categorías</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Plantas de Interior</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Plantas de Exterior</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cactus y Suculentas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Hierbas Aromáticas</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Métodos de pago</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <div class="bg-white p-2 rounded"> | |
| <i class="fab fa-cc-visa text-gray-800 text-xl"></i> | |
| </div> | |
| <div class="bg-white p-2 rounded"> | |
| <i class="fab fa-cc-mastercard text-gray-800 text-xl"></i> | |
| </div> | |
| <div class="bg-white p-2 rounded"> | |
| <i class="fab fa-cc-amex text-gray-800 text-xl"></i> | |
| </div> | |
| <div class="bg-white p-2 rounded"> | |
| <i class="fas fa-money-bill-wave text-gray-800 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Vivero Los Cocos. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">Tu Carrito</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="p-4 space-y-4"> | |
| <!-- Cart items will be added here dynamically --> | |
| <p class="text-gray-500 text-center py-8">Tu carrito está vacío</p> | |
| </div> | |
| <div class="p-4 border-t"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="font-medium">Total:</span> | |
| <span id="cart-total" class="font-bold">$0</span> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium transition"> | |
| Finalizar Compra | |
| </button> | |
| </div> | |
| </div> | |
| <div id="cart-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div> | |
| <script> | |
| // Mobile menu toggle | |
| const menuButton = document.getElementById('menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Cart functionality | |
| const cartButton = document.getElementById('cart-button'); | |
| const cartSidebar = document.getElementById('cart-sidebar'); | |
| const cartOverlay = document.getElementById('cart-overlay'); | |
| const closeCart = document.getElementById('close-cart'); | |
| const cartItems = document.getElementById('cart-items'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| let cart = []; | |
| cartButton.addEventListener('click', () => { | |
| cartSidebar.classList.remove('translate-x-full'); | |
| cartOverlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeCart.addEventListener('click', () => { | |
| cartSidebar.classList.add('translate-x-full'); | |
| cartOverlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| cartOverlay.addEventListener('click', () => { | |
| cartSidebar.classList.add('translate-x-full'); | |
| cartOverlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Add to cart functionality | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const name = button.getAttribute('data-name'); | |
| const price = parseFloat(button.getAttribute('data-price')); | |
| const image = button.getAttribute('data-image'); | |
| // Check if item already exists in cart | |
| const existingItem = cart.find(item => item.name === name); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| name, | |
| price, | |
| image, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCart(); | |
| // Show cart sidebar | |
| cartSidebar.classList.remove('translate-x-full'); | |
| cartOverlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Add animation to button | |
| button.classList.add('animate-ping'); | |
| setTimeout(() => { | |
| button.classList.remove('animate-ping'); | |
| }, 300); | |
| }); | |
| }); | |
| function updateCart() { | |
| // Update cart count | |
| const totalItems = cart.reduce((total, item) => total + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Update cart items | |
| cartItems.innerHTML = ''; | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Tu carrito está vacío</p>'; | |
| cartTotal.textContent = '$0'; | |
| return; | |
| } | |
| let total = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| total += itemTotal; | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'flex items-start p-3 border-b'; | |
| cartItem.innerHTML = ` | |
| <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded mr-4"> | |
| <div class="flex-grow"> | |
| <h4 class="font-medium">${item.name}</h4> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-gray-600">$${item.price.toLocaleString('es-AR')}</span> | |
| <div class="flex items-center"> | |
| <button class="decrease-quantity px-2 text-gray-500 hover:text-gray-700" data-name="${item.name}">-</button> | |
| <span class="mx-2">${item.quantity}</span> | |
| <button class="increase-quantity px-2 text-gray-500 hover:text-gray-700" data-name="${item.name}">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="remove-item ml-2 text-gray-500 hover:text-red-500" data-name="${item.name}"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| cartItems.appendChild(cartItem); | |
| }); | |
| // Update cart total | |
| cartTotal.textContent = `$${total.toLocaleString('es-AR')}`; | |
| // Add event listeners to quantity buttons | |
| document.querySelectorAll('.increase-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const name = e.target.getAttribute('data-name'); | |
| const item = cart.find(item => item.name === name); | |
| if (item) { | |
| item.quantity += 1; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.decrease-quantity').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const name = e.target.getAttribute('data-name'); | |
| const item = cart.find(item => item.name === name); | |
| if (item && item.quantity > 1) { | |
| item.quantity -= 1; | |
| updateCart(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-item').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const name = e.target.closest('button').getAttribute('data-name'); | |
| cart = cart.filter(item => item.name !== name); | |
| updateCart(); | |
| }); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=santosma/viverococos" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |