🥐 SmartRoll

Prototipo de tienda en línea para una panadería de rollos de canela

Elige sucursal · Arma tu cajita · Entrega a domicilio o retiro

---

⚠️ Prototipo de concepto. Este proyecto es una maqueta de interfaz creada con fines de práctica y portafolio. La marca The Smart Roll, su logotipo, su mascota y sus ilustraciones pertenecen a sus respectivos dueños. Las imágenes de la carpeta docs/brand se muestran solo para ilustrar este README y no están licenciadas bajo la licencia del código. El código de la app usa un logo y una mascota genéricos (public/assets).

✨ ¿Qué es?

Una experiencia de compra pensada para el celular, con un estilo visual neo-brutalista (bordes gruesos y sombras duras) y animaciones suaves. Cubre todo el recorrido del cliente, desde elegir la sucursal hasta confirmar el pedido.

🎨 Identidad visual

   

La paleta y la tipografía del prototipo salen de esta identidad: marrón canela #6F4235, beige #FDE4C3, menta #A3D9C9 y amarillo #FFD700, con Quicksand y Varela Round.

📸 Captura

_{Pantalla de inicio (con el logo genérico incluido en el código)}

🛒 Recorrido del cliente

flowchart LR
    A[Inicio] --> B[Sucursal]
    B --> C{¿Cómo lo quieres?}
    C -->|Domicilio| D[Mapa y dirección]
    C -->|Retiro| E
    D --> E[Menú]
    E --> F[Checkout]
    F --> G[Pedido confirmado]

Loading

🚀 Funcionalidades

• 🏪 Selección de sucursal por ciudad
• 🚚 Domicilio o retiro en tienda, con costo de envío calculado solo para domicilio
• 📍 Mapa incrustado para confirmar la dirección de entrega
• 📦 Arma tu cajita: elige tamaño (3, 6 o 12) y escoge tus sabores
• 🍰 Categorías: cajitas variadas, cajitas clásicas, bebidas y merch
• 🛍️ Carrito con subtotal, envío y total
• 💳 Métodos de pago (simulados): tarjeta, transferencia y efectivo
• ✅ Confirmación del pedido con número de orden
• 🎞️ Animaciones con Framer Motion y diseño responsive

Es un prototipo de frontend: no hay servidor ni base de datos, los pagos son simulados y el botón de WhatsApp es decorativo.

🛠️ Tecnologías

Capa	Tecnología
UI	React 19 + TypeScript
Bundler	Vite
Estilos	Tailwind CSS 4 (tema propio en src/index.css)
Animación	Framer Motion
Iconos	Lucide React

📁 Estructura

smartroll/
├── index.html
├── public/assets/
│   ├── icon.svg        # Logo genérico (reemplázalo por el tuyo)
│   └── mascot.svg      # Mascota genérica (reemplázala por la tuya)
└── src/
    ├── App.tsx         # Toda la experiencia: pasos, menú y carrito
    ├── index.css       # Tema (colores, fuentes, sombras neo)
    └── main.tsx

▶️ Ejecutar

npm install
npm run dev

Otros comandos:

npm run build     # Revisa tipos y genera la versión de producción en dist/
npm run preview   # Sirve el build localmente

🎨 Personalizar

• Productos, precios y sucursales: arreglos STORES, INDIVIDUAL_ROLLS y DATA al inicio de src/App.tsx.
• Colores y fuentes: @theme en src/index.css.
• Logo y mascota: reemplaza public/assets/icon.svg y public/assets/mascot.svg (o cambia las rutas en App.tsx).
• Fotos de producto: son enlaces de Unsplash; cámbialos por tus propias imágenes.

🗺️ Ideas pendientes

• Backend para guardar pedidos (por ejemplo con Supabase)
• Pasarela de pago real
• Envío del pedido por WhatsApp
• Búsqueda de dirección con autocompletado
• Persistir el carrito entre visitas

---

Hecho con ☕ por Andre Romero · GitHub