From 79b1be171573d4fac8de25e7c45d7121ace4c359 Mon Sep 17 00:00:00 2001
From: Felix Kuennecke <kuennecke-felix@web.de>
Date: Thu, 20 Aug 2026 18:58:23 +0200
Subject: [PATCH] feat(web): add course embed to Kirkpatrick model blog post

Adds a CourseEmbed component (iframe + next/script loader) so the
Kirkpatrick Model blog post can embed the matching Scibly course,
mirroring the app's oEmbed snippet but as a JSX-safe component instead
of pasted raw HTML.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../[lang]/blog/components/course-embed.tsx   | 40 +++++++++++++++++++
 .../app/[lang]/blog/kirkpatrick-modell/de.mdx | 10 +++++
 .../app/[lang]/blog/kirkpatrick-modell/en.mdx | 10 +++++
 apps/web/src/mdx-components.tsx               |  2 +
 4 files changed, 62 insertions(+)
 create mode 100644 apps/web/src/app/[lang]/blog/components/course-embed.tsx

diff --git a/apps/web/src/app/[lang]/blog/components/course-embed.tsx b/apps/web/src/app/[lang]/blog/components/course-embed.tsx
new file mode 100644
index 0000000..7e2a0d9
--- /dev/null
+++ b/apps/web/src/app/[lang]/blog/components/course-embed.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Script from "next/script";
+
+const EMBED_SCRIPT_SRC = "https://app.scibly.com/embed/v1.js";
+
+interface CourseEmbedProps {
+  src: string;
+  title: string;
+  widthPx?: number;
+  heightPx?: number;
+}
+
+// Mirrors the snippet from apps/app/.../embed-course/snippet.ts as a JSX-safe
+// component: `style` must be an object here, and next/script (not a raw
+// <script> tag) is how this codebase loads third-party embed loaders.
+export function CourseEmbed({
+  src,
+  title,
+  widthPx = 640,
+  heightPx = 600,
+}: CourseEmbedProps) {
+  return (
+    <div className="border-hairline bg-ground-soft my-9 overflow-hidden rounded-[20px] border-2 p-2 shadow-[0_4px_0_0_var(--color-lip)]">
+      <iframe
+        src={src}
+        title={title}
+        data-scibly-embed
+        width={widthPx}
+        height={heightPx}
+        style={{ width: "100%", height: `${heightPx}px`, border: 0 }}
+        allow="autoplay"
+        referrerPolicy="strict-origin-when-cross-origin"
+        loading="lazy"
+        className="rounded-[14px]"
+      />
+      <Script src={EMBED_SCRIPT_SRC} strategy="afterInteractive" />
+    </div>
+  );
+}
diff --git a/apps/web/src/app/[lang]/blog/kirkpatrick-modell/de.mdx b/apps/web/src/app/[lang]/blog/kirkpatrick-modell/de.mdx
index cbf533c..3ef4319 100644
--- a/apps/web/src/app/[lang]/blog/kirkpatrick-modell/de.mdx
+++ b/apps/web/src/app/[lang]/blog/kirkpatrick-modell/de.mdx
@@ -1,3 +1,4 @@
+import { CourseEmbed } from "../components/course-embed";
 import { PostLayout } from "../components/post-layout";
 
 export const metadata = {
@@ -49,6 +50,15 @@ Nicht jede Schulung braucht alle vier Ebenen. Ein pragmatischer Ansatz:
 - **Ebene 3 bei Prozess- und Verhaltensschulungen.** Wenn das Ziel eine Verhaltensänderung ist, etwa im Kundenkontakt oder bei Sicherheitsprozessen, lohnt sich eine Stichprobe nach einigen Wochen.
 - **Ebene 4 nur bei Schulungen mit klarem Geschäftsbezug.** Nicht jede Schulung lässt sich sinnvoll auf eine Kennzahl zurückführen, bei Vertriebs- oder Sicherheitstrainings ist der Zusammenhang aber oft direkt greifbar.
 
+## Das Kirkpatrick-Modell als Kurs erleben
+
+Wie sieht das Ganze als echtes Trainingsmodul aus? Probiere den kurzen Kurs unten direkt aus.
+
+<CourseEmbed
+  src="https://app.scibly.com/embed/courses/cmt1oqwha000804jllsg9t110"
+  title="The Kirkpatrick Model in 4 Levels"
+/>
+
 ## Häufige Fragen
 
 ### Wer hat das Kirkpatrick-Modell entwickelt?
diff --git a/apps/web/src/app/[lang]/blog/kirkpatrick-modell/en.mdx b/apps/web/src/app/[lang]/blog/kirkpatrick-modell/en.mdx
index a4aeabd..f1c51c3 100644
--- a/apps/web/src/app/[lang]/blog/kirkpatrick-modell/en.mdx
+++ b/apps/web/src/app/[lang]/blog/kirkpatrick-modell/en.mdx
@@ -1,3 +1,4 @@
+import { CourseEmbed } from "../components/course-embed";
 import { PostLayout } from "../components/post-layout";
 
 export const metadata = {
@@ -49,6 +50,15 @@ Not every training program needs all four levels. A pragmatic approach:
 - **Level 3 for process and behavior training.** If the goal is a behavior change, for example in customer interactions or safety processes, a spot check after a few weeks is worthwhile.
 - **Level 4 only for training with a clear business tie-in.** Not every training program can be sensibly traced back to a metric, but for sales or safety training the connection is often directly tangible.
 
+## See the Kirkpatrick Model in a course
+
+Want to see how this looks as an actual training module? Try the short course below.
+
+<CourseEmbed
+  src="https://app.scibly.com/embed/courses/cmt1oqwha000804jllsg9t110"
+  title="The Kirkpatrick Model in 4 Levels"
+/>
+
 ## Frequently asked questions
 
 ### Who developed the Kirkpatrick Model?
diff --git a/apps/web/src/mdx-components.tsx b/apps/web/src/mdx-components.tsx
index 9db531c..c8e39a5 100644
--- a/apps/web/src/mdx-components.tsx
+++ b/apps/web/src/mdx-components.tsx
@@ -5,6 +5,7 @@ import * as React from "react";
 
 import { Callout } from "@/app/[lang]/blog/components/callout";
 import { CodeBlock } from "@/app/[lang]/blog/components/code-block";
+import { CourseEmbed } from "@/app/[lang]/blog/components/course-embed";
 import { lipShadow } from "@/app/[lang]/components/marketing-tokens";
 
 function getHeadingText(node: React.ReactNode): string {
@@ -337,6 +338,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
       return <input type={type} {...props} />;
     },
     Callout,
+    CourseEmbed,
     ...components,
   };
 }