Clon de Airtable: base de datos flexible

Crea una landing page web premium llamada “Airtable Clone 3D”. Objetivo: Desarrollar una landing page moderna, inmersiva, tecnológica y funcional para presentar una plataforma tipo base de datos visual, spreadsheet inteligente, gestor de proyectos, CRM flexible, workspace colaborativo, automatizador de procesos y dashboard operativo. La página debe mostrar cómo los usuarios pueden organizar datos, crear tablas, vistas Kanban, calendarios, formularios, automatizaciones, dashboards, integraciones, permisos, plantillas y workflows. Debe incluir canvas 3D, animaciones de scroll 3D, efectos parallax, tablas 3D, tarjetas flotantes, vistas interactivas, filtros, formularios, pricing, CTA, formulario funcional y botones totalmente operativos. Concepto principal: La web debe sentirse como entrar a un workspace de datos en 3D. A medida que el usuario hace scroll, la cámara debe recorrer un universo visual de bases, tablas, registros, columnas, filas, tarjetas Kanban, calendarios, formularios, dashboards, integraciones, nodos de automatización y paneles colaborativos. Cada sección debe explicar cómo una empresa puede transformar datos dispersos en un sistema claro, visual y automatizado. El scroll debe controlar la cámara, la profundidad visual, la aparición de tablas, el cambio entre vistas, el dibujo de workflows, la activación de automatizaciones y la transición hacia conversión. Requisitos principales: Crear una landing page completa, moderna, funcional y responsive. Nombre o ruta sugerida: “airtable-clone”. Incluir un canvas 3D visible e integrado en la experiencia principal. Agregar animaciones de scroll 3D. Agregar efectos parallax en textos, tablas, celdas, registros, columnas, tarjetas Kanban, calendarios, dashboards, nodos, formularios, botones, iconos, líneas de datos y fondos. Crear una experiencia enfocada en bases de datos visuales, organización, colaboración, automatización, dashboards, plantillas, integraciones, productividad y conversión. Todos los botones deben funcionar correctamente. Optimizar para desktop, tablet y móvil. Usar animaciones suaves, claras, precisas y con buen rendimiento. Mantener la escena limpia, premium, ordenada, tecnológica y fácil de navegar. Usar márgenes amplios, separación clara entre secciones y buena jerarquía visual. Evitar copiar logos, nombres de marca o identidad visual exacta de Airtable; crear una plataforma original de workspace visual. Trabajar libremente para mejorar la escena 3D, la narrativa de datos, las vistas interactivas, las automatizaciones, el parallax y el flujo de conversión. Organización visual obligatoria: Usar contenedores centrados con max-width de 1200px o 1280px. Cada sección debe tener padding vertical amplio: 96px a 140px en desktop. En móvil, usar padding cómodo de 24px a 32px. Usar gaps generosos entre cards: 24px, 32px o 48px. No amontonar textos, tablas, dashboards, botones, formularios ni tarjetas. Separar cada módulo con suficiente espacio visual. Usar fondos alternados, gradientes suaves, bloques glassmorphism, líneas de datos, grids o divisores sutiles. Los títulos deben tener espacio antes y después. Los botones deben tener margen suficiente respecto al texto. Las cards deben tener padding interno amplio. Las tablas deben tener filas y columnas legibles, con espacio claro entre elementos. La página debe sentirse escaneable, productiva, premium y ordenada. Estructura de la página: Header / Navbar: Logo: “DATAGRID 3D” Menú: Home, Workspace, Views, Automations, Templates, Integrations, Pricing, Contact Botón destacado: “Start Free” Botón secundario: “View Demo” Header fijo con fondo translúcido tipo glassmorphism claro u oscuro. Menú móvil tipo hamburguesa funcional. Scroll suave hacia cada sección. Agregar microinteracciones: Logo con animación sutil de celda o grid. Enlaces con underline animado. Botones con elevación, glow azul/morado y feedback visual. Menú móvil con transición limpia. Hero Section: Título principal: “Build Visual Databases, Workflows and Dashboards in a 3D Workspace” Subtítulo: “Organize projects, teams, content, CRM, operations and automations with flexible tables, Kanban boards, calendars, forms and connected dashboards.” Barra principal de acción: Input: “What do you want to organize?” Selector: “Team / Project / CRM / Content / Operations” Botón: “Generate Workspace” Botones: “Explore 3D Workspace”: activa una animación guiada en el canvas 3D. “View Templates”: hace scroll hacia Templates. “Start Free”: hace scroll hacia Pricing o Signup. Fondo con workspace 3D: tablas flotantes, celdas, columnas, tarjetas Kanban, calendarios, dashboards, formularios, nodos de automatización, iconos de apps, líneas de conexión, partículas suaves y profundidad visual. Agregar parallax entre título, input, tablas, tarjetas, celdas, dashboards, nodos, iconos y fondo. El hero debe tener composición clara, mucho aire visual y CTA visible. Canvas 3D / Visual Database Workspace: Crear una escena 3D dentro de un canvas. La escena debe representar un workspace de datos visual en 3D. Incluir: Tabla 3D central con filas y columnas. Celdas flotantes. Registros expandibles. Columnas con diferentes tipos de campo. Tarjetas Kanban. Calendario. Vista gallery. Vista timeline. Form builder. Dashboard con métricas. Nodos de automatización. Líneas de conexión. Avatares de colaboradores. Comentarios flotantes. Permisos y roles. Plantillas. Iconos de integraciones. CTA flotante para iniciar. Luces suaves, sombras limpias, glassmorphism y profundidad visual. El usuario debe poder explorar visualmente la escena con movimiento suave. El botón “Explore 3D Workspace” debe activar una animación visible donde la cámara entra a una tabla, convierte registros en tarjetas Kanban, cambia a calendario, conecta automatizaciones y termina frente al CTA de “Start Free”. Agregar hotspots interactivos: “Grid View” “Kanban Board” “Calendar View” “Form Builder” “Automation Flow” “Dashboard” “Integrations” “Start Free” Cada hotspot debe mostrar información breve al hacer hover o clic. Scroll 3D Storytelling: Al hacer scroll, la cámara debe avanzar por capítulos: Datos dispersos. Tabla central. Vistas flexibles. Colaboración. Formularios. Automatizaciones. Dashboards. Integraciones. Plantillas. Pricing y registro. Usar transformaciones 3D: translateZ para profundidad. scale para destacar tablas, registros, tarjetas, dashboards y CTAs. rotate suave para celdas, tarjetas, nodos, iconos y badges. fade para transiciones limpias. blur sutil para elementos lejanos. movimiento de cámara tipo fly-through por un workspace digital. split animation para separar datos, vistas, automatizaciones y reporting. Crear capas parallax: Capa frontal: títulos, botones, CTAs, filtros, precios y tarjetas. Capa media: tablas, Kanban, calendarios, dashboards, formularios, nodos y hotspots. Capa de fondo: grids, líneas de datos, integraciones, avatares, partículas, sombras y arquitectura abstracta. Los elementos del fondo deben moverse más lento para generar profundidad. Las tablas, tarjetas y dashboards deben aparecer desde profundidad usando translateZ, scale y fade. La experiencia debe sentirse como un producto SaaS premium: claro, flexible, colaborativo, visual y listo para convertir. Product Overview Section: Título: “One Flexible Workspace for Every Team” Explicar que la plataforma permite crear bases de datos visuales para proyectos, CRM, contenido, inventario, eventos, operaciones, soporte, hiring, producto y workflows personalizados. Incluir 4 tarjetas: “Visual Databases” “Custom Views” “Workflow Automation” “Team Collaboration” Cada tarjeta debe tener icono, descripción breve y animación de entrada con scroll. Agregar parallax con celdas, tablas, vistas, avatares y líneas de conexión. Views Section: Mostrar vistas principales: Grid view. Kanban board. Calendar view. Gallery view. Timeline view. Form view. Dashboard view. List view. Cada vista debe incluir: Descripción. Mejor uso. Ejemplo de equipo. Botón “Open View” Botón “Switch View” “Open View” debe abrir panel visual. “Switch View” debe transformar visualmente una tabla en la vista seleccionada. Las transiciones entre vistas deben sentirse suaves, con morphing visual. Grid / Table Builder Section: Crear constructor de tabla visual. Incluir tipos de campo: Text. Number. Single select. Multi select. Date. Attachment. Checkbox. Link record. Formula. Collaborator. Status. Botones: “Add Field” “Add Record” “Expand Record” “Sort Data” “Filter Data” “Add Field” debe agregar columna visual simulada. “Add Record” debe agregar fila simulada. “Expand Record” debe abrir detalle de registro. “Sort Data” debe reorganizar filas. “Filter Data” debe filtrar registros. Usar celdas flotantes, líneas limpias y microinteracciones. Automations Section: Crear builder de automatizaciones. Mostrar flujo: Trigger. Condition. Action. Notification. Update record. Send email. Create task. Sync integration. Ejemplos: “When status changes, notify team.” “When form is submitted, create record.” “When due date is near, send reminder.” “When deal is won, create onboarding task.” Botones: “Run Automation” “Edit Flow” “Add Trigger” “Reset Flow” “Run Automation” debe animar nodos y mostrar confirmación. “Edit Flow” debe abrir panel. “Add Trigger” debe agregar nodo visual. “Reset Flow” debe restaurar flujo. Las líneas deben dibujarse progresivamente con scroll. Dashboard Section: Crear dashboard visual: Total records. Active projects. Tasks completed. Revenue pipeline. Team workload. Upcoming deadlines. Form submissions. Automation runs. Las métricas deben animarse con conteo progresivo. Botones: “Open Dashboard” “Customize Widgets” “Export Report” “Open Dashboard” debe abrir panel. “Customize Widgets” debe cambiar widgets. “Export Report” debe mostrar confirmación. Templates Section: Mostrar plantillas: Project Tracker. CRM Pipeline. Content Calendar. Product Roadmap. Hiring Tracker. Event Planner. Inventory Manager. Bug Tracker. Client Portal. Marketing Campaigns. Cada plantilla debe incluir: Categoría. Descripción. Ideal para. Campos incluidos. Botón “Preview Template” Botón “Use Template” “Preview Template” debe abrir vista previa. “Use Template” debe seleccionar plantilla y mostrar confirmación. Las tarjetas deben tener hover 3D, buena separación y diseño claro. Collaboration Section: Mostrar colaboración: Comments. Mentions. Shared views. Roles and permissions. Activity history. Assigned records. Approval flow. Team avatars. Cada elemento debe tener tarjeta y botón “View Collaboration Feature”. “View Collaboration Feature” debe abrir detalle. Agregar avatares flotantes, comentarios, badges y parallax. Forms Section: Crear form builder: Text input. Email. File upload. Dropdown. Date picker. Rating. Long text. Submit button. Botones: “Build Form” “Preview Form” “Submit Test Form” “Build Form” debe ensamblar campos. “Preview Form” debe abrir vista de formulario. “Submit Test Form” debe crear registro simulado y mostrar confirmación. Integrations Section: Mostrar integraciones: Slack. Google Drive. Gmail. Microsoft Teams. Notion. Jira. Stripe. Zapier. Make. Webhooks. API. Cada integración debe aparecer como nodo, cubo o badge. Al hacer hover, debe mostrar qué conecta. Botón “Explore Integrations” debe abrir mapa de conexiones. Botón “Request Integration” debe abrir formulario corto. Las líneas de conexión deben animarse con scroll. Use Cases Section: Mostrar casos de uso: Product teams. Marketing teams. Sales teams. Operations. HR and recruiting. Content creators. Agencies. Startups. Education. Nonprofits. Cada caso debe incluir: Problema. Solución. Resultado esperado. Plantilla recomendada. Botón “Explore Use Case” “Explore Use Case” debe abrir panel o filtrar templates. Security / Admin Section: Mostrar features enterprise: Role-based permissions. Workspace controls. Audit logs. Data backup. SSO placeholder. API controls. Private views. Field permissions. Cada feature debe tener tarjeta, icono y descripción. Botón “View Admin Controls” debe abrir panel informativo. Usar estética sobria, azul profundo, vidrio y líneas seguras. Pricing Section: Mostrar planes: Free. Starter. Pro. Team. Enterprise. Cada plan debe incluir: Precio ficticio. Número de bases. Registros. Automatizaciones. Vistas. Integraciones. Soporte. Permisos. Botón “Choose Plan” Botón “Start Trial” “Choose Plan” debe seleccionar plan y mostrar resumen. “Start Trial” debe llevar a Signup o Contact. Destacar “Pro” como recomendado. Mantener diseño claro, comparativo y con cards separadas. Testimonials Section: Agregar testimonios ficticios: “We replaced scattered spreadsheets with one visual workspace.” “The views and automations made our operations clear and repeatable.” “The dashboards helped our team make decisions faster.” Usar tarjetas con glassmorphism, sombras suaves y animaciones de aparición. FAQ Section: Preguntas frecuentes: “Can I create multiple databases?” “Can I switch between grid, Kanban and calendar views?” “Can forms create records automatically?” “Can I automate repetitive tasks?” “Can teams collaborate in real time?” “Can I connect external tools?” “Is this mobile responsive?” Cada pregunta debe expandirse y contraerse correctamente. Agregar microanimaciones suaves. Contact / Signup Section: Crear formulario funcional con: Name. Email. Company. Team Size. Use Case. Current Tool. Plan Interest. Message. Botón: “Create My Workspace” Validar campos básicos. Mostrar mensaje de confirmación con resumen de solicitud. Incluir opción de newsletter y calendario visual simulado para demo. Footer: Incluir: Logo. Links rápidos. Workspace. Views. Automations. Templates. Integrations. Pricing. Contact. Terms. Privacy. Social links. Mantener diseño limpio, amplio, tecnológico y profesional. Interacciones obligatorias: El menú debe navegar con scroll suave a cada sección. “Explore 3D Workspace” debe activar animación guiada en el canvas 3D. “View Templates” debe llevar a Templates. “Start Free” debe llevar a Pricing o Signup. “Generate Workspace” debe mostrar un workspace simulado según la opción elegida. Los hotspots del canvas deben mostrar información. “Open View” debe abrir panel visual. “Switch View” debe transformar tabla en vista seleccionada. “Add Field” debe agregar columna visual simulada. “Add Record” debe agregar fila simulada. “Expand Record” debe abrir detalle. “Sort Data” debe reorganizar filas. “Filter Data” debe filtrar registros. “Run Automation” debe animar nodos y mostrar confirmación. “Edit Flow” debe abrir panel. “Add Trigger” debe agregar nodo visual. “Reset Flow” debe restaurar flujo. “Open Dashboard” debe abrir panel. “Customize Widgets” debe cambiar widgets. “Export Report” debe mostrar confirmación. “Preview Template” debe abrir vista previa. “Use Template” debe seleccionar plantilla y mostrar confirmación. “View Collaboration Feature” debe abrir detalle. “Build Form” debe ensamblar campos. “Preview Form” debe abrir vista. “Submit Test Form” debe crear registro simulado y mostrar confirmación. Los nodos de integración deben mostrar información al hover. “Explore Integrations” debe abrir mapa. “Request Integration” debe abrir formulario corto. “Explore Use Case” debe abrir panel o filtrar templates. “View Admin Controls” debe abrir panel. “Choose Plan” debe seleccionar plan y mostrar resumen. “Start Trial” debe llevar a Signup o Contact. FAQ debe expandirse y cerrarse correctamente. “Create My Workspace” debe validar campos y mostrar confirmación. El formulario debe validar campos y mostrar confirmación. El menú móvil debe abrir y cerrar correctamente. El scroll debe activar animaciones 3D y parallax. Todos los botones deben tener hover, active state y feedback visual. Animaciones de scroll 3D y parallax: Al hacer scroll, la cámara debe moverse desde el hero hacia la tabla central, vistas, automatizaciones, dashboards, plantillas, integraciones, pricing y signup. Las celdas deben aparecer desde profundidad usando translateZ, scale y fade. Las columnas deben expandirse lateralmente con animación suave. Las filas deben deslizarse como registros vivos. Las tarjetas Kanban deben organizarse en columnas con morphing desde grid. El calendario debe desplegarse como plano 3D. Los nodos de automatización deben encenderse secuencialmente. Las líneas de conexión deben dibujarse progresivamente. Los dashboards deben activar gráficos, barras, KPIs y contadores. Los formularios deben ensamblarse campo por campo. Las plantillas deben aparecer como bloques reutilizables. Las integraciones deben conectarse con líneas luminosas. Las tarjetas de pricing deben elevarse con hover 3D. El formulario de signup debe aparecer con transición limpia desde profundidad. Los fondos, grids, partículas, líneas de datos, iconos lejanos y sombras deben moverse más lento para generar profundidad. Agregar glow azul/cian/morado, reflejos de cristal, sombras limpias, partículas suaves, líneas de datos, motion trails sutiles y sensación de workspace inteligente. Evitar movimientos bruscos, rápidos o caóticos. La experiencia debe sentirse como un SaaS premium de productividad: clara, flexible, visual, potente, colaborativa y lista para convertir. Estilo visual: Tecnológico, productivo, limpio, flexible, premium, colaborativo y confiable. Inspiración visual: herramientas de base de datos visual, spreadsheets modernos, SaaS dashboards, project management tools, workflows automatizados, CRMs visuales, no-code tools, paneles de operaciones y workspaces colaborativos. Paleta sugerida: Blanco frío. Azul noche. Cian eléctrico. Morado tecnológico. Verde éxito. Coral suave para acentos. Gris grafito. Negro profundo. Amarillo suave para estados destacados. Usar glassmorphism, tarjetas limpias, tablas 3D, dashboards, celdas flotantes, nodos, líneas de conexión, avatares, sombras suaves, bordes redondeados y composición respirable. Tipografía moderna, legible, profesional y orientada a producto. Composición clara, modular, espaciosa y de alto nivel. Botones con microinteracciones suaves. Sensación de orden, productividad, flexibilidad, automatización, colaboración, claridad y escalabilidad. Resultado esperado: Una landing page completa, inmersiva y funcional para “Airtable Clone 3D”, con canvas 3D, workspace de datos visual, tablas, vistas Grid/Kanban/Calendar/Gallery/Timeline/Form/Dashboard, constructor de tablas, automatizaciones, dashboards, plantillas, colaboración, formularios, integraciones, casos de uso, seguridad, pricing, testimonios, FAQ, signup, formulario funcional, scroll animations 3D, parallax, hotspots, botones funcionales, diseño responsive, márgenes amplios, separación clara entre componentes y estética premium de SaaS colaborativo. Trabaja con libertad creativa para mejorar la escena 3D, las tablas, las vistas, los workflows, las automatizaciones, los dashboards, las plantillas, las microinteracciones, la arquitectura visual, el parallax, las animaciones y el flujo de conversión. Prioriza que la página se vea como una web real de alto nivel para presentar una plataforma visual de bases de datos, explicar valor rápido, mostrar flexibilidad, generar confianza y convertir visitantes en usuarios registrados, equipos o demos solicitadas.