Feat/110 generic embed

src/App.tsx

@@ -1,3 +1,4 @@
+import { Embed } from "./components/Embed/Embed";
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 
@@ -13,9 +14,11 @@
 
 export default function App() {
   return (
+
     <Provider store={store}>
       <MantineProvider theme={policyEngineTheme}>
         <QueryClientProvider client={queryClient}>
+
           <Router />
           <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>

src/Router.tsx

@@ -1,11 +1,17 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import HomePage from './pages/Home.page';
+import AIDemoPage from './pages/AIDemo.page';
+
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <HomePage />,
   },
+  {
+    path: '/us/ai',
+    element: <AIDemoPage />,
+  },
 ]);
 
 export function Router() {

src/components/Embed/Embed.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Card, Stack, Title, Text } from "@mantine/core";
+
+type Kind = "youtube" | "vimeo" | "iframe" | "image";
+
+type Props = {
+  header: string;
+  kind: Kind;
+  src: string;                 // iframe src or image src
+  description?: string;        // optional text under header
+  aspectRatio?: `${number} / ${number}` | number; // default 16/9
+  alt?: string;                // required if kind="image"
+};
+
+const fixSrc = (kind: Kind, src: string) => {
+  if (kind === "youtube") {
+    const id =
+      src.match(/(?:v=|youtu\.be\/|\/embed\/)([A-Za-z0-9_-]{6,})/)?.[1] ?? null;
+    return id ? `https://www.youtube.com/embed/${id}` : src;
+  }
+  if (kind === "vimeo") {
+    const id = src.match(/vimeo\.com\/(?:video\/)?(\d+)/)?.[1] ?? null;
+    return id ? `https://player.vimeo.com/video/${id}` : src;
+  }
+  return src;
+};
+
+export function Embed({
+  header,
+  kind,
+  src,
+  description,
+  aspectRatio = "16 / 9",
+  alt,
+}: Props) {
+  const normalized = fixSrc(kind, src);
+
+  return (
+    <div style={{ maxWidth: 960, margin: "0 auto" }}>
+      <h2 style={{ margin: "0 0 6px 0" }}>{header}</h2>
+      {description ? (
+        <p style={{ margin: "0 0 10px 0", color: "#6b7280" }}>{description}</p>
+      ) : null}
+
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          aspectRatio: typeof aspectRatio === "number" ? `${aspectRatio}` : aspectRatio,
+          overflow: "hidden",
+          borderRadius: 12,
+          background: "#00000010",
+        }}
+      >
+        {kind === "image" ? (
+          <img
+            src={src}
+            alt={alt ?? header}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+            loading="lazy"
+          />
+        ) : (
+          <iframe
+            title={header}
+            src={normalized}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              border: 0,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Embed;

src/pages/AIDemo.page.tsx

@@ -0,0 +1,14 @@
+import { Embed } from "../components/Embed/Embed";
+
+export default function AIDemoPage() {
+  return (
+    <div style={{ padding: 24 }}>
+      <Embed
+        header="Watch Our AI Demo"
+        kind="youtube"
+        src="https://www.youtube.com/watch?v=fnuDyLKpt90" // replace with real ID
+      />
+    </div>
+  );
+}
+