Feat/112 image

src/components/MediaSection/MediaSection.astro

@@ -0,0 +1,41 @@
+---
+import { Typography } from "@chainlink/blocks"
+import styles from "./MediaSection.module.css"
+
+interface Props {
+  heading: string
+  description: string
+  image?: string
+  video?: string
+}
+
+const { heading, description, image, video } = Astro.props
+---
+
+<section class={styles.section}>
+  <div class={styles.textContent}>
+    <Typography variant="h2">{heading}</Typography>
+    <Typography variant="body" color="muted">
+      {description}
+    </Typography>
+  </div>
+
+  {
+    image && (
+      <div class={styles.mediaWrapper}>
+        <img src={image} alt={heading} class={styles.media} />
+      </div>
+    )
+  }
+
+  {
+    !image && video && (
+      <div class={styles.mediaWrapper}>
+        <video class={styles.media} controls>
+          <source src={video} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    )
+  }
+</section>

src/components/MediaSection/MediaSection.module.css

@@ -0,0 +1,25 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8x);
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6x);
+}
+
+.mediaWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.media {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--space-2x);
+}

src/components/MediaSection/README.md

@@ -0,0 +1,44 @@
+# MediaSection Component
+
+## What it does
+
+The MediaSection component displays a section with a heading, description, and optionally an image or video. It's perfect for explaining concepts with visual aids, like showing architecture diagrams or tutorial videos.
+
+## How to use it
+
+Import the component and add it to your page with the content you want to display:
+
+```astro
+import MediaSection from "~/components/MediaSection/MediaSection.astro"
+
+<MediaSection
+  heading="Your Section Title"
+  description="A description explaining what this section is about."
+  image="/path/to/your/image.png"
+/>
+```
+
+## Props explained
+
+- **heading** (required) - The title of your section
+- **description** (required) - A paragraph explaining the section content
+- **image** (optional) - Path to an image file you want to display
+- **video** (optional) - Path to a video file you want to display
+
+**Note:** You can provide either an image OR a video, not both. If you include both, only the image will show.
+
+## Example
+
+```astro
+<MediaSection
+  heading="High-level architecture"
+  description="CCIP delivers cross-chain messages from a source chain to a destination chain by combining offchain consensus and onchain execution components."
+  image="/images/architecture.png"
+/>
+```
+
+This will display:
+
+1. A heading that says "High-level architecture"
+2. The description text below it
+3. The architecture diagram image at the bottom

src/layouts/DocsV3Layout/DocsV3Layout.astro

@@ -8,6 +8,7 @@ import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro"
 import PageContent from "~/components/PageContent/PageContent.astro"
 import { TabGrid } from "~/components/TabGrid/TabGrid"
 import LayoutHero from "~/components/LayoutHero/LayoutHero.astro"
+import MediaSection from "~/components/MediaSection/MediaSection.astro"
 import QuickLinkCard from "~/components/QuickLinkCard/QuickLinkCard.astro"
 import {
   SvgBulletList,
@@ -190,6 +191,11 @@ const quickLinks = [
         <QuickLinkCard links={quickLinks} />
         <PageContent {titleHeading}>
           <TabGrid header="Tutorials" client:visible tabs={exampleTutorials} />
+          <MediaSection
+            heading="High-level architecture"
+            description="CCIP delivers cross-chain messages from a source chain to a destination chain by combining offchain consensus and onchain execution components."
+            image="/images/architecture.png"
+          />
           <slot />
         </PageContent>
       </div>