⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⢠⡄⠀⠀⠀⠀⠀⠀⢠⡄⢸⡇⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⢠⡄⢸⡇⠀⠀⠀⠀⠀⠀⢸⡇⢸⡇⢸⡇⠀⠀⢸⡇⢀⡀⠀⠀⠀⠀⠀ ⠀⢠⡄⢸⡇⢸⡇⢸⡇⢀⡀⢰⡆⢸⡇⢸⡇⢸⡇⢰⡇⢸⡇⢸⡇⢠⡀⠀⠀⠀ ⠀⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⢸⡇⠀ ⠀⠘⠃⢸⡇⢸⡇⢸⡇⠈⠁⢸⡇⢸⡇⢸⡇⢸⡇⠸⡇⢸⡇⢸⡇⠘⠁⠀⠀⠀ ⠀⠀⠀⠈⠁⢸⡇⠀⠀⠀⠀⠀⠀⢸⡇⢸⡇⢸⡇⠀⠀⢸⡇⠈⠁⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠈⠁⠀⠀⠀⠀⠀⠀⠘⠃⢸⡇⢸⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀
🎧 Sound Wave - Landing Page
Bienvenidos al repositorio del proyecto Sound Wave, una landing page interactiva y dinámica diseñada para captar nuevos suscriptores de esta plataforma de música en streaming, posicionada como una fuerte competencia de Spotify. Nuestro equipo ha sido seleccionado para maquetar esta página siguiendo una maqueta previa creada por un UX Designer.
📌 Descripción del Proyecto Este proyecto tiene como objetivo desarrollar una landing page atractiva, informativa y funcional para la campaña de marketing digital de Sound Wave. La plataforma ofrecerá a los usuarios una experiencia envolvente con un diseño innovador y una navegación intuitiva, permitiéndoles explorar las ventajas del servicio y suscribirse fácilmente. La página será totalmente responsive, asegurando una visualización óptima en dispositivos móviles, tablets y escritorio. Para lograr esto, utilizaremos React.js junto con react-router-dom, y aplicaremos tecnologías de estilos como CSS Modules, Styled Components, o frameworks UI como Bootstrap, Tailwind o MUI.
🔧 Requerimientos Previos Antes de ejecutar este proyecto, asegúrate de tener instalados los siguientes programas en tu sistema: Node.js (versión 16 o superior) ➜ Descargar aquí Git ➜ Descargar aquí Visual Studio Code (o cualquier otro editor de código) ➜ Descargar aquí Además, necesitarás contar con una conexión a internet para instalar las dependencias necesarias.
🎯 Características Principales Diseño responsivo: La landing page se adaptará a cualquier dispositivo, garantizando una experiencia fluida en móviles, tablets y escritorio. Fidelidad a la maqueta: La interfaz será una réplica precisa del diseño entregado por UX Designer. Navegabilidad fluida: Implementación de react-router-dom para garantizar enlaces navegables entre secciones. Documentación clara: Los commits estarán relacionados con un checklist en la herramientas Trello para facilitar la gestión del proyecto. Seguridad en los inputs: Identificación y documentación de los campos de entrada con medidas de ciberseguridad.
💻 Tecnologías Utilizadas Front-end: HTML, CSS, JavaScript, React.js Diseño y Maquetación: CSS Modules, Styled Components, Bootstrap, Tailwind o MUI Herramientas de Desarrollo: Visual Studio Code Trello / Jira Git y GitHub
📋 Metodología y Fases del Proyecto 📌 Temas Principales Responsive Design (HTML - CSS) React con Vite React-router-dom v6 🔍 Requisitos Funcionales
La aplicación debe ser una single page application desarrollada con React.js. La página debe adaptarse a cualquier dispositivo. La navegación entre secciones debe ser funcional mediante react-router-dom. Los estilos deben implementarse utilizando alguna de las siguientes tecnologías: módulos CSS, styled components, o frameworks UI.
📂 Estructura del Proyecto / ── Raíz del Proyecto ├── /assets ── Imágenes, iconos y otros recursos multimedia ├── /src ── Código fuente │ ├── /components ── Componentes de React │ ├── /css ── Archivos de estilos CSS │ ├── /pages ── Páginas principales de la aplicación │ ├── /routes ── Configuración de rutas con react-router-dom │ ├── /index.js ── Punto de entrada principal │ ├── .gitignore ── Archivos a ignorar en Git ├── README.md ── Documentación principal del proyecto ├── package.json ── Dependencias y configuración del proyecto
🚀 Instalación y Uso Clonar el repositorio: git clone https://github.com/usuario/soundwave-landing.git Navegar a la carpeta del proyecto: cd soundwave-landing Instalar las dependencias: npm install Ejecutar el proyecto en modo desarrollo: npm run dev Abrir el navegador y acceder a: http://localhost:3000
📅 Planificación y Desarrollo 🔹 Fase 1: Diseño y Planificación Revisión de la maqueta en Figma Establecimiento del flujo de trabajo en Trello o Jira Configuración del repositorio y GitFlow 🔹 Fase 2: Desarrollo Implementación de la estructura base en React Integración de react-router-dom para la navegación Creación de los componentes principales 🔹 Fase 3: Estilización y Responsive Design Aplicación de estilos utilizando una de las tecnologías seleccionadas Implementación de media queries para garantizar adaptabilidad 🔹 Fase 4: Pruebas y Optimización Verificación de la funcionalidad y navegación Optimización de rendimiento y SEO Implementación opcional de tests unitarios
👥 Equipo de Desarrollo
Mariuxi Olaya Paola Morales Carol Mas Maria Bongoll Milena Ocoro 📌 Gracias por visitar nuestro repositorio. 🚀