{Array(2)
.fill(0)
@@ -31,18 +26,20 @@ export const Banner15 = (props: Banner15Props) => {
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) => (
-
+ {sections.map((section, i) => (
+
-
))}
@@ -55,32 +52,21 @@ export const Banner15 = (props: Banner15Props) => {
export const Banner15Defaults: Props = {
sections: [
{
- title: "UX Schweiz",
- image: {
- src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
- alt: "UX Schweiz",
- },
+ title: "Figma",
+ image: { src: logoFigma, alt: "Figma" },
},
{
title: "Adobe",
- image: {
- src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
- alt: "Adobe",
- },
+ image: { src: logoAdobe, alt: "Adobe" },
},
{
title: "Google",
- image: {
- src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
- alt: "Google",
- },
+ image: { src: logoGoogle, alt: "Google" },
},
{
- title: "Figma",
- image: {
- src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg",
- alt: "Figma",
- },
+ title: "UX Schweiz",
},
],
-};
\ No newline at end of file
+};
+
+export default Banner15;
diff --git a/relume-test/src/components/Event33.tsx b/relume-test/src/components/Event33.tsx
index afaf6ba..2216c3e 100644
--- a/relume-test/src/components/Event33.tsx
+++ b/relume-test/src/components/Event33.tsx
@@ -29,8 +29,11 @@ const levelStyles: Record{section.title}
- 
-
+ {section.image && (
+
-
+
+
+ )}
+
- {event.time}
+
+
@@ -52,13 +55,6 @@ const EventRow = ({ event }: { event: ProgramEvent }) => (
>
Über {event.speaker.split(" ")[0]} {event.speaker.split(" ").slice(-1)[0]}
-
-
- Tickets kaufen
-
);
@@ -75,6 +71,14 @@ export const Event33 = ({ events }: Props) => {
))}
)}
+
+ {event.day}
+ {event.time}
+
@@ -52,13 +55,6 @@ const EventRow = ({ event }: { event: ProgramEvent }) => (
>
Über {event.speaker.split(" ")[0]} {event.speaker.split(" ").slice(-1)[0]}
-
-
- Tickets kaufen
-
- {tabs.map((tab) => (
-
- ))}
-
- );
-
- // Speaker page: just tabs + search, no day filter or sort
+ // Speaker page: multi-select tabs + search
if (!useFilterToggle) {
+ const speakerTabs = tabs ?? [];
return (
-
+
+ {speakerTabs.map((tab) => (
+
+ ))}
+
{searchLabel}
@@ -93,17 +108,17 @@ export const Filters5 = ({
{resetLabel}
-
-
+
@@ -128,20 +143,43 @@ export const Filters5 = ({
);
}
- // Programm page: full filter bar, always visible
+ // Programm page: multi-select filter bar
return (
- {/* Row 1: Filter label + category pills + sort */}
+ {/* Row 1: Filter label + multi-select pills + sort */}
-
+
- {/* Row 2: Search + Day filter — always visible */}
-
-
)}
+ {/* "Alle" pill — active only when nothing selected */}
+
+ {PROGRAMM_TABS.map((tab) => (
+
+ ))}
{showSortButton && (
@@ -157,85 +195,48 @@ export const Filters5 = ({
{sortOpen && (
- {["Zeit aufsteigend", "Zeit absteigend"].map((opt) => (
-
- ))}
+ {(["asc", "desc"] as const).map((order) => {
+ const label = order === "asc" ? "Zeit aufsteigend" : "Zeit absteigend";
+ return (
+
+ );
+ })}
)}
-
- {/* Search */}
-
- ;
+export type Header1Props = React.ComponentPropsWithoutRef<"section">;
export const Header1 = (props: Header1Props) => {
- const { heading, description, buttons, image } = {
- ...Header1Defaults,
- ...props,
- };
return (
-
-
- {searchLabel}
-
-
-
-
+ {/* Row 2: Full-width search */}
+
+
{/* Active tags */}
diff --git a/relume-test/src/components/Header.tsx b/relume-test/src/components/Header.tsx
index 9d3939c..2f50434 100644
--- a/relume-test/src/components/Header.tsx
+++ b/relume-test/src/components/Header.tsx
@@ -1,43 +1,114 @@
import headerImage from "../assets/Header.png";
-import { Button } from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
+import logoAdobe from "../assets/logo-adobe.svg";
+import logoFigma from "../assets/logo-figma.svg";
+import logoGoogle from "../assets/logo-google.svg";
-type ImageProps = {
- src: string;
- alt?: string;
-};
-
-type Props = {
- heading: string;
- description: string;
- buttons: ButtonProps[];
- image: ImageProps;
-};
-
-export type Header1Props = React.ComponentPropsWithoutRef<"section"> & Partial
+ {searchLabel}
+
+
+
+
-
- {/* Day dropdown */}
- {showDayFilter && (
-
- Filtern nach Eventtage
-
- )}
-
- {dayOpen && (
-
-
- {DAYS.map((d) => (
-
- ))}
-
- )}
-
-
-
-
{heading}
-{description}
-
- {buttons.map((button, index) => (
-
+
+ {/* Mobile-only faint background image */}
+
+ {/* Sessions */}
+ {speakerEvents.length > 0 && (
+
+
+ )}
+
{/* Other speakers */}
+ 
+
+
+
+ {/* Desktop right-side image panel */}
+
+
+ {/* Blend edge left */}
+
+ {/* Top vignette */}
+
+ {/* Bottom vignette */}
+
+
+
+ {/* Glow blobs */}
+
+
+
+
+ {/* Main content */}
+
+ ;
export const Header23 = (props: Header23Props) => {
- const { heading, description, buttons, children } = {
+ const { heading, description, buttons, showTicketButton = true, children } = {
...Header23Defaults,
...props,
};
@@ -29,18 +34,38 @@ export const Header23 = (props: Header23Props) => {
{/* Content */}
);
diff --git a/relume-test/src/pages/Programm.tsx b/relume-test/src/pages/Programm.tsx
index ec60265..7be20c9 100644
--- a/relume-test/src/pages/Programm.tsx
+++ b/relume-test/src/pages/Programm.tsx
@@ -6,45 +6,61 @@ import { Event33 } from "../components/Event33";
import { Banner15 } from "../components/Banner15";
import { Footer3 } from "../components/Footer";
import { ALL_EVENTS } from "../data/events";
+import type { EventDay } from "../components/Event33";
-const TYPE_TABS = ["Talk", "Workshop", "Interaction", "AI and Future"];
-const LEVEL_TABS: Record = {
- "Senior": "Senior",
- "Mid-Level": "Mid-Level",
- "Junior": "Junior",
+const DAY_VALUES = ["Donnerstag", "Freitag"];
+const TYPE_VALUES = ["Talk", "Workshop", "Interaction", "AI and Future"];
+const LEVEL_VALUES = ["Senior", "Mid-Level", "Junior"];
+
+const DAY_ORDER: Record = { Donnerstag: 0, Freitag: 1 };
+
+const parseStartMinutes = (time: string) => {
+ const match = time.match(/(\d{2}):(\d{2})/);
+ return match ? parseInt(match[1]) * 60 + parseInt(match[2]) : 0;
};
const Programm = () => {
- const [activeTab, setActiveTab] = useState("all");
+ const [activeTabs, setActiveTabs] = useState([]);
const [searchQuery, setSearchQuery] = useState("");
- const [activeDay, setActiveDay] = useState("all");
+ const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
const filteredEvents = useMemo(() => {
- return ALL_EVENTS.filter((e) => {
- if (activeTab !== "all") {
- const matchesType = TYPE_TABS.includes(activeTab) && e.type === activeTab;
- const matchesLevel = LEVEL_TABS[activeTab] && e.level === LEVEL_TABS[activeTab];
- if (!matchesType && !matchesLevel) return false;
+ const filtered = ALL_EVENTS.filter((e) => {
+ if (activeTabs.length > 0) {
+ const activeDays = activeTabs.filter((t) => DAY_VALUES.includes(t));
+ const activeTypes = activeTabs.filter((t) => TYPE_VALUES.includes(t));
+ const activeLevels = activeTabs.filter((t) => LEVEL_VALUES.includes(t));
+ if (activeDays.length > 0 && !activeDays.includes(e.day)) return false;
+ if (activeTypes.length > 0 && !activeTypes.includes(e.type)) return false;
+ if (activeLevels.length > 0 && !activeLevels.includes(e.level)) return false;
}
if (searchQuery) {
const q = searchQuery.toLowerCase();
if (!e.title.toLowerCase().includes(q) && !e.speaker.toLowerCase().includes(q)) return false;
}
- if (activeDay !== "all" && e.day !== activeDay) return false;
return true;
});
- }, [activeTab, searchQuery, activeDay]);
+
+ return [...filtered].sort((a, b) => {
+ const dayDiff = DAY_ORDER[a.day] - DAY_ORDER[b.day];
+ if (dayDiff !== 0) return sortOrder === "asc" ? dayDiff : -dayDiff;
+ const timeDiff = parseStartMinutes(a.time) - parseStartMinutes(b.time);
+ return sortOrder === "asc" ? timeDiff : -timeDiff;
+ });
+ }, [activeTabs, searchQuery, sortOrder]);
const activeTags = [
searchQuery ? { label: searchQuery, onRemove: () => setSearchQuery("") } : null,
- activeDay !== "all" ? { label: activeDay, onRemove: () => setActiveDay("all") } : null,
- activeTab !== "all" ? { label: activeTab, onRemove: () => setActiveTab("all") } : null,
+ ...activeTabs.map((tab) => ({
+ label: tab,
+ onRemove: () => setActiveTabs((prev) => prev.filter((t) => t !== tab)),
+ })),
].filter(Boolean) as { label: string; onRemove: () => void }[];
const handleReset = () => {
- setActiveTab("all");
+ setActiveTabs([]);
setSearchQuery("");
- setActiveDay("all");
+ setSortOrder("asc");
};
return (
@@ -52,14 +68,14 @@ const Programm = () => {
([]);
const [searchQuery, setSearchQuery] = useState("");
const filteredSpeakers = useMemo(() => {
return ALL_SPEAKERS.filter((s) => {
- if (activeTab !== "all" && s.category !== activeTab) return false;
+ if (activeTabs.length > 0 && !activeTabs.includes(s.category)) return false;
if (searchQuery) {
const q = searchQuery.toLowerCase();
if (
@@ -35,11 +34,14 @@ const Speaker = () => {
}
return true;
});
- }, [activeTab, searchQuery]);
+ }, [activeTabs, searchQuery]);
const activeTags = [
searchQuery ? { label: searchQuery, onRemove: () => setSearchQuery("") } : null,
- activeTab !== "all" ? { label: activeTab, onRemove: () => setActiveTab("all") } : null,
+ ...activeTabs.map((tab) => ({
+ label: tab,
+ onRemove: () => setActiveTabs((prev) => prev.filter((t) => t !== tab)),
+ })),
].filter(Boolean) as { label: string; onRemove: () => void }[];
return (
@@ -49,20 +51,19 @@ const Speaker = () => {
heading="Unsere Speaker"
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={[
- { title: "Zu den Speakern", variant: "primary", className: "bg-acid-lime text-neutral-dark border-acid-lime hover:bg-acid-lime/90 hover:border-acid-lime/90 rounded-2xl" },
- { title: "Zum Programm", variant: "secondary", className: "bg-transparent border-acid-lime text-acid-lime hover:bg-acid-lime/10 hover:border-acid-lime hover:text-acid-lime rounded-2xl" },
+ { title: "Zum Programm", href: "/programm", className: "bg-transparent border-acid-lime text-acid-lime hover:bg-acid-lime/10" },
]}
/>
{ setSearchQuery(""); setActiveTab("all"); }}
+ onReset={() => { setSearchQuery(""); setActiveTabs([]); }}
useFilterToggle={false}
showDayFilter={false}
showSortButton={false}
diff --git a/relume-test/src/pages/SpeakerDetail.tsx b/relume-test/src/pages/SpeakerDetail.tsx
index 927b4d9..79b1500 100644
--- a/relume-test/src/pages/SpeakerDetail.tsx
+++ b/relume-test/src/pages/SpeakerDetail.tsx
@@ -2,6 +2,7 @@ import { useParams, Navigate } from "react-router-dom";
import { Navbar3 } from "../components/Navbar";
import { Team4, Team4Defaults } from "../components/Team4";
import { Footer3 } from "../components/Footer";
+import { ALL_EVENTS } from "../data/events";
import webflowLogo from "../assets/webflow.png";
import relumeLogo from "../assets/relume.png";
@@ -38,6 +39,7 @@ const SpeakerDetail = () => {
if (!speaker) return
+
+
+ {/* Speaker companies bar */}
+
+
+ {/* Date badge */}
+
-
+
+
+ 25. – 26. Juni 2026 · Zürich
+
+
+
+
+ {/* Heading */}
+ + UXplore +
++ Konferenz 2026 +
+ + {/* Tagline */} ++ Zwei Tage, zwölf Sessions, ein Ziel: UX, das wirklich wirkt. Die führende Schweizer Konferenz für Designer, Produktteams und alle, die nutzerzentriertes Denken in die Praxis bringen. +
+ + {/* CTAs */} + + + {/* Stats */} +
+ {[
+ { value: "2", label: "Tage" },
+ { value: "12+", label: "Sessions" },
+ { value: "6", label: "Workshops" },
+ { value: "500+", label: "Teilnehmer" },
+ ].map((stat, i) => (
+
+
+
))}
{stat.value}
+ {stat.label}
+
- 
+
+
+
@@ -45,13 +116,6 @@ export const Header1 = (props: Header1Props) => {
);
};
-export const Header1Defaults: Props = {
- heading: "UXplore Konferenz 2026",
- description:
- "25-26 Juni Zürich",
- buttons: [],
- image: {
- src: headerImage,
- alt: "UXplore Konferenz 2026",
- },
-};
+export const Header1Defaults = {};
+
+export default Header1;
diff --git a/relume-test/src/components/Header23.tsx b/relume-test/src/components/Header23.tsx
index e63f75f..068d361 100644
--- a/relume-test/src/components/Header23.tsx
+++ b/relume-test/src/components/Header23.tsx
@@ -1,17 +1,22 @@
import headerBg from "../assets/program-header.png";
-import { Button } from "@relume_io/relume-ui";
-import type { ButtonProps } from "@relume_io/relume-ui";
+type LinkButton = {
+ title: string;
+ href?: string;
+ variant?: string;
+ className?: string;
+};
type Props = {
heading: string;
description: string;
- buttons: ButtonProps[];
+ buttons: LinkButton[];
+ showTicketButton?: boolean;
};
export type Header23Props = React.ComponentPropsWithoutRef<"section"> & Partial
+
+
+ Speaker von
+
+ 
+ 
+ 
+ ;
-const TicketCardLime = ({ plan }: { plan: TicketPlan }) => {
+const TicketCard = ({ plan }: { plan: TicketPlan }) => {
const [qty, setQty] = useState(0);
- const total = qty * plan.price;
+ const total = qty * plan.earlyBirdPrice;
return (
-
-
+
+ 2-Tage-Konferenz
+
+
+ Workshops inklusive
+
+
{heading}
{description}
+ {showTicketButton && ( + + Jetzt Ticket sichern + + )} {buttons.length > 0 && ( -
+
diff --git a/relume-test/src/components/Pricing39Ticket.tsx b/relume-test/src/components/Pricing39Ticket.tsx
index acf8487..6acb51c 100644
--- a/relume-test/src/components/Pricing39Ticket.tsx
+++ b/relume-test/src/components/Pricing39Ticket.tsx
@@ -2,8 +2,10 @@ import React, { useState } from "react";
type TicketPlan = {
day: string;
- price: number;
date: string;
+ earlyBirdPrice: number;
+ regularPrice: number;
+ earlyBirdDeadline: string;
};
type Props = {
@@ -13,15 +15,28 @@ type Props = {
export type Pricing39TicketProps = React.ComponentPropsWithoutRef<"section"> & Partial
{buttons.map((button, index) => (
-
+
))}
)}
@@ -53,7 +78,7 @@ export const Header23 = (props: Header23Props) => {
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.",
+ description: "Erlebe zwei Tage voller Insights von den klügsten Köpfen der Branche. Jedes Ticket beinhaltet den Zugang zu allen Sessions und Workshops – nach dem Kauf kannst du dich für deine Wunsch-Workshops anmelden.",
buttons: [],
};
diff --git a/relume-test/src/components/Navbar.tsx b/relume-test/src/components/Navbar.tsx
index c095754..ccd5998 100644
--- a/relume-test/src/components/Navbar.tsx
+++ b/relume-test/src/components/Navbar.tsx
@@ -95,10 +95,10 @@ export const Navbar3 = (props: Navbar3Props) => {
{buttons.map(({ url, ...button }, index) =>
url ? (
-
+
) : (
-
+
)
)}
-
@@ -80,8 +96,8 @@ export const Pricing39Ticket = (props: Pricing39TicketProps) => {
export const Pricing39TicketDefaults: Props = {
heading: "1-Tagespässe",
plans: [
- { day: "Donnerstag", price: 131, date: "25. Juni 2026" },
- { day: "Freitag", price: 131, date: "26. Juni 2026" },
+ { day: "Donnerstag", date: "25. Juni 2026", earlyBirdPrice: 99, regularPrice: 131, earlyBirdDeadline: "31. Mai 2026" },
+ { day: "Freitag", date: "26. Juni 2026", earlyBirdPrice: 99, regularPrice: 131, earlyBirdDeadline: "31. Mai 2026" },
],
};
diff --git a/relume-test/src/components/Team4.tsx b/relume-test/src/components/Team4.tsx
index c559748..f138dda 100644
--- a/relume-test/src/components/Team4.tsx
+++ b/relume-test/src/components/Team4.tsx
@@ -81,17 +81,7 @@ const MemberCard = ({ member }: { member: TeamMember }) => (
{plan.day}
-CHF {plan.price}
-{plan.date}
+
+
+
@@ -69,7 +85,7 @@ export const Pricing39Ticket = (props: Pricing39TicketProps) => {
}`}
>
{plans.map((plan, index) => (
-
{plan.day}
+ + {/* Earlybird price block */} +
+
+
+
+
+
+
+ Earlybird bis {plan.earlyBirdDeadline}
+
+ CHF {plan.earlyBirdPrice}
+ CHF {plan.regularPrice} +{plan.date}
+
-
CHF {plan.price},-
- {total},-
+ CHF {plan.earlyBirdPrice},-
+ Total CHF {total},-
{member.company}
)}{member.description}
-
- {member.talks.map((talk, i) => (
-
- {talk.title}
-
- ))}
-
+ {member.description}
+
+ Sessions
+
+ {speakerEvents.map((event) => (
+
+
+
+
+
+ Zur Session →
+
+
+ ))}
+
+
+ {event.type}
+
+
+ {event.day} · {event.time}
+
+
+ + {event.title} +
+
diff --git a/relume-test/src/pages/Tickets.tsx b/relume-test/src/pages/Tickets.tsx
index 517a86a..a281872 100644
--- a/relume-test/src/pages/Tickets.tsx
+++ b/relume-test/src/pages/Tickets.tsx
@@ -3,7 +3,6 @@
import React, { useState, useEffect } from "react";
import { Navbar3 } from "../components/Navbar";
import { Header23 } from "../components/Header23";
-import { Pricing1Ticket } from "../components/Pricing1Ticket";
import { Pricing39Ticket } from "../components/Pricing39Ticket";
import { Footer3 } from "../components/Footer";
import { Input } from "@relume_io/relume-ui";
@@ -82,6 +81,7 @@ const Tickets = () => {
heading="Ticketshop"
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={[]}
+ showTicketButton={false}
>
DO – FR, 25. – 26. Juni 2026
@@ -120,17 +120,16 @@ const Tickets = () => {
-