Spaces:
Running
Running
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
| <html lang="es" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HomeSync | Organiza las tareas del hogar</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Inter:wght@400;500&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F3F4F6; | |
| color: #1F2937; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .task-card { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| .animate-slideIn { | |
| animation: slideIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); | |
| } | |
| .calendar-day { | |
| min-height: 120px; | |
| } | |
| .draggable { | |
| cursor: grab; | |
| } | |
| .draggable:active { | |
| cursor: grabbing; | |
| } | |
| .dropzone { | |
| transition: background-color 0.2s ease; | |
| } | |
| .dropzone.active { | |
| background-color: #E0E7FF; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Floating CTA --> | |
| <div class="fixed bottom-6 right-6 z-50 animate-bounce"> | |
| <button class="gradient-bg text-white px-6 py-3 rounded-full shadow-lg hover:shadow-xl transition-all flex items-center gap-2"> | |
| <i data-lucide="user-plus"></i> | |
| <span>Crear cuenta</span> | |
| </button> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-40"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-lucide="home" class="text-indigo-600 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-indigo-600">HomeSync</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Funcionalidades</a> | |
| <a href="#how-it-works" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Cómo funciona</a> | |
| <a href="#faq" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Preguntas</a> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition-opacity"> | |
| Iniciar sesión | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <i data-lucide="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Funcionalidades</a> | |
| <a href="#how-it-works" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Cómo funciona</a> | |
| <a href="#faq" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Preguntas</a> | |
| <button class="block w-full text-left px-3 py-2 text-base font-medium text-white gradient-bg rounded mx-3"> | |
| Iniciar sesión | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 py-20 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="animate-slideIn"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Organiza tu hogar, visualmente</h1> | |
| <p class="text-lg mb-8 opacity-90">La forma más sencilla de coordinar las tareas domésticas con tu familia, roommates o pareja. Equitativo, claro y colaborativo.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all flex items-center gap-2"> | |
| <i data-lucide="play"></i> | |
| Ver demo | |
| </button> | |
| <button class="bg-indigo-900 bg-opacity-30 border border-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-40 transition-all flex items-center gap-2"> | |
| <i data-lucide="user-plus"></i> | |
| Crear cuenta | |
| </button> | |
| </div> | |
| </div> | |
| <div class="animate-fadeIn"> | |
| <div class="bg-white rounded-2xl shadow-2xl overflow-hidden"> | |
| <div class="bg-gray-100 p-3 flex items-center"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-7 gap-2 mb-4"> | |
| <div class="text-center text-xs text-gray-500">Lun</div> | |
| <div class="text-center text-xs text-gray-500">Mar</div> | |
| <div class="text-center text-xs text-gray-500">Mié</div> | |
| <div class="text-center text-xs text-gray-500">Jue</div> | |
| <div class="text-center text-xs text-gray-500">Vie</div> | |
| <div class="text-center text-xs text-gray-500">Sáb</div> | |
| <div class="text-center text-xs text-gray-500">Dom</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-2"> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"></div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"></div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"> | |
| <div class="task-card bg-blue-100 text-blue-800 p-2 rounded-md text-xs mb-2 draggable" draggable="true"> | |
| <div class="flex items-center gap-1"> | |
| <i data-lucide="utensils" class="w-3 h-3"></i> | |
| <span>Cocinar</span> | |
| </div> | |
| <div class="text-xxs mt-1">Juan - 19:00</div> | |
| </div> | |
| </div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"></div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50 dropzone"> | |
| <div class="task-card bg-purple-100 text-purple-800 p-2 rounded-md text-xs mb-2"> | |
| <div class="flex items-center gap-1"> | |
| <i data-lucide="shopping-cart" class="w-3 h-3"></i> | |
| <span>Compras</span> | |
| </div> | |
| <div class="text-xxs mt-1">Ana - Todo el día</div> | |
| </div> | |
| </div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"> | |
| <div class="task-card bg-green-100 text-green-800 p-2 rounded-md text-xs mb-2"> | |
| <div class="flex items-center gap-1"> | |
| <i data-lucide="broom" class="w-3 h-3"></i> | |
| <span>Limpiar</span> | |
| </div> | |
| <div class="text-xxs mt-1">Carlos - 10:00</div> | |
| </div> | |
| </div> | |
| <div class="calendar-day border border-gray-200 rounded-lg p-2 bg-gray-50"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Funcionalidades diseñadas para la convivencia</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">HomeSync hace que coordinar las tareas del hogar sea simple, visual y equitativo para todos los miembros.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.1s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="calendar-days" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Calendario visual</h3> | |
| <p class="text-gray-600">Organiza las tareas en un calendario semanal claro donde todos pueden ver quién hace qué y cuándo.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.2s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="users" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Perfiles personalizados</h3> | |
| <p class="text-gray-600">Asigna colores únicos a cada miembro para identificar rápidamente sus responsabilidades.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.3s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="repeat-2" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intercambio de turnos</h3> | |
| <p class="text-gray-600">Propón cambios de turno que otros pueden aceptar o rechazar con un simple clic.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.4s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="bell" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Recordatorios</h3> | |
| <p class="text-gray-600">Notificaciones automáticas por email o móvil para que nadie olvide sus tareas.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.5s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="tags" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Categorías de tareas</h3> | |
| <p class="text-gray-600">Organiza por tipos como limpieza, cocina, compras, etc. con íconos y colores.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow animate-fadeIn" style="animation-delay: 0.6s;"> | |
| <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="bar-chart-2" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Balance de tareas</h3> | |
| <p class="text-gray-600">Visualiza gráficos de distribución para asegurar equidad en las responsabilidades.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Cómo funciona HomeSync</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Sigue estos simples pasos para organizar las tareas de tu hogar de manera efectiva.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow text-center animate-slideIn" style="animation-delay: 0.1s;"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">1</div> | |
| <h3 class="text-xl font-bold mb-3">Crea tu hogar</h3> | |
| <p class="text-gray-600">Regístrate y crea un espacio para tu hogar con nombre y foto.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow text-center animate-slideIn" style="animation-delay: 0.2s;"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">2</div> | |
| <h3 class="text-xl font-bold mb-3">Añade miembros</h3> | |
| <p class="text-gray-600">Invita a todos los miembros de tu hogar por email o enlace.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow text-center animate-slideIn" style="animation-delay: 0.3s;"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">3</div> | |
| <h3 class="text-xl font-bold mb-3">Organiza tareas</h3> | |
| <p class="text-gray-600">Crea y asigna tareas arrastrándolas al calendario semanal.</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow text-center animate-slideIn" style="animation-delay: 0.4s;"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">4</div> | |
| <h3 class="text-xl font-bold mb-3">Coordina y vive</h3> | |
| <p class="text-gray-600">Intercambia turnos cuando sea necesario y disfruta de la armonía.</p> | |
| </div> | |
| </div> | |
| <!-- Demo Video --> | |
| <div class="mt-20 bg-white rounded-2xl shadow-xl overflow-hidden animate-fadeIn"> | |
| <div class="p-8 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Mira HomeSync en acción</h3> | |
| <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Descubre cómo HomeSync puede transformar la organización de las tareas domésticas en tu hogar.</p> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"> | |
| <div class="w-full h-96 flex items-center justify-center bg-gradient-to-r from-indigo-100 to-purple-100"> | |
| <button class="gradient-bg text-white p-4 rounded-full hover:opacity-90 transition-opacity"> | |
| <i data-lucide="play" class="w-8 h-8"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- User Panel Demo --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="animate-slideIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Panel de miembros personalizable</h2> | |
| <p class="text-lg text-gray-600 mb-6">Asigna colores únicos a cada miembro del hogar para identificar rápidamente sus responsabilidades en el calendario.</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Perfiles con foto y color distintivo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Fácil agregar o eliminar miembros</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Visualización de tareas asignadas por persona</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="animate-fadeIn"> | |
| <div class="bg-gray-50 p-8 rounded-2xl shadow-lg"> | |
| <h3 class="font-bold mb-6 text-lg">Miembros del hogar</h3> | |
| <div class="space-y-4"> | |
| <!-- Member 1 --> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">J</div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Juan</div> | |
| <div class="text-xs text-gray-500">5 tareas esta semana</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-4 h-4 rounded-full bg-blue-500"></div> | |
| <i data-lucide="settings" class="text-gray-400 w-4 h-4 hover:text-gray-600 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Member 2 --> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">A</div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Ana</div> | |
| <div class="text-xs text-gray-500">4 tareas esta semana</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-4 h-4 rounded-full bg-purple-500"></div> | |
| <i data-lucide="settings" class="text-gray-400 w-4 h-4 hover:text-gray-600 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Member 3 --> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Carlos</div> | |
| <div class="text-xs text-gray-500">6 tareas esta semana</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-4 h-4 rounded-full bg-green-500"></div> | |
| <i data-lucide="settings" class="text-gray-400 w-4 h-4 hover:text-gray-600 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <!-- Add Member --> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm border-2 border-dashed border-gray-300 hover:border-indigo-300 transition-colors cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500"> | |
| <i data-lucide="plus" class="w-5 h-5"></i> | |
| </div> | |
| <div class="ml-3 text-gray-500">Añadir miembro</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Task Types Demo --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="order-2 md:order-1 animate-slideIn"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg"> | |
| <h3 class="font-bold mb-6 text-lg">Tipos de tareas</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Task Type 1 --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
| <i data-lucide="utensils" class="w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium">Cocina</span> | |
| </div> | |
| <div class="text-xs text-gray-600">12 tareas esta semana</div> | |
| </div> | |
| <!-- Task Type 2 --> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2"> | |
| <i data-lucide="broom" class="w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium">Limpieza</span> | |
| </div> | |
| <div class="text-xs text-gray-600">8 tareas esta semana</div> | |
| </div> | |
| <!-- Task Type 3 --> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2"> | |
| <i data-lucide="shopping-cart" class="w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium">Compras</span> | |
| </div> | |
| <div class="text-xs text-gray-600">5 tareas esta semana</div> | |
| </div> | |
| <!-- Task Type 4 --> | |
| <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-2"> | |
| <i data-lucide="leaf" class="w-4 h-4"></i> | |
| </div> | |
| <span class="font-medium">Jardín</span> | |
| </div> | |
| <div class="text-xs text-gray-600">3 tareas esta semana</div> | |
| </div> | |
| <!-- Add Task Type --> | |
| <div class="bg-gray-50 p-4 rounded-lg border-2 border-dashed border-gray-300 hover:border-indigo-300 transition-colors cursor-pointer flex items-center justify-center"> | |
| <div class="flex items-center text-gray-500"> | |
| <i data-lucide="plus" class="w-5 h-5 mr-2"></i> | |
| <span>Añadir categoría</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="order-1 md:order-2 animate-fadeIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Categorías de tareas configurables</h2> | |
| <p class="text-lg text-gray-600 mb-6">Organiza las tareas por tipos como limpieza, cocina, compras, etc. Cada categoría puede tener su propio ícono y color para una identificación visual rápida.</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Crea categorías personalizadas para tu hogar</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Asigna íconos y colores a cada tipo de tarea</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Filtra el calendario por tipo de tarea</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Notifications Demo --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="animate-slideIn"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Recordatorios automáticos</h2> | |
| <p class="text-lg text-gray-600 mb-6">HomeSync envía notificaciones automáticas para que nadie olvide sus tareas asignadas. Configura recordatorios por email o notificaciones push en el móvil.</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Notificaciones push en la aplicación móvil</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Recordatorios por email personalizables</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check" class="text-green-500 w-5 h-5 mt-0.5 mr-2"></i> | |
| <span class="text-gray-700">Configura horarios de notificación por persona</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="animate-fadeIn"> | |
| <div class="relative"> | |
| <div class="bg-gray-800 rounded-2xl p-6 w-64 shadow-xl"> | |
| <div class="flex items-center mb-4"> | |
| <i data-lucide="bell" class="text-yellow-400 w-5 h-5 mr-2"></i> | |
| <span class="text-white font-medium">Recordatorio</span> | |
| </div> | |
| <div class="text-white text-sm mb-2">Hoy a las 18:00</div> | |
| <div class="bg-gray-700 rounded-lg p-3 mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-white text-sm">Juan</span> | |
| </div> | |
| <div class="text-white text-sm mt-1">Tienes asignado cocinar la cena</div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-xs text-gray-400 hover:text-white">Posponer</button> | |
| <button class="text-xs text-blue-400 hover:text-blue-300">Marcar hecho</button> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-lg w-64"> | |
| <div class="flex items-center mb-2"> | |
| <i data-lucide="mail" class="text-indigo-600 w-5 h-5 mr-2"></i> | |
| <span class="font-medium">Recordatorio por email</span> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-2">Hola Juan,</div> | |
| <div class="text-sm text-gray-600 mb-2">Este es un recordatorio de que tienes asignado cocinar la cena hoy a las 18:00.</div> | |
| <div class="text-xs text-gray-500">HomeSync - Organización del hogar</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Shift Exchange Demo --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Intercambio de turnos</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">¿Necesitas cambiar un turno? Propón un intercambio que el otro miembro puede aceptar o rechazar con un simple clic.</p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto animate-fadeIn"> | |
| <div class="grid grid-cols-1 md:grid-cols-2"> | |
| <!-- Request Side --> | |
| <div class="p-8 border-b md:border-b-0 md:border-r border-gray-200"> | |
| <h3 class="font-bold mb-6 text-lg flex items-center"> | |
| <i data-lucide="refresh-ccw" class="text-indigo-600 w-5 h-5 mr-2"></i> | |
| <span>Solicitud de cambio</span> | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">De</label> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3">J</div> | |
| <span>Juan</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Para</label> | |
| <div class="flex items-center bg-gray-50 p-3 rounded-lg"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold mr-3">A</div> | |
| <span>Ana</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tarea</label> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
| <i data-lucide="utensils" class="w-3 h-3"></i> | |
| </div> | |
| <span>Cocinar</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Viernes 15:00 - 18:00</div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Mensaje (opcional)</label> | |
| <textarea class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" rows="2" placeholder="Hola Ana, ¿podrías cubrirme este viernes? Tengo un compromiso..."></textarea> | |
| </div> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-lg w-full hover:opacity-90 transition-opacity"> | |
| Enviar solicitud | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Response Side --> | |
| <div class="p-8"> | |
| <h3 class="font-bold mb-6 text-lg flex items-center"> | |
| <i data-lucide="inbox" class="text-indigo-600 w-5 h-5 mr-2"></i> | |
| <span>Respuesta</span> | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Notification --> | |
| <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3">J</div> | |
| <div> | |
| <div class="font-medium">Juan te ha enviado una solicitud</div> | |
| <div class="text-sm text-gray-600 mt-1">¿Puedes cubrir cocinar el viernes 15:00 - 18:00?</div> | |
| <div class="text-xs text-gray-500 mt-2">Hace 2 horas</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message --> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="text-sm text-gray-600 mb-3">"Hola Ana, ¿podrías cubrirme este viernes? Tengo un compromiso familiar inesperado. ¡Gracias!"</div> | |
| </div> | |
| <!-- Actions --> | |
| <div class="grid grid-cols-2 gap-3 mt-6"> | |
| <button class="bg-green-100 text-green-800 px-4 py-2 rounded-lg hover:bg-green-200 transition-colors flex items-center justify-center"> | |
| <i data-lucide="check" class="w-4 h-4 mr-2"></i> | |
| Aceptar | |
| </button> | |
| <button class="bg-red-100 text-red-800 px-4 py-2 rounded-lg hover:bg-red-200 transition-colors flex items-center justify-center"> | |
| <i data-lucide="x" class="w-4 h-4 mr-2"></i> | |
| Rechazar | |
| </button> | |
| </div> | |
| <!-- Status --> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <div class="text-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i data-lucide="check" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-900">Cambio confirmado</h4> | |
| <p class="text-sm text-gray-600 mt-1">Ana ha aceptado cubrir tu turno. El calendario se ha actualizado automáticamente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Preguntas frecuentes</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Encuentra respuestas a las preguntas más comunes sobre HomeSync.</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <!-- FAQ Item 1 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden animate-fadeIn" style="animation-delay: 0.1s;"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-100 transition-colors"> | |
| <span class="text-lg font-medium">¿Puedo sincronizar HomeSync con Google Calendar?</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500 transform transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Sí, HomeSync ofrece integración con Google Calendar. Puedes sincronizar todas tus tareas asignadas para que aparezcan en tu calendario personal. Esta función está disponible en la versión Premium.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden animate-fadeIn" style="animation-delay: 0.2s;"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-100 transition-colors"> | |
| <span class="text-lg font-medium">¿Puedo gestionar múltiples hogares con una sola cuenta?</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500 transform transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Absolutamente. Con HomeSync puedes crear y gestionar tantos hogares como necesites. Por ejemplo, puedes tener un hogar para tu casa principal y otro para una casa de vacaciones. Cada hogar tiene su propio calendario y configuración independiente.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden animate-fadeIn" style="animation-delay: 0.3s;"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-100 transition-colors"> | |
| <span class="text-lg font-medium">¿Hay un límite en el número de miembros por hogar?</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500 transform transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">En la versión gratuita, el límite es de 5 miembros por hogar. Con la versión Premium, puedes añadir hasta 20 miembros por hogar. Si necesitas más, contáctanos para opciones empresariales.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden animate-fadeIn" style="animation-delay: 0.4s;"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-100 transition-colors"> | |
| <span class="text-lg font-medium">¿Cómo funciona el sistema de recordatorios?</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500 transform transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">HomeSync envía recordatorios automáticos por email y notificaciones push (si tienes la app móvil instalada) según la configuración de cada usuario. Puedes personalizar cuándo recibir los recordatorios (1 hora antes, 1 día antes, etc.) en tu configuración personal.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="bg-gray-50 rounded-2xl overflow-hidden animate-fadeIn" style="animation-delay: 0.5s;"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-100 transition-colors"> | |
| <span class="text-lg font-medium">¿HomeSync tiene aplicación móvil?</span> | |
| <i data-lucide="chevron-down" class="w-5 h-5 text-gray-500 transform transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-6 pt-0"> | |
| <p class="text-gray-600">Sí, HomeSync tiene aplicaciones nativas para iOS y Android disponibles en sus respectivas tiendas. La aplicación móvil incluye todas las funciones de la versión web más notificaciones push y la posibilidad de marcar tareas como completadas desde tu teléfono.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Support --> | |
| <div class="mt-16 bg-indigo-50 rounded-2xl p-8 text-center animate-fadeIn"> | |
| <div class="max-w-2xl mx-auto"> | |
| <i data-lucide="help-circle" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-3">¿Necesitas más ayuda?</h3> | |
| <p class="text-gray-600 mb-6">Nuestro equipo de soporte está aquí para ayudarte con cualquier pregunta o problema que puedas tener con HomeSync.</p> | |
| <button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity inline-flex items-center gap-2"> | |
| <i data-lucide="mail"></i> | |
| Contactar soporte | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">¿Listo para organizar tu hogar?</h2> | |
| <p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">Regístrate ahora y comienza a disfrutar de una convivencia más organizada y armoniosa.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-bold hover:bg-opacity-90 transition-all text-lg"> | |
| Comenzar gratis | |
| </button> | |
| <button class="bg-indigo-900 bg-opacity-30 border border-white px-8 py-4 rounded-lg font-bold hover:bg-opacity-40 transition-all text-lg flex items-center gap-2"> | |
| <i data-lucide="play"></i> | |
| Ver video demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold mb-4">HomeSync</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Acerca de</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Empleo</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Prensa</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold mb-4">Producto</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Funciones</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Precios</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">API</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Descargas</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Privacidad</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Términos</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Política de cookies</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Aviso legal</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold mb-4">Contacto</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center gap-2"> | |
| <i data-lucide="mail" class="w-4 h-4"></i> | |
| <a href="mailto:hola@homesync.app" class="hover:text-white transition-colors">hola@homesync.app</a> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-lucide="twitter" class="w-4 h-4"></i> | |
| <a href="#" class="hover:text-white transition-colors">@homesync</a> | |
| </li> | |
| <li class="flex items-center gap-2"> | |
| <i data-lucide="instagram" class="w-4 h-4"></i> | |
| <a href="#" class="hover:text-white transition-colors">@homesync.app</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-lucide="home" class="text-indigo-400 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-white">HomeSync</span> | |
| </div> | |
| <div class="mt-4 md:mt-0 text-sm"> | |
| © 2023 HomeSync. Todos los derechos reservados. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // FAQ toggle functionality | |
| const faqToggles = document.querySelectorAll('.faq-toggle'); | |
| faqToggles.forEach(toggle => { | |
| toggle.addEventListener('click', () => { | |
| const content = toggle.nextElementSibling; | |
| const icon = toggle.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Simple drag and drop demo | |
| const draggable = document.querySelector('.draggable'); | |
| const dropzone = document.querySelector('.dropzone'); | |
| draggable.addEventListener('dragstart', () => { | |
| draggable.classList.add('opacity-50'); | |
| }); | |
| draggable.addEventListener('dragend', () => { | |
| draggable.classList.remove('opacity-50'); | |
| }); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| if (e.target.classList.contains('dropzone')) { | |
| e.target.appendChild(draggable); | |
| } | |
| }); | |
| // Hide floating CTA on scroll down | |
| let lastScrollPosition = 0; | |
| const floatingCTA = document.querySelector('.fixed.bottom-6'); | |
| window.addEventListener('scroll', () => { | |
| const currentScrollPosition = window.pageYOffset; | |
| if (currentScrollPosition > lastScrollPosition) { | |
| // Scrolling down | |
| floatingCTA.classList.add('opacity-0', 'invisible'); | |
| } else { | |
| // Scrolling up | |
| floatingCTA.classList.remove('opacity-0', 'invisible'); | |
| } | |
| lastScrollPosition = currentScrollPosition; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thepipis/turnoscasa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |