Proyecto: Aplicación Web con html, css,javascript (react )para Carnicería
SAN VICENTE
Objetivo General
Crear una aplicación web moderna, atractiva y funcional para la carnicería
"San Vicente", que permita a los clientes explorar productos, conocer
precios actualizados y conectar directamente con el negocio, mejorando
así la experiencia de compra y visibilidad online.
Elementos Clave
Nombre: Carnicería San Vicente.
Tipo de Negocio: Distribuidora y venta al público de productos cárnicos.
Valores: Calidad, tradición, frescura, servicio personalizado.
Identidad Visual y Estilo
Paleta de Colores:
Rojo : Principal (representa la carne fresca y la vitalidad).
Amarillo: Secundario (alegre y apetitoso).
Tonos neutros : Blanco y gris oscuro para equilibrio visual y legibilidad.
Tipografía:
Fuentes limpias, legibles y profesionales:
Títulos: Montserrat o Poppins
Contenido: Open Sans , Roboto o similar
Estética General:
Diseño limpio, profesional y amigable.
Priorizar usabilidad , navegación intuitiva y experiencia de usuario (UX)
agradable.
Imágenes de alta calidad y consistentes en tamaño y estilo.
Estructura y Funcionalidades Principales
Página de Inicio (Home)
Banner principal : Con imagen destacada de producto o logo + eslogan.
Destacados : Ofertas del día o categorías populares.
Botón principal : “Ver Todos los Productos” / “Menú” tipo hamburguesa
Call to Action (CTA) : Ejemplo: “¡Compra ahora por WhatsApp!”
Catálogo de Productos
Características:
Filtrado por categoría : Res, Carnazas, Costilla para asado, vacio, Cerdo,
Pollo, Embutidos, Especialidades.
Cada producto debe mostrar:
Nombre del Corte.
Imagen de alta calidad.
Descripción breve (tipo de carne)
Precio en Guaraníes (₲) visible y formateado claramente
Integración automática de precios desde Google Sheets :
Actualización en tiempo real o periódica.
Mecanismo seguro y confiable para evitar errores.
ℹ️Sección "Sobre Nosotros" (Opcional pero Recomendado)
Misión y valores.
Fotos del local o del equipo humano.
Compromiso con la calidad y la tradición.
📞 Contacto:
Teléfono: 0973 543452
Dirección: Fulgencio Yegros
Horarios de atención. 7:00 hs a 21:00 hs
Formulario de contacto simple (opcional).
🌐 Diseño Responsivo
La aplicación debe verse bien y funcionar perfectamente en:
Escritorio
Tablets
Móviles
Optimización de Rendimiento
Imágenes optimizadas para carga rápida.
Uso eficiente de recursos y código limpio.
Velocidad de navegación prioritaria.
Footer (Pie de Página)
Información de contacto básica.
Enlaces a redes sociales (Facebook, Instagram, WhatsApp).
Derechos de autor y año actual.
Elementos Adicionales de Diseño
Animaciones sutiles : Hover efectos en productos, transiciones suaves.
Iconografía relevante : Íconos de carnes, reloj, teléfono, etc.
Botón fijo de WhatsApp : Flotante en todas las páginas para facilitar
consultas.
Consideraciones Técnicas
Tecnologías Sugeridas (no excluyentes):
Frontend : HTML5, CSS3, JavaScript (React.js recomendado para
dinamismo y facilidad de mantenimiento).
Backend (si necesario) : Node.js, u otro sistema sencillo.
Base de Datos : Google sheets.
Implementar integración segura para actualizar precios automáticamente.
Validación de datos y manejo de errores.
Seguridad:
Proteger acceso a la hoja de cálculo.
Evitar inyecciones XSS o vulnerabilidades comunes.
🧩 Extras Posibles (Futuras Ampliaciones)
Botón de "Llamar por WhatsApp" predefinido.
Integración con redes sociales (feed de Facebook/Instagram).
Sistema de pedidos básico (formulario de pedido por correo o WhatsApp).
Mapa interactivo con ubicación del local.
📁 Entregables del Proyecto
Archivos fuente del sitio web (HTML, CSS, JS, assets).
Documentación técnica del sistema (integración con Google Sheets,
estructura de archivos).
Manual de usuario básico para administradores (actualización de precios,
gestión de productos).
