diff --git a/relume-test/src/assets/speakers/speaker5.jpg b/relume-test/src/assets/speakers/speaker5.jpg new file mode 100644 index 0000000..379b88f Binary files /dev/null and b/relume-test/src/assets/speakers/speaker5.jpg differ diff --git a/relume-test/src/assets/speakers/speaker6.jpg b/relume-test/src/assets/speakers/speaker6.jpg new file mode 100644 index 0000000..64ab53b Binary files /dev/null and b/relume-test/src/assets/speakers/speaker6.jpg differ diff --git a/relume-test/src/components/Banner15.tsx b/relume-test/src/components/Banner15.tsx index 6918ee3..4d8c90c 100644 --- a/relume-test/src/components/Banner15.tsx +++ b/relume-test/src/components/Banner15.tsx @@ -55,31 +55,31 @@ export const Banner15 = (props: Banner15Props) => { export const Banner15Defaults: Props = { sections: [ { - title: "Relume Library", + title: "UX Schweiz", image: { src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg", - alt: "Relume Library", + alt: "UX Schweiz", }, }, { - title: "Relume Library", + title: "Adobe", image: { src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg", - alt: "Relume Library", + alt: "Adobe", }, }, { - title: "Relume Library", + title: "Google", image: { src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg", - alt: "Relume Library", + alt: "Google", }, }, { - title: "Relume Library", + title: "Figma", image: { src: "https://relume-assets.s3.us-east-1.amazonaws.com/placeholder-image.svg", - alt: "Relume Library", + alt: "Figma", }, }, ], diff --git a/relume-test/src/components/Event33.tsx b/relume-test/src/components/Event33.tsx index 75cff66..afaf6ba 100644 --- a/relume-test/src/components/Event33.tsx +++ b/relume-test/src/components/Event33.tsx @@ -23,30 +23,29 @@ type Props = { }; const levelStyles: Record = { - Senior: "bg-electric-violet text-cloud-white", - "Mid-Level": "bg-electric-violet text-cloud-white", - Junior: "bg-acid-lime text-tech-navy", + Senior: "bg-electric-violet/20 text-electric-violet", + "Mid-Level": "bg-electric-violet/20 text-electric-violet", + Junior: "bg-electric-violet/20 text-electric-violet", }; const EventRow = ({ event }: { event: ProgramEvent }) => ( -
+
{event.time} -
+
{event.image.alt}
-
+
{event.title}

{event.speaker}

+ + {event.level} +
- - {event.level} - - void }; @@ -58,16 +57,18 @@ export const Filters5 = ({ activeDay = "all", onDayChange = () => {}, }: Props) => { - const [isOpen, setIsOpen] = useState(false); const [sortOpen, setSortOpen] = useState(false); + const [dayOpen, setDayOpen] = useState(false); - const TabRow = () => ( + const selectedDayLabel = DAYS.find((d) => d.value === activeDay)?.label ?? "Alle Tage"; + + const TabPills = () => (
{tabs.map((tab) => (
); - const SearchRow = () => ( -
-
- {searchLabel} - -
-
- - onSearchChange(e.target.value)} - /> -
-
- ); - - // Speaker variant: always-visible search, no toggle + // Speaker page: just tabs + search, no day filter or sort if (!useFilterToggle) { return ( -
-
- - +
+
+ +
+
+ {searchLabel} + +
+
+ + onSearchChange(e.target.value)} + /> + {searchQuery && ( + + )} +
+
{activeTags.length > 0 && ( -
+
{activeTags.map((tag, i) => ( {tag.label} ))} @@ -129,36 +128,39 @@ export const Filters5 = ({ ); } - // Programm variant: toggle button, collapsible panel + // Programm page: full filter bar, always visible return ( -
-
-
- - +
+ +
+ +
+ {showSortButton && ( -
+
{sortOpen && ( -
+
{["Zeit aufsteigend", "Zeit absteigend"].map((opt) => (
- - {isOpen && ( - -
-
- - onSearchChange(e.target.value)} - /> -
- +
+
+ + onSearchChange(e.target.value)} + /> + {searchQuery && ( + - {showDayFilter && ( -
- - Filtern nach Eventtage - - + )} +
+
+ + {/* Day dropdown */} + {showDayFilter && ( +
+ Filtern nach Eventtage +
+ + {dayOpen && ( +
+ {DAYS.map((d) => ( + + ))}
)}
- {activeTags.length > 0 && ( -
- {activeTags.map((tag, i) => ( - - {tag.label} - - - ))} -
- )} - +
)} - +
+ + {/* Active tags */} + {activeTags.length > 0 && ( +
+ {activeTags.map((tag, i) => ( + + {tag.label} + + + ))} +
+ )} +
); diff --git a/relume-test/src/components/Team4.tsx b/relume-test/src/components/Team4.tsx index 71de835..34d54d5 100644 --- a/relume-test/src/components/Team4.tsx +++ b/relume-test/src/components/Team4.tsx @@ -2,6 +2,8 @@ import speaker1 from "../assets/speakers/speaker1.jpg"; import speaker2 from "../assets/speakers/speaker2.jpg"; import speaker3 from "../assets/speakers/speaker3.jpg"; import speaker4 from "../assets/speakers/speaker4.jpg"; +import speaker5 from "../assets/speakers/speaker5.jpg"; +import speaker6 from "../assets/speakers/speaker6.jpg"; import { BiLogoLinkedinSquare } from "react-icons/bi"; import { Link } from "react-router-dom"; @@ -173,7 +175,7 @@ export const Team4Defaults: Props = { socialLinks: [{ href: "#", icon: }], }, { - image: { src: speaker1, alt: "Liam O'Connor" }, + image: { src: speaker5, alt: "Liam O'Connor" }, name: "Liam O'Connor", role: "Lead Product Designer", company: "Spotify", @@ -188,7 +190,7 @@ export const Team4Defaults: Props = { socialLinks: [{ href: "#", icon: }], }, { - image: { src: speaker2, alt: "Fabienne Keller" }, + image: { src: speaker6, alt: "Fabienne Keller" }, name: "Fabienne Keller", role: "Gründerin", company: "User-First Agency", @@ -202,36 +204,6 @@ export const Team4Defaults: Props = { talks: [{ title: "Workshop: Research Repositories", type: "Workshop" }], socialLinks: [{ href: "#", icon: }], }, - { - image: { src: speaker3, alt: "Thomas Meyer" }, - name: 'Thomas "Tom" Meyer', - role: "Creative Director", - company: "Swisscom", - slug: "thomas-meyer", - location: "Bern, Schweiz", - description: - "Tom zeigt, wie man in großen Konzernen eine Design-Kultur etabliert, die über das visuelle Layer hinausgeht.", - fullBio: - 'Thomas "Tom" Meyer ist Creative Director bei Swisscom und zeigt, wie man in großen Konzernen eine Design-Kultur etabliert, die über das visuelle Layer hinausgeht. Er bringt über 15 Jahre Erfahrung im Corporate Design Management mit.', - category: "Strategie", - talks: [{ title: "Networking: Leading Teams", type: "Networking" }], - socialLinks: [{ href: "#", icon: }], - }, - { - image: { src: speaker4, alt: "Sarah M. Widmer" }, - name: "Sarah M. Widmer", - role: "Senior UX Architect", - company: "SBB", - slug: "sarah-m-widmer", - location: "Bern, Schweiz", - description: - "Sarah gestaltet die Mobilität von morgen. Sie zeigt, wie man Millionen von Nutzern barrierefrei durch den digitalen öV-Dschungel leitet.", - fullBio: - "Sarah M. Widmer ist Senior UX Architect bei der SBB und gestaltet die Mobilität von morgen. Sie zeigt, wie man Millionen von Nutzern barrierefrei durch den digitalen öV-Dschungel leitet und dabei Accessibility nicht als Pflicht, sondern als Designprinzip versteht.", - category: "Design / UX", - talks: [{ title: "Talk: Inclusive Design at Scale", type: "Talk" }], - socialLinks: [{ href: "#", icon: }], - }, ], }; diff --git a/relume-test/src/data/events.tsx b/relume-test/src/data/events.tsx index 5ea8988..4ebcc63 100644 --- a/relume-test/src/data/events.tsx +++ b/relume-test/src/data/events.tsx @@ -2,6 +2,8 @@ import spk1 from "../assets/speakers/speaker1.jpg"; import spk2 from "../assets/speakers/speaker2.jpg"; import spk3 from "../assets/speakers/speaker3.jpg"; import spk4 from "../assets/speakers/speaker4.jpg"; +import spk5 from "../assets/speakers/speaker5.jpg"; +import spk6 from "../assets/speakers/speaker6.jpg"; import type { ProgramEvent } from "../components/Event33"; export const ALL_EVENTS: ProgramEvent[] = [ @@ -69,7 +71,7 @@ export const ALL_EVENTS: ProgramEvent[] = [ { id: "do-5", time: "18:00 – 19:30 Uhr", - image: { src: spk1, alt: "Liam O'Connor" }, + image: { src: spk5, alt: "Liam O'Connor" }, title: "Talk: Ethical AI", subtitle: "Verantwortungsvolles Design in der KI-Ära", speaker: "Liam O'Connor", @@ -145,7 +147,7 @@ export const ALL_EVENTS: ProgramEvent[] = [ { id: "fr-5", time: "18:00 – 19:30 Uhr", - image: { src: spk1, alt: "Liam O'Connor" }, + image: { src: spk5, alt: "Liam O'Connor" }, title: "Talk: Trust in AI", subtitle: "Wie wir Vertrauen in algorithmische Systeme aufbauen", speaker: "Liam O'Connor", @@ -160,7 +162,7 @@ export const ALL_EVENTS: ProgramEvent[] = [ { id: "fr-6", time: "20:00 – 21:30 Uhr", - image: { src: spk2, alt: "Fabienne Keller" }, + image: { src: spk6, alt: "Fabienne Keller" }, title: "Workshop: Research Repositories", subtitle: "Wissen organisieren, das wirklich genutzt wird", speaker: "Fabienne Keller",