🌿 Las Verde - Jugos 100% Naturales

Aplicación Web Institucional y Catálogo de Productos
Proyecto desarrollado para un emprendimiento real y reconocido dentro del Top 10 del curso de ReactJS en Coderhouse.

🌐 Ver Demo en Vivo

---

📌 Descripción del Proyecto

Las Verde es una empresa dedicada a la comercialización de jugos 100% naturales, prensados en frío y libres de conservantes.

Esta aplicación web fue diseñada y desarrollada para brindar una experiencia de usuario moderna, fluida e intuitiva, permitiendo a los usuarios conocer la historia y valores de la marca, explorar el catálogo de productos con datos en tiempo real y comunicarse directamente con el equipo a través de formularios integrados y WhatsApp.

---

✨ Características Principales

• 🏠 Inicio (Home): Slider / Carousel interactivo de imágenes, banners informativos sobre la propuesta de valor y acceso directo a secciones clave.
• 📖 Quiénes Somos: Reseña histórica de la marca, misión, visión y una sección explicativa del Proceso Productivo artesanal.
• 🧃 Catálogo de Productos:
  • Conexión directa a Firebase Firestore para obtener el catálogo actualizado en tiempo real.
  • Modales emergentes (ModalDetail) para visualizar ingredientes, beneficios y detalles de cada jugo.
• 📩 Contacto y Ubicación:
  • Formulario con validaciones personalizadas mediante un custom hook (useForm).
  • Envío automático de consultas vía API (FormSubmit) y redirección a una vista de confirmación.
  • Mapa interactivo integrado para ubicar el local/punto de retiro.
• 💬 Atención Directa: Botón flotante interactivo de WhatsApp para consultas rápidas.
• 📱 Diseño Responsive: Interfaz adaptada a dispositivos móviles, tablets y monitores de escritorio.

---

🛠️ Tecnologías Utilizadas

💻 Frontend

🎨 Estilos

🗺️ Ruteo

🔥 Backend / BaaS

🚀 Despliegue

---

📁 Estructura del Proyecto

src/
├── assets/             # Imágenes y recursos estáticos
├── Components/         # Componentes reutilizables e interfaz de usuario
│   ├── Footer/         # Pie de página con enlaces y redes
│   ├── NavBar/         # Barra de navegación superior responsive
│   ├── Pages/          # Vistas principales de la aplicación
│   │   ├── About/      # Historia, Misión y Proceso Productivo
│   │   ├── Contacts/   # Formulario de contacto y Mapa
│   │   ├── Home/       # Slider y Banners de portada
│   │   └── Products/   # Catálogo dinámico y Modal de detalle
│   ├── ScrollToTop/    # Helper para reseteo de scroll entre rutas
│   ├── Spinner/        # Indicador visual de carga
│   └── WhatsApp/       # Botón flotante de contacto directo
├── hooks/              # Custom Hooks (useForm)
├── styles/             # Archivos de hojas de estilo Sass (.scss)
├── utils/              # Configuración de Firebase y auxiliares
├── App.js              # Componente principal y configuración de rutas
└── index.js            # Punto de entrada de la aplicación

---

⚙️ Instalación y Configuración Local

Si deseas clonar y ejecutar este proyecto de manera local, sigue estos pasos:

Pre-requisitos

Asegúrate de tener instalado Node.js (versión 14 o superior) y npm o yarn.

Pasos

1. Clonar el repositorio:

   git clone https://github.com/GustavoBaranda/Las-verde.git
   cd Las-verde

2. Instalar dependencias:

   npm install

3. Configurar las Variables de Entorno: Crea un archivo .env en la raíz del proyecto tomando como base el archivo .env.example:

   REACT_APP_FIREBASE_API_KEY=tu_api_key_aqui
   REACT_APP_FIREBASE_AUTH_DOMAIN=tu_auth_domain_aqui
   REACT_APP_FIREBASE_PROJECT_ID=tu_project_id_aqui
   REACT_APP_FIREBASE_STORAGE_BUCKET=tu_storage_bucket_aqui
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=tu_messaging_sender_id_aqui
   REACT_APP_FIREBASE_APP_ID=tu_app_id_aqui

4. Iniciar el servidor de desarrollo:

   npm start

   La aplicación estará disponible en http://localhost:3000.

5. Generar la versión de producción:

   npm run build

---

👥 Creadores y Contacto

Proyecto realizado por:

• Gustavo Baranda
  

• Melisa Caputo
  

---

_{Desarrollado con ❤️ para Las Verde}