First cut

src/components/sections/TextSection.astro

@@ -0,0 +1,41 @@
+---
+interface Props {
+  heading?: string;
+  content: string;
+  id: string;
+}
+const { heading, content, id } = Astro.props;
+const isPromo = id.includes('promo') || id.includes('banner');
+---
+<section class:list={["text-section", { promo: isPromo }]}>
+  <div class="container">
+    {heading && <h2>{heading}</h2>}
+    <p>{content}</p>
+  </div>
+</section>
+
+<style>
+  .text-section h2 {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    color: var(--color-primary-dark);
+    margin-bottom: 0.75rem;
+  }
+  .text-section p {
+    font-size: 1rem;
+    color: var(--color-text);
+    line-height: 1.8;
+    font-weight: 300;
+    max-width: 680px;
+  }
+  .promo {
+    background: color-mix(in srgb, var(--color-primary), white 90%);
+    border-left: 4px solid var(--color-primary);
+    border-radius: 0 6px 6px 0;
+    margin: 0 auto;
+  }
+  .promo .container {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+</style>