Eres un desarrollador frontend especializado en la implementación pixel-perfect de interfaces de usuario. Tu tarea es crear una réplica exacta de una aplicación de citas tipo Tinder basándote en el diseño proporcionado en public/design/image.png.
ANÁLISIS REQUERIDO:
Estudio del diseño de referencia:
Examina detalladamente cada pantalla del boceto (perfil, swipe intermedio, match)
Identifica el flujo de navegación y las transiciones entre pantallas
Documenta todas las interacciones: swipe left/right, tap en botones, animaciones
Anota las dimensiones y proporciones de cada elemento
Descomposición de componentes:
Layout principal: Estructura vertical centrada con espaciado consistente
Card de perfil: Imagen principal, nombre, profesión, botones de acción
Botones de acción: Rechazar (X), Super Like (estrella), Like (corazón)
Header: Ubicación y botón de filtros
Pantalla de match: Imágenes de ambos usuarios, mensaje de celebración, botones CTA
Sistema de diseño a implementar:
Colores: Primario rojo (#FF4F64), grises claros, degradados rosa/blanco
Tipografía: Sans Serif ligera con diferentes pesos (título, subtítulo, botones)
Espaciado: Grid base de 8px para alineación perfecta
Bordes: Radio consistente para tarjetas y botones
Sombras: Efectos sutiles para profundidad
ENTREGABLES ESPERADOS:
Código HTML/CSS/JavaScript que replique exactamente el diseño
Componentes reutilizables para elementos repetidos
Implementación responsive que funcione en diferentes dispositivos
Animaciones suaves para transiciones y gestos de swipe
Variables CSS organizadas para colores, tipografías y espaciados
CRITERIOS DE VALIDACIÓN:
Stack Tech: Next.js/Tailwindcss nada mas
Datos: Usar Datos Mocks
Fidelidad visual 1:1 con el diseño original
Funcionalidad completa de swipe y navegación
Responsive design optimizado para móviles
Código limpio y bien estructurado
Performance optimizada con imágenes y animaciones
Utiliza el archivo public/design/image.png como referencia visual maestra y asegúrate de que cada pixel coincida con el diseño original.
Quiero evolucionar la aplicación de matching tipo Tinder que hemos desarrollado. El objetivo es transformarla en una plataforma de networking especializada para el ecosistema emprendedor. En lugar de emparejar personas con fines sentimentales, la aplicación se centrará en conectar a 'personas con ideas' (emprendedores) con 'personas con capital' (inversores).
La funcionalidad de swipe se mantendrá como el mecanismo principal de interacción, pero el 'match' indicará un interés mutuo en una posible colaboración o inversión.
Necesito que la aplicación soporte dos tipos de perfiles de usuario principales:
Emprendedores: Usuarios que presentarán sus ideas de negocio, startups, o proyectos en busca de financiación, mentoría o socios estratégicos. Sus perfiles deben incluir información relevante como la descripción de la idea, etapa del proyecto, sector, necesidades de financiación, etc.
Inversores: Usuarios que buscan oportunidades de inversión, proyectos innovadores o talentos para apoyar. Sus perfiles deben reflejar sus áreas de interés de inversión, el tipo de capital que ofrecen (ángel, capital de riesgo, etc.), y su experiencia.
La aplicación debe utilizar datos mock para estos nuevos tipos de usuarios, asegurando que los perfiles sean realistas y reflejen la información clave que un emprendedor o inversor buscaría. El objetivo es replicar la experiencia de usuario fluida y atractiva de la aplicación de citas, pero adaptada al contexto de las conexiones de negocio
