diff --git a/relume-test/src/App.tsx b/relume-test/src/App.tsx
index efa7bdf..715b990 100644
--- a/relume-test/src/App.tsx
+++ b/relume-test/src/App.tsx
@@ -1,10 +1,12 @@
 import { Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
+import Programm from "./pages/Programm";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/programm" element={<Programm />} />
     </Routes>
   );
 }
diff --git a/relume-test/src/assets/program-header.png b/relume-test/src/assets/program-header.png
new file mode 100644
index 0000000..f4a2e60
Binary files /dev/null and b/relume-test/src/assets/program-header.png differ
diff --git a/relume-test/src/components/Banner15.tsx b/relume-test/src/components/Banner15.tsx
new file mode 100644
index 0000000..6918ee3
--- /dev/null
+++ b/relume-test/src/components/Banner15.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+};
+
+type Section = {
+  title: string;
+  image: ImageProps;
+};
+
+type Props = {
+  sections: Section[];
+};
+
+export type Banner15Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
+
+export const Banner15 = (props: Banner15Props) => {
+  const { sections } = {
+    ...Banner15Defaults,
+    ...props,
+  };
+  return (
+    <section id="relume" className="flex w-screen max-w-full justify-end overflow-hidden bg-cloud-white">
+      <div className="flex justify-end">
+        {Array(2)
+          .fill(0)
+          .map((_, index) => (
+            <div
+              key={index}
+              className="grid animate-marquee-right auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-4"
+            >
+              {sections.map((section, index) => (
+                <React.Fragment key={index}>
+                  <div className="flex items-center justify-center whitespace-nowrap px-8 text-center lg:text-left">
+                    <h1 className="text-6xl font-bold md:text-9xl lg:text-10xl">{section.title}</h1>
+                  </div>
+                  <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
+                    <img
+                      src={section.image.src}
+                      alt={section.image.alt}
+                      className="aspect-[3/2] size-full h-16 max-h-24 object-cover md:h-auto"
+                    />
+                  </div>
+                </React.Fragment>
+              ))}
+            </div>
+          ))}
+      </div>
+    </section>
+  );
+};
+
+export const Banner15Defaults: Props = {
+  sections: [
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
+        alt: "Relume Library",
+      },
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
+        alt: "Relume Library",
+      },
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
+        alt: "Relume Library",
+      },
+    },
+    {
+      title: "Relume Library",
+      image: {
+        src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
+        alt: "Relume Library",
+      },
+    },
+  ],
+};
\ No newline at end of file
diff --git a/relume-test/src/components/Event33.tsx b/relume-test/src/components/Event33.tsx
new file mode 100644
index 0000000..8b0e700
--- /dev/null
+++ b/relume-test/src/components/Event33.tsx
@@ -0,0 +1,283 @@
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@relume_io/relume-ui";
+import type { ButtonProps } from "@relume_io/relume-ui";
+import { BiMap } from "react-icons/bi";
+
+type ImageProps = {
+  src: string;
+  alt?: string;
+};
+
+type ScheduledEvent = {
+  url: string;
+  time: string;
+  image: ImageProps;
+  title: string;
+  speaker: string;
+  location: string;
+  button: ButtonProps;
+};
+
+type Tab = {
+  value: string;
+  trigger: string;
+  content: ScheduledEvent[];
+};
+
+type Props = {
+  tagline: string;
+  heading: string;
+  description: string;
+  tabs: Tab[];
+};
+
+export type Event33Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
+
+export const Event33 = (props: Event33Props) => {
+  const { tagline, heading, description, tabs } = {
+    ...Event33Defaults,
+    ...props,
+  };
+
+  return (
+    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
+      <div className="container">
+        <div className="mb-12 md:mb-18 lg:mb-20">
+          <div className="max-w-lg">
+            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
+            <h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
+            <p className="md:text-md">{description}</p>
+          </div>
+        </div>
+        <Tabs defaultValue={tabs[0].value} className="flex flex-col justify-start">
+          <TabsList className="no-scrollbar mb-12 ml-[-5vw] flex w-screen items-center overflow-auto pl-[5vw] md:ml-0 md:w-full md:overflow-hidden md:pl-0">
+            {tabs.map((tab, index) => (
+              <TabsTrigger
+                key={index}
+                value={tab.value}
+                className="px-4 data-[state=active]:border data-[state=active]:border-border-primary data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-neutral-black"
+              >
+                {tab.trigger}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabs.map((tab) => (
+            <TabsContent
+              key={tab.value}
+              value={tab.value}
+              className="data-[state=active]:animate-tabs"
+            >
+              {tab.content.map((event, index) => (
+                <ScheduledEvent key={index} {...event} />
+              ))}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+const ScheduledEvent: React.FC<ScheduledEvent> = ({
+  url,
+  time,
+  image,
+  title,
+  speaker,
+  location,
+  button,
+}) => {
+  return (
+    <div className="grid grid-cols-1 items-center gap-4 border-t border-border-primary py-6 last-of-type:border-b md:grid-cols-[6rem_max-content_1fr_max-content] md:gap-8 md:py-8">
+      <div className="text-md md:text-lg">{time}</div>
+      <div className="w-full md:w-36">
+        <a href={url} className="relative block aspect-[3/2] md:aspect-square">
+          <img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
+        </a>
+      </div>
+      <div className="grid auto-cols-fr grid-cols-1 items-center gap-4 lg:grid-cols-[1fr_.25fr]">
+        <div>
+          <h5 className="text-xl font-bold md:text-2xl">{title}</h5>
+          <div>{speaker}</div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <BiMap className="size-6 flex-none" />
+          <span>{location}</span>
+        </div>
+      </div>
+      <Button {...button} asChild>
+        <a href={url}>{button.title}</a>
+      </Button>
+    </div>
+  );
+};
+
+export const Event33Defaults: Props = {
+  tagline: "Tagline",
+  heading: "Schedule",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  tabs: [
+    {
+      value: "fri-09-feb",
+      trigger: "Fri 09 Feb",
+      content: [
+        {
+          url: "#",
+          time: "8:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 1",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "9:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 2",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "10:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 3",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+      ],
+    },
+    {
+      value: "sat-10-feb",
+      trigger: "Sat 10 Feb",
+      content: [
+        {
+          url: "#",
+          time: "8:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 4",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "9:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 5",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "10:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 6",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+      ],
+    },
+    {
+      value: "sun-11-feb",
+      trigger: "Sun 11 Feb",
+      content: [
+        {
+          url: "#",
+          time: "8:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 7",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "9:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 8",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+        {
+          url: "#",
+          time: "10:00 am",
+          image: {
+            src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
+            alt: "Relume placeholder image 9",
+          },
+          title: "Event title heading",
+          speaker: "Speaker",
+          location: "Location",
+          button: {
+            variant: "secondary",
+            size: "primary",
+            title: "View details",
+          },
+        },
+      ],
+    },
+  ],
+};
diff --git a/relume-test/src/components/Filters5.tsx b/relume-test/src/components/Filters5.tsx
new file mode 100644
index 0000000..848097f
--- /dev/null
+++ b/relume-test/src/components/Filters5.tsx
@@ -0,0 +1,316 @@
+import React, { useState } from "react";
+import { BiFilter, BiSearch } from "react-icons/bi";
+import { RxChevronDown } from "react-icons/rx";
+import { IoCloseOutline } from "react-icons/io5";
+import { AnimatePresence, motion } from "framer-motion";
+import type { Variants } from "framer-motion";
+import {
+  Button,
+  Checkbox,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@relume_io/relume-ui";
+
+type FilterValues = {
+  filterOne: string;
+  filterTwo: string[];
+  filterThree: string[];
+  filterFour: string[];
+};
+
+const tabs = [
+  { value: "View all", trigger: "View all" },
+  { value: "Category one", trigger: "Category one" },
+  { value: "Category two", trigger: "Category two" },
+  { value: "Category three", trigger: "Category three" },
+  { value: "Category four", trigger: "Category four" },
+];
+
+const options = [
+  { value: "option-1", label: "Option one" },
+  { value: "option-2", label: "Option two" },
+  { value: "option-3", label: "Option three" },
+  { value: "option-4", label: "Option four" },
+  { value: "option-5", label: "Option five" },
+];
+
+const containerVariants: Variants = {
+  initial: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: 0.2, ease: "easeInOut" },
+  },
+  animate: {
+    height: "auto",
+    opacity: 1,
+    transition: { duration: 0.2, ease: "easeInOut" },
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: 0.2, ease: "easeInOut" },
+  },
+};
+
+export const Filters5 = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<FilterValues>({
+    filterOne: "",
+    filterTwo: ["option-1"],
+    filterThree: ["option-1"],
+    filterFour: ["option-1"],
+  });
+
+  const handleClear = (filter: keyof FilterValues) => {
+    setSelectedValues((prev) => ({
+      ...prev,
+      [filter]: Array.isArray(prev[filter]) ? [] : "",
+    }));
+  };
+
+  const handleCheckboxChange = (filter: keyof Omit<FilterValues, "filterOne">, value: string) => {
+    setSelectedValues((prev) => {
+      const currentItems = prev[filter];
+      return {
+        ...prev,
+        [filter]: currentItems.includes(value)
+          ? currentItems.filter((item) => item !== value)
+          : [...currentItems, value],
+      };
+    });
+  };
+
+  const getSelectedLabels = (filter: keyof FilterValues) => {
+    if (!selectedValues[filter].length) return "Select options";
+    if (selectedValues[filter].length === 1) {
+      return options.find((opt) => opt.value === selectedValues[filter][0])?.label;
+    }
+    return `${selectedValues[filter].length} selected`;
+  };
+
+  return (
+    <section className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
+      <div className="container">
+        <div className="mb-12 w-full text-center md:mb-18 lg:mb-20">
+          <h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Collection</h1>
+          <p className="md:text-md">Lorem ipsum dolor sit amet.</p>
+        </div>
+        <div className="mb-8 grid auto-cols-fr grid-cols-2 grid-rows-[auto_auto] items-center justify-between gap-x-6 gap-y-8 lg:grid-cols-[1fr_max-content_1fr] lg:gap-y-0">
+          <Button
+            className="w-fit gap-3 self-start bg-electric-violet text-cloud-white rounded-2xl px-6 py-3 border-electric-violet font-semibold"
+            onClick={() => setIsOpen(!isOpen)}
+        >
+            <BiFilter className="size-6" />
+            <span>Filter</span>
+        </Button>
+          <Tabs
+            defaultValue={tabs[0].value}
+            className="no-scrollbar flex w-full flex-col items-center justify-center overflow-scroll [grid-area:2/1/3/3] md:overflow-auto lg:[grid-area:auto/auto/auto/auto]"
+          >
+            <TabsList className="flex w-screen items-center justify-start pl-[5vw] md:w-full md:justify-center md:overflow-hidden md:pl-0">
+              {tabs.map((tab, index) => (
+                <TabsTrigger
+                  key={index}
+                  value={tab.value}
+                  className="px-4 data-[state=active]:border data-[state=active]:border-electric-violet data-[state=inactive]:border-transparent data-[state=active]:bg-transparent data-[state=active]:text-electric-violet font-barlow"
+                >
+                  {tab.trigger}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="-mr-2 flex items-center gap-2 justify-self-end">
+              <p className="whitespace-nowrap">Sort by</p>
+              <RxChevronDown className="shrink-0 text-text-primary transition-transform duration-300" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {[
+                "Most Popular",
+                "Most Recent",
+                "Name: A to Z",
+                "Name: Z to A",
+                "Price: Low to High",
+                "Price: High to Low",
+              ].map((option) => (
+                <DropdownMenuItem key={option}>{option}</DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <AnimatePresence initial={false} mode="wait">
+          {isOpen && (
+            <motion.div
+              variants={containerVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              className="overflow-hidden"
+            >
+              <div className="mb-8 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-4">
+                <div>
+                  <div className="mb-2 flex items-center justify-between">
+                    <span>Filter One</span>
+                    <Button
+                      variant="link"
+                      size="link"
+                      onClick={() => handleClear("filterOne")}
+                      className="text-sm"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                    <Input
+                    placeholder="Stichwortsuche"
+                    icon={<BiSearch className="size-6" />}
+                    value={selectedValues.filterOne}
+                    onChange={(e) =>
+                        setSelectedValues((prev) => ({
+                        ...prev,
+                        filterOne: e.target.value,
+                        }))
+                    }
+                    className="border-electric-violet rounded-2xl"
+                    />
+                </div>
+                <div>
+                  <div className="mb-2 flex items-center justify-between">
+                    <span>Filter Two</span>
+                    <Button
+                      variant="link"
+                      size="link"
+                      onClick={() => handleClear("filterTwo")}
+                      className="text-sm"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                  <Select value="" onValueChange={() => {}}>
+                    <SelectTrigger>
+                      <SelectValue placeholder={getSelectedLabels("filterTwo")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {options.map((option) => (
+                        <div key={option.value} className="flex items-center space-x-2 p-2">
+                          <Checkbox
+                            id={`filter-two-${option.value}`}
+                            checked={selectedValues.filterTwo.includes(option.value)}
+                            onCheckedChange={() => handleCheckboxChange("filterTwo", option.value)}
+                          />
+                          <Label
+                            className="flex-grow cursor-pointer"
+                            htmlFor={`filter-two-${option.value}`}
+                            onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
+                              e.preventDefault();
+                              handleCheckboxChange("filterTwo", option.value);
+                            }}
+                          >
+                            {option.label}
+                          </Label>
+                        </div>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <div className="mb-2 flex items-center justify-between">
+                    <span>Filter Three</span>
+                    <Button
+                      variant="link"
+                      size="link"
+                      onClick={() => handleClear("filterThree")}
+                      className="text-sm"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                  <Select value="" onValueChange={() => {}}>
+                    <SelectTrigger>
+                      <SelectValue placeholder={getSelectedLabels("filterThree")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {options.map((option) => (
+                        <div key={option.value} className="flex items-center space-x-2 px-2 py-1.5">
+                          <Checkbox
+                            id={`filter-three-${option.value}`}
+                            checked={selectedValues.filterThree.includes(option.value)}
+                            onCheckedChange={() =>
+                              handleCheckboxChange("filterThree", option.value)
+                            }
+                          />
+                          <Label
+                            className="flex-grow cursor-pointer"
+                            htmlFor={`filter-three-${option.value}`}
+                            onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
+                              e.preventDefault();
+                              handleCheckboxChange("filterThree", option.value);
+                            }}
+                          >
+                            {option.label}
+                          </Label>
+                        </div>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <div className="mb-2 flex items-center justify-between">
+                    <span>Filter Four</span>
+                    <Button
+                      variant="link"
+                      size="link"
+                      onClick={() => handleClear("filterFour")}
+                      className="text-sm"
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                  <Select value="" onValueChange={() => {}}>
+                    <SelectTrigger>
+                      <SelectValue placeholder={getSelectedLabels("filterFour")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {options.map((option) => (
+                        <div key={option.value} className="flex items-center space-x-2 px-2 py-1.5">
+                          <Checkbox
+                            id={`filter-four-${option.value}`}
+                            checked={selectedValues.filterFour.includes(option.value)}
+                            onCheckedChange={() => handleCheckboxChange("filterFour", option.value)}
+                          />
+                          <Label
+                            className="flex-grow cursor-pointer"
+                            htmlFor={`filter-four-${option.value}`}
+                            onClick={(e: React.MouseEvent<HTMLLabelElement>) => {
+                              e.preventDefault();
+                              handleCheckboxChange("filterFour", option.value);
+                            }}
+                          >
+                            {option.label}
+                          </Label>
+                        </div>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div>
+          <div className="hidden" />
+          </div>
+      </div>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/relume-test/src/components/Header23.tsx b/relume-test/src/components/Header23.tsx
new file mode 100644
index 0000000..affacd8
--- /dev/null
+++ b/relume-test/src/components/Header23.tsx
@@ -0,0 +1,59 @@
+import headerBg from "../assets/program-header.png";
+import { Button } from "@relume_io/relume-ui";
+import type { ButtonProps } from "@relume_io/relume-ui";
+
+type Props = {
+  heading: string;
+  description: string;
+  buttons: ButtonProps[];
+};
+
+export type Header23Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
+
+export const Header23 = (props: Header23Props) => {
+  const { heading, description, buttons } = {
+    ...Header23Defaults,
+    ...props,
+  };
+  return (
+    <section className="px-[5%] py-16 md:py-24 lg:py-28 relative font-barlow overflow-hidden">
+      {/* Background image with overlay */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-neutral-dark opacity-90" />
+        <img
+          src={headerBg}
+          alt=""
+          className="absolute inset-0 w-full h-full object-cover opacity-40"
+        />
+      </div>
+      {/* Content */}
+      <div className="container relative z-10">
+        <div className="mx-auto w-full max-w-lg text-center">
+          <h1 className="mb-5 text-6xl font-bold text-cloud-white md:mb-6 md:text-9xl lg:text-10xl">
+            {heading}
+          </h1>
+          <p className="md:text-md text-cloud-white text-[18px] leading-[1.5]">
+            {description}
+          </p>
+          {buttons.length > 0 && (
+            <div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
+              {buttons.map((button, index) => (
+                <Button key={index} {...button}>
+                  {button.title}
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const Header23Defaults: Props = {
+  heading: "UXplore 2026 Programm",
+  description: "Erfahre von den klügsten Köpfen der Branche, wie sie komplexe Design-Herausforderungen meistern. Von Schweizer Präzision im Interface bis hin zu globalen Strategien führender Tech-Giganten – unsere Speaker bringen handfeste Insights statt nur Buzzwords.",
+  buttons: [],
+};
+
+export default Header23;
\ No newline at end of file
diff --git a/relume-test/src/declarations.d.ts b/relume-test/src/declarations.d.ts
index 8fcd0d7..e74589e 100644
--- a/relume-test/src/declarations.d.ts
+++ b/relume-test/src/declarations.d.ts
@@ -2,4 +2,5 @@ declare module "*.png";
 declare module "*.jpg";
 declare module "*.jpeg";
 declare module "*.svg";
-declare module "*.webp";
\ No newline at end of file
+declare module "*.webp";
+declare module "*.css";
\ No newline at end of file
diff --git a/relume-test/src/pages/Programm.tsx b/relume-test/src/pages/Programm.tsx
new file mode 100644
index 0000000..68333aa
--- /dev/null
+++ b/relume-test/src/pages/Programm.tsx
@@ -0,0 +1,21 @@
+import { Navbar3 } from "../components/Navbar";
+import { Header23 } from "../components/Header23";
+import { Filters5 } from "../components/Filters5";
+import { Event33 } from "../components/Event33";
+import { Banner15 } from "../components/Banner15";
+import { Footer3 } from "../components/Footer";
+
+const Programm = () => {
+  return (
+    <div>
+      <Navbar3 />
+      <Header23 />
+      <Filters5 />
+      <Event33 />
+      <Banner15 />
+      <Footer3 />
+    </div>
+  );
+};
+
+export default Programm;
\ No newline at end of file
diff --git a/relume-test/src/reactcomponents_home.jsx b/relume-test/src/reactcomponents_home.jsx
deleted file mode 100644
index 718a571..0000000
--- a/relume-test/src/reactcomponents_home.jsx
+++ /dev/null
@@ -1,1242 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, useMediaQuery } from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
-import { AnimatePresence, motion } from "framer-motion";
-import { RxChevronDown } from "react-icons/rx";
-
-type ImageProps = {
-  url?: string;
-  src: string;
-  alt?: string;
-};
-
-type NavLink = {
-  url: string;
-  title: string;
-  subMenuLinks?: NavLink[];
-};
-
-type Props = {
-  logo: ImageProps;
-  navLinks: NavLink[];
-  buttons: ButtonProps[];
-};
-
-export type Navbar3Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Navbar3 = (props: Navbar3Props) => {
-  const { logo, navLinks, buttons } = {
-    ...Navbar3Defaults,
-    ...props,
-  };
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const isMobile = useMediaQuery("(max-width: 991px)");
-
-  return (
-    <section
-      id="relume"
-      className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18"
-    >
-      <button
-        className="flex size-12 flex-col justify-center lg:hidden"
-        onClick={() => setIsMobileMenuOpen((prev) => !prev)}
-      >
-        {Array(3)
-          .fill(null)
-          .map((_, index) => (
-            <span key={index} className="my-[3px] h-0.5 w-6 bg-black lg:hidden" />
-          ))}
-      </button>
-      <AnimatePresence>
-        <motion.div
-          initial="closed"
-          animate={isMobileMenuOpen ? "open" : "closed"}
-          exit="closed"
-          variants={{
-            closed: {
-              x: "-100%",
-              opacity: 1,
-              transition: { type: "spring", duration: 0.6, bounce: 0 },
-              transitionEnd: {
-                opacity: "var(--opacity-closed, 0%)",
-                x: "var(--x-closed, -100%)",
-              },
-            },
-            open: {
-              x: 0,
-              opacity: 1,
-              transition: { type: "spring", duration: 0.4, bounce: 0 },
-            },
-          }}
-          className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]"
-        >
-          <a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
-            <img src={logo.src} alt={logo.alt} />
-          </a>
-          {navLinks.map((navLink, index) => (
-            <div key={index} className="w-full lg:w-auto">
-              {navLink.subMenuLinks && navLink.subMenuLinks.length > 0 ? (
-                <SubMenu navLink={navLink} isMobile={isMobile} />
-              ) : (
-                <a
-                  href={navLink.url}
-                  className="relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base"
-                >
-                  {navLink.title}
-                </a>
-              )}
-            </div>
-          ))}
-          <div className="mt-6 lg:hidden">
-            {buttons.map((button, index) => (
-              <Button key={index} {...button} className="w-full">
-                {button.title}
-              </Button>
-            ))}
-          </div>
-        </motion.div>
-        {isMobileMenuOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            exit={{ opacity: 0 }}
-            animate={{ opacity: 0.5 }}
-            transition={{ duration: 0.2 }}
-            className="fixed inset-0 z-40 bg-black lg:hidden"
-            onClick={() => setIsMobileMenuOpen(false)}
-          />
-        )}
-      </AnimatePresence>
-      <a href={logo.url} className="flex min-h-16 flex-shrink-0 items-center">
-        <img src={logo.src} alt={logo.alt} />
-      </a>
-      <div className="flex min-h-16 items-center justify-end gap-x-4">
-        <div>
-          {buttons.map((button, index) => (
-            <Button key={index} {...button} className="px-4 py-1 md:px-6 md:py-2">
-              {button.title}
-            </Button>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  return (
-    <div
-      onMouseEnter={() => !isMobile && setIsDropdownOpen(true)}
-      onMouseLeave={() => !isMobile && setIsDropdownOpen(false)}
-    >
-      <button
-        className="flex w-full items-center justify-between gap-2 py-3 text-md lg:flex-none lg:justify-start lg:px-4 lg:py-2 lg:text-base"
-        onClick={() => setIsDropdownOpen((prev) => !prev)}
-      >
-        <span>{navLink.title}</span>
-        <AnimatePresence>
-          <motion.span
-            animate={isDropdownOpen ? "rotated" : "initial"}
-            variants={{
-              rotated: { rotate: 180 },
-              initial: { rotate: 0 },
-            }}
-            transition={{ duration: 0.3 }}
-          >
-            <RxChevronDown />
-          </motion.span>
-        </AnimatePresence>
-      </button>
-      {isDropdownOpen && (
-        <AnimatePresence>
-          <motion.nav
-            variants={{
-              open: {
-                visibility: "visible",
-                opacity: "var(--opacity-open, 100%)",
-                y: 0,
-              },
-              close: {
-                visibility: "hidden",
-                opacity: "var(--opacity-close, 0)",
-                y: "var(--y-close, 0%)",
-              },
-            }}
-            initial="close"
-            exit="close"
-            animate={isDropdownOpen ? "open" : "close"}
-            className="bg-background-primary lg:absolute lg:z-50 lg:border lg:border-border-primary lg:p-2 lg:[--y-close:25%]"
-          >
-            {navLink.subMenuLinks?.map((subMenuLink, index) => (
-              <a
-                key={index}
-                href={subMenuLink.url}
-                className="block py-3 pl-[5%] text-md lg:py-2 lg:pl-4 lg:pr-8 lg:text-left lg:text-base"
-              >
-                {subMenuLink.title}
-              </a>
-            ))}
-          </motion.nav>
-        </AnimatePresence>
-      )}
-    </div>
-  );
-};
-
-export const Navbar3Defaults: Props = {
-  logo: {
-    url: "#",
-    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
-    alt: "Logo image",
-  },
-  navLinks: [
-    { title: "Link One", url: "#" },
-    { title: "Link Two", url: "#" },
-    {
-      title: "Link Three",
-      url: "#",
-      subMenuLinks: [
-        { title: "Link Four", url: "#" },
-        { title: "Link Five", url: "#" },
-        { title: "Link Six", url: "#" },
-      ],
-    },
-  ],
-  buttons: [
-    {
-      title: "Button",
-      size: "sm",
-    },
-  ],
-};
-
-
-
-
-import * as React from "react";
-import type { ButtonProps } from "@relume_io/relume-ui";
-import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
-import { BiMap, BiCalendarAlt } from "react-icons/bi";
-
-type ImageProps = {
-  src: string;
-  alt?: string;
-};
-
-type Date = {
-  weekday: string;
-  day: string;
-  month: string;
-  year: string;
-};
-
-type FeaturedEvent = {
-  url: string;
-  image: ImageProps;
-  date: Date;
-  category: string;
-  title: string;
-  location: string;
-  description: string;
-  button: ButtonProps;
-};
-
-type Props = {
-  tagline: string;
-  heading: string;
-  description: string;
-  button: ButtonProps;
-  featuredEvents: FeaturedEvent[];
-};
-
-export type Event17Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Event17 = (props: Event17Props) => {
-  const { tagline, heading, description, button, featuredEvents } = {
-    ...Event17Defaults,
-    ...props,
-  };
-  return (
-    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
-        <div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
-          <h4 className="font-semibold">{tagline}</h4>
-          <h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1>
-          <p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
-        </div>
-        <div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
-          {featuredEvents.map((event, index) => (
-            <FeaturedEvent key={index} {...event} />
-          ))}
-        </div>
-        <div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
-          <Button {...button}>{button.title}</Button>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const FeaturedEvent: React.FC<FeaturedEvent> = ({
-  url,
-  image,
-  date,
-  category,
-  title,
-  location,
-  description,
-  button,
-}) => {
-  return (
-    <div className="flex flex-col items-start">
-      <a href={url} className="relative block aspect-[3/2] w-full">
-        <img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
-        <span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
-          {category}
-        </span>
-      </a>
-      <div className="mt-5 flex flex-col items-start md:mt-6">
-        <div className="mb-3 flex flex-wrap gap-4 text-sm md:mb-4">
-          <div className="flex items-center gap-2">
-            <BiCalendarAlt className="size-6 flex-none" />
-            {date.weekday} {date.day} {date.month} {date.year}
-          </div>
-          <div className="flex items-center gap-2">
-            <BiMap className="size-6 flex-none" />
-            <span>{location}</span>
-          </div>
-        </div>
-        <a href={url} className="mb-2">
-          <h2 className="text-xl font-bold md:text-2xl">{title}</h2>
-        </a>
-        <p>{description}</p>
-        <Button {...button} className="mt-5 md:mt-6">
-          {button.title}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export const Event17Defaults: Props = {
-  tagline: "Tagline",
-  heading: "Events",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  button: {
-    variant: "secondary",
-    size: "primary",
-    title: "View all",
-  },
-  featuredEvents: [
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 1",
-      },
-      date: {
-        weekday: "Fri",
-        day: "09",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 2",
-      },
-      date: {
-        weekday: "Sat",
-        day: "10",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 3",
-      },
-      date: {
-        weekday: "Sun",
-        day: "11",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-  ],
-};
-
-
-
-
-"use client";
-
-import { useState, useEffect } from "react";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@relume_io/relume-ui";
-import type { CarouselApi } from "@relume_io/relume-ui";
-import clsx from "clsx";
-
-type ImageProps = {
-  src: string;
-  alt?: string;
-};
-
-type Props = {
-  heading: string;
-  description: string;
-  images: ImageProps[];
-};
-
-export type Gallery19Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Gallery19 = (props: Gallery19Props) => {
-  const { heading, description, images } = {
-    ...Gallery19Defaults,
-    ...props,
-  };
-
-  const [api, setApi] = useState<CarouselApi>();
-  const [current, setCurrent] = useState(0);
-
-  useEffect(() => {
-    if (!api) {
-      return;
-    }
-    setCurrent(api.selectedScrollSnap() + 1);
-    api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-  }, [api]);
-
-  return (
-    <section id="relume">
-      <div className="px-[5%] py-16 md:py-24 lg:py-28">
-        <div className="container">
-          <div className="rb-12 mb-12 text-center md:mb-18 lg:mb-20">
-            <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
-              {heading}
-            </h2>
-            <p className="md:text-md">{description}</p>
-          </div>
-          {/* for all available options: https://www.embla-carousel.com/api/options/ */}
-          <Carousel
-            setApi={setApi}
-            opts={{
-              loop: true,
-              align: "start",
-            }}
-          >
-            <div className="relative">
-              <CarouselContent className="ml-0">
-                {images.map((image, index) => (
-                  <CarouselItem key={index} className="basis-1/2 px-3 md:basis-1/4 md:px-4">
-                    <div className="w-full">
-                      <img
-                        src={image.src}
-                        alt={image.alt}
-                        className="aspect-square size-full object-cover"
-                      />
-                    </div>
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselPrevious className="hidden md:flex md:size-12 lg:size-14" />
-              <CarouselNext className="hidden md:flex md:size-12 lg:size-14" />
-            </div>
-            <div className="mt-[30px] flex items-center justify-center md:mt-[46px]">
-              {images.map((_, index) => (
-                <button
-                  key={index}
-                  onClick={() => api?.scrollTo(index)}
-                  className={clsx("relative mx-[3px] inline-block size-2 rounded-full", {
-                    "bg-black": current === index + 1,
-                    "bg-neutral-darker/40": current !== index + 1,
-                  })}
-                />
-              ))}
-            </div>
-          </Carousel>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export const Gallery19Defaults: Props = {
-  heading: "Image Gallery",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  images: [
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 1",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 2",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 3",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 4",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 5",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 6",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 7",
-    },
-    {
-      src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
-      alt: "Relume placeholder image 8",
-    },
-  ],
-};
-
-
-
-
-"use client";
-
-import { useState } from "react";
-import { Button, Input } from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
-
-type Props = {
-  heading: string;
-  description: string;
-  inputPlaceholder?: string;
-  button: ButtonProps;
-  termsAndConditions: string;
-  video: string;
-  videoType: string;
-};
-
-export type Cta30Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Cta30 = (props: Cta30Props) => {
-  const { heading, description, inputPlaceholder, button, termsAndConditions, video, videoType } = {
-    ...Cta30Defaults,
-    ...props,
-  };
-
-  const [emailInput, setEmailInput] = useState<string>("");
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    console.log({
-      emailInput,
-    });
-  };
-
-  return (
-    <section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container relative z-10 max-w-lg text-center">
-        <h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl">
-          {heading}
-        </h2>
-        <p className="text-text-alternative md:text-md">{description}</p>
-        <div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
-          <form
-            className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
-            onSubmit={handleSubmit}
-          >
-            <Input
-              id="email"
-              type="email"
-              placeholder={inputPlaceholder}
-              value={emailInput}
-              onChange={(e) => setEmailInput(e.target.value)}
-            />
-            <Button {...button} className="items-center justify-center px-6 py-3">
-              {button.title}
-            </Button>
-          </form>
-          <div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
-        </div>
-      </div>
-      <div className="absolute inset-0 z-0">
-        <video className="absolute inset-0 aspect-video size-full object-cover" autoPlay loop muted>
-          <source src={video} type={videoType} />
-        </video>
-        <div className="absolute inset-0 bg-black/50" />
-      </div>
-    </section>
-  );
-};
-
-export const Cta30Defaults: Props = {
-  heading: "Medium length heading goes here",
-  description:
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  inputPlaceholder: "Enter your email",
-  button: {
-    title: "Sign up",
-    variant: "primary",
-    size: "sm",
-  },
-  termsAndConditions: `
-    <p class='text-xs text-text-alternative'>
-      By clicking Sign Up you're confirming that you agree with our
-      <a href='#' class='underline'>Terms and Conditions</a>.
-    </p>
-    `,
-  video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4",
-  videoType: "video/mp4",
-};
-
-
-
-
-import * as React from "react";
-import type { ButtonProps } from "@relume_io/relume-ui";
-import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
-import { BiMap, BiCalendarAlt } from "react-icons/bi";
-
-type ImageProps = {
-  src: string;
-  alt?: string;
-};
-
-type Date = {
-  weekday: string;
-  day: string;
-  month: string;
-  year: string;
-};
-
-type FeaturedEvent = {
-  url: string;
-  image: ImageProps;
-  date: Date;
-  category: string;
-  title: string;
-  location: string;
-  description: string;
-  button: ButtonProps;
-};
-
-type Props = {
-  tagline: string;
-  heading: string;
-  description: string;
-  button: ButtonProps;
-  featuredEvents: FeaturedEvent[];
-};
-
-export type Event20Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Event20 = (props: Event20Props) => {
-  const { tagline, heading, description, button, featuredEvents } = {
-    ...Event20Defaults,
-    ...props,
-  };
-  return (
-    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
-        <div className="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20">
-          <div className="max-w-lg">
-            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
-            <h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
-            <p className="md:text-md">{description}</p>
-          </div>
-          <Button {...button} className="hidden md:flex">
-            {button.title}
-          </Button>
-        </div>
-        <div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
-          {featuredEvents.map((event, index) => (
-            <FeaturedEvent key={index} {...event} />
-          ))}
-        </div>
-        <div className="mt-12 flex justify-end md:hidden">
-          <Button {...button}>{button.title}</Button>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const FeaturedEvent: React.FC<FeaturedEvent> = ({
-  url,
-  image,
-  date,
-  category,
-  title,
-  location,
-  description,
-  button,
-}) => {
-  return (
-    <div className="flex flex-col items-start border border-border-primary">
-      <a href={url} className="relative block aspect-[3/2] w-full">
-        <img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
-        <span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
-          {category}
-        </span>
-      </a>
-      <div className="flex flex-col items-start p-6">
-        <div className="mb-3 flex flex-wrap gap-2 text-sm sm:gap-4 md:mb-4">
-          <div className="flex items-center gap-2">
-            <BiCalendarAlt className="size-6 flex-none" />
-            {date.weekday} {date.day} {date.month} {date.year}
-          </div>
-          <div className="flex items-center gap-2">
-            <BiMap className="size-6 flex-none" />
-            <span>{location}</span>
-          </div>
-        </div>
-        <a href={url} className="mb-2">
-          <h2 className="text-xl font-bold md:text-2xl">{title}</h2>
-        </a>
-        <p>{description}</p>
-        <Button {...button} className="mt-5 md:mt-6">
-          {button.title}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export const Event20Defaults: Props = {
-  tagline: "Tagline",
-  heading: "Events",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  button: {
-    variant: "secondary",
-    size: "primary",
-    title: "View all",
-  },
-  featuredEvents: [
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 1",
-      },
-      date: {
-        weekday: "Fri",
-        day: "09",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 2",
-      },
-      date: {
-        weekday: "Sat",
-        day: "10",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-    {
-      url: "#",
-      image: {
-        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
-        alt: "Relume placeholder image 3",
-      },
-      date: {
-        weekday: "Sun",
-        day: "11",
-        month: "Feb",
-        year: "2024",
-      },
-      category: "Category",
-      title: "Event title heading",
-      location: "Location",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
-      button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
-    },
-  ],
-};
-
-
-
-
-import { Button } from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
-import { BiCheck } from "react-icons/bi";
-
-type PricingPlan = {
-  planName: string;
-  monthlyPrice: string;
-  yearlyPrice: string;
-  features: string[];
-  button: ButtonProps;
-};
-
-type Props = {
-  tagline: string;
-  heading: string;
-  description: string;
-  pricingPlans: PricingPlan[];
-};
-
-export type Pricing18Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Pricing18 = (props: Pricing18Props) => {
-  const { tagline, heading, description, pricingPlans } = {
-    ...Pricing18Defaults,
-    ...props,
-  };
-  return (
-    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
-        <div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
-          <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
-          <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
-            {heading}
-          </h2>
-          <p className="md:text-md">{description}</p>
-        </div>
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          {pricingPlans.map((plan, index) => (
-            <div
-              key={index}
-              className="flex h-full flex-col justify-between border border-border-primary px-6 py-8 md:p-8"
-            >
-              <div>
-                <div className="rb-6 mb-6 text-center md:mb-8">
-                  <h6 className="text-md font-bold md:text-xl">{plan.planName}</h6>
-                  <h1 className="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
-                    {plan.monthlyPrice}
-                    <span className="text-2xl font-bold md:text-3xl lg:text-4xl">/mo</span>
-                  </h1>
-                  <p>or {plan.yearlyPrice} yearly</p>
-                </div>
-                <div className="mb-8 grid grid-cols-1 gap-4 py-2">
-                  {plan.features.map((feature, index) => (
-                    <div key={index} className="flex self-start">
-                      <div className="mr-4 flex-none self-start">
-                        <BiCheck className="size-6" />
-                      </div>
-                      <p>{feature}</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div>
-                <Button {...plan.button} className="w-full">
-                  {plan.button.title}
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export const Pricing18Defaults: Props = {
-  tagline: "Tagline",
-  heading: "Pricing plan",
-  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  pricingPlans: [
-    {
-      planName: "Basic plan",
-      monthlyPrice: "$19",
-      yearlyPrice: "$199",
-      features: ["Feature text goes here", "Feature text goes here", "Feature text goes here"],
-      button: { title: "Get started" },
-    },
-    {
-      planName: "Business plan",
-      monthlyPrice: "$29",
-      yearlyPrice: "$299",
-      features: [
-        "Feature text goes here",
-        "Feature text goes here",
-        "Feature text goes here",
-        "Feature text goes here",
-      ],
-      button: { title: "Get started" },
-    },
-    {
-      planName: "Enterprise plan",
-      monthlyPrice: "$49",
-      yearlyPrice: "$499",
-      features: [
-        "Feature text goes here",
-        "Feature text goes here",
-        "Feature text goes here",
-        "Feature text goes here",
-        "Feature text goes here",
-      ],
-      button: { title: "Get started" },
-    },
-  ],
-};
-
-
-
-
-import {
-  Button,
-  Accordion,
-  AccordionTrigger,
-  AccordionContent,
-  AccordionItem,
-} from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
-
-type QuestionsProps = {
-  title: string;
-  answer: string;
-};
-
-type Props = {
-  heading: string;
-  description: string;
-  footerHeading: string;
-  footerDescription: string;
-  button: ButtonProps;
-  questions: QuestionsProps[];
-};
-
-export type Faq10Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Faq10 = (props: Faq10Props) => {
-  const { heading, description, questions, footerHeading, footerDescription, button } = {
-    ...Faq10Defaults,
-    ...props,
-  };
-
-  const halfLength = Math.ceil(questions.length / 2);
-  const firstColumnQuestions = questions.slice(0, halfLength);
-  const secondColumnQuestions = questions.slice(halfLength);
-
-  return (
-    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
-        <div className="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
-          <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
-            {heading}
-          </h2>
-          <p className="md:text-md">{description}</p>
-        </div>
-        <div className="grid w-full auto-rows-min grid-cols-1 items-start gap-x-12 md:grid-cols-2 lg:gap-x-16">
-          <Accordion type="multiple" className="w-full">
-            {firstColumnQuestions.map((question, index) => (
-              <AccordionItem key={index} value={`item-${index}`} className="overflow-hidden">
-                <AccordionTrigger className="md:py-5 md:text-md">{question.title}</AccordionTrigger>
-                <AccordionContent className="md:pb-6">{question.answer}</AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-          <Accordion type="multiple" className="w-full">
-            {secondColumnQuestions.map((question, index) => (
-              <AccordionItem
-                key={index + halfLength}
-                value={`item-${index + halfLength}`}
-                className="overflow-hidden first:border-t-0 md:first:border-t"
-              >
-                <AccordionTrigger className="md:py-5 md:text-md">{question.title}</AccordionTrigger>
-                <AccordionContent className="md:pb-6">{question.answer}</AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </div>
-        <div className="mx-auto mt-12 max-w-md text-center md:mt-18 lg:mt-20">
-          <h4 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
-            {footerHeading}
-          </h4>
-          <p className="md:text-md">{footerDescription}</p>
-          <div className="mt-6 md:mt-8">
-            <Button {...button}>{button.title}</Button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export const Faq10Defaults: Props = {
-  heading: "FAQs",
-  description:
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  questions: [
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-    {
-      title: "Question text goes here",
-      answer:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
-    },
-  ],
-  footerHeading: "Still have questions?",
-  footerDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  button: {
-    title: "Contact",
-    variant: "secondary",
-  },
-};
-
-
-
-
-import { FaXTwitter } from "react-icons/fa6";
-import {
-  BiLogoFacebookCircle,
-  BiLogoInstagram,
-  BiLogoLinkedinSquare,
-  BiLogoYoutube,
-} from "react-icons/bi";
-
-type ImageProps = {
-  url?: string;
-  src: string;
-  alt?: string;
-};
-
-type Links = {
-  title: string;
-  url: string;
-};
-
-type SocialMediaLinks = {
-  url: string;
-  icon: React.ReactNode;
-};
-
-type ColumnLinks = {
-  links: Links[];
-};
-
-type Address = {
-  label: string;
-  value: string;
-};
-
-type Contact = {
-  label: string;
-  phone: string;
-  email: string;
-};
-
-type Props = {
-  logo: ImageProps;
-  address: Address;
-  contact: Contact;
-  columnLinks: ColumnLinks[];
-  socialMediaLinks: SocialMediaLinks[];
-  footerText?: string;
-  footerLinks: Links[];
-};
-
-export type Footer3Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
-
-export const Footer3 = (props: Footer3Props) => {
-  const { logo, address, contact, columnLinks, socialMediaLinks, footerText, footerLinks } = {
-    ...Footer3Defaults,
-    ...props,
-  };
-  return (
-    <footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20">
-      <div className="container">
-        <div className="grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20">
-          <div>
-            <div className="rb-6 mb-6 md:mb-8">
-              <a href={logo.url}>
-                <img src={logo.src} alt={logo.alt} className="inline-block" />
-              </a>
-            </div>
-            <div className="rb-6 mb-6 md:mb-8">
-              <div>
-                <p className="mb-1 text-sm font-semibold">{address.label}</p>
-                <p className="mb-5 text-sm md:mb-6">{address.value}</p>
-              </div>
-              <div>
-                <p className="mb-1 text-sm font-semibold">{contact.label}</p>
-                <p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6">
-                  <a href={`tel:${contact.phone}`}>{contact.phone}</a>
-                  <a href={`mailto:${contact.email}`}>{contact.email}</a>
-                </p>
-              </div>
-            </div>
-            <div className="grid grid-flow-col grid-cols-[max-content] items-start justify-start gap-x-3">
-              {socialMediaLinks.map((link, index) => (
-                <a key={index} href={link.url}>
-                  {link.icon}
-                </a>
-              ))}
-            </div>
-          </div>
-          <div className="grid grid-cols-1 items-start gap-x-6 gap-y-10 md:grid-cols-2 md:gap-x-8 md:gap-y-4">
-            {columnLinks.map((column, index) => (
-              <ul key={index}>
-                {column.links.map((link, linkIndex) => (
-                  <li key={linkIndex} className="py-2 text-sm font-semibold">
-                    <a href={link.url}>{link.title}</a>
-                  </li>
-                ))}
-              </ul>
-            ))}
-          </div>
-        </div>
-        <div className="h-px w-full bg-black" />
-        <div className="flex flex-col-reverse items-start justify-between pb-4 pt-6 text-sm md:flex-row md:items-center md:pb-0 md:pt-8">
-          <p className="mt-8 md:mt-0">{footerText}</p>
-          <ul className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 text-sm md:grid-flow-col md:gap-x-6 md:gap-y-0">
-            {footerLinks.map((link, index) => (
-              <li key={index} className="underline">
-                <a href={link.url}>{link.title}</a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export const Footer3Defaults: Props = {
-  logo: {
-    url: "#",
-    src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
-    alt: "Logo image",
-  },
-  address: {
-    label: "Address:",
-    value: "Level 1, 12 Sample St, Sydney NSW 2000",
-  },
-  contact: {
-    label: "Contact:",
-    phone: "1800 123 4567",
-    email: "info@relume.io",
-  },
-  columnLinks: [
-    {
-      links: [
-        { title: "Link One", url: "#" },
-        { title: "Link Two", url: "#" },
-        { title: "Link Three", url: "#" },
-        { title: "Link Four", url: "#" },
-        { title: "Link Five", url: "#" },
-      ],
-    },
-    {
-      links: [
-        { title: "Link Six", url: "#" },
-        { title: "Link Seven", url: "#" },
-        { title: "Link Eight", url: "#" },
-        { title: "Link Nine", url: "#" },
-        { title: "Link Ten", url: "#" },
-      ],
-    },
-  ],
-  socialMediaLinks: [
-    { url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
-    { url: "#", icon: <BiLogoInstagram className="size-6" /> },
-    { url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
-    { url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
-    { url: "#", icon: <BiLogoYoutube className="size-6" /> },
-  ],
-  footerText: "© 2024 Relume. All rights reserved.",
-  footerLinks: [
-    { title: "Privacy Policy", url: "#" },
-    { title: "Terms of Service", url: "#" },
-    { title: "Cookies Settings", url: "#" },
-  ],
-};