home page component adjustment

relume-test/src/components/Content11.tsx

@@ -0,0 +1,99 @@
+import contentImage from "../assets/content-header.png";
+import { Dialog, DialogTrigger, DialogContent } from "@relume_io/relume-ui";
+import clsx from "clsx";
+import React from "react";
+import { useState } from "react";
+import { CgSpinner } from "react-icons/cg";
+import { FaCirclePlay } from "react-icons/fa6";
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+};
+
+type Props = {
+  heading: string;
+  children: React.ReactNode;
+  image: ImageProps;
+  video: string;
+};
+
+export type Content11Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
+
+export const Content11 = (props: Content11Props) => {
+  const { heading, children, image, video } = {
+    ...Content11Defaults,
+    ...props,
+  };
+
+  const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);
+
+  return (
+    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
+      <div className="container">
+        <div className="mb-12 md:mb-18 lg:mb-20">
+          <Dialog>
+            <DialogTrigger asChild>
+              <button className="relative flex w-full items-center justify-center">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="aspect-video size-full object-cover"
+                />
+                <span className="absolute inset-0 z-10 bg-black/50" />
+                <FaCirclePlay className="absolute z-20 size-16 text-white" />
+              </button>
+            </DialogTrigger>
+            <DialogContent>
+              {!isIframeLoaded && <CgSpinner className="mx-auto size-16 animate-spin text-white" />}
+              <iframe
+                className={clsx(
+                  "z-0 mx-auto aspect-video h-full w-full md:w-[738px] lg:w-[940px]",
+                  {
+                    visible: isIframeLoaded,
+                    hidden: !isIframeLoaded,
+                  },
+                )}
+                src={video}
+                allow="autoplay; encrypted-media; picture-in-picture"
+                allowFullScreen
+                onLoad={() => setIsIframeLoaded(true)}
+              ></iframe>
+            </DialogContent>
+          </Dialog>
+        </div>
+        <div className="mx-auto max-w-lg">
+          <h2 className="mb-5 text-5xl font-bold text-acid-lime md:mb-6 md:text-7xl lg:text-8xl">{heading}</h2>
+          <div className="prose">{children}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const Content11Defaults: Props = {
+  heading: "UXPLORE 2026: Gestalte, was die Welt bewegt.",
+  children: (
+    <React.Fragment>
+      <p className="text-cloud-white text-[18px] leading-[1.5] mb-4">
+        UXPLORE bringt Designer, Researcher und Produktstrategen in Zürich zusammen. Wir konzentrieren uns auf die Realität unserer täglichen Arbeit: fundierte Methoden, ehrliche Einblicke in komplexe Projekte und der direkte Austausch unter Fachleuten.
+      </p>
+      <p className="text-cloud-white text-[18px] leading-[1.5] mb-4">
+        Es geht um die Themen, die uns heute fordern – von effektiven Design-Systemen bis hin zu strategischem Research und nachhaltiger Produktentwicklung.
+      </p>
+      <ul className="list-disc pl-6 text-cloud-white text-[18px] leading-[1.5] mb-4 flex flex-col gap-2">
+        <li><span className="font-semibold">Insights: </span>Erfahre, wie führende Teams Herausforderungen in Design und Strategie lösen.</li>
+        <li><span className="font-semibold">Community: </span>Vernetze dich mit Menschen, die vor den gleichen Aufgaben stehen wie du.</li>
+        <li><span className="font-semibold">Relevanz: </span>Nimm Ansätze mit, die dein Handwerk und deine Prozesse stärken.</li>
+      </ul>
+      <p className="text-cloud-white text-[18px] leading-[1.5]">
+        Komm nach Zürich. Lass uns gemeinsam besser gestalten.
+      </p>
+    </React.Fragment>
+  ),
+  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
+  image: {
+    src: contentImage,
+    alt: "UXplore venue",
+  },
+};

relume-test/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { Navbar3 } from "../components/Navbar";
 import { Header1 } from "../components/Header";
+import { Content11 } from "../components/Content11";
 import { Event17 } from "../components/Event17";
 import { Event20 } from "../components/Event20";
 import { Cta30 } from "../components/Cta30";
@@ -10,6 +11,7 @@ export const Home = () => {
     <div>
       <Navbar3 />
       <Header1 />
+      <Content11 />
       <Event17 />
       <Event20 />
       <Cta30 />