Juan Diego Moreno Upegui
83b0461f3b
- Refactored InitialSection.astro to use named slot (extraContent) instead of prop for flexible HTML/JSX content injection from parent components - Updated index.astro to utilize extraContent slot in InitialSection component - Replaced decorative background div in Layout.astro with inline SVG element, enabling dynamic color control via CSS variable (--naliia-n-bg-color) - Added .bg-svg class and --bg-svg-color variable in global.css for customizable SVG decorative background - Converted navbar logo from img to inline SVG with CSS-controlled gradient using linearGradient definition - Implemented gradient variables (--navbar-n-naliia-start, --navbar-n-naliia-end) for theme-aware logo coloring - Configured vertical gradient (bottom-to-top) with pink color at bottom for navbar logo - Added data-theme attribute support in Layout.astro for light/dark theme switching - Extended global.css with comprehensive color palette (pink, yellow, mistyRose variants) and semantic tokens - Refactored all color references to use CSS custom properties for consistent theming - Updated Footer.astro logo from img to inline SVG with gradient support matching navbar implementation - Replaced hardcoded color values in navbar.css and footer.css with semantic token variables - Added [data-theme='dark'] selector in global.css to support future dark mode implementation - Created reusable CSS variables for borders, backgrounds, and text colors across components - Improved pricing card layout with enhanced visual hierarchy and gradient-based pricing tiers - Restructured index.astro pricing section with improved feature presentation and layout
Astro Starter Kit: Basics
npm create astro@latest -- --template basics
🧑🚀 Seasoned astronaut? Delete this file. Have fun!
🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src
│ ├── assets
│ │ └── astro.svg
│ ├── components
│ │ └── Welcome.astro
│ ├── layouts
│ │ └── Layout.astro
│ └── pages
│ └── index.astro
└── package.json
To learn more about the folder structure of an Astro project, refer to our guide on project structure.
🧞 Commands
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 |
👀 Want to learn more?
Feel free to check our documentation or jump into our Discord server.