File: src/blocks/hero/Hero08.astro

Centered hero with optional brand mark, CTAs, and a row of Lucide feature boxes.

Config (blocks.ts → hero08)

hero08: {
    width: "wide",
    logo: "/images/logo/baselayer-logo-black.svg",
    logoDark: "/images/logo/baselayer-logo-white.svg",
    logoAlt: "Baselayer",
    logoSize: "md",
    heading: "Ship a polished site without rebuilding the foundations",
    subheading:
      "Centered hero with optional brand mark, clear CTAs, and a short set of feature highlights for what makes the product or offer distinct.",
    primaryCta: "View my work",
    primaryCtaUrl: "/work/",
    secondaryCta: "Get in touch",
    secondaryCtaUrl: "/contact/",
    features: [
      {
        icon: "zap",
        title: "Fast by default",
        description: "Astro-first pages with lean HTML, sharp Core Web Vitals, and no unnecessary client JS.",
      },
      {
        icon: "layout-template",
        title: "Composable blocks",
        description: "Drop in heroes, services, and CTAs — tune copy and layout props without fighting the system.",
      },
      {
        icon: "layers",
        title: "Theme-ready",
        description: "Tokens for color, type, and spacing so every block stays on-brand across light and dark.",
      },
    ],
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

---
import Hero08 from "@/blocks/hero/Hero08.astro";
---

<Hero08 />

Props override matching keys from config:

<Hero08
  width="wide"
  heading="Custom headline"
  padding="md"
/>

Props

← Hero versions · Blocks overview