Add improved landing page with better readability and animations#1
Open
alipiomg wants to merge 17 commits into
Open
Add improved landing page with better readability and animations#1alipiomg wants to merge 17 commits into
alipiomg wants to merge 17 commits into
Conversation
- Light blue text (#c4d6f0) on dark background for better readability - Increased base font size to 18px (+2px) - Scroll reveal animations with staggered entry - Scroll progress bar, hover effects with glow and shimmer - Fully responsive layout for mobile (768px and 480px breakpoints) https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Feature cards, req cards, and troubleshoot cards now silver (#c8cdd6) - Card text changed to indigo blue (#2e1f6f / #3b2d80) - Bold text made more visible with darker/yellow colors - Changed supercursos.ai to supercursos.es https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- All accent colors changed from green to indigo blue (#6366f1) - Logo, badges, links, labels, highlights all indigo - Gradient CTA button (indigo to purple) - Hero section with radial glow backdrop - Background grid pattern with mask fade - Parallax twinkling stars effect - 4th glow orb added for richer atmosphere - Dividers now use indigo gradient - Code block headers with subtle indigo tint - Step connectors in indigo - Tip box restyled to match indigo theme https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Full-screen preloader with animated neural core - 3 spinning orbital rings - 12 pulsing tendrils radiating from center with glow nodes - Logo text with shimmer effect - "Cargando sistema..." with animated dots - Smooth fade-out after 2.2s, then removed from DOM https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Preloader shows neural network image as background - Hero section has video background with dark gradient overlay - Image loads eagerly as placeholder, video lazy loads after preloader - Video fades in smoothly over the image once loaded - Dark gradient overlay ensures text readability over video https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Hero wrapper spans full viewport width (100vw) - Heading changed to "Aprender / Enseñando" in white with text-shadow - Subtitle color changed to white 85% opacity with shadow for readability - Video playback rate set to 0.5x (half speed) https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Nav fijo con glassmorphism (blur + transparencia) y más estrecho - Badge actualizado: "Gratis · Sistema Automatizado" en blanco - Subtítulo en negrita con más letter-spacing y text-shadow - Botón "Guía Gratuita" ahora descarga PDF - Creada guía PDF completa con pasos de configuración https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Added margin-top to hero-wrapper so image/video starts below fixed nav - Increased overlay opacity (0.55-0.7 vs 0.3-0.5) for better text contrast https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Restructured HTML: nav closes container, hero-wrapper is outside - Hero now naturally sits below the fixed nav (margin-top: 52px) - Re-opens container after hero for remaining content - h1 letter-spacing increased to 0.15em for spaced-out look https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Hero min-height 85vh so brain image shows fully - object-position: center top so image anchors from top (no crop) - "Guía Gratuita" button opens a styled glassmorphism modal - Modal has warm copy, feature checklist, and PDF download button - Click outside or X to close modal https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Nav: remove background, blur, and border for clean transparent look - Nav-tag button: transparent bg with subtle border - Hero: min-height 100vh, no margin-top, image starts from top edge - object-position center center for balanced brain display https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
- Logo: white color with text-shadow for contrast - Guide button: semi-transparent purple bg with blur, white text - Both clearly visible over the dark brain image https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
Nav was nested inside .container which broke the stacking context, making the hero overlay visually cover the logo and button. https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
The hero-wrapper was accidentally nested inside .container which has max-width, causing it to not span the full viewport width. https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
…estimonials, FAQ accordion, newsletter, footer Nuevas secciones: - Contador animado de métricas (investigaciones, tiempo ahorrado, vídeos/búsqueda, setup) - Comparativa Antes vs Después (4h manuales vs 5 min con IA) - Mockup visual del resultado con barras animadas - Pricing transparente (sistema gratis + Claude Pro $20/mes desglosado) - 3 testimonios con avatares y ratings - FAQ desplegable con 8 preguntas - Newsletter con formulario - Footer completo con 4 columnas y iconos sociales - Botón flotante de WhatsApp Mejoras técnicas: - Meta tags SEO (Open Graph, Twitter, keywords) - Favicon SVG - Menu de navegación con burger en móvil - Smooth scroll con offset para el nav fijo - JS contador animado con easing cúbico - Barras mockup animan al entrar en viewport https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://claude.ai/code/session_017aSYD9vispcY1ocpMMYd9H