​​ Siempre Verde - Tienda de Plantas 🌺🍃​

Grupo 7 - Curso de Diseño Web | Ingenias+ - Fundación YPF & Jump Educación
Realizado por:

• Karen Giannetto - LinkedIn
• Jessica Baeza - GitHub

📜​ Descripción del Proyecto

Siempre Verde es una tienda de plantas online creada como entrega final del curso de Desarrollo Web. Su objetivo es brindar una experiencia completa para usuarios que buscan adquirir plantas, informarse sobre sus cuidados y participar en una comunidad de amantes de la naturaleza.

El sitio fue desarrollado aplicando tecnologías modernas, diseño responsive y funcionalidades dinámicas en JavaScript.

🖥️ Estructura del Sitio

El sitio web está compuesto por cinco secciones principales:

• 🏡​​ Inicio (index.html):Página principal con banner destacado, productos en preventa, presentación del equipo, comentarios de clientes y consejos breves sobre plantas ("GreenTips").
• 🛒 Tienda (tienda.html): Galería de productos con carrito funcional y gestión de stock.
• 🌼​ Comunidad (comunidad.html): Espacio colaborativo para compartir experiencias. Incluye reglas de convivencia e info sobre próximos talleres.
• ❓ Preguntas Frecuentes (preguntas-frecuentes.html): Respuestas a dudas comunes sobre productos, envíos, pagos, garantías y devoluciones, etc.
• 📲​​ Contacto (contacto.html): Datos y formulario de contacto y acceso directo a la sección de preguntas frecuentes.

🎨 Diseño y Maquetación

• Prototipado completo en Figma
  🔗 Ver diseño en Figma

• HTML semántico

• CSS con Flexbox, Grid, Media Queries

• Responsive design para dispositivos móviles y escritorio

🚀 Funcionalidades con JavaScript

• Carrito de compras con operaciones agregar, eliminar, modificar
• Almacenamiento y lectura del carrito en localStorage
• Validaciones de stock con base de datos simulada (plantasDB)
• Formulario de contacto validado en tiempo real con envío automático(EmailJS)
• Modal con información detallada de cada planta usando la API de Perenual
• Notificaciones dinámicas (éxito, error, advertencia)
• Cambio de vista en la tienda (grilla / lista)
• Animaciones y mejoras visuales

📋 Checklist Técnico

• ✅ 5 páginas navegables con HTML semántico
• ✅ CSS con Flexbox, Grid y Media Queries (responsive)
• ✅ Template literals para generar HTML dinámico
• ✅ Condicionales (if, switch) para lógica de stock, validaciones y respuestas
• ✅ Bucles (forEach, map, reduce) para mostrar productos, carrito y más
• ✅ Arrow functions en todas las funciones modernas
• ✅ Módulo externo: EmailJS para el formulario de contacto
• ✅ Base de datos simulada en JSON: plantasDB en archivo .js
• ✅ Almacenamiento de datos: localStorage
• ✅ API pública externa: Perenual API para mostrar información botánica

👾​ Tecnologías Utilizadas

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Herramientas: Git, GitHub, Chrome DevTools, Figma
• Servicios externos: EmailJS, API de Perenual
• Almacenamiento: localStorage en navegador
• Asistentes IA: GitHub Copilot, Claude AI

🧷​ Estado del Proyecto

✅ Proyecto finalizado y funcional
🎓 Presentado como entrega final del curso
🍂​ Preparado para futuras mejoras y despliegue

🔮​✨ Agradecimientos

Gracias a Abigail Salas, nuestra profesora, por su dedicación y guía constante a lo largo del curso.
Y a María Elisa Araya, nuestra tutora, por su acompañamiento cercano y apoyo en cada etapa del proyecto.