Navigation
Part 2

Hero Section

Full-screen hero sections for each theme.

The Hero section is the first thing visitors see. Each theme has its own unique hero design with custom animations, backgrounds, and layout.

Theme Variants

ThemeComponentDesign
LiquidHeroLiquid.astroAnimated SVG liquid blobs, gradient text
GlassHeroGlass.astroFrosted card hero with blur backgrounds
NeoHeroNeo.astroBold typography, high contrast
LuxuryHeroLuxury.astroGold accents, premium layout
MinimalHeroMinimal.astroClean, centered, distraction-free
AuroraHeroAurora.astroGradient mesh, geometric elements

All variants are located at src/components/sections/hero/.

How It Works

Each Hero variant is a self-contained Astro component that:

  1. Imports and initializes useTranslations() for the current locale.
  2. Renders its own unique HTML structure with theme-specific CSS.
  3. Loads translation keys like hero.title, hero.subtitle, hero.cta, and hero.liveBadge from src/locales/{lang}/hero.json.
HeroLiquid.astro (simplified)
---
import { useTranslations } from '../../../utils/i18n';
import { getLocaleFromUrl } from '../../../utils/locale-utils';


const locale = getLocaleFromUrl(Astro.url);
const t = useTranslations(locale);
---


<section>
  <h1>{t('hero.title')}</h1>
  <p>{t('hero.subtitle')}</p>
  <a href="#explore">{t('hero.cta')}</a>
</section>
ℹ️
No Props

Hero components take no external props. To change the headline, subtitle, or CTA text, edit src/locales/en/hero.json (or the appropriate locale file).

Customizing a Hero

To customize a specific theme’s hero:

  1. Open src/components/sections/hero/Hero{Theme}.astro.
  2. Modify the HTML structure, classes, or animations as needed.
  3. For CSS changes, edit src/styles/components/hero/Hero{Theme}.css.
  4. For text changes, edit src/locales/{lang}/hero.json.