x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -469,6 +469,84 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
   )
 }
 
+function ArticleMediaSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const i18nLang = useLang()
+  const resolvedLang = lang === 'all' ? i18nLang : lang
+  const heading = localizedFromRecord(payload, 'heading', resolvedLang)
+  const body = localizedFromRecord(payload, 'body', resolvedLang)
+  const imageAlt = localizedFromRecord(payload, 'imageAlt', resolvedLang)
+  const imageCaption = localizedFromRecord(payload, 'imageCaption', resolvedLang)
+  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : ''
+  const imagePosition = payload.imagePosition === 'left' || payload.imagePosition === 'top'
+    ? payload.imagePosition
+    : 'right'
+  const widthClass = payload.width === 'narrow'
+    ? 'max-w-3xl'
+    : payload.width === 'wide'
+      ? 'max-w-7xl'
+      : 'max-w-6xl'
+  const backgroundClass = payload.background === 'muted'
+    ? 'bg-surface-card'
+    : 'bg-surface-page'
+
+  if (!body) return null
+
+  const copy = (
+    <div className="flex min-w-0 flex-col justify-center">
+      {heading && (
+        <h2 className="mb-5 text-3xl font-semibold text-text-main md:text-4xl">
+          {heading}
+        </h2>
+      )}
+      <p className="whitespace-pre-line text-base leading-8 text-muted-text md:text-lg">
+        {body}
+      </p>
+    </div>
+  )
+
+  const media = imageUrl ? (
+    <figure className="min-w-0">
+      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg bg-surface-page">
+        <Image
+          src={imageUrl}
+          alt={imageAlt || heading || ''}
+          fill
+          unoptimized
+          sizes="(max-width: 768px) 100vw, 50vw"
+          className="object-cover"
+        />
+      </div>
+      {imageCaption && (
+        <figcaption className="mt-3 text-sm leading-6 text-muted-text">
+          {imageCaption}
+        </figcaption>
+      )}
+    </figure>
+  ) : null
+
+  return (
+    <section className={`${backgroundClass} ui-section-band`}>
+      <div className={`mx-auto ${widthClass}`}>
+        {!media ? copy : imagePosition === 'top' ? (
+          <div className="space-y-8">
+            {media}
+            {copy}
+          </div>
+        ) : (
+          <div className="grid items-center gap-8 md:grid-cols-2 md:gap-12">
+            <div className={imagePosition === 'right' ? 'md:order-2' : undefined}>
+              {media}
+            </div>
+            <div className={imagePosition === 'right' ? 'md:order-1' : undefined}>
+              {copy}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
 function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
@@ -1106,6 +1184,12 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
                 <TextSection payload={payload} lang={lang} />
               </ScrollReveal>
             )
+          case 'ARTICLE_MEDIA':
+            return (
+              <ScrollReveal key={section.id}>
+                <ArticleMediaSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'SCENT_NOTES_BREAKDOWN':
             return (
               <ScrollReveal key={section.id}>