Add media caption image component

app/components/MediaCaptionImage/MediaCaptionImage.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { cnb } from "cnbuilder";
+import { HTMLAttributes } from "react";
+import { Text } from "../Typography";
+
+interface MediaCaptionImageProps extends HTMLAttributes<HTMLElement> {
+  title?: string;
+  imageSrc: string;
+  imageAlt?: string;
+  link?: string;
+  caption: string;
+}
+
+const MediaCaptionImage = ({
+  title,
+  imageSrc,
+  imageAlt = "",
+  link,
+  caption,
+  ...props
+}: MediaCaptionImageProps) => {
+  return (
+    <figure
+      {...props}
+      className={cnb(
+        "centered lg:max-w-[920px] xl:max-w-[980px] mb-50",
+        props.className,
+      )}
+    >
+      <div className="relative aspect-[16/9] w-full">
+        <Image
+          className="object-cover"
+          src={imageSrc}
+          alt={imageAlt}
+          fill
+          sizes="(max-width: 768px) 100vw, 1000px"
+        />
+      </div>
+
+      <figcaption className="mt-20 mx-20">
+        <Text className="text-15 text-black-70">{caption}</Text>
+      </figcaption>
+    </figure>
+  );
+};
+
+export default MediaCaptionImage;

app/components/MediaCaptionImage/index.ts

@@ -0,0 +1 @@
+export * from "./MediaCaptionImage";

app/example/page.tsx

@@ -7,6 +7,7 @@ import TimelineOverview from "@/components/Timeline/TimelineOverview";
 import { loadTimelineData } from "@/utilities/loadTimelineData";
 import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 import TimelineEven from "@/components/TimelineEven/TimelineOverview";
+import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -47,6 +48,10 @@ const ExamplePage = async () => {
         </Text>
       </FeatureHero>
       <ShapeAnimation />
+      <MediaCaptionImage
+        imageSrc="https://placecats.com/neo/1500/1000"
+        caption="Caption/credit lorem ipsum"
+      />
       <PageTitle heading="100 years of" bigText="Impact" />
       <GradientBanner>
         <Heading