Simple conetent + restyled

src/components/PageHero.astro

@@ -0,0 +1,17 @@
+---
+interface Props { title: string; introduction?: string; example?: boolean; hasImage?: boolean }
+const { title, introduction, example = false, hasImage = false } = Astro.props;
+---
+<section class:list={['page-hero', { 'page-hero--compact': !hasImage }]}>
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <ol>
+        {Astro.url.pathname !== '/' && <li><a href="/">Home</a></li>}
+        {example && <li>Example</li>}
+        <li aria-current="page">{title}</li>
+      </ol>
+    </nav>
+    <h1 class="page-hero__title">{title}</h1>
+    {introduction && <p class="page-hero__lead">{introduction}</p>}
+  </div>
+</section>