From b03406ceaa69e87a36f6f8a0ca0dfb67ca3d16db Mon Sep 17 00:00:00 2001
From: Madhura <madhura.bhujbal@gmail.com>
Date: Wed, 20 May 2026 11:06:01 +0100
Subject: [PATCH 1/4] Add a wrapper corousel component for rendering in content

---
 .../components/content/IsaacEventsCarousel.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/components/content/IsaacEventsCarousel.tsx

diff --git a/src/app/components/content/IsaacEventsCarousel.tsx b/src/app/components/content/IsaacEventsCarousel.tsx
new file mode 100644
index 0000000000..6f443f6d5d
--- /dev/null
+++ b/src/app/components/content/IsaacEventsCarousel.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { EventsCarousel } from "../elements/EventsCarousel";
+
+export const IsaacEventsCarousel = () => {
+  return (
+    <div className="isaac-events-carousel" data-testid="isaac-events-carousel">
+      <EventsCarousel />
+      <div className="center-container">
+        <Link className="browse-events" to="/events">
+          Browse all events
+        </Link>
+      </div>
+    </div>
+  );
+};

From 3dd5609429806daa6ea1e07285328de1ec40a7ce Mon Sep 17 00:00:00 2001
From: Madhura <madhura.bhujbal@gmail.com>
Date: Wed, 20 May 2026 11:06:50 +0100
Subject: [PATCH 2/4] Add styling for carousel and button

---
 src/scss/cs/isaac.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss
index a25e25b6c3..4f1fa06624 100644
--- a/src/scss/cs/isaac.scss
+++ b/src/scss/cs/isaac.scss
@@ -537,6 +537,14 @@ a.browse-events {
   }
 }
 
+.isaac-events-carousel {
+  padding-top: 1rem;
+
+  .center-container {
+    margin-top: 1rem;
+  }
+}
+
 .center-container {
   display: flex;
   justify-content: center;

From a4dde0cc862897bc9de0669ce73dc2dae12c5e73 Mon Sep 17 00:00:00 2001
From: Madhura <madhura.bhujbal@gmail.com>
Date: Wed, 20 May 2026 11:23:24 +0100
Subject: [PATCH 3/4] Add the new isaac carousel type in content

---
 src/app/components/content/IsaacContent.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/components/content/IsaacContent.tsx b/src/app/components/content/IsaacContent.tsx
index 63490d475d..70399b2a68 100644
--- a/src/app/components/content/IsaacContent.tsx
+++ b/src/app/components/content/IsaacContent.tsx
@@ -21,6 +21,7 @@ import { isQuestion } from "../../services";
 import { IsaacCodeTabs } from "./IsaacCodeTabs";
 import { IsaacInteractiveCodeSnippet } from "./IsaacInteractiveCodeSnippet";
 import { IsaacCallout } from "./IsaacCallout";
+import { IsaacEventsCarousel } from "./IsaacEventsCarousel";
 const IsaacCodeSnippet = lazy(() => import("./IsaacCodeSnippet"));
 
 const classBasedLayouts = {
@@ -90,6 +91,9 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
       case "codeTabs":
         selectedComponent = <IsaacCodeTabs {...props} />;
         break;
+      case "isaacEventsCarousel":
+        selectedComponent = <IsaacEventsCarousel />;
+        break;
       default:
         switch (layout) {
           case "tabs":

From a2b55324ef69c11f5136bbbbc338496f206c8bb8 Mon Sep 17 00:00:00 2001
From: Madhura <madhura.bhujbal@gmail.com>
Date: Wed, 20 May 2026 11:39:28 +0100
Subject: [PATCH 4/4] Add tests for the new Isaac events carousel

---
 .../content/IsaacEventsCarousel.test.tsx      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/test/components/elements/content/IsaacEventsCarousel.test.tsx

diff --git a/src/test/components/elements/content/IsaacEventsCarousel.test.tsx b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx
new file mode 100644
index 0000000000..7c7b1111d7
--- /dev/null
+++ b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { renderTestEnvironment } from "../../../utils";
+import { IsaacContent } from "../../../../app/components/content/IsaacContent";
+
+const IsaacEventsCarouselHarness = () => <IsaacContent doc={{ type: "isaacEventsCarousel" }} />;
+
+describe("IsaacEventsCarousel content type", () => {
+  const renderInsideIsaacContent = () =>
+    renderTestEnvironment({
+      role: "ANONYMOUS",
+      PageComponent: IsaacEventsCarouselHarness,
+      initialRouteEntries: ["/"],
+    });
+
+  it("renders the events carousel wrapper", () => {
+    renderInsideIsaacContent();
+    const wrapper = screen.getByTestId("isaac-events-carousel");
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  it("renders a 'Browse all events' link pointing to /events", () => {
+    renderInsideIsaacContent();
+    const browseLink = screen.getByRole("link", { name: /browse all events/i });
+    expect(browseLink).toBeInTheDocument();
+    expect(browseLink).toHaveAttribute("href", "/events");
+  });
+});