Awesome

Astro Landing Page <picture><source media="(prefers-color-scheme: dark)" srcset="https://astro.build/assets/press/astro-icon-light.png"><source media="(prefers-color-scheme: light)" srcset="https://astro.build/assets/press/astro-icon-dark.png"><img align="right" valign="center" height="79" width="63" src="https://astro.build/assets/press/astro-icon-dark.png" alt="Astro logo" /></picture>

An Astro + Tailwind CSS example/template for landing pages.

<div align="center">

</div>

Screenshots of Astro Landing Page

Features

💨 Tailwind CSS for styling
🎨 Themeable
- CSS variables are defined in src/styles/theme.css and mapped to Tailwind classes (tailwind.config.cjs)
🌙 Dark mode
📱 Responsive (layout, images, typography)
♿ Accessible (as measured by https://web.dev/measure/)
🔎 SEO-enabled (as measured by https://web.dev/measure/)
🔗 Open Graph tags for social media sharing
💅 Prettier setup for both Astro and Tailwind

Commands

Command	Action
`npm install`	Install dependencies
`npm run dev`	Start 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
`npm run format`	Format code with Prettier
`npm run clean`	Remove `node_modules` and build output

Credits

astronaut image
- source: https://github.com/withastro/astro-og-image; note: this repo is not available anymore
moon image
- source: https://unsplash.com/@nasa
other than that, a lot of material (showcase data, copy) was taken from official Astro sources, in particular https://astro.build/blog/introducing-astro/ and https://github.com/withastro/astro.build