Plataforma web de distribución de bebidas energizantes — Red Bull, Monster, Speed Max y más.
Aplicación web desarrollada en React + Vite, con catálogo de productos, carrito de compras funcional, y páginas de presentación institucional. Estética industrial dark con tipografía de impacto y paleta de alto contraste.
| Ruta | Descripción |
|---|---|
/ |
Hero + catálogo de bebidas con carrito |
/Nosotros |
Misión, visión y valores de la empresa |
/Redes |
Links a Instagram, Facebook, TikTok y WhatsApp |
/Noticias |
Cobertura de eventos deportivos patrocinados |
- 🛒 Carrito de compras — agrega, elimina y visualiza productos. En desktop abre como sidebar lateral deslizante; en móvil aparece como bottom sheet desde abajo.
- ⚡ Auto-open del carrito — al agregar un producto, el carrito se abre automáticamente después de 800ms.
- 🔢 Badge contador — el botón del carrito muestra la cantidad total de ítems en tiempo real.
- 📱 Hamburger menu — navegación responsive con drawer animado, cierre con Escape y bloqueo de scroll del body.
- 📦 Catálogo desde JSON — los productos se cargan desde
src/data/products.json, fácil de actualizar sin tocar código. - 🎯 Scroll suave — el botón del hero hace scroll al catálogo con
scrollIntoView.
| Framework | React 18 |
| Build tool | Vite |
| Routing | React Router v6 |
| Íconos | react-icons |
| Tipografías | Bebas Neue + DM Sans (Google Fonts) |
| CSS | CSS puro con variables (sin Tailwind, sin CSS Modules) |
felicitis-energy/
├── index.html # Entry point — incluye Google Fonts
├── public/
│ ├── logo.png # Logo de la marca
│ └── assets/
│ ├── banner-bg.jpeg # Fondo del hero
│ ├── redbull-originalx4.jpg
│ ├── redbull-original.png
│ ├── redbull-sugarfree.png
│ ├── monster-verde.webp
│ ├── monster-white.png
│ ├── monster-pink.jpg
│ ├── monster-mango.jpg
│ ├── speed-max.webp
│ └── Posts/
│ ├── Maraton-medellin1.jpg
│ ├── Maraton-medellin2.jpg
│ └── Maraton-medellin3.jpg
└── src/
├── main.jsx # Entry React + BrowserRouter
├── App.jsx # Routes + Header
├── styles/
│ └── main.css # Sistema de diseño completo
├── components/
│ ├── Header.jsx # Nav responsive con hamburger
│ ├── ProductCard.jsx # Tarjeta de producto
│ └── CartSidebar.jsx # Sidebar / bottom sheet carrito
├── pages/
│ ├── Home.jsx # Hero + catálogo + carrito
│ ├── Nosotros.jsx # Misión / visión / valores
│ ├── Redes.jsx # Redes sociales
│ └── Noticias.jsx # Blog de noticias
└── data/
└── products.json # Catálogo de bebidas
# Clonar el repositorio
git clone https://github.com/TU_USUARIO/felicitis-energy.git
cd felicitis-energy
# Instalar dependencias
npm install
# Servidor de desarrollo
npm run dev
# Build de producción
npm run buildnpm install react react-dom react-router-dom react-iconsEdita src/data/products.json — cada producto tiene esta estructura:
{
"id": 9,
"nombre": "Nombre del producto",
"precioBase": 35000,
"precioMinimo": 32000,
"precioMaximo": 38000,
"imagenId": "nombre-imagen.jpg"
}La imagen debe estar en public/assets/nombre-imagen.jpg.
Tipografía: Bebas Neue para todos los headings y precios — fuerte, condensada, con carácter industrial. DM Sans para el cuerpo — legible y moderna sin ser genérica.
Paleta: fondo negro #080808, rojo eléctrico #e53935 como único acento, superficies en escala de grises oscuros. Sin colores de relleno — todo el énfasis va al rojo.
Layout del catálogo: auto-fill con minmax(240px, 1fr) — se adapta solo de 1 a N columnas según el ancho disponible, sin media queries explícitas en la grilla.
Carrito dual: sidebar en desktop (fixed right), bottom sheet en móvil (fixed bottom con border-radius arriba). Ambos con overlay y animación CSS pura.
- 📸 Instagram: @felicitisenergy
- 📘 Facebook: /felicitisenergy
- 🎵 TikTok: @felicitisenergy
- 💬 WhatsApp: +57 300 123 4567
FELICITIS ENERGY · Colombia · Vive al extremo ⚡