add SimpleHeaderWithImage section

apps/astro/src/components/Components.astro

@@ -5,13 +5,15 @@ import Faq, { Faq_Query } from '@/components/global/Faq.astro'
 import TagsSection, { TagsSection_Query } from '@/components/global/TagsSection.astro'
 import MarqueePillSection, { MarqueePillSection_Query } from '@/components/global/MarqueePillSection.astro'
 import HeaderGridIcons, { HeaderGridIcons_Query } from '@/components/global/HeaderGridIcons.astro'
+import SimpleHeaderWithImage, { SimpleHeaderWithImage_Query } from '@/components/global/SimpleHeaderWithImage.astro'
 
 const components = {
   SimpleCtaSection,
   Faq,
   TagsSection,
   MarqueePillSection,
   HeaderGridIcons,
+  SimpleHeaderWithImage,
 }
 
 type ComponentsMap = {
@@ -38,6 +40,7 @@ export const Components_Query = /* groq */ `
     ${TagsSection_Query}
     ${MarqueePillSection_Query}
     ${HeaderGridIcons_Query}
+    ${SimpleHeaderWithImage_Query}
   },
 `
 ---

apps/astro/src/components/global/SimpleHeaderWithImage.astro

@@ -0,0 +1,54 @@
+---
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+
+export const SimpleHeaderWithImage_Query = `
+  _type == "SimpleHeaderWithImage" => {
+    ${PortableTextQuery('heading')}
+    ${PortableTextQuery('paragraph')}
+    ${ImageDataQuery('img')}
+  },
+`
+
+type Props = {
+  index: number
+  sectionId?: string
+  heading: PortableTextValue
+  paragraph: PortableTextValue
+  img: ImageDataProps
+}
+
+const { index, sectionId, heading, paragraph, img } = Astro.props
+---
+
+<section class="SimpleHeaderWithImage" id={sectionId}>
+  <header>
+    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading h1" />
+    <PortableText value={paragraph} />
+  </header>
+  <Image {...img} sizes="(max-width: 599px) 100vw, 517px" priority={index === 0} />
+</section>
+
+<style lang="scss">
+  .SimpleHeaderWithImage {
+    padding: clamp(2rem, calc(4vw / 0.48), 5rem) 0;
+    display: grid;
+    align-items: center;
+    gap: clamp(2rem, calc(3vw / 0.48), 8rem);
+    @media (min-width: 57rem) {
+      grid-template-columns: 1.2fr 1fr;
+      img {
+        margin-left: auto;
+      }
+    }
+    header {
+      max-width: 34rem;
+      .heading {
+        margin-bottom: clamp(1.5rem, calc(2vw / 0.48), 2rem);
+      }
+    }
+    img {
+      width: 517px;
+    }
+  }
+</style>

apps/sanity/schema/Components.ts

@@ -4,6 +4,7 @@ import Faq from "./components/Faq";
 import TagsSection from "./components/TagsSection";
 import MarqueePillSection from "./components/MarqueePillSection";
 import HeaderGridIcons from "./components/HeaderGridIcons";
+import SimpleHeaderWithImage from "./components/SimpleHeaderWithImage";
 
 export default defineType({
   name: 'components',
@@ -15,6 +16,7 @@ export default defineType({
     TagsSection,
     MarqueePillSection,
     HeaderGridIcons,
+    SimpleHeaderWithImage,
   ],
   options: {
     insertMenu: {

apps/sanity/schema/components/SimpleHeaderWithImage.ts

@@ -0,0 +1,46 @@
+import { defineField } from 'sanity';
+import sectionId from '../ui/sectionId';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'SimpleHeaderWithImage';
+const title = 'Simple Header With Image';
+const icon = () => '📷';
+
+export default defineField({
+  name,
+  type: 'object',
+  title,
+  icon,
+  fields: [
+    defineField({
+      name: 'heading',
+      type: 'Heading',
+      title: 'Heading',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'paragraph',
+      type: 'PortableText',
+      title: 'Paragraph',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'img',
+      type: 'image',
+      title: 'Image',
+      validation: Rule => Rule.required(),
+    }),
+    ...sectionId,
+  ],
+  preview: {
+    select: {
+      media: 'img',
+      heading: 'heading',
+    },
+    prepare: ({ heading, media }) => ({
+      title: title,
+      subtitle: toPlainText(heading),
+      media,
+    }),
+  },
+});