AV

AstroVerse AI

Astro-first AI landing page

Docs index

Landing Architecture Overview

How the Astro landing page splits content, interaction, and capture while keeping the default payload lean.

Landing Architecture Overview

This starter treats the marketing site as a content-first system with carefully scoped interaction.

Start by locking narrative structure and semantic HTML, then spend animation and hydration budget only where it clearly improves comprehension.

What is inside the stack

  • Astro renders the narrative shell and the majority of static sections.
  • React islands are reserved for the AI demo, interactive cards, and a couple of motion-heavy surfaces.
  • Tailwind v4 tokens and custom component classes keep the visual system consistent.
  • Astro Actions handle form capture at the server boundary.
  • Bun and Biome keep installs, scripts, lint, and formatting aligned.

Layer model

The implementation is intentionally split into three layers:

  1. Narrative layer for hero copy, proof, SEO metadata, and docs.
  2. Interaction layer for React islands and targeted animation.
  3. Capture layer for semantic forms, validation, and submission.

If you want the operational view, jump to the shipping model doc.

If you want the documentation system itself, read docs-system.

The default route is English. Chinese content lives under/zh/*, while /en/* routes are lightweight redirects for compatibility.