From de239b44685bc58924d1f9ceba2d1431ff078ca0 Mon Sep 17 00:00:00 2001
From: Alisa Cantillo-Olsson <hej@alisa.media>
Date: Tue, 28 Apr 2026 16:37:12 +0200
Subject: [PATCH] adjust content structure speaker page

---
 relume-test/src/components/Filters5.tsx  |  8 ++--
 relume-test/src/components/Footer.tsx    |  4 +-
 relume-test/src/components/Navbar.tsx    |  4 +-
 relume-test/src/components/Team4.tsx     | 48 ++++++++++++----------
 relume-test/src/pages/ProgrammDetail.tsx |  8 +---
 relume-test/src/pages/Speaker.tsx        |  4 +-
 relume-test/src/pages/SpeakerDetail.tsx  | 51 ++++++++++++------------
 7 files changed, 63 insertions(+), 64 deletions(-)

diff --git a/relume-test/src/components/Filters5.tsx b/relume-test/src/components/Filters5.tsx
index 606153f..c2e619f 100644
--- a/relume-test/src/components/Filters5.tsx
+++ b/relume-test/src/components/Filters5.tsx
@@ -93,17 +93,17 @@ export const Filters5 = ({
                 {resetLabel}
               </button>
             </div>
-            <div className="flex h-12 items-center gap-3 rounded-2xl border border-electric-violet px-3">
-              <BiSearch className="size-6 shrink-0 text-electric-violet" />
+            <div className="flex h-12 items-center gap-3 rounded-2xl border border-tech-navy px-3">
+              <BiSearch className="size-6 shrink-0 text-tech-navy" />
               <input
-                className="flex-1 bg-transparent text-base text-electric-violet outline-none placeholder:text-electric-violet/50"
+                className="flex-1 bg-transparent text-base text-tech-navy outline-none placeholder:text-tech-navy/40"
                 placeholder="Suchen..."
                 value={searchQuery}
                 onChange={(e) => onSearchChange(e.target.value)}
               />
               {searchQuery && (
                 <button onClick={() => onSearchChange("")}>
-                  <IoCloseOutline className="size-5 text-electric-violet" />
+                  <IoCloseOutline className="size-5 text-tech-navy" />
                 </button>
               )}
             </div>
diff --git a/relume-test/src/components/Footer.tsx b/relume-test/src/components/Footer.tsx
index 4f47713..f3c94fa 100644
--- a/relume-test/src/components/Footer.tsx
+++ b/relume-test/src/components/Footer.tsx
@@ -15,7 +15,7 @@ type ImageProps = {
 
 type Links = {
   title: string;
-  url: string;
+  url?: string;
 };
 
 type SocialMediaLinks = {
@@ -134,7 +134,7 @@ export const Footer3Defaults: Props = {
       links: [
         { title: "Programm", url: "/programm" },
         { title: "Speaker", url: "/speaker" },
-        { title: "Location", url: "/location" },
+        { title: "Location", url: "#" },
         { title: "Tickets", url: "#tickets" },
         { title: "FAQ", url: "#faq" },
       ],
diff --git a/relume-test/src/components/Navbar.tsx b/relume-test/src/components/Navbar.tsx
index a5efd23..c095754 100644
--- a/relume-test/src/components/Navbar.tsx
+++ b/relume-test/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ type ImageProps = {
 };
 
 type NavLink = {
-  url: string;
+  url?: string;
   title: string;
   subMenuLinks?: NavLink[];
 };
@@ -209,7 +209,7 @@ export const Navbar3Defaults: Props = {
   navLinks: [
     { title: "Programm", url: "/programm" },
     { title: "Speaker", url: "/speaker" },
-    { title: "Location", url: "/location" },
+    { title: "Location", url: "#" },
   ],
   buttons: [
     {
diff --git a/relume-test/src/components/Team4.tsx b/relume-test/src/components/Team4.tsx
index 7b4dd60..c559748 100644
--- a/relume-test/src/components/Team4.tsx
+++ b/relume-test/src/components/Team4.tsx
@@ -46,48 +46,52 @@ type Props = {
 export type Team4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
 
 const talkBadgeClass = (type: Talk["type"]) => {
-  if (type === "Workshop") return "bg-acid-lime text-tech-navy";
-  if (type === "Networking") return "bg-acid-lime text-tech-navy";
+  if (type === "Talk") return "bg-neutral-dark text-cloud-white";
   return "bg-electric-violet text-cloud-white";
 };
 
 const MemberCard = ({ member }: { member: TeamMember }) => (
   <div className="flex flex-col font-barlow">
-    <Link to={`/speaker/${member.slug}`} className="relative mb-5 aspect-square w-full overflow-hidden block">
+    <Link to={`/speaker/${member.slug}`} className="relative mb-6 aspect-square w-full overflow-hidden block">
       <img
         src={member.image.src}
         alt={member.image.alt}
         className="absolute inset-0 size-full object-cover hover:scale-105 transition-transform duration-300"
       />
     </Link>
-    <Link to={`/speaker/${member.slug}`} className="hover:underline">
-      <h5 className="text-md font-bold md:text-lg">{member.name}</h5>
-    </Link>
-    <p className="text-sm text-gray-600">{member.role}</p>
-    <a
-      href={member.companyUrl ?? "#"}
-      className="mb-3 text-sm underline underline-offset-2 text-tech-navy"
-    >
-      {member.company}
-    </a>
-    <p className="mb-4 text-sm leading-relaxed text-gray-700">{member.description}</p>
+    <div className="flex flex-col gap-1 mb-4">
+      <div className="flex items-center justify-between gap-2">
+        <Link to={`/speaker/${member.slug}`} className="hover:underline">
+          <h5 className="text-xl font-semibold text-tech-navy leading-snug">{member.name}</h5>
+        </Link>
+        {member.socialLinks.length > 0 && (
+          <div className="flex gap-2 shrink-0">
+            {member.socialLinks.map((link, i) => (
+              <a key={i} href={link.href}>{link.icon}</a>
+            ))}
+          </div>
+        )}
+      </div>
+      <p className="text-lg text-tech-navy">{member.role}</p>
+      {member.companyUrl ? (
+        <a href={member.companyUrl} className="text-lg underline underline-offset-2 text-tech-navy">
+          {member.company}
+        </a>
+      ) : (
+        <p className="text-lg text-tech-navy">{member.company}</p>
+      )}
+    </div>
+    <p className="mb-4 text-base leading-relaxed text-tech-navy">{member.description}</p>
     <div className="mb-4 flex flex-wrap gap-2">
       {member.talks.map((talk, i) => (
         <span
           key={i}
-          className={`rounded-full px-3 py-1 text-xs font-semibold ${talkBadgeClass(talk.type)}`}
+          className={`rounded-lg px-2 py-1 text-sm font-semibold whitespace-nowrap ${talkBadgeClass(talk.type)}`}
         >
           {talk.title}
         </span>
       ))}
     </div>
-    <div className="mt-auto flex gap-3">
-      {member.socialLinks.map((link, i) => (
-        <a key={i} href={link.href}>
-          {link.icon}
-        </a>
-      ))}
-    </div>
   </div>
 );
 
diff --git a/relume-test/src/pages/ProgrammDetail.tsx b/relume-test/src/pages/ProgrammDetail.tsx
index c43cfe0..bdc1394 100644
--- a/relume-test/src/pages/ProgrammDetail.tsx
+++ b/relume-test/src/pages/ProgrammDetail.tsx
@@ -4,7 +4,7 @@ import { Cta30 } from "../components/Cta30";
 import { Footer3 } from "../components/Footer";
 import { Team4Defaults } from "../components/Team4";
 import { ALL_EVENTS } from "../data/events";
-import { BiCalendarAlt, BiMap, BiUser } from "react-icons/bi";
+import { BiCalendarAlt, BiUser } from "react-icons/bi";
 import { RxCube } from "react-icons/rx";
 import webflowLogo from "../assets/webflow.png";
 import relumeLogo from "../assets/relume.png";
@@ -70,11 +70,7 @@ const ProgrammDetail = () => {
                   <BiCalendarAlt className="size-5 shrink-0 text-acid-lime" />
                   <span className="text-sm">{dateLabel}, {event.time}</span>
                 </div>
-                <div className="flex items-center gap-3 text-cloud-white/80">
-                  <BiMap className="size-5 shrink-0 text-acid-lime" />
-                  <span className="text-sm">Location</span>
-                </div>
-                <div className="flex items-center gap-3 text-cloud-white/80">
+<div className="flex items-center gap-3 text-cloud-white/80">
                   <BiUser className="size-5 shrink-0 text-acid-lime" />
                   <span className="text-sm">{event.speaker}</span>
                 </div>
diff --git a/relume-test/src/pages/Speaker.tsx b/relume-test/src/pages/Speaker.tsx
index 1b78b33..e526401 100644
--- a/relume-test/src/pages/Speaker.tsx
+++ b/relume-test/src/pages/Speaker.tsx
@@ -49,8 +49,8 @@ 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" },
-          { title: "Zum Programm", variant: "secondary" },
+          { 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" },
         ]}
       />
       <Filters5
diff --git a/relume-test/src/pages/SpeakerDetail.tsx b/relume-test/src/pages/SpeakerDetail.tsx
index e340862..b1e1feb 100644
--- a/relume-test/src/pages/SpeakerDetail.tsx
+++ b/relume-test/src/pages/SpeakerDetail.tsx
@@ -2,26 +2,29 @@ import { useParams, Navigate } from "react-router-dom";
 import { Navbar3 } from "../components/Navbar";
 import { Team4, Team4Defaults } from "../components/Team4";
 import { Footer3 } from "../components/Footer";
-import { BiLogoLinkedinSquare, BiGlobe } from "react-icons/bi";
-import { FaXTwitter } from "react-icons/fa6";
+import webflowLogo from "../assets/webflow.png";
+import relumeLogo from "../assets/relume.png";
 
 const ALL_SPEAKERS = Team4Defaults.teamMembers;
 
+const SPONSORS = [
+  { src: webflowLogo, alt: "Webflow" },
+  { src: relumeLogo, alt: "Relume" },
+];
+
 const SponsorsSection = () => (
   <section className="bg-tech-navy px-[5%] py-16 md:py-24 font-barlow">
     <div className="container">
       <h2 className="mb-12 text-center text-4xl font-bold text-cloud-white md:text-5xl">
         Unsere Sponsoren & Partner
       </h2>
-      <div className="grid grid-cols-3 gap-6 md:grid-cols-5">
-        {Array(15).fill(null).map((_, i) => (
+      <div className="flex flex-wrap items-center justify-center gap-8">
+        {SPONSORS.map((sponsor) => (
           <div
-            key={i}
-            className="flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-4 py-6"
+            key={sponsor.alt}
+            className="flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-8 py-6"
           >
-            <span className="text-sm font-semibold text-white/50">
-              {i % 2 === 0 ? "Webflow" : "Relume"}
-            </span>
+            <img src={sponsor.src} alt={sponsor.alt} className="h-10 w-auto object-contain" />
           </div>
         ))}
       </div>
@@ -72,23 +75,19 @@ const SpeakerDetail = () => {
               <p className="text-base leading-relaxed text-cloud-white/80 md:text-lg">
                 {speaker.fullBio ?? speaker.description}
               </p>
-              <div className="flex gap-4">
-                {speaker.socialLinks.map((link, i) => (
-                  <a
-                    key={i}
-                    href={link.href}
-                    className="text-cloud-white/60 hover:text-acid-lime transition-colors"
-                  >
-                    {link.icon}
-                  </a>
-                ))}
-                <a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
-                  <FaXTwitter className="size-6 p-0.5" />
-                </a>
-                <a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
-                  <BiGlobe className="size-6" />
-                </a>
-              </div>
+              {speaker.socialLinks.filter((l) => l.href !== "#").length > 0 && (
+                <div className="flex gap-4">
+                  {speaker.socialLinks.filter((l) => l.href !== "#").map((link, i) => (
+                    <a
+                      key={i}
+                      href={link.href}
+                      className="text-cloud-white/60 hover:text-acid-lime transition-colors"
+                    >
+                      {link.icon}
+                    </a>
+                  ))}
+                </div>
+              )}
             </div>
           </div>
         </div>