Section Components Overview

Section components are the building blocks of each theme page. Every theme page is composed of 12+ sections, each with a dedicated variant per theme.

Available Sections

Hero

Full-screen landing sections with theme-specific animations.

About

Company or product introduction sections.

Features

Product feature showcases with grids, lists, and cards.

Portfolio

Project galleries and showcases.

Pricing

Pricing tables with plans and comparisons.

Testimonials

Social proof and customer reviews.

FAQ

Frequently asked questions with accordion UI.

CTA

Call to action sections to drive conversions.

Contact

Contact forms with Valibot validation.

Navbar

Theme-specific header and navigation bars.

Footer

Site footers with links, socials, and branding.

How It Works

Each section has 6 theme variants — one for each theme (Liquid, Glass, Neo, Luxury, Minimal, Aurora). The dynamic page at src/pages/[theme].astro uses a component map to render the correct variant:

---
// Simplified from [theme].astro
const componentMap = {
  liquid: { Hero: HeroLiquid, About: AboutLiquid, ... },
  glass:  { Hero: HeroGlass,  About: AboutGlass,  ... },
  // neo, luxury, minimal, aurora...
};

const components = componentMap[themeId];
---

<components.Hero />
<components.About />
<components.Features />

ℹ️

No External Props

Section components accept no props. All text content is loaded internally via useTranslations() from src/locales/{lang}/{section}.json. To change the content of any section, edit the corresponding locale JSON file.

File Structure

Each section follows a consistent directory pattern:

src/components/sections/{section}/
├── {Section}Liquid.astro
├── {Section}Glass.astro
├── {Section}Neo.astro
├── {Section}Luxury.astro
├── {Section}Minimal.astro
└── {Section}Aurora.astro

CSS for each section lives in src/styles/components/{section}/.