Este proyecto es una landing page futurista inspirada en la estética Cyberpunk, diseñada en Figma y desarrollada utilizando el Astro Framework. La página es completamente responsive, aprovechando el poder de Sass para gestionar los estilos de manera eficiente. El diseño incorpora un enfoque moderno, utilizando CSS Grid, animaciones y degradados llamativos, y elementos visuales en SVG.
-
Diseño en Figma inspirado en Cyberpunk: Captura la esencia de un futuro distópico, con colores brillantes y efectos visuales avanzados que reflejan una estética tecnológica y futurista.
-
Desarrollada con Astro Framework: La implementación se realizó con Astro, aprovechando su rendimiento y capacidades modernas para crear una experiencia de usuario rápida y eficiente.
-
Animaciones fluidas con AOS (Animate On Scroll): Utilizamos la librería AOS para integrar animaciones dinámicas que se activan al hacer scroll, mejorando la interactividad y el dinamismo de la página.
-
Diseño responsivo con CSS Grid: El layout está organizado con CSS Grid, lo que permite una disposición flexible y adaptable en cualquier dispositivo, brindando una experiencia visual cohesiva en pantallas grandes y pequeñas.
-
Animaciones y degradados modernos: Se han incorporado degradados avanzados y animaciones CSS que hacen que el sitio web cobre vida, creando un entorno inmersivo para los usuarios.
-
Elementos SVG y gráficos vectoriales: Los gráficos SVG aportan un toque moderno y de alta calidad, manteniendo el rendimiento del sitio incluso con elementos visuales complejos.
- Figma
- Astro Framework
- AOS Scroll
- CSS Grid
- Sass
- SVG
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Feel free to check our documentation.