Build Landing Pages in Minutes
Use the Astro Starter Kit to spin up a fully responsive landing page from scratch.
Example Landing Page
A complete page assembled from components, start here or copy src/pages/_template.astro
Create your landing page
Go to src/pages/index.astro and adjust the components as you need:
---
---
// Utils
import { getImage } from "astro:assets";
// Components
import BaseLayout from "@layouts/BaseLayout.astro";
import Hero from "@components/Hero/Hero.astro";
import Services from "@components/Services/Services.astro";
import SideBySide from "@components/SideBySide/SideBySide.astro";
import SideBySideReverse from "@components/SideBySideReverse/SideBySideReverse.astro";
import Gallery from "@components/Gallery/Gallery.astro";
import Testimonials from "@components/Testimonials/Testimonials.astro";
import FAQ from "@components/FAQ/FAQ.astro";
import CTASimple from "@components/CTA/CTASimple.astro";
// Optimize our landing image and pass it as props to the BaseLayout (for preloading) and Banner (for rendering)
import heroImage from "@assets/images/hero/hero3.jpg";
const optimizedHeroImage = await getImage({ src: heroImage, format: "webp" });
---
<BaseLayout title="Boilerplate" description="Meta description for the page" heroImage={optimizedHeroImage}>
<Hero image={optimizedHeroImage} />
<Services />
<SideBySide />
<SideBySideReverse />
<Gallery />
<Testimonials />
<FAQ />
<CTASimple />
</BaseLayout>
Preview Your Landing Page
Start your dev server with npm run dev and visit http://localhost:4321 to see your landing page live. The blog admin is at /admin.
Ready to Build Something Amazing?
You now have everything you need to create fast, SEO-optimized landing pages with Astro Starter Kit.