Spaces:
Running
Running
Ctrl+K
1. Contexto general del sitio Tipo de proyecto: Aplicación web interactiva tipo dashboard. Propósito: Facilitar la organización equitativa y visualmente clara de los quehaceres domésticos semanales. Público objetivo: Familias, roommates, parejas o grupos de convivencia que desean coordinar las tareas del hogar de forma eficiente, visual y colaborativa. 2. Aplicación de referencia (si existe) Referencia visual: Trello (por su sistema drag-and-drop) Funcionalidad similar: Cozi y Notion (por su enfoque familiar y personalización visual) 3. Estructura sugerida del sitio (secciones únicas) Intro Hero interactivo con demo animada Calendario semanal interactivo drag-and-drop Panel de usuarios y personalización de colores Módulo de tareas y tipos configurables Sistema de recordatorios y notificaciones Módulo para intercambio de turnos con lógica de confirmación Preguntas frecuentes + soporte familiar Call to action persistente flotante (registro / login) 4. Descripción detallada de cada sección 1. Hero Interactivo: “Organiza tu hogar, visualmente” Contenido: Demo animada auto-reproducible mostrando cómo se arrastra una tarea al calendario. Estilo: Layout con fondo suave degradado + título grande, CTA doble (explorar demo / crear cuenta). Interacción: Efectos de aparición con scroll, íconos ilustrativos animados. 2. Calendario visual drag-and-drop Propósito: Vista semanal editable donde se pueden arrastrar tareas. Visual: Cuadrícula de días/horas con tarjetas coloreadas (tipo Trello). Extras: Tooltips al pasar sobre tareas, edición rápida al hacer doble click. 3. Panel de usuarios Contenido: Avatares circulares con nombres, cada uno con color asignado. Funcionalidad: Añadir miembros, elegir color, asignar ícono/tipo. Visual: Animación al agregar/editar miembros, integración con calendario. 4. Tipos de tareas Contenido: Categorías como “Cocina”, “Limpieza”, “Compras”, etc. Estilo: Etiquetas coloridas, configurables con ícono y tono. Interacción: Selector de tipo al crear una nueva tarea. 5. Recordatorios automáticos Contenido: Sistema de notificaciones por email y push (mockup visual). Visual: Representación animada de una notificación llegando al móvil. Extras: Configuración de recordatorios por miembro/tipo/tarea. 6. Intercambio de turnos Contenido: Flujo representado visualmente: miembro A propone → miembro B acepta. Estilo: UI tipo chat/confirmación, animaciones suaves de transición. Propósito: Fomentar flexibilidad sin perder control. 7. FAQ + Soporte Estilo: Diseño acorde con el resto del sitio, íconos animados de ayuda. Contenido: Preguntas útiles como “¿Puedo sincronizar con Google Calendar?”, “¿Puedo tener múltiples hogares?” 8. CTA flotante persistente Contenido: Botón siempre visible (crear cuenta / entrar). Estilo: Flotante, con animación de rebote suave, escondido en scroll descendente. 5. Diseño visual completo 🎨 Paleta de colores: Fondo principal: #F3F4F6 (gris claro) Acento primario: #4F46E5 (indigo 600) Éxito: #10B981 (verde 500) Alerta: #F59E0B (amarillo 500) Fondo tareas: #E0E7FF (indigo 100) Texto principal: #1F2937 (gris 800) 🔤 Tipografías (Google Fonts): Títulos: Poppins (700) Cuerpo: Inter (400 / 500) 🧩 Layout & Tailwind: max-w-7xl mx-auto px-4 py-10 grid grid-cols-1 md:grid-cols-2 gap-8 Sombra general: shadow-xl shadow-indigo-100 Bordes: rounded-2xl, border border-gray-200 Espaciado: space-y-6, gap-x-4 gap-y-6 Gradientes en botones: bg-gradient-to-r from-indigo-500 to-purple-500 Calendario: grid grid-cols-7 gap-2 📱 Diseño responsivo: Mobile first con sm:, md: y lg: breakpoints bien utilizados. Menú collapsible en móvil con animación de despliegue. Drag-and-drop funcional en pantallas táctiles (simulado en prototipo). 🌟 Extras sugeridos: Scroll suave (scroll-smooth) Transiciones sutiles (transition-all duration-300 ease-in-out) Animaciones con framer-motion o animaciones CSS (animate-fadeIn, animate-slideIn) Uso de íconos lucide-react o Heroicons para UI semántica. - Initial Deployment
6e7d446
verified