Navigation
Part 4

Features Section

Feature showcase sections for each theme.

The Features section highlights product or service benefits. Each theme provides a unique layout — from card grids to animated lists.

Theme Variants

ThemeComponentLayout
LiquidFeaturesLiquid.astroAnimated feature cards with liquid hover effects
GlassFeaturesGlass.astroFrosted glass feature cards
NeoFeaturesNeo.astroBold grid layout with sharp edges
LuxuryFeaturesLuxury.astroElegant grid with gold highlights
MinimalFeaturesMinimal.astroClean, simple list format
AuroraFeaturesAurora.astroGradient mesh background with card grid

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

Content Source

Feature data is loaded from src/locales/{lang}/features.json via useTranslations(). The JSON structure typically contains:

features.json (excerpt)
{
  "title": "Why Choose Us",
  "subtitle": "Built for performance and ease of use",
  "items": [
    {
      "title": "Lightning Fast",
      "description": "Static generation for sub-second load times."
    }
  ]
}
ℹ️
No Props

Features components take no external props. To edit feature items, titles, or descriptions, update src/locales/{lang}/features.json.

Customizing

To customize:

  1. Edit the theme variant in src/components/sections/features/Features{Theme}.astro.
  2. Adjust styles in src/styles/components/features/.
  3. Change content in src/locales/{lang}/features.json.