File: src/blocks/hero/Hero17.astro

Full-bleed Keen Slider hero. Each slide is image + overlay + eyebrow, title, text, and CTAs. Controls for height, overlay color/opacity, text placement/align, arrows, dots, and autoplay.

Config (blocks.ts → hero17)

hero17: {
    width: "wide",
    slides: [
      {
        image: photos.interior,
        imageAlt: "Interior detail",
        eyebrow: "Featured work",
        heading: "Spaces that feel considered from the first scroll",
        subheading:
          "Full-bleed storytelling for hospitality, retail, and brand launches — image first, copy where it lands hardest.",
        primaryCta: "View my work",
        primaryCtaUrl: "/work/",
        secondaryCta: "Get in touch",
        secondaryCtaUrl: "/contact/",
      },
      {
        image: photos.karla,
        imageAlt: "Portrait in soft light",
        eyebrow: "Available for freelance",
        heading: "I build websites that work as hard as you do",
        subheading:
          "Astro, React, and headless CMS for brands that need speed, clarity, and craft — without a redesign every quarter.",
        primaryCta: "Start a project",
        primaryCtaUrl: "/contact/",
        secondaryCta: "See services",
        secondaryCtaUrl: "/#services",
      },
      {
        image: photos.alexander,
        imageAlt: "Architectural study",
        eyebrow: "Performance & polish",
        heading: "Ship a polished site without rebuilding the foundations",
        subheading:
          "Composable blocks, token-driven themes, and image pipelines so every launch stays fast and on-brand.",
        primaryCta: "Browse work",
        primaryCtaUrl: "/work/",
        secondaryCta: "About",
        secondaryCtaUrl: "/about/",
      },
    ],
    overlayColor: "#000000",
    overlayOpacity: 0.45,
    contentTone: "light",
    height: "md",
    textPlacement: "center",
    textAlign: "left",
    sliderAutoplay: false,
    sliderSpeed: "normal",
    showDots: true,
    showArrows: true,
    sliderPauseOnHover: true,
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

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

<Hero17 />

Props override matching keys from config:

<Hero17
  height="lg"
  overlayOpacity={0.55}
  textPlacement="bottom"
  textAlign="center"
  sliderAutoplay
  sliderSpeed="fast"
  showArrows={false}
/>

Props

Slide object

Also include: Keen Slider (keen-slider). Prefer photos.* — Images. Pass real CSS colors for overlayColor (not Tailwind class names).

← Hero versions · Blocks overview · Images