HACKATON-1

ARJACAR - Landing Page de Equipamiento Deportivo Premium

Bienvenido a ARJACAR, una landing page moderna e interactiva para una tienda de equipamiento deportivo. Este proyecto demuestra nuestras habilidades de front-end de nivel profesional utilizando HTML, CSS y JavaScript. Su finalidad es funcionar como plantilla para tiendas de comercio electrónico reales.

---

🚀 Características

Esta landing page incluye las siguientes secciones y funcionalidades:

• Sección Principal (Hero Section): Un encabezado atractivo con el lema "Eleva Tu Juego" y una llamada a la acción.
• Sección de Productos:
  • Renderizado dinámico de productos desde JavaScript.
  • Buscador inteligente para filtrar productos en tiempo real.
  • Controles para ordenar los productos por precio, valoración y popularidad.
• Carrito de Compras Funcional:
  • Permite añadir y eliminar productos.
  • Barra lateral que muestra los productos en el carrito y el total.
  • Notificaciones animadas al interactuar con el carrito.
• Secciones Informativas:
  • Sobre Nosotros: Destaca las ventajas de la tienda como la calidad, el envío y el soporte.
  • Testimonios: Muestra opiniones de clientes.
  • Ubicación y Mapa: Incluye un mapa integrado para la tienda física.
  • Preguntas Frecuentes (FAQ): Resuelve dudas comunes sobre envíos, devoluciones y pagos.
• Formulario de Contacto: Permite a los usuarios suscribirse a un newsletter.
• Diseño Totalmente Responsivo: Se adapta a cualquier tamaño de pantalla, desde móviles hasta ordenadores de escritorio.
• Animaciones Modernas: Transiciones suaves y efectos visuales que mejoran la experiencia de usuario.

---

🛠️ Construido Con

• HTML5: Para una estructura semántica y accesible.
• CSS3: Para estilos personalizados, diseño responsivo y animaciones.
• JavaScript (ES6+): Para la lógica de la interfaz, la renderización de productos y la gestión del carrito, sin frameworks.
• Font Awesome: Para los iconos utilizados en toda la página.

---

📂 Estructura de Archivos

/ ├── index.html # Estructura principal de la landing page ├── script.js # Lógica de la aplicación (productos, carrito, etc.) ├── styles.css # Estilos, diseño responsivo y animaciones ├── images/ # Carpeta para las imágenes de productos y logo └── README.md

🖥️ Cómo Empezar

Para ejecutar el proyecto localmente:

1. Clona el repositorio:

   git clone [https://github.com/rojaslona/HACKATON-1.git](https://github.com/rojaslona/HACKATON-1.git)

2. Abre index.html en tu navegador. ¡No se requieren pasos de compilación ni dependencias!

---

✨ Personalización

• Añadir Productos: Modifica el array products en script.js para cambiar el inventario.
• Cambiar Estilos: Edita styles.css para ajustar la paleta de colores, las fuentes o las animaciones.
• Actualizar Contenido: Modifica el archivo index.html para cambiar textos, el logo o la información de contacto.

👥 Creadores

Este proyecto fue desarrollado por:

• Angélica Chin Cantillo
• Jose Alejandro Rojas Lona
• Raul de Jesus Vargas Hernandez
• Ramon Dominguez
• Alejandro Delgado
• Aylin Melendez Juan
• Carlos Ortiz Coreño
• José Manuel Hernandez Escutia