diff --git a/app/about-us/AboutUsContent.tsx b/app/about-us/AboutUsContent.tsx
new file mode 100644
index 0000000..1d03a37
--- /dev/null
+++ b/app/about-us/AboutUsContent.tsx
@@ -0,0 +1,341 @@
+"use client"
+
+import { useState } from 'react'
+import Image from 'next/image'
+import { useInView, useAnimatedNumber } from '@/lib/hooks'
+import Hero from '@/components/Hero'
+import HeroCard from '@/components/HeroCard'
+import CTA from '@/components/CTA'
+
+const executiveBoard = [
+  { name: "Ali Serag El Din", role: "President", photo: "/aboutUs/Board/Ali-opt.png", linkedinUrl: "https://www.linkedin.com/in/ali-serag-el-din/" },
+  { name: "Defne Aytuna", role: "Vice President", photo: "/aboutUs/Board/Defne-opt.png", linkedinUrl: "https://www.linkedin.com/in/defne-aytuna/" },
+  { name: "Simon Burmer", role: "CFO", photo: "/aboutUs/Board/Simon-opt.png", linkedinUrl: "https://www.linkedin.com/in/simon-burmer/" },
+]
+
+const departmentBoard = [
+  { name: "Mohammed Thabit", role: "MD Events", photo: "/aboutUs/Board/Mohammed-opt.png", linkedinUrl: "https://www.linkedin.com/in/mohammed-thabit/" },
+  { name: "Piotr Nobis", role: "MD Marketing", photo: "/aboutUs/Board/Piotr-opt.png", linkedinUrl: "https://www.linkedin.com/in/piotr-nobis/" },
+  { name: "Anna Heletych", role: "MD People", photo: "/aboutUs/Board/Anna-opt.png", linkedinUrl: "https://www.linkedin.com/in/anna-heletych/" },
+  { name: "Niklas Simakov", role: "MD Finance & Operations", photo: "/aboutUs/Board/Niklas-opt.png", linkedinUrl: "https://www.linkedin.com/in/niklas-simakov/" },
+  { name: "Marius Heumader", role: "MD Partnerships", photo: "/aboutUs/Board/Marius-opt.png", linkedinUrl: "https://www.linkedin.com/in/marius-heumader/" },
+]
+
+const advisoryBoard = [
+  { name: "Advisory Member 1", role: "CEO, Company", bio: "Brings 20+ years of experience in scaling tech companies across Europe. Advises on corporate strategy and international expansion.", photo: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 2", role: "Founder, Startup", bio: "Serial entrepreneur with three successful exits. Mentors early-stage founders on product-market fit and fundraising.", photo: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 3", role: "Partner, VC Fund", bio: "Leads early-stage investments in deep tech and SaaS. Connects our startups with the European investor network.", photo: "https://images.unsplash.com/photo-1566492031773-4f4e44671857?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 4", role: "Professor, TUM", bio: "Chair of Entrepreneurship at TU Munich. Bridges academic research with real-world startup building.", photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 5", role: "Managing Director", bio: "Runs one of Munich's leading accelerator programs. Expert in go-to-market strategy and corporate partnerships.", photo: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 6", role: "Angel Investor", bio: "Backed 40+ startups across fintech, healthtech, and mobility. Offers hands-on support in the critical first 18 months.", photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop&crop=face" },
+  { name: "Advisory Member 7", role: "COO, Scale-up", bio: "Operational leader who scaled a Munich startup from 10 to 500 employees. Advises on hiring, culture, and processes.", photo: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=500&fit=crop&crop=face" },
+]
+
+const missionPartners = [
+  { name: "MTZ", description: "The Münchner Technologiezentrum provides office space, business coaching, and networking for young tech companies near Olympic Park — helping startups grow from first idea to market.", logo: "https://mtz.de/wp-content/uploads/2021/10/White-1.svg", image: "/aboutUs/missionPartner/mtz-opt.jpg" },
+  { name: "Munich Startup", description: "Munich's official startup portal connecting founders with resources, investors, and the local ecosystem — mapping the city's innovation landscape and amplifying its startup scene.", logo: "https://www.munich-startup.de/wp-content/themes/munichstartup/dist/images/munich-startup-logo-w.svg", image: "/aboutUs/missionPartner/MunichStartup.png" },
+  { name: "CDTM and Manage & More", descriptionParts: [
+    { text: "CDTM and Manage & More share our mission in empowering the next generation of founders in Munich. " },
+    { text: "However START Munich and CDTM / M&M differ. We are a community that encourages learning by doing, while they are educational programs that provide structured curriculum. ", pink: true },
+    { text: "Some of our members also join CDTM or M&M, but handling the intensive time commitment for both is challenging." },
+  ], image: "/aboutUs/missionPartner/CDTM.png", image2: "/aboutUs/missionPartner/mandm.jpeg" },
+]
+
+const showAdvisoryBoard = process.env.NEXT_PUBLIC_SHOW_ADVISORY_BOARD === 'true'
+
+export default function AboutUsPage() {
+  const [selectedAdvisor, setSelectedAdvisor] = useState<number | null>(0)
+  const animatedYears = useAnimatedNumber(20)
+  const animatedMembers = useAnimatedNumber(600)
+  const missionView = useInView(0.1)
+  const partnersView = useInView(0.1)
+  const execView = useInView(0.1)
+  const deptView = useInView(0.1)
+  const advView = useInView(0.1)
+
+  return (
+    <main className="min-h-screen bg-brand-dark-blue text-white overflow-x-hidden">
+      <Hero
+        backgroundImage="/aboutUs/hero-opt.jpg"
+        title={
+          <>
+            WHO WE
+            <br />
+            <span className="outline-text">ARE</span>
+          </>
+        }
+        description="A student-led community at the heart of Munich's startup scene — turning bold ideas into real ventures since 2003."
+      >
+        <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+          <HeroCard>
+            <div className="flex items-baseline justify-center gap-2 mb-3">
+              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">{animatedYears}</span>
+              <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+            </div>
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Years Active</p>
+          </HeroCard>
+          <HeroCard>
+            <div className="flex items-baseline justify-center gap-2 mb-3">
+              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">{animatedMembers}</span>
+              <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+            </div>
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Members</p>
+          </HeroCard>
+        </div>
+      </Hero>
+
+      {/* ═══ 01 VISION & MISSION — bold editorial ═══ */}
+      <section className="pt-28 pb-16 px-4 sm:px-6 lg:px-8" ref={missionView.ref}>
+        <div className="max-w-7xl mx-auto">
+          <div className={`mb-10 transition-all duration-700 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            <div>
+              <span className="text-brand-pink text-xs font-bold tracking-[0.4em] uppercase block mb-4">Our Purpose</span>
+              <h2 className="text-5xl sm:text-6xl lg:text-7xl font-black leading-none tracking-tight">
+                VISION<br />&amp; MISSION
+              </h2>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className={`bg-gradient-to-br from-brand-pink/15 via-brand-pink/5 to-transparent border border-brand-pink/20 rounded-3xl p-10 lg:p-14 transition-all duration-700 delay-150 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <div className="flex items-center gap-3 mb-10">
+                <div className="w-10 h-10 rounded-xl bg-brand-pink/20 border border-brand-pink/30 flex items-center justify-center">
+                  <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Mission</span>
+              </div>
+              <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black text-white leading-[1.05] mb-10">
+                Empowering<br />founders of<br /><span className="text-brand-pink">tomorrow.</span>
+              </h3>
+              <p className="text-gray-400 text-base lg:text-lg leading-relaxed max-w-md">
+                A self-driven community where learning happens by doing — and every member gets what is needed to build things that truly matters.
+              </p>
+            </div>
+
+            <div className={`bg-white/[0.03] border border-white/10 rounded-3xl p-10 lg:p-14 transition-all duration-700 delay-300 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <div className="flex items-center gap-3 mb-10">
+                <div className="w-10 h-10 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center">
+                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                </div>
+                <span className="text-white/50 text-xs font-bold tracking-[0.35em] uppercase">Vision</span>
+              </div>
+              <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black text-white leading-[1.05] mb-10">
+                Being the launchpad for <span className="text-white/30">innovation</span>
+              </h3>
+              <p className="text-gray-400 text-base lg:text-lg leading-relaxed max-w-md">
+                We envision START as <i>the</i> place for ambitious students in Munich, where ideas are turned into real innovations.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ═══ 02 MISSION PARTNERS ═══ */}
+      <section className="pt-1 pb-16 px-4 sm:px-6 lg:px-8" ref={partnersView.ref}>
+        <div className="max-w-7xl mx-auto">
+          <div className={`mb-10 transition-all duration-700 ${partnersView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            <span className="text-brand-pink text-sm font-bold tracking-[0.35em] uppercase">Mission Partners</span>
+            <p className="text-gray-500 text-base mt-2">Organisations who share our mission and support us in building Munich&apos;s next generation of founders.</p>
+          </div>
+
+          <div className={`flex flex-col gap-6 transition-all duration-700 delay-200 ${partnersView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            {missionPartners.map((partner, i) => (
+              <div key={i} className="bg-white/[0.03] border border-white/10 rounded-2xl overflow-hidden flex flex-col md:flex-row">
+                <div className={`md:w-72 lg:w-80 flex-shrink-0 overflow-hidden relative ${partner.image2 ? 'h-48 md:h-auto' : 'h-48'}`}>
+                  {partner.image2 ? (
+                    <div className="flex h-full">
+                      <Image src={partner.image} alt={partner.name} width={200} height={150} className="w-1/2 h-full object-contain bg-white p-3" />
+                      <div className="w-1 bg-brand-dark-blue flex-shrink-0" />
+                      <Image src={partner.image2} alt={partner.name} width={200} height={150} className="w-1/2 h-full object-contain bg-white p-3" />
+                    </div>
+                  ) : (
+                    <Image src={partner.image} alt={partner.name} fill sizes="(max-width: 768px) 100vw, 320px" className="object-cover" />
+                  )}
+                </div>
+                <div className="p-8 lg:p-10 flex flex-col justify-center gap-4">
+                  <div className="flex items-center gap-4">
+                    {partner.image2 ? (
+                      <>
+                        <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
+                          <Image src={partner.image} alt="CDTM" width={28} height={28} className="object-contain" />
+                        </div>
+                        <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
+                          <Image src={partner.image2} alt="Manage and More" width={28} height={28} className="object-contain" />
+                        </div>
+                      </>
+                    ) : (
+                      <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
+                        {partner.logo
+                          ? <Image src={partner.logo} alt={partner.name} width={28} height={28} className="object-contain" />
+                          : <span className="text-white/30 text-xs font-bold uppercase">{partner.name.charAt(0)}</span>
+                        }
+                      </div>
+                    )}
+                    <h3 className="font-black uppercase text-white tracking-wide text-lg">{partner.name}</h3>
+                  </div>
+                  <p className="text-gray-400 text-sm leading-relaxed">
+                    {'descriptionParts' in partner
+                      ? partner.descriptionParts?.map((part, i) => (
+                          <span key={i} className={part.pink ? 'text-brand-pink' : undefined}>{part.text}</span>
+                        ))
+                      : partner.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Divider */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+      </div>
+
+
+      {/* ═══ 03 EXECUTIVE BOARD — side-by-side layout ═══ */}
+      <section className="pt-28 pb-4 px-4 sm:px-6 lg:px-8 relative" ref={execView.ref}>
+        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-pink/5 rounded-full blur-[160px] pointer-events-none" />
+
+        <div className="relative max-w-7xl mx-auto">
+          <div className={`grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-12 lg:gap-16 items-center transition-all duration-700 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            {/* Left: heading */}
+            <div>
+              <span className="text-brand-pink text-xs font-bold tracking-[0.4em] uppercase block mb-4">Meet the Team</span>
+              <h2 className="text-5xl sm:text-6xl lg:text-7xl font-black leading-none tracking-tight">
+                THE<br />EXECUTIVE<br />BOARD
+              </h2>
+            </div>
+
+            {/* Right: portrait cards */}
+            <div className={`grid grid-cols-2 sm:grid-cols-3 justify-items-center gap-x-8 gap-y-8 transition-all duration-700 delay-200 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              {executiveBoard.map((member, i) => (
+                <a
+                  key={member.name}
+                  href={member.linkedinUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`flex flex-col items-center text-center group transition-all duration-500 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}
+                  style={{ transitionDelay: `${200 + i * 100}ms` }}
+                >
+                  <div className="relative w-36 h-48 sm:w-48 sm:h-[15rem] rounded-xl overflow-hidden border-2 border-white/10 group-hover:border-brand-pink/50 transition-colors select-none mb-3">
+                    <Image src={member.photo} alt={member.name} fill sizes="(max-width: 640px) 144px, 192px" className="object-cover object-top" draggable={false} />
+                  </div>
+                  <p className="font-black uppercase text-white text-xs lg:text-sm tracking-wide leading-tight group-hover:text-brand-pink transition-colors">{member.name}</p>
+                  <p className="text-gray-500 text-[11px] lg:text-xs font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ═══ 04 DEPARTMENT BOARD — compact row with circles ═══ */}
+      <section className="pt-4 pb-28 px-4 sm:px-6 lg:px-8" ref={deptView.ref}>
+        <div className="max-w-7xl mx-auto">
+          <div className={`bg-white/[0.03] border border-white/10 rounded-[2rem] p-8 lg:p-10 transition-all duration-700 ${deptView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            <div className="flex items-center gap-3 mb-8">
+              <div className="w-6 h-px bg-brand-pink" />
+              <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">The Department Board</span>
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 justify-items-center gap-y-8 gap-x-4">
+              {departmentBoard.map((member, i) => (
+                <a
+                  key={member.name}
+                  href={member.linkedinUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`flex flex-col items-center text-center group transition-all duration-500 ${deptView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}
+                  style={{ transitionDelay: `${200 + i * 100}ms` }}
+                >
+                  <div className="relative w-36 h-48 sm:w-44 sm:h-56 rounded-xl overflow-hidden border-2 border-white/10 group-hover:border-brand-pink/50 transition-colors select-none mb-3">
+                    <Image src={member.photo} alt={member.name} fill sizes="(max-width: 640px) 144px, 176px" className="object-cover object-top" draggable={false} />
+                  </div>
+                  <p className="font-black uppercase text-white text-xs lg:text-sm tracking-wide leading-tight group-hover:text-brand-pink transition-colors">{member.name}</p>
+                  <p className="text-gray-500 text-[11px] lg:text-xs mt-1 uppercase tracking-wider">{member.role}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ═══ 05 ADVISORY BOARD — thumbnail grid with expandable detail ═══ */}
+      {showAdvisoryBoard && (
+      <section className="pt-4 pb-28 px-4 sm:px-6 lg:px-8" ref={advView.ref}>
+        <div className="max-w-7xl mx-auto">
+          <div className={`flex items-center gap-3 mb-12 transition-all duration-700 ${advView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            <div className="w-6 h-px bg-brand-pink" />
+            <span className="text-brand-pink text-sm font-bold tracking-[0.35em] uppercase">Advisory Board</span>
+            <div className="w-6 h-px bg-white/20" />
+            <span className="text-gray-500 text-base lg:text-lg leading-relaxed">Seasoned entrepreneurs and industry leaders who sharpen our direction.</span>
+          </div>
+
+          {/* 7-column thumbnail grid */}
+          <div className={`grid grid-cols-4 sm:grid-cols-7 gap-3 lg:gap-4 transition-all duration-700 delay-200 ${advView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+            {advisoryBoard.map((member, i) => (
+              <button
+                key={i}
+                onClick={() => setSelectedAdvisor(selectedAdvisor === i ? null : i)}
+                className={`group text-left transition-all duration-300 ${selectedAdvisor === i ? 'scale-[0.97]' : ''}`}
+              >
+                <div className={`relative aspect-[3/4] rounded-xl overflow-hidden border-2 transition-colors duration-300 ${selectedAdvisor === i ? 'border-brand-pink' : 'border-white/10 hover:border-white/30'}`}>
+                  <Image src={member.photo} alt={member.name} fill sizes="(max-width: 768px) 25vw, 12vw" className="object-cover object-top" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-[#05112a]/80 via-transparent to-transparent" />
+                </div>
+                <p className={`font-bold uppercase text-xs tracking-wide leading-tight mt-2 transition-colors ${selectedAdvisor === i ? 'text-brand-pink' : 'text-white'}`}>{member.name}</p>
+                <p className="text-gray-500 text-[10px] uppercase tracking-wider mt-0.5">{member.role}</p>
+              </button>
+            ))}
+          </div>
+
+          {/* Expandable detail panel */}
+          <div className={`overflow-hidden transition-all duration-500 ease-in-out ${selectedAdvisor !== null ? 'max-h-[300px] opacity-100 mt-6' : 'max-h-0 opacity-0 mt-0'}`}>
+            {selectedAdvisor !== null && (
+              <div className="bg-white/[0.03] border border-white/10 rounded-2xl p-6 lg:p-8 flex items-start gap-6">
+                <div className="hidden sm:block relative flex-shrink-0 w-20 h-24 rounded-xl overflow-hidden border-2 border-brand-pink">
+                  <Image src={advisoryBoard[selectedAdvisor].photo} alt={advisoryBoard[selectedAdvisor].name} fill sizes="80px" className="object-cover object-top" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center justify-between gap-4">
+                    <div>
+                      <h3 className="text-xl lg:text-2xl font-black text-white uppercase tracking-tight">{advisoryBoard[selectedAdvisor].name}</h3>
+                      <p className="text-brand-pink text-sm font-semibold mt-1">{advisoryBoard[selectedAdvisor].role}</p>
+                    </div>
+                    <button onClick={() => setSelectedAdvisor(null)} className="text-white/30 hover:text-white transition-colors flex-shrink-0">
+                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                  <p className="text-gray-400 text-sm lg:text-base leading-relaxed mt-4">{advisoryBoard[selectedAdvisor].bio}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+      )}
+
+      {/* ═══ CTA ═══ */}
+      <section className="pb-28 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <CTA
+            title="Want to Learn More About Us?"
+            description="Discover how you can grow with START Munich — whether as a member shaping your entrepreneurial journey or as a partner connecting with Munich's most ambitious talents."
+            buttons={[
+              { label: "Discover the Member Journey", href: "/member-journey" },
+              { label: "Become a Partner", href: "/for-partners", variant: "secondary" }
+            ]}
+          />
+        </div>
+      </section>
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx
index a493cf0..21102dd 100644
--- a/app/about-us/page.tsx
+++ b/app/about-us/page.tsx
@@ -1,326 +1,19 @@
-"use client"
-
-import { useState } from 'react'
-import Image from 'next/image'
-import { useInView, useAnimatedNumber } from '@/lib/hooks'
-import Hero from '@/components/Hero'
-import HeroCard from '@/components/HeroCard'
-
-const executiveBoard = [
-  { name: "Ali Serag El Din", role: "President", photo: "/aboutUs/Board/Ali-opt.png", linkedinUrl: "https://www.linkedin.com/in/ali-serag-el-din/" },
-  { name: "Defne Aytuna", role: "Vice President", photo: "/aboutUs/Board/Defne-opt.png", linkedinUrl: "https://www.linkedin.com/in/defne-aytuna/" },
-  { name: "Simon Burmer", role: "CFO", photo: "/aboutUs/Board/Simon-opt.png", linkedinUrl: "https://www.linkedin.com/in/simon-burmer/" },
-]
-
-const departmentBoard = [
-  { name: "Mohammed Thabit", role: "MD Events", photo: "/aboutUs/Board/Mohammed-opt.png", linkedinUrl: "https://www.linkedin.com/in/mohammed-thabit/" },
-  { name: "Piotr Nobis", role: "MD Marketing", photo: "/aboutUs/Board/Piotr-opt.png", linkedinUrl: "https://www.linkedin.com/in/piotr-nobis/" },
-  { name: "Anna Heletych", role: "MD People", photo: "/aboutUs/Board/Anna-opt.png", linkedinUrl: "https://www.linkedin.com/in/anna-heletych/" },
-  { name: "Niklas Simakov", role: "MD Finance & Operations", photo: "/aboutUs/Board/Niklas-opt.png", linkedinUrl: "https://www.linkedin.com/in/niklas-simakov/" },
-  { name: "Marius Heumader", role: "MD Partnerships", photo: "/aboutUs/Board/Marius-opt.png", linkedinUrl: "https://www.linkedin.com/in/marius-heumader/" },
-]
-
-const advisoryBoard = [
-  { name: "Advisory Member 1", role: "CEO, Company", bio: "Brings 20+ years of experience in scaling tech companies across Europe. Advises on corporate strategy and international expansion.", photo: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 2", role: "Founder, Startup", bio: "Serial entrepreneur with three successful exits. Mentors early-stage founders on product-market fit and fundraising.", photo: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 3", role: "Partner, VC Fund", bio: "Leads early-stage investments in deep tech and SaaS. Connects our startups with the European investor network.", photo: "https://images.unsplash.com/photo-1566492031773-4f4e44671857?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 4", role: "Professor, TUM", bio: "Chair of Entrepreneurship at TU Munich. Bridges academic research with real-world startup building.", photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 5", role: "Managing Director", bio: "Runs one of Munich's leading accelerator programs. Expert in go-to-market strategy and corporate partnerships.", photo: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 6", role: "Angel Investor", bio: "Backed 40+ startups across fintech, healthtech, and mobility. Offers hands-on support in the critical first 18 months.", photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop&crop=face" },
-  { name: "Advisory Member 7", role: "COO, Scale-up", bio: "Operational leader who scaled a Munich startup from 10 to 500 employees. Advises on hiring, culture, and processes.", photo: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=500&fit=crop&crop=face" },
-]
-
-const missionPartners = [
-  { name: "MTZ", description: "The Münchner Technologiezentrum provides office space, business coaching, and networking for young tech companies near Olympic Park — helping startups grow from first idea to market.", logo: "https://mtz.de/wp-content/uploads/2021/10/White-1.svg", image: "/aboutUs/missionPartner/mtz-opt.jpg" },
-  { name: "Munich Startup", description: "Munich's official startup portal connecting founders with resources, investors, and the local ecosystem — mapping the city's innovation landscape and amplifying its startup scene.", logo: "https://www.munich-startup.de/wp-content/themes/munichstartup/dist/images/munich-startup-logo-w.svg", image: "/aboutUs/missionPartner/MunichStartup.png" },
-  { name: "CDTM and Manage & More", descriptionParts: [
-    { text: "CDTM and Manage & More share our mission in empowering the next generation of founders in Munich. " },
-    { text: "However START Munich and CDTM / M&M differ. We are a community that encourages learning by doing, while they are educational programs that provide structured curriculum. ", pink: true },
-    { text: "Some of our members also join CDTM or M&M, but handling the intensive time commitment for both is challenging." },
-  ], image: "/aboutUs/missionPartner/CDTM.png", image2: "/aboutUs/missionPartner/mandm.jpeg" },
-]
-
-const showAdvisoryBoard = process.env.NEXT_PUBLIC_SHOW_ADVISORY_BOARD === 'true'
+import type { Metadata } from 'next'
+import AboutUsContent from './AboutUsContent'
+
+export const metadata: Metadata = {
+  title: 'About Us',
+  description:
+    'Meet the team behind START Munich. Learn about our mission, vision, and the passionate students driving Munich\'s leading entrepreneurship community since 2003.',
+  alternates: { canonical: 'https://www.startmunich.de/about-us' },
+  openGraph: {
+    url: 'https://www.startmunich.de/about-us',
+    title: 'About Us | START Munich',
+    description:
+      'Meet the team behind START Munich. Learn about our mission, vision, and the passionate students driving Munich\'s leading entrepreneurship community since 2003.',
+  },
+}
 
 export default function AboutUsPage() {
-  const [selectedAdvisor, setSelectedAdvisor] = useState<number | null>(0)
-  const animatedYears = useAnimatedNumber(20)
-  const animatedMembers = useAnimatedNumber(600)
-  const missionView = useInView(0.1)
-  const partnersView = useInView(0.1)
-  const execView = useInView(0.1)
-  const deptView = useInView(0.1)
-  const advView = useInView(0.1)
-
-  return (
-    <main className="min-h-screen bg-brand-dark-blue text-white overflow-x-hidden">
-      <Hero
-        backgroundImage="/aboutUs/hero-opt.jpg"
-        title={
-          <>
-            WHO WE
-            <br />
-            <span className="outline-text">ARE</span>
-          </>
-        }
-        description="A student-led community at the heart of Munich's startup scene — turning bold ideas into real ventures since 2003."
-      >
-        <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-          <HeroCard>
-            <div className="flex items-baseline justify-center gap-2 mb-3">
-              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">{animatedYears}</span>
-              <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-            </div>
-            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Years Active</p>
-          </HeroCard>
-          <HeroCard>
-            <div className="flex items-baseline justify-center gap-2 mb-3">
-              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">{animatedMembers}</span>
-              <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-            </div>
-            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Members</p>
-          </HeroCard>
-        </div>
-      </Hero>
-
-      {/* ═══ 01 VISION & MISSION — bold editorial ═══ */}
-      <section className="pt-28 pb-16 px-4 sm:px-6 lg:px-8" ref={missionView.ref}>
-        <div className="max-w-7xl mx-auto">
-          <div className={`mb-10 transition-all duration-700 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            <div>
-              <span className="text-brand-pink text-xs font-bold tracking-[0.4em] uppercase block mb-4">Our Purpose</span>
-              <h2 className="text-5xl sm:text-6xl lg:text-7xl font-black leading-none tracking-tight">
-                VISION<br />&amp; MISSION
-              </h2>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className={`bg-gradient-to-br from-brand-pink/15 via-brand-pink/5 to-transparent border border-brand-pink/20 rounded-3xl p-10 lg:p-14 transition-all duration-700 delay-150 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              <div className="flex items-center gap-3 mb-10">
-                <div className="w-10 h-10 rounded-xl bg-brand-pink/20 border border-brand-pink/30 flex items-center justify-center">
-                  <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                  </svg>
-                </div>
-                <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Mission</span>
-              </div>
-              <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black text-white leading-[1.05] mb-10">
-                Empowering<br />founders of<br /><span className="text-brand-pink">tomorrow.</span>
-              </h3>
-              <p className="text-gray-400 text-base lg:text-lg leading-relaxed max-w-md">
-                A self-driven community where learning happens by doing — and every member gets what is needed to build things that truly matters.
-              </p>
-            </div>
-
-            <div className={`bg-white/[0.03] border border-white/10 rounded-3xl p-10 lg:p-14 transition-all duration-700 delay-300 ${missionView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              <div className="flex items-center gap-3 mb-10">
-                <div className="w-10 h-10 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center">
-                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  </svg>
-                </div>
-                <span className="text-white/50 text-xs font-bold tracking-[0.35em] uppercase">Vision</span>
-              </div>
-              <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black text-white leading-[1.05] mb-10">
-                Being the launchpad for <span className="text-white/30">innovation</span>
-              </h3>
-              <p className="text-gray-400 text-base lg:text-lg leading-relaxed max-w-md">
-                We envision START as <i>the</i> place for ambitious students in Munich, where ideas are turned into real innovations.
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ═══ 02 MISSION PARTNERS ═══ */}
-      <section className="pt-1 pb-16 px-4 sm:px-6 lg:px-8" ref={partnersView.ref}>
-        <div className="max-w-7xl mx-auto">
-          <div className={`mb-10 transition-all duration-700 ${partnersView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            <span className="text-brand-pink text-sm font-bold tracking-[0.35em] uppercase">Mission Partners</span>
-            <p className="text-gray-500 text-base mt-2">Organisations who share our mission and support us in building Munich&apos;s next generation of founders.</p>
-          </div>
-
-          <div className={`flex flex-col gap-6 transition-all duration-700 delay-200 ${partnersView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            {missionPartners.map((partner, i) => (
-              <div key={i} className="bg-white/[0.03] border border-white/10 rounded-2xl overflow-hidden flex flex-col md:flex-row">
-                <div className={`md:w-72 lg:w-80 flex-shrink-0 overflow-hidden relative ${partner.image2 ? 'h-48 md:h-auto' : 'h-48'}`}>
-                  {partner.image2 ? (
-                    <div className="flex h-full">
-                      <Image src={partner.image} alt={partner.name} width={200} height={150} className="w-1/2 h-full object-contain bg-white p-3" />
-                      <div className="w-1 bg-brand-dark-blue flex-shrink-0" />
-                      <Image src={partner.image2} alt={partner.name} width={200} height={150} className="w-1/2 h-full object-contain bg-white p-3" />
-                    </div>
-                  ) : (
-                    <Image src={partner.image} alt={partner.name} fill sizes="(max-width: 768px) 100vw, 320px" className="object-cover" />
-                  )}
-                </div>
-                <div className="p-8 lg:p-10 flex flex-col justify-center gap-4">
-                  <div className="flex items-center gap-4">
-                    {partner.image2 ? (
-                      <>
-                        <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
-                          <Image src={partner.image} alt="CDTM" width={28} height={28} className="object-contain" />
-                        </div>
-                        <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
-                          <Image src={partner.image2} alt="Manage and More" width={28} height={28} className="object-contain" />
-                        </div>
-                      </>
-                    ) : (
-                      <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
-                        {partner.logo
-                          ? <Image src={partner.logo} alt={partner.name} width={28} height={28} className="object-contain" />
-                          : <span className="text-white/30 text-xs font-bold uppercase">{partner.name.charAt(0)}</span>
-                        }
-                      </div>
-                    )}
-                    <h3 className="font-black uppercase text-white tracking-wide text-lg">{partner.name}</h3>
-                  </div>
-                  <p className="text-gray-400 text-sm leading-relaxed">
-                    {'descriptionParts' in partner
-                      ? partner.descriptionParts?.map((part, i) => (
-                          <span key={i} className={part.pink ? 'text-brand-pink' : undefined}>{part.text}</span>
-                        ))
-                      : partner.description}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Divider */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-      </div>
-
-
-      {/* ═══ 03 EXECUTIVE BOARD — side-by-side layout ═══ */}
-      <section className="pt-28 pb-4 px-4 sm:px-6 lg:px-8 relative" ref={execView.ref}>
-        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-pink/5 rounded-full blur-[160px] pointer-events-none" />
-
-        <div className="relative max-w-7xl mx-auto">
-          <div className={`grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-12 lg:gap-16 items-center transition-all duration-700 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            {/* Left: heading */}
-            <div>
-              <span className="text-brand-pink text-xs font-bold tracking-[0.4em] uppercase block mb-4">Meet the Team</span>
-              <h2 className="text-5xl sm:text-6xl lg:text-7xl font-black leading-none tracking-tight">
-                THE<br />EXECUTIVE<br />BOARD
-              </h2>
-            </div>
-
-            {/* Right: portrait cards */}
-            <div className={`grid grid-cols-2 sm:grid-cols-3 justify-items-center gap-x-8 gap-y-8 transition-all duration-700 delay-200 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              {executiveBoard.map((member, i) => (
-                <a
-                  key={member.name}
-                  href={member.linkedinUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`flex flex-col items-center text-center group transition-all duration-500 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}
-                  style={{ transitionDelay: `${200 + i * 100}ms` }}
-                >
-                  <div className="relative w-36 h-48 sm:w-48 sm:h-[15rem] rounded-xl overflow-hidden border-2 border-white/10 group-hover:border-brand-pink/50 transition-colors select-none mb-3">
-                    <Image src={member.photo} alt={member.name} fill sizes="(max-width: 640px) 144px, 192px" className="object-cover object-top" draggable={false} />
-                  </div>
-                  <p className="font-black uppercase text-white text-xs lg:text-sm tracking-wide leading-tight group-hover:text-brand-pink transition-colors">{member.name}</p>
-                  <p className="text-gray-500 text-[11px] lg:text-xs font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
-                </a>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ═══ 04 DEPARTMENT BOARD — compact row with circles ═══ */}
-      <section className="pt-4 pb-28 px-4 sm:px-6 lg:px-8" ref={deptView.ref}>
-        <div className="max-w-7xl mx-auto">
-          <div className={`bg-white/[0.03] border border-white/10 rounded-[2rem] p-8 lg:p-10 transition-all duration-700 ${deptView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            <div className="flex items-center gap-3 mb-8">
-              <div className="w-6 h-px bg-brand-pink" />
-              <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">The Department Board</span>
-            </div>
-
-            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 justify-items-center gap-y-8 gap-x-4">
-              {departmentBoard.map((member, i) => (
-                <a
-                  key={member.name}
-                  href={member.linkedinUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`flex flex-col items-center text-center group transition-all duration-500 ${deptView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}
-                  style={{ transitionDelay: `${200 + i * 100}ms` }}
-                >
-                  <div className="relative w-36 h-48 sm:w-44 sm:h-56 rounded-xl overflow-hidden border-2 border-white/10 group-hover:border-brand-pink/50 transition-colors select-none mb-3">
-                    <Image src={member.photo} alt={member.name} fill sizes="(max-width: 640px) 144px, 176px" className="object-cover object-top" draggable={false} />
-                  </div>
-                  <p className="font-black uppercase text-white text-xs lg:text-sm tracking-wide leading-tight group-hover:text-brand-pink transition-colors">{member.name}</p>
-                  <p className="text-gray-500 text-[11px] lg:text-xs mt-1 uppercase tracking-wider">{member.role}</p>
-                </a>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* ═══ 05 ADVISORY BOARD — thumbnail grid with expandable detail ═══ */}
-      {showAdvisoryBoard && (
-      <section className="pt-4 pb-28 px-4 sm:px-6 lg:px-8" ref={advView.ref}>
-        <div className="max-w-7xl mx-auto">
-          <div className={`flex items-center gap-3 mb-12 transition-all duration-700 ${advView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            <div className="w-6 h-px bg-brand-pink" />
-            <span className="text-brand-pink text-sm font-bold tracking-[0.35em] uppercase">Advisory Board</span>
-            <div className="w-6 h-px bg-white/20" />
-            <span className="text-gray-500 text-base lg:text-lg leading-relaxed">Seasoned entrepreneurs and industry leaders who sharpen our direction.</span>
-          </div>
-
-          {/* 7-column thumbnail grid */}
-          <div className={`grid grid-cols-4 sm:grid-cols-7 gap-3 lg:gap-4 transition-all duration-700 delay-200 ${advView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-            {advisoryBoard.map((member, i) => (
-              <button
-                key={i}
-                onClick={() => setSelectedAdvisor(selectedAdvisor === i ? null : i)}
-                className={`group text-left transition-all duration-300 ${selectedAdvisor === i ? 'scale-[0.97]' : ''}`}
-              >
-                <div className={`relative aspect-[3/4] rounded-xl overflow-hidden border-2 transition-colors duration-300 ${selectedAdvisor === i ? 'border-brand-pink' : 'border-white/10 hover:border-white/30'}`}>
-                  <Image src={member.photo} alt={member.name} fill sizes="(max-width: 768px) 25vw, 12vw" className="object-cover object-top" />
-                  <div className="absolute inset-0 bg-gradient-to-t from-[#05112a]/80 via-transparent to-transparent" />
-                </div>
-                <p className={`font-bold uppercase text-xs tracking-wide leading-tight mt-2 transition-colors ${selectedAdvisor === i ? 'text-brand-pink' : 'text-white'}`}>{member.name}</p>
-                <p className="text-gray-500 text-[10px] uppercase tracking-wider mt-0.5">{member.role}</p>
-              </button>
-            ))}
-          </div>
-
-          {/* Expandable detail panel */}
-          <div className={`overflow-hidden transition-all duration-500 ease-in-out ${selectedAdvisor !== null ? 'max-h-[300px] opacity-100 mt-6' : 'max-h-0 opacity-0 mt-0'}`}>
-            {selectedAdvisor !== null && (
-              <div className="bg-white/[0.03] border border-white/10 rounded-2xl p-6 lg:p-8 flex items-start gap-6">
-                <div className="hidden sm:block relative flex-shrink-0 w-20 h-24 rounded-xl overflow-hidden border-2 border-brand-pink">
-                  <Image src={advisoryBoard[selectedAdvisor].photo} alt={advisoryBoard[selectedAdvisor].name} fill sizes="80px" className="object-cover object-top" />
-                </div>
-                <div className="flex-1">
-                  <div className="flex items-center justify-between gap-4">
-                    <div>
-                      <h3 className="text-xl lg:text-2xl font-black text-white uppercase tracking-tight">{advisoryBoard[selectedAdvisor].name}</h3>
-                      <p className="text-brand-pink text-sm font-semibold mt-1">{advisoryBoard[selectedAdvisor].role}</p>
-                    </div>
-                    <button onClick={() => setSelectedAdvisor(null)} className="text-white/30 hover:text-white transition-colors flex-shrink-0">
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </div>
-                  <p className="text-gray-400 text-sm lg:text-base leading-relaxed mt-4">{advisoryBoard[selectedAdvisor].bio}</p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-      )}
-    </main>
-  )
-}
\ No newline at end of file
+  return <AboutUsContent />
+}
diff --git a/app/api/members/batch/[batchId]/route.ts b/app/api/members/batch/[batchId]/route.ts
index 79f8689..f695891 100644
--- a/app/api/members/batch/[batchId]/route.ts
+++ b/app/api/members/batch/[batchId]/route.ts
@@ -1,5 +1,4 @@
 import { NextResponse } from 'next/server'
-import { getMembersByBatch } from '@/lib/mockMembers'
 
 interface ExternalMember {
   id: number
@@ -81,8 +80,7 @@ export async function GET(
 
     if (!response.ok) {
       console.error(`API error: ${response.status} ${response.statusText}`)
-      const fallbackMembers = getMembersByBatch(batchId)
-      return NextResponse.json(fallbackMembers)
+      return NextResponse.json([])
     }
 
     const data = await response.json()
@@ -91,10 +89,7 @@ export async function GET(
       : data.members || data.data || []
 
     if (!Array.isArray(dataMembers) || dataMembers.length === 0) {
-      const fallbackMembers = getMembersByBatch(batchId)
-      if (fallbackMembers.length > 0) {
-        return NextResponse.json(fallbackMembers)
-      }
+      return NextResponse.json([])
     }
 
     // Helper to pick the best image field
diff --git a/app/api/members/route.ts b/app/api/members/route.ts
index 06ce848..b96a1b4 100644
--- a/app/api/members/route.ts
+++ b/app/api/members/route.ts
@@ -1,5 +1,4 @@
 import { NextResponse } from 'next/server'
-import { mockMembers } from '@/lib/mockMembers'
 
 export const revalidate = 3600;
 
@@ -63,8 +62,8 @@ export async function GET() {
   
   // If members table is not configured, return mock data
   if (!NOCODB_API_TOKEN || !NOCODB_MEMBERS_TABLE_ID) {
-    console.log('Members table not configured in NocoDB, using mock data');
-    return NextResponse.json(mockMembers);
+    console.log('Members table not configured in NocoDB');
+    return NextResponse.json([]);
   }
 
   try {
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..f6496c6
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+export default function Error({
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <div className="min-h-screen bg-brand-dark-blue flex items-center justify-center px-4">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-white mb-4">Something went wrong</h2>
+        <button
+          onClick={reset}
+          className="px-6 py-3 bg-brand-pink text-white font-bold rounded-xl hover:shadow-[0_0_30px_rgba(208,0,111,0.4)] transition-all"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/events/EventsContent.tsx b/app/events/EventsContent.tsx
new file mode 100644
index 0000000..dc0fd5d
--- /dev/null
+++ b/app/events/EventsContent.tsx
@@ -0,0 +1,844 @@
+"use client"
+
+import React, { useState, useEffect, useRef } from "react"
+import Link from "next/link"
+import Script from "next/script"
+import { useRouter } from "next/navigation"
+
+import { EventCard, TimelineMarker, ScrollIndicator } from "@/components/EventComponents"
+import Hero from "@/components/Hero"
+import HeroCard from "@/components/HeroCard"
+import PastEventsGrid from "./PastEventsGrid"
+import UpcomingEventsGrid from "./UpcomingEventsGrid"
+import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
+
+export const dynamic = 'force-dynamic'
+
+interface RecurringEvent {
+  id: string
+  name: string
+  description: string
+  month: string
+  frequency: string
+  icon: string
+  image: string
+  category: string
+}
+
+const recurringEvents: RecurringEvent[] = [
+  {
+    id: "rtss",
+    name: "Road to START Summit (RTSS)",
+    description: "Our flagship pitch event where aspiring founders present their startup ideas to a panel of investors, entrepreneurs, and industry experts.",
+    month: "October",
+    frequency: "Once per year",
+    icon: "presentation",
+    image: "/events/eventCards/summit-opt.jpg",
+    category: "Pitch Event"
+  },
+  {
+    id: "rtsh",
+    name: "Road to START Hack (RTSH)",
+    description: "An intensive hackathon bringing together developers, designers, and entrepreneurs to build innovative solutions in 24-48 hours.",
+    month: "November",
+    frequency: "Once per year",
+    icon: "code",
+    image: "/events/eventCards/hack-opt.jpg",
+    category: "Hackathon"
+  },
+  {
+    id: "legal-hack",
+    name: "Munich Hacking Legal",
+    description: "A unique hackathon focused on building legal tech solutions that address real challenges in the legal industry, combining technology with regulatory expertise.",
+    month: "March",
+    frequency: "Once per year",
+    icon: "code",
+    image: "/events/eventCards/legal-opt.jpg",
+    category: "Hackathon"
+  },
+  {
+    id: "start-labs",
+    name: "START Labs",
+    description: "A hands-on program where students work on real-world challenges from industry partners, developing prototypes and solutions across various tech verticals like MedTech, FinTech, and more.",
+    month: "May",
+    frequency: "Once per year",
+    icon: "code",
+    image: "/events/eventCards/labs-opt.jpg",
+    category: "Incubator"
+  },
+  {
+    id: "info-event",
+    name: "Info Event",
+    description: "Join us at the start of each semester to learn about START Munich, meet our community, and discover how you can get involved.",
+    month: "October & April",
+    frequency: "Once per semester",
+    icon: "info",
+    image: "/events/eventCards/info-opt.jpg",
+    category: "Talk"
+  },
+  {
+    id: "fail-tales",
+    name: "Founder Fail Tales",
+    description: "Real stories from real founders about their biggest failures and lessons learned.",
+    month: "October & April",
+    frequency: "Once per semester",
+    icon: "stories",
+    image: "/events/eventCards/fail-opt.jpg",
+    category: "Talk"
+  },
+  {
+    id: "pitch-network",
+    name: "PITCH & NETWORK",
+    description: "Practice your pitch, get feedback from experienced entrepreneurs, and network with fellow founders in an intimate setting.",
+    month: "January & June",
+    frequency: "Once per semester",
+    icon: "presentation",
+    image: "/events/eventCards/pitch-opt.jpg",
+    category: "Pitch Event"
+  }
+]
+
+export default function EventsPage() {
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+  const sliderRef = useRef<HTMLDivElement>(null)
+  const sliderSectionRef = useRef<HTMLDivElement>(null)
+  const dragState = useRef({ isDragging: false, startX: 0, scrollLeft: 0 })
+  const [scrollProgress, setScrollProgress] = useState(0)
+  const [hoveredEvent, setHoveredEvent] = useState<string | null>(null)
+
+  useEffect(() => {
+    setLoading(false)
+  }, [])
+
+  // Use animated number hook for statistics (faster animation - 800ms)
+  const animatedHackathons = useAnimatedNumber(4, loading, 800)
+  const animatedPublicEvents = useAnimatedNumber(10, loading, 800)
+
+  useEffect(() => {
+    const slider = sliderRef.current
+    if (!slider || loading) return
+
+    const updateScroll = () => {
+      const maxScroll = slider.scrollWidth - slider.clientWidth
+      const progress = maxScroll > 0 ? (slider.scrollLeft / maxScroll) * 100 : 0
+      setScrollProgress(progress)
+    }
+
+    slider.addEventListener('scroll', updateScroll)
+    updateScroll()
+    setTimeout(updateScroll, 100)
+
+    return () => slider.removeEventListener('scroll', updateScroll)
+  }, [loading])
+
+  const handleDrag = {
+    start: (e: React.MouseEvent) => {
+      const slider = sliderRef.current
+      if (!slider) return
+      dragState.current = {
+        isDragging: true,
+        startX: e.pageX - slider.offsetLeft,
+        scrollLeft: slider.scrollLeft
+      }
+    },
+    move: (e: React.MouseEvent) => {
+      if (!dragState.current.isDragging || !sliderRef.current) return
+      e.preventDefault()
+      const x = e.pageX - sliderRef.current.offsetLeft
+      sliderRef.current.scrollLeft = dragState.current.scrollLeft - (x - dragState.current.startX) * 2
+    },
+    end: () => {
+      dragState.current.isDragging = false
+    }
+  }
+
+  const scrollToEvent = (eventId: string) => {
+    const slider = sliderRef.current
+    if (!slider) return
+
+    const card = slider.querySelector(`[data-event-id="${eventId}"]`) as HTMLElement | null
+    if (!card) return
+
+    const cardLeft = card.offsetLeft
+    const cardWidth = card.offsetWidth
+    const sliderWidth = slider.offsetWidth
+
+    slider.scrollTo({
+      left: cardLeft - (sliderWidth / 2) + (cardWidth / 2),
+      behavior: 'smooth'
+    })
+  }
+
+  const scrollToEventMobile = (eventId: string) => {
+    scrollToEvent(eventId)
+    sliderSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
+  const handleTimelineMarkerHover = (eventId: string) => {
+    setHoveredEvent(eventId)
+    scrollToEvent(eventId)
+  }
+
+  const calculateTimelinePosition = (month: number, day: number = 1): string => {
+    // month: 1-12, day: 1-20 (assuming 20 days per month for positioning)
+    // Each month takes up 8.33% of the timeline (100% / 12)
+    // Within a month, each day takes up 8.33% / 20 = 0.4165%
+    const monthProgress = (month - 1) / 12 // 0 to 11/12
+    const dayProgress = (day) / 30 / 12 // 0 to 19/20/12
+    const totalProgress = (monthProgress + dayProgress) * 100
+    return `${totalProgress.toFixed(2)}%`
+  }
+
+  const getIconSvg = (icon: string) => {
+    switch (icon) {
+      case "trophy":
+        return (
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+          </svg>
+        )
+      case "code":
+        return (
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+          </svg>
+        )
+      case "info":
+        return (
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        )
+      case "stories":
+        return (
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+          </svg>
+        )
+      case "presentation":
+        return (
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+          </svg>
+        )
+      default:
+        return null
+    }
+  }
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-2xl font-bold text-white">Loading events...</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(
+              document.documentElement.scrollHeight,
+              document.body.scrollHeight
+            );
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-[#00002c]">
+        {/* Hero Section */}
+        <Hero
+          backgroundImage="/events/hero-opt.jpg"
+          title={
+            <>
+              START MUNICH
+              <br />
+              <span className="outline-text">EVENTS</span>
+            </>
+          }
+          description="Connect, learn, and grow with Munich's most vibrant student entrepreneur community through our curated events"
+        >
+          {/* Statistics Boxes - Matching Startup Cards Style */}
+          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+            {/** Stat 1 **/}
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  {Math.floor(animatedHackathons)}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Hackathons Yearly</p>
+            </HeroCard>
+
+            {/** Stat 2 **/}
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  {Math.floor(animatedPublicEvents)}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Public Events Yearly</p>
+            </HeroCard>
+          </div>
+        </Hero>
+
+        {/* Content Below Hero */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-20">
+
+          {/* Featured Event Spotlight */}
+          <div className="mb-24">
+            <div className="relative overflow-hidden rounded-[1.75rem] border border-[#e35733]/30 shadow-2xl shadow-[#e35733]/10">
+              {/* Background image */}
+              <div className="absolute inset-0">
+                <img
+                  src="/events/eventCards/legal-opt.jpg"
+                  alt="Munich Hacking Legal"
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-r from-[#00002c]/95 via-[#00002c]/75 to-[#00002c]/30" />
+              </div>
+
+              {/* Content */}
+              <div className="relative p-8 md:p-12 flex flex-col lg:flex-row items-start lg:items-center gap-8">
+                <div className="flex-1">
+                  {/* Badges */}
+                  <div className="flex flex-wrap items-center gap-3 mb-5">
+                    <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#e35733]/25 border border-[#e35733]/50 text-[#f0896a] text-xs font-bold uppercase tracking-widest">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[#f0896a] animate-pulse"></span>
+                      Upcoming Event
+                    </span>
+                    <span className="px-3 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/60 text-xs font-bold uppercase tracking-widest">
+                      Hackathon
+                    </span>
+                  </div>
+
+                  <h2 className="text-3xl md:text-5xl font-black text-white mb-4 leading-tight">
+                    Munich<br />
+                    <span className="text-[#f0896a]">Hacking Legal</span>
+                  </h2>
+
+                  <p className="text-gray-300 text-base md:text-lg leading-relaxed max-w-xl mb-6">
+                    A unique hackathon focused on building legal tech solutions that address real challenges in the legal industry, combining technology with regulatory expertise.
+                  </p>
+
+                  <div className="flex flex-wrap items-center gap-4">
+                    <a
+                      href="https://www.hacking-legal.org/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="group inline-flex items-center gap-2.5 px-7 py-3.5 bg-[#e35733] hover:bg-[#c24520] text-white font-bold rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-[#e35733]/40"
+                    >
+                      <span>Learn More</span>
+                      <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      </svg>
+                    </a>
+                    <div className="flex items-center gap-2 text-white/50 text-sm">
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                      </svg>
+                      <span>This April</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Upcoming Events Calendar Section */}
+          <div className="mb-24">
+            <div className="mb-8 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
+              {/* Title and description */}
+              <div>
+                <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">What's Next</span>
+                <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-3">
+                  UPCOMING EVENTS
+                </h2>
+                <p className="text-gray-400 text-lg max-w-lg">
+                  Stay updated with all our latest events and register to join us.
+                </p>
+              </div>
+
+              <div className="flex items-center gap-3 flex-shrink-0">
+                <a
+                  href="https://www.linkedin.com/company/start-munich"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group relative flex items-center gap-2.5 px-5 py-3 rounded-full bg-white/[0.06] border border-white/10 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/15 transition-all duration-300 hover:shadow-lg hover:shadow-[#0077b5]/10"
+                >
+                  <svg className="w-[18px] h-[18px] text-[#0077b5] group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                  </svg>
+                  <span className="text-white/80 group-hover:text-white text-sm font-medium transition-colors">LinkedIn</span>
+                </a>
+                <a
+                  href="https://www.instagram.com/start_munich"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group relative flex items-center gap-2.5 px-5 py-3 rounded-full bg-white/[0.06] border border-white/10 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/15 transition-all duration-300 hover:shadow-lg hover:shadow-[#E1306C]/10"
+                >
+                  <svg className="w-[18px] h-[18px] text-[#E1306C] group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
+                  </svg>
+                  <span className="text-white/80 group-hover:text-white text-sm font-medium transition-colors">Instagram</span>
+                </a>
+              </div>
+            </div>
+
+            <UpcomingEventsGrid />
+          </div>
+
+          {/* Recurring Events Section */}
+          <div>
+            <div className="mb-8">
+              <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">Annual Calendar</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-3">
+                OUR <span className="outline-text">RECURRING</span> EVENTS
+              </h2>
+              <p className="text-gray-400 text-lg">
+                Mark your calendars. These flagship events happen every year.
+              </p>
+            </div>
+
+            {/* Timeline Visualization */}
+            <div className="relative bg-white/[0.03] rounded-[1.75rem] p-6 md:p-10 border border-white/[0.07] backdrop-blur-sm">
+
+              {/* Desktop Timeline */}
+              <div className="hidden md:block">
+                {/* Months */}
+                <div className="grid grid-cols-12 gap-2 mb-6 text-center">
+                  {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((month, i) => (
+                    <div key={month} className="text-sm text-gray-300">
+                      {month}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Timeline Line */}
+                <div className="relative h-3 bg-white/[0.06] rounded-full mb-20 mt-16">
+                  <div className="absolute inset-0 bg-gradient-to-r from-[#d0006f]/30 via-pink-500/20 to-[#d0006f]/30 rounded-full"></div>
+
+                  {/* Month Dividers */}
+                  {[...Array(12)].map((_, i) => (
+                    <div
+                      key={i}
+                      className="absolute top-1/2 -translate-y-1/2 w-px h-6 bg-white/20"
+                      style={{ left: `calc(${(i + 1) * 8.33}% - 0.5px)` }}
+                    ></div>
+                  ))}
+
+                  {/* Event Markers - Using TimelineMarker Components */}
+                  <TimelineMarker
+                    eventId="pitch-network"
+                    left={calculateTimelinePosition(1, 15)}
+                    color="#ff1744"
+                    label="Pitch & Network"
+                    position="top"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="legal-hack"
+                    left={calculateTimelinePosition(3, 15)}
+                    color="#9c27b0"
+                    label="Legal Hack"
+                    position="bottom"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="info-event"
+                    left={calculateTimelinePosition(4, 15)}
+                    color="#4a90e2"
+                    label="Info Event"
+                    position="top"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="fail-tales"
+                    left={calculateTimelinePosition(4, 15)}
+                    color="#4a90e2"
+                    label="Fail Tales"
+                    position="top"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="start-labs"
+                    left={calculateTimelinePosition(5, 1)}
+                    color="#ff9800"
+                    label="START Labs"
+                    position="bottom"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="pitch-network"
+                    left={calculateTimelinePosition(6, 15)}
+                    color="#ff1744"
+                    label="Pitch & Network"
+                    position="bottom"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="info-event"
+                    left={calculateTimelinePosition(10, 15)}
+                    color="#4a90e2"
+                    label="Info Event"
+                    position="top"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="fail-tales"
+                    left={calculateTimelinePosition(11, 15)}
+                    color="#4a90e2"
+                    label="Fail Tales"
+                    position="bottom"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="rtss"
+                    left={calculateTimelinePosition(12, 0)}
+                    color="#ff1744"
+                    label="RTSS 🚀"
+                    position="top"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+
+                  <TimelineMarker
+                    eventId="rtsh"
+                    left={calculateTimelinePosition(12, 15)}
+                    color="#9c27b0"
+                    label="RTSH 🚀"
+                    position="bottom"
+                    hoveredEvent={hoveredEvent}
+                    onHover={handleTimelineMarkerHover}
+                    onLeave={() => setHoveredEvent(null)}
+                  />
+                </div>
+
+                {/* Desktop Legend */}
+                <div className="flex flex-wrap items-center justify-center gap-4 md:gap-5 pt-6 border-t border-white/[0.06]">
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 bg-[#ff1744] rounded-full"></div>
+                    <span className="text-xs text-gray-300 font-medium">Pitch Events</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 bg-[#9c27b0] rounded-full"></div>
+                    <span className="text-xs text-gray-300 font-medium">Hackathons</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 bg-[#ff9800] rounded-full"></div>
+                    <span className="text-xs text-gray-300 font-medium">Incubator</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 bg-[#4a90e2] rounded-full"></div>
+                    <span className="text-xs text-gray-300 font-medium">Talks</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Mobile Timeline - Simplified List View */}
+              <div className="md:hidden">
+                <div className="space-y-3">
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Jan</div>
+                    <button
+                      onClick={() => scrollToEventMobile('pitch-network')}
+                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                    >
+                      <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
+                      <span className="text-sm text-white">Pitch & Network</span>
+                    </button>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Mar</div>
+                    <button
+                      onClick={() => scrollToEventMobile('legal-hack')}
+                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                    >
+                      <div className="w-3 h-3 bg-[#9c27b0] rounded-full flex-shrink-0"></div>
+                      <span className="text-sm text-white">Legal Hack</span>
+                    </button>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Apr</div>
+                    <div className="flex flex-col gap-2">
+                      <button
+                        onClick={() => scrollToEventMobile('info-event')}
+                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                      >
+                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
+                        <span className="text-sm text-white">Info Event</span>
+                      </button>
+                      <button
+                        onClick={() => scrollToEventMobile('fail-tales')}
+                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                      >
+                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
+                        <span className="text-sm text-white">Fail Tales</span>
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">May</div>
+                    <button
+                      onClick={() => scrollToEventMobile('start-labs')}
+                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                    >
+                      <div className="w-3 h-3 bg-[#ff9800] rounded-full flex-shrink-0"></div>
+                      <span className="text-sm text-white">START Labs</span>
+                    </button>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Jun</div>
+                    <button
+                      onClick={() => scrollToEventMobile('pitch-network')}
+                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                    >
+                      <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
+                      <span className="text-sm text-white">Pitch & Network</span>
+                    </button>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Oct</div>
+                    <div className="flex flex-col gap-2">
+                      <button
+                        onClick={() => scrollToEventMobile('info-event')}
+                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                      >
+                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
+                        <span className="text-sm text-white">Info Event</span>
+                      </button>
+                      <button
+                        onClick={() => scrollToEventMobile('fail-tales')}
+                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                      >
+                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
+                        <span className="text-sm text-white">Fail Tales</span>
+                      </button>
+                      <button
+                        onClick={() => scrollToEventMobile('rtss')}
+                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                      >
+                        <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
+                        <span className="text-sm text-white">RTSS 🚀</span>
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
+                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Nov</div>
+                    <button
+                      onClick={() => scrollToEventMobile('rtsh')}
+                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                    >
+                      <div className="w-3 h-3 bg-[#9c27b0] rounded-full flex-shrink-0"></div>
+                      <span className="text-sm text-white">Road to START Hack 🚀</span>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Mobile Legend */}
+                <div className="mt-6 pt-4 border-t border-white/[0.06] flex flex-wrap gap-3">
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 rounded-full bg-[#ff1744]"></div>
+                    <span className="text-xs text-gray-300 font-medium">Pitch Events</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 rounded-full bg-[#9c27b0]"></div>
+                    <span className="text-xs text-gray-300 font-medium">Hackathons</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 rounded-full bg-[#ff9800]"></div>
+                    <span className="text-xs text-gray-300 font-medium">Incubator</span>
+                  </div>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
+                    <div className="w-2.5 h-2.5 rounded-full bg-[#4a90e2]"></div>
+                    <span className="text-xs text-gray-300 font-medium">Talks</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Events Slider */}
+        <div ref={sliderSectionRef} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24 mt-8">
+          <div className="relative">
+            <div
+              ref={sliderRef}
+              onMouseDown={handleDrag.start}
+              onMouseUp={handleDrag.end}
+              onMouseMove={handleDrag.move}
+              onMouseLeave={handleDrag.end}
+              className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth py-4 px-1 cursor-grab active:cursor-grabbing"
+              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+            >
+              {/* Main Events Group */}
+              <div className="flex flex-col gap-3 flex-shrink-0 self-stretch">
+                <span className="text-xs font-bold uppercase tracking-[0.2em] text-white/40 px-1">Main Events</span>
+                <div className="flex gap-6 flex-1">
+                  {recurringEvents.filter(e => ['rtss', 'rtsh', 'legal-hack', 'start-labs'].includes(e.id)).map((event, index) => (
+                    <EventCard
+                      key={event.id}
+                      event={event}
+                      index={index}
+                      hoveredEvent={hoveredEvent}
+                      setHoveredEvent={setHoveredEvent}
+                      isFlagship={true}
+                      className="h-full"
+                      onClick={
+                        event.id === 'legal-hack' ? () => window.open('https://www.hacking-legal.org/', '_blank')
+                        : event.id === 'rtsh' ? () => window.open('https://hack.startmunich.de/events/rtsh', '_blank')
+                        : event.id === 'rtss' ? () => window.open('https://summit.startmunich.de/events/rtss', '_blank')
+                        : event.id === 'start-labs' ? () => window.open('https://www.startmunich.de', '_blank')
+                        : undefined
+                      }
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="flex-shrink-0 flex flex-col justify-end pb-4 self-stretch">
+                <div className="w-px flex-1 bg-white/10 rounded-full mt-7"></div>
+              </div>
+
+              {/* Side Events Group */}
+              <div className="flex flex-col gap-3 flex-shrink-0 self-stretch">
+                <span className="text-xs font-bold uppercase tracking-[0.2em] text-white/40 px-1">Side Events</span>
+                <div className="flex gap-6 flex-1">
+                  {recurringEvents.filter(e => !['rtss', 'rtsh', 'legal-hack', 'start-labs'].includes(e.id)).map((event, index) => (
+                    <EventCard
+                      key={event.id}
+                      event={event}
+                      index={index}
+                      hoveredEvent={hoveredEvent}
+                      setHoveredEvent={setHoveredEvent}
+                      isFlagship={false}
+                      className="h-full"
+                      onClick={undefined}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <ScrollIndicator sliderRef={sliderRef} scrollProgress={scrollProgress} />
+
+            {/* Gradient Fade Edges */}
+            <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#00002c] to-transparent pointer-events-none rounded-r-[1.75rem]"></div>
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+         {/* Member Exclusive Events Section */}
+          <div className="mb-16">
+            <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20">
+              {/* Decorative Elements */}
+              <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
+              <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
+
+              <div className="relative p-8 md:p-12">
+                <div className="flex flex-col lg:flex-row items-center gap-8">
+                  {/* Left Side - Content */}
+                  <div className="flex-1">
+                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-[#d0006f]/20 border border-[#d0006f]/40 rounded-full mb-4">
+                      <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                      <span className="text-[#d0006f] font-bold text-xs tracking-widest uppercase">Members Only</span>
+                    </div>
+
+                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+                      HUNGRY FOR MORE?  
+                      {/* Exclusive Member Events */}
+                    </h2>
+                    
+                    <p className="text-gray-300 leading-relaxed mb-6">
+                      As a START Munich member, you get access to exclusive events including private dinners with successful founders, closed-door workshops with industry experts, peer feedback sessions, and intimate networking gatherings. These events are designed to provide maximum value and foster deep connections within our community.
+                    </p>
+                  </div>
+
+                  {/* Right Side - CTA */}
+                  <div className="flex-shrink-0 text-center lg:text-left">
+                    <Link
+                      href="/members"
+                      className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-bold text-lg rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-[#d0006f]/50 overflow-hidden"
+                    >
+                      <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700"></span>
+                      <span className="relative">Our Members Journey</span>
+                      <svg className="relative w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      </svg>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          {/* Past Events Calendar Section */}
+          <div className="pb-24">
+            <div className="mb-8">
+              <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">Looking Back</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-1">
+                PAST EVENTS
+              </h2>
+              <p className="text-gray-400 text-lg max-w-lg">
+                Check out the amazing events we've hosted in the past.
+              </p>
+            </div>
+
+            <PastEventsGrid />
+          </div>
+
+        </div>
+      </main>
+    </>
+  )
+}
diff --git a/components/PastEventsGrid.tsx b/app/events/PastEventsGrid.tsx
similarity index 100%
rename from components/PastEventsGrid.tsx
rename to app/events/PastEventsGrid.tsx
diff --git a/components/UpcomingEventsGrid.tsx b/app/events/UpcomingEventsGrid.tsx
similarity index 100%
rename from components/UpcomingEventsGrid.tsx
rename to app/events/UpcomingEventsGrid.tsx
diff --git a/app/events/page.tsx b/app/events/page.tsx
index a288177..c29d37f 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,844 +1,21 @@
-"use client"
-
-import React, { useState, useEffect, useRef } from "react"
-import Link from "next/link"
-import Script from "next/script"
-import { useRouter } from "next/navigation"
-
-import { EventCard, TimelineMarker, ScrollIndicator } from "@/components/EventComponents"
-import Hero from "@/components/Hero"
-import HeroCard from "@/components/HeroCard"
-import PastEventsGrid from "@/components/PastEventsGrid"
-import UpcomingEventsGrid from "@/components/UpcomingEventsGrid"
-import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
+import type { Metadata } from 'next'
+import EventsContent from './EventsContent'
 
 export const dynamic = 'force-dynamic'
 
-interface RecurringEvent {
-  id: string
-  name: string
-  description: string
-  month: string
-  frequency: string
-  icon: string
-  image: string
-  category: string
-}
-
-const recurringEvents: RecurringEvent[] = [
-  {
-    id: "rtss",
-    name: "Road to START Summit (RTSS)",
-    description: "Our flagship pitch event where aspiring founders present their startup ideas to a panel of investors, entrepreneurs, and industry experts.",
-    month: "October",
-    frequency: "Once per year",
-    icon: "presentation",
-    image: "/events/eventCards/summit-opt.jpg",
-    category: "Pitch Event"
-  },
-  {
-    id: "rtsh",
-    name: "Road to START Hack (RTSH)",
-    description: "An intensive hackathon bringing together developers, designers, and entrepreneurs to build innovative solutions in 24-48 hours.",
-    month: "November",
-    frequency: "Once per year",
-    icon: "code",
-    image: "/events/eventCards/hack-opt.jpg",
-    category: "Hackathon"
+export const metadata: Metadata = {
+  title: 'Events',
+  description:
+    'Discover START Munich events — hackathons, pitch competitions, startup labs, info sessions, and more. Connect with Munich\'s student entrepreneur community.',
+  alternates: { canonical: 'https://www.startmunich.de/events' },
+  openGraph: {
+    url: 'https://www.startmunich.de/events',
+    title: 'Events | START Munich',
+    description:
+      'Discover START Munich events — hackathons, pitch competitions, startup labs, info sessions, and more. Connect with Munich\'s student entrepreneur community.',
   },
-  {
-    id: "legal-hack",
-    name: "Munich Hacking Legal",
-    description: "A unique hackathon focused on building legal tech solutions that address real challenges in the legal industry, combining technology with regulatory expertise.",
-    month: "March",
-    frequency: "Once per year",
-    icon: "code",
-    image: "/events/eventCards/legal-opt.jpg",
-    category: "Hackathon"
-  },
-  {
-    id: "start-labs",
-    name: "START Labs",
-    description: "A hands-on program where students work on real-world challenges from industry partners, developing prototypes and solutions across various tech verticals like MedTech, FinTech, and more.",
-    month: "May",
-    frequency: "Once per year",
-    icon: "code",
-    image: "/events/eventCards/labs-opt.jpg",
-    category: "Incubator"
-  },
-  {
-    id: "info-event",
-    name: "Info Event",
-    description: "Join us at the start of each semester to learn about START Munich, meet our community, and discover how you can get involved.",
-    month: "October & April",
-    frequency: "Once per semester",
-    icon: "info",
-    image: "/events/eventCards/info-opt.jpg",
-    category: "Talk"
-  },
-  {
-    id: "fail-tales",
-    name: "Founder Fail Tales",
-    description: "Real stories from real founders about their biggest failures and lessons learned.",
-    month: "October & April",
-    frequency: "Once per semester",
-    icon: "stories",
-    image: "/events/eventCards/fail-opt.jpg",
-    category: "Talk"
-  },
-  {
-    id: "pitch-network",
-    name: "PITCH & NETWORK",
-    description: "Practice your pitch, get feedback from experienced entrepreneurs, and network with fellow founders in an intimate setting.",
-    month: "January & June",
-    frequency: "Once per semester",
-    icon: "presentation",
-    image: "/events/eventCards/pitch-opt.jpg",
-    category: "Pitch Event"
-  }
-]
+}
 
 export default function EventsPage() {
-  const router = useRouter()
-  const [loading, setLoading] = useState(true)
-  const sliderRef = useRef<HTMLDivElement>(null)
-  const sliderSectionRef = useRef<HTMLDivElement>(null)
-  const dragState = useRef({ isDragging: false, startX: 0, scrollLeft: 0 })
-  const [scrollProgress, setScrollProgress] = useState(0)
-  const [hoveredEvent, setHoveredEvent] = useState<string | null>(null)
-
-  useEffect(() => {
-    setLoading(false)
-  }, [])
-
-  // Use animated number hook for statistics (faster animation - 800ms)
-  const animatedHackathons = useAnimatedNumber(4, loading, 800)
-  const animatedPublicEvents = useAnimatedNumber(10, loading, 800)
-
-  useEffect(() => {
-    const slider = sliderRef.current
-    if (!slider || loading) return
-
-    const updateScroll = () => {
-      const maxScroll = slider.scrollWidth - slider.clientWidth
-      const progress = maxScroll > 0 ? (slider.scrollLeft / maxScroll) * 100 : 0
-      setScrollProgress(progress)
-    }
-
-    slider.addEventListener('scroll', updateScroll)
-    updateScroll()
-    setTimeout(updateScroll, 100)
-
-    return () => slider.removeEventListener('scroll', updateScroll)
-  }, [loading])
-
-  const handleDrag = {
-    start: (e: React.MouseEvent) => {
-      const slider = sliderRef.current
-      if (!slider) return
-      dragState.current = {
-        isDragging: true,
-        startX: e.pageX - slider.offsetLeft,
-        scrollLeft: slider.scrollLeft
-      }
-    },
-    move: (e: React.MouseEvent) => {
-      if (!dragState.current.isDragging || !sliderRef.current) return
-      e.preventDefault()
-      const x = e.pageX - sliderRef.current.offsetLeft
-      sliderRef.current.scrollLeft = dragState.current.scrollLeft - (x - dragState.current.startX) * 2
-    },
-    end: () => {
-      dragState.current.isDragging = false
-    }
-  }
-
-  const scrollToEvent = (eventId: string) => {
-    const slider = sliderRef.current
-    if (!slider) return
-
-    const card = slider.querySelector(`[data-event-id="${eventId}"]`) as HTMLElement | null
-    if (!card) return
-
-    const cardLeft = card.offsetLeft
-    const cardWidth = card.offsetWidth
-    const sliderWidth = slider.offsetWidth
-
-    slider.scrollTo({
-      left: cardLeft - (sliderWidth / 2) + (cardWidth / 2),
-      behavior: 'smooth'
-    })
-  }
-
-  const scrollToEventMobile = (eventId: string) => {
-    scrollToEvent(eventId)
-    sliderSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
-
-  const handleTimelineMarkerHover = (eventId: string) => {
-    setHoveredEvent(eventId)
-    scrollToEvent(eventId)
-  }
-
-  const calculateTimelinePosition = (month: number, day: number = 1): string => {
-    // month: 1-12, day: 1-20 (assuming 20 days per month for positioning)
-    // Each month takes up 8.33% of the timeline (100% / 12)
-    // Within a month, each day takes up 8.33% / 20 = 0.4165%
-    const monthProgress = (month - 1) / 12 // 0 to 11/12
-    const dayProgress = (day) / 30 / 12 // 0 to 19/20/12
-    const totalProgress = (monthProgress + dayProgress) * 100
-    return `${totalProgress.toFixed(2)}%`
-  }
-
-  const getIconSvg = (icon: string) => {
-    switch (icon) {
-      case "trophy":
-        return (
-          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-          </svg>
-        )
-      case "code":
-        return (
-          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-        )
-      case "info":
-        return (
-          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        )
-      case "stories":
-        return (
-          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-          </svg>
-        )
-      case "presentation":
-        return (
-          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
-          </svg>
-        )
-      default:
-        return null
-    }
-  }
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <p className="text-2xl font-bold text-white">Loading events...</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(
-              document.documentElement.scrollHeight,
-              document.body.scrollHeight
-            );
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-[#00002c]">
-        {/* Hero Section */}
-        <Hero
-          backgroundImage="/events/hero-opt.jpg"
-          title={
-            <>
-              START MUNICH
-              <br />
-              <span className="outline-text">EVENTS</span>
-            </>
-          }
-          description="Connect, learn, and grow with Munich's most vibrant student entrepreneur community through our curated events"
-        >
-          {/* Statistics Boxes - Matching Startup Cards Style */}
-          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-            {/** Stat 1 **/}
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  {Math.floor(animatedHackathons)}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Hackathons Yearly</p>
-            </HeroCard>
-
-            {/** Stat 2 **/}
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  {Math.floor(animatedPublicEvents)}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Public Events Yearly</p>
-            </HeroCard>
-          </div>
-        </Hero>
-
-        {/* Content Below Hero */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-20">
-
-          {/* Featured Event Spotlight */}
-          <div className="mb-24">
-            <div className="relative overflow-hidden rounded-[1.75rem] border border-[#e35733]/30 shadow-2xl shadow-[#e35733]/10">
-              {/* Background image */}
-              <div className="absolute inset-0">
-                <img
-                  src="/events/eventCards/legal-opt.jpg"
-                  alt="Munich Hacking Legal"
-                  className="w-full h-full object-cover"
-                />
-                <div className="absolute inset-0 bg-gradient-to-r from-[#00002c]/95 via-[#00002c]/75 to-[#00002c]/30" />
-              </div>
-
-              {/* Content */}
-              <div className="relative p-8 md:p-12 flex flex-col lg:flex-row items-start lg:items-center gap-8">
-                <div className="flex-1">
-                  {/* Badges */}
-                  <div className="flex flex-wrap items-center gap-3 mb-5">
-                    <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#e35733]/25 border border-[#e35733]/50 text-[#f0896a] text-xs font-bold uppercase tracking-widest">
-                      <span className="w-1.5 h-1.5 rounded-full bg-[#f0896a] animate-pulse"></span>
-                      Upcoming Event
-                    </span>
-                    <span className="px-3 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/60 text-xs font-bold uppercase tracking-widest">
-                      Hackathon
-                    </span>
-                  </div>
-
-                  <h2 className="text-3xl md:text-5xl font-black text-white mb-4 leading-tight">
-                    Munich<br />
-                    <span className="text-[#f0896a]">Hacking Legal</span>
-                  </h2>
-
-                  <p className="text-gray-300 text-base md:text-lg leading-relaxed max-w-xl mb-6">
-                    A unique hackathon focused on building legal tech solutions that address real challenges in the legal industry, combining technology with regulatory expertise.
-                  </p>
-
-                  <div className="flex flex-wrap items-center gap-4">
-                    <a
-                      href="https://www.hacking-legal.org/"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="group inline-flex items-center gap-2.5 px-7 py-3.5 bg-[#e35733] hover:bg-[#c24520] text-white font-bold rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-[#e35733]/40"
-                    >
-                      <span>Learn More</span>
-                      <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                      </svg>
-                    </a>
-                    <div className="flex items-center gap-2 text-white/50 text-sm">
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                      </svg>
-                      <span>This April</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Upcoming Events Calendar Section */}
-          <div className="mb-24">
-            <div className="mb-8 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
-              {/* Title and description */}
-              <div>
-                <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">What's Next</span>
-                <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-3">
-                  UPCOMING EVENTS
-                </h2>
-                <p className="text-gray-400 text-lg max-w-lg">
-                  Stay updated with all our latest events and register to join us.
-                </p>
-              </div>
-
-              <div className="flex items-center gap-3 flex-shrink-0">
-                <a
-                  href="https://www.linkedin.com/company/start-munich"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group relative flex items-center gap-2.5 px-5 py-3 rounded-full bg-white/[0.06] border border-white/10 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/15 transition-all duration-300 hover:shadow-lg hover:shadow-[#0077b5]/10"
-                >
-                  <svg className="w-[18px] h-[18px] text-[#0077b5] group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                  </svg>
-                  <span className="text-white/80 group-hover:text-white text-sm font-medium transition-colors">LinkedIn</span>
-                </a>
-                <a
-                  href="https://www.instagram.com/start_munich"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group relative flex items-center gap-2.5 px-5 py-3 rounded-full bg-white/[0.06] border border-white/10 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/15 transition-all duration-300 hover:shadow-lg hover:shadow-[#E1306C]/10"
-                >
-                  <svg className="w-[18px] h-[18px] text-[#E1306C] group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
-                  </svg>
-                  <span className="text-white/80 group-hover:text-white text-sm font-medium transition-colors">Instagram</span>
-                </a>
-              </div>
-            </div>
-
-            <UpcomingEventsGrid />
-          </div>
-
-          {/* Recurring Events Section */}
-          <div>
-            <div className="mb-8">
-              <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">Annual Calendar</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-3">
-                OUR <span className="outline-text">RECURRING</span> EVENTS
-              </h2>
-              <p className="text-gray-400 text-lg">
-                Mark your calendars. These flagship events happen every year.
-              </p>
-            </div>
-
-            {/* Timeline Visualization */}
-            <div className="relative bg-white/[0.03] rounded-[1.75rem] p-6 md:p-10 border border-white/[0.07] backdrop-blur-sm">
-
-              {/* Desktop Timeline */}
-              <div className="hidden md:block">
-                {/* Months */}
-                <div className="grid grid-cols-12 gap-2 mb-6 text-center">
-                  {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((month, i) => (
-                    <div key={month} className="text-sm text-gray-300">
-                      {month}
-                    </div>
-                  ))}
-                </div>
-
-                {/* Timeline Line */}
-                <div className="relative h-3 bg-white/[0.06] rounded-full mb-20 mt-16">
-                  <div className="absolute inset-0 bg-gradient-to-r from-[#d0006f]/30 via-pink-500/20 to-[#d0006f]/30 rounded-full"></div>
-
-                  {/* Month Dividers */}
-                  {[...Array(12)].map((_, i) => (
-                    <div
-                      key={i}
-                      className="absolute top-1/2 -translate-y-1/2 w-px h-6 bg-white/20"
-                      style={{ left: `calc(${(i + 1) * 8.33}% - 0.5px)` }}
-                    ></div>
-                  ))}
-
-                  {/* Event Markers - Using TimelineMarker Components */}
-                  <TimelineMarker
-                    eventId="pitch-network"
-                    left={calculateTimelinePosition(1, 15)}
-                    color="#ff1744"
-                    label="Pitch & Network"
-                    position="top"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="legal-hack"
-                    left={calculateTimelinePosition(3, 15)}
-                    color="#9c27b0"
-                    label="Legal Hack"
-                    position="bottom"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="info-event"
-                    left={calculateTimelinePosition(4, 15)}
-                    color="#4a90e2"
-                    label="Info Event"
-                    position="top"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="fail-tales"
-                    left={calculateTimelinePosition(5, 15)}
-                    color="#4a90e2"
-                    label="Fail Tales"
-                    position="top"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="start-labs"
-                    left={calculateTimelinePosition(5, 1)}
-                    color="#ff9800"
-                    label="START Labs"
-                    position="bottom"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="pitch-network"
-                    left={calculateTimelinePosition(6, 15)}
-                    color="#ff1744"
-                    label="Pitch & Network"
-                    position="bottom"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="info-event"
-                    left={calculateTimelinePosition(10, 15)}
-                    color="#4a90e2"
-                    label="Info Event"
-                    position="top"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="fail-tales"
-                    left={calculateTimelinePosition(11, 15)}
-                    color="#4a90e2"
-                    label="Fail Tales"
-                    position="bottom"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="rtss"
-                    left={calculateTimelinePosition(12, 0)}
-                    color="#ff1744"
-                    label="RTSS 🚀"
-                    position="top"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-
-                  <TimelineMarker
-                    eventId="rtsh"
-                    left={calculateTimelinePosition(12, 15)}
-                    color="#9c27b0"
-                    label="RTSH 🚀"
-                    position="bottom"
-                    hoveredEvent={hoveredEvent}
-                    onHover={handleTimelineMarkerHover}
-                    onLeave={() => setHoveredEvent(null)}
-                  />
-                </div>
-
-                {/* Desktop Legend */}
-                <div className="flex flex-wrap items-center justify-center gap-4 md:gap-5 pt-6 border-t border-white/[0.06]">
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 bg-[#ff1744] rounded-full"></div>
-                    <span className="text-xs text-gray-300 font-medium">Pitch Events</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 bg-[#9c27b0] rounded-full"></div>
-                    <span className="text-xs text-gray-300 font-medium">Hackathons</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 bg-[#ff9800] rounded-full"></div>
-                    <span className="text-xs text-gray-300 font-medium">Incubator</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 bg-[#4a90e2] rounded-full"></div>
-                    <span className="text-xs text-gray-300 font-medium">Talks</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Mobile Timeline - Simplified List View */}
-              <div className="md:hidden">
-                <div className="space-y-3">
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Jan</div>
-                    <button
-                      onClick={() => scrollToEventMobile('pitch-network')}
-                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                    >
-                      <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
-                      <span className="text-sm text-white">Pitch & Network</span>
-                    </button>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Mar</div>
-                    <button
-                      onClick={() => scrollToEventMobile('legal-hack')}
-                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                    >
-                      <div className="w-3 h-3 bg-[#9c27b0] rounded-full flex-shrink-0"></div>
-                      <span className="text-sm text-white">Legal Hack</span>
-                    </button>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Apr</div>
-                    <button
-                      onClick={() => scrollToEventMobile('info-event')}
-                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                    >
-                      <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
-                      <span className="text-sm text-white">Info Event</span>
-                    </button>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">May</div>
-                    <div className="flex flex-col gap-2">
-                      <button
-                        onClick={() => scrollToEventMobile('start-labs')}
-                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                      >
-                        <div className="w-3 h-3 bg-[#ff9800] rounded-full flex-shrink-0"></div>
-                        <span className="text-sm text-white">START Labs</span>
-                      </button>
-                      <button
-                        onClick={() => scrollToEventMobile('fail-tales')}
-                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                      >
-                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
-                        <span className="text-sm text-white">Fail Tales</span>
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Jun</div>
-                    <button
-                      onClick={() => scrollToEventMobile('pitch-network')}
-                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                    >
-                      <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
-                      <span className="text-sm text-white">Pitch & Network</span>
-                    </button>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Oct</div>
-                    <div className="flex flex-col gap-2">
-                      <button
-                        onClick={() => scrollToEventMobile('info-event')}
-                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                      >
-                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
-                        <span className="text-sm text-white">Info Event</span>
-                      </button>
-                      <button
-                        onClick={() => scrollToEventMobile('fail-tales')}
-                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                      >
-                        <div className="w-3 h-3 bg-[#4a90e2] rounded-full flex-shrink-0"></div>
-                        <span className="text-sm text-white">Fail Tales</span>
-                      </button>
-                      <button
-                        onClick={() => scrollToEventMobile('rtss')}
-                        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                      >
-                        <div className="w-3 h-3 bg-[#ff1744] rounded-full flex-shrink-0"></div>
-                        <span className="text-sm text-white">RTSS 🚀</span>
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4 p-4 rounded-2xl bg-white/[0.04]">
-                    <div className="w-14 flex-shrink-0 text-gray-400 text-sm font-bold">Nov</div>
-                    <button
-                      onClick={() => scrollToEventMobile('rtsh')}
-                      className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-                    >
-                      <div className="w-3 h-3 bg-[#9c27b0] rounded-full flex-shrink-0"></div>
-                      <span className="text-sm text-white">Road to START Hack 🚀</span>
-                    </button>
-                  </div>
-                </div>
-
-                {/* Mobile Legend */}
-                <div className="mt-6 pt-4 border-t border-white/[0.06] flex flex-wrap gap-3">
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#ff1744]"></div>
-                    <span className="text-xs text-gray-300 font-medium">Pitch Events</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#9c27b0]"></div>
-                    <span className="text-xs text-gray-300 font-medium">Hackathons</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#ff9800]"></div>
-                    <span className="text-xs text-gray-300 font-medium">Incubator</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] rounded-full">
-                    <div className="w-2.5 h-2.5 rounded-full bg-[#4a90e2]"></div>
-                    <span className="text-xs text-gray-300 font-medium">Talks</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-        {/* Events Slider */}
-        <div ref={sliderSectionRef} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24 mt-8">
-          <div className="relative">
-            <div
-              ref={sliderRef}
-              onMouseDown={handleDrag.start}
-              onMouseUp={handleDrag.end}
-              onMouseMove={handleDrag.move}
-              onMouseLeave={handleDrag.end}
-              className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth py-4 px-1 cursor-grab active:cursor-grabbing"
-              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-            >
-              {/* Main Events Group */}
-              <div className="flex flex-col gap-3 flex-shrink-0 self-stretch">
-                <span className="text-xs font-bold uppercase tracking-[0.2em] text-white/40 px-1">Main Events</span>
-                <div className="flex gap-6 flex-1">
-                  {recurringEvents.filter(e => ['rtss', 'rtsh', 'legal-hack', 'start-labs'].includes(e.id)).map((event, index) => (
-                    <EventCard
-                      key={event.id}
-                      event={event}
-                      index={index}
-                      hoveredEvent={hoveredEvent}
-                      setHoveredEvent={setHoveredEvent}
-                      isFlagship={true}
-                      className="h-full"
-                      onClick={
-                        event.id === 'legal-hack' ? () => window.open('https://www.hacking-legal.org/', '_blank')
-                        : event.id === 'rtsh' ? () => window.open('https://hack.startmunich.de/events/rtsh', '_blank')
-                        : event.id === 'rtss' ? () => window.open('https://summit.startmunich.de/events/rtss', '_blank')
-                        : event.id === 'start-labs' ? () => window.open('https://www.startmunich.de', '_blank')
-                        : undefined
-                      }
-                    />
-                  ))}
-                </div>
-              </div>
-
-              {/* Divider */}
-              <div className="flex-shrink-0 flex flex-col justify-end pb-4 self-stretch">
-                <div className="w-px flex-1 bg-white/10 rounded-full mt-7"></div>
-              </div>
-
-              {/* Side Events Group */}
-              <div className="flex flex-col gap-3 flex-shrink-0 self-stretch">
-                <span className="text-xs font-bold uppercase tracking-[0.2em] text-white/40 px-1">Side Events</span>
-                <div className="flex gap-6 flex-1">
-                  {recurringEvents.filter(e => !['rtss', 'rtsh', 'legal-hack', 'start-labs'].includes(e.id)).map((event, index) => (
-                    <EventCard
-                      key={event.id}
-                      event={event}
-                      index={index}
-                      hoveredEvent={hoveredEvent}
-                      setHoveredEvent={setHoveredEvent}
-                      isFlagship={false}
-                      className="h-full"
-                      onClick={undefined}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <ScrollIndicator sliderRef={sliderRef} scrollProgress={scrollProgress} />
-
-            {/* Gradient Fade Edges */}
-            <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#00002c] to-transparent pointer-events-none rounded-r-[1.75rem]"></div>
-          </div>
-        </div>
-
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
-         {/* Member Exclusive Events Section */}
-          <div className="mb-16">
-            <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20">
-              {/* Decorative Elements */}
-              <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
-              <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
-
-              <div className="relative p-8 md:p-12">
-                <div className="flex flex-col lg:flex-row items-center gap-8">
-                  {/* Left Side - Content */}
-                  <div className="flex-1">
-                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-[#d0006f]/20 border border-[#d0006f]/40 rounded-full mb-4">
-                      <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                      </svg>
-                      <span className="text-[#d0006f] font-bold text-xs tracking-widest uppercase">Members Only</span>
-                    </div>
-
-                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
-                      HUNGRY FOR MORE?  
-                      {/* Exclusive Member Events */}
-                    </h2>
-                    
-                    <p className="text-gray-300 leading-relaxed mb-6">
-                      As a START Munich member, you get access to exclusive events including private dinners with successful founders, closed-door workshops with industry experts, peer feedback sessions, and intimate networking gatherings. These events are designed to provide maximum value and foster deep connections within our community.
-                    </p>
-                  </div>
-
-                  {/* Right Side - CTA */}
-                  <div className="flex-shrink-0 text-center lg:text-left">
-                    <Link
-                      href="/members"
-                      className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-bold text-lg rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-[#d0006f]/50 overflow-hidden"
-                    >
-                      <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700"></span>
-                      <span className="relative">Our Members Journey</span>
-                      <svg className="relative w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                      </svg>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-
-          {/* Past Events Calendar Section */}
-          <div className="pb-24">
-            <div className="mb-8">
-              <span className="text-[#d0006f] text-sm font-bold tracking-[0.3em] uppercase">Looking Back</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white mt-2 mb-1">
-                PAST EVENTS
-              </h2>
-              <p className="text-gray-400 text-lg max-w-lg">
-                Check out the amazing events we've hosted in the past.
-              </p>
-            </div>
-
-            <PastEventsGrid />
-          </div>
-
-        </div>
-      </main>
-    </>
-  )
+  return <EventsContent />
 }
diff --git a/app/for-partners/page.tsx b/app/for-partners/page.tsx
index 03e0956..1fb546c 100644
--- a/app/for-partners/page.tsx
+++ b/app/for-partners/page.tsx
@@ -1,10 +1,24 @@
 import Image from 'next/image'
 import Script from 'next/script'
+import type { Metadata } from 'next'
 import Hero from "@/components/Hero"
 import HeroCard from "@/components/HeroCard"
 import PhotoGallery from './PhotoGallery'
 import { getAllPartners } from '@/lib/partners'
 
+export const metadata: Metadata = {
+  title: 'Partner With Us',
+  description:
+    'Partner with START Munich to reach top talent from TUM, LMU, and HM. Sponsor events, host workshops, and recruit Munich\'s most ambitious student entrepreneurs.',
+  alternates: { canonical: 'https://www.startmunich.de/for-partners' },
+  openGraph: {
+    url: 'https://www.startmunich.de/for-partners',
+    title: 'Partner With Us | START Munich',
+    description:
+      'Partner with START Munich to reach top talent from TUM, LMU, and HM. Sponsor events, host workshops, and recruit Munich\'s most ambitious student entrepreneurs.',
+  },
+}
+
 export const revalidate = 3600
 
 const faqs = [
@@ -102,8 +116,30 @@ const whyStartSpecial = [
 export default async function ForPartnersPage() {
   const partners = await getAllPartners()
 
+  // Plain-text FAQ answers for JSON-LD (faq1 has JSX, so we provide a text fallback)
+  const faqPlainText: Record<string, string> = {
+    faq1: 'We can move fast and sometimes launch within days. Please check our event calendar first. If you want to join a specific event, contact us as early as possible so we can plan it with you.',
+  }
+
+  const faqJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqs.map((faq) => ({
+      '@type': 'Question',
+      name: faq.question,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: typeof faq.answer === 'string' ? faq.answer : faqPlainText[faq.id] ?? '',
+      },
+    })),
+  }
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
+      />
       <Script id="iframe-height-sender" strategy="afterInteractive">
         {`
           function sendHeight() {
@@ -199,11 +235,13 @@ export default async function ForPartnersPage() {
             <div className="animate-scroll-nonstop">
               {[...partners.filter(p => p.featured), ...partners.filter(p => p.featured)].map((partner, i) => (
                 <div key={`${partner.id}-${i}`} className="inline-flex items-center justify-center mx-6 flex-shrink-0">
-                  <div className="bg-white rounded-xl p-4 w-36 h-20 flex items-center justify-center">
-                    <img
+                  <div className="bg-white rounded-xl p-4 w-36 h-20 flex items-center justify-center relative">
+                    <Image
                       src={partner.logoUrl}
                       alt={partner.name}
-                      className="max-h-10 max-w-[100px] object-contain"
+                      fill
+                      className="object-contain p-4"
+                      sizes="144px"
                     />
                   </div>
                 </div>
diff --git a/app/home/HomeClient.tsx b/app/home/HomeClient.tsx
index ba19be7..27a4ee7 100644
--- a/app/home/HomeClient.tsx
+++ b/app/home/HomeClient.tsx
@@ -13,25 +13,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import Script from 'next/script'
 import { useAnimatedNumber, useInView } from '@/lib/hooks'
-
-// ── Types ───────────────────────────────────────────────────────────────────────
-
-export interface Partner {
-  id: string
-  name: string
-  category: string
-  logoUrl: string
-  featured?: boolean
-}
-
-export interface Startup {
-  id: string
-  name: string
-  logoUrl: string
-  isSpotlight?: boolean
-  isYCombinator?: boolean
-  isEWOR?: boolean
-}
+import type { Partner, Startup } from '@/lib/types'
 
 // ── Images ──────────────────────────────────────────────────────────────────────
 
diff --git a/app/home/page.tsx b/app/home/page.tsx
index 9750336..5614eab 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -1,106 +1,5 @@
-/**
- * Home page — Server Component
- *
- * Fetches featured partners and startups directly from NocoDB at request time.
- * Next.js ISR caches the result for 1 hour (`revalidate = 3600`), so the
- * database is only hit once per hour across all visitors. The pre-fetched data
- * is passed as props to HomeClient, which means logos are available on the
- * initial HTML render — no client-side fetch or flash of missing content.
- */
-import HomeClient, { type Partner, type Startup } from './HomeClient'
+import { redirect } from 'next/navigation'
 
-// Revalidate the cached page every hour
-export const revalidate = 3600
-
-const NOCODB_API_TOKEN = process.env.NOCODB_API_TOKEN
-const NOCODB_BASE_URL = process.env.NOCODB_BASE_URL || 'https://ndb.startmunich.de'
-const NOCODB_PARTNERS_TABLE_ID = process.env.NOCODB_PARTNERS_TABLE_ID
-const NOCODB_STARTUPS_TABLE_ID = process.env.NOCODB_STARTUPS_TABLE_ID
-
-/**
- * Fetches all partners that are both visible (Show=true) and featured
- * (Featured=true) from NocoDB. Returns an empty array on any error so the
- * page still renders gracefully without logos.
- */
-async function fetchFeaturedPartners(): Promise<Partner[]> {
-  if (!NOCODB_API_TOKEN || !NOCODB_PARTNERS_TABLE_ID) return []
-  try {
-    const res = await fetch(
-      `${NOCODB_BASE_URL}/api/v2/tables/${NOCODB_PARTNERS_TABLE_ID}/records?limit=1000`,
-      {
-        headers: { 'xc-token': NOCODB_API_TOKEN, 'Content-Type': 'application/json' },
-        next: { revalidate: 3600 },
-      }
-    )
-    if (!res.ok) return []
-    const data = await res.json()
-    return (data.list || [])
-      .filter((r: any) => {
-        const show = r.Show
-        const featured = r.Featured
-        return (show === true || show === 1 || String(show).toLowerCase() === 'true') &&
-               (featured === true || featured === 1 || String(featured).toLowerCase() === 'true')
-      })
-      .map((r: any) => {
-        const logos: any[] = r.LogoNoBackground || []
-        // Some partners have two images uploaded; always use the last one so that
-        // a newer/preferred logo can be added as a second upload without removing the original.
-        const logo = logos.length > 0 ? logos[logos.length - 1] : null
-        const logoUrl = logo?.signedPath
-          ? `${NOCODB_BASE_URL}/${logo.signedPath}`
-          : `https://ui-avatars.com/api/?name=${encodeURIComponent(r.Name || 'Partner')}&size=300&background=4f46e5&color=fff&bold=true&font-size=0.4`
-        return { id: r.Id || String(Math.random()), name: r.Name || 'Partner', category: r.Categrory || 'Other', logoUrl, featured: true }
-      })
-  } catch {
-    return []
-  }
-}
-
-/**
- * Fetches startups that qualify for the home-page logo strip: those marked as
- * Featured Startup, Y Combinator alumni, or EWOR alumni. Returns an empty
- * array on any error.
- */
-async function fetchFeaturedStartups(): Promise<Startup[]> {
-  if (!NOCODB_API_TOKEN || !NOCODB_STARTUPS_TABLE_ID) return []
-  try {
-    const res = await fetch(
-      `${NOCODB_BASE_URL}/api/v2/tables/${NOCODB_STARTUPS_TABLE_ID}/records?limit=1000`,
-      {
-        headers: { 'xc-token': NOCODB_API_TOKEN, 'Content-Type': 'application/json' },
-        next: { revalidate: 3600 },
-      }
-    )
-    if (!res.ok) return []
-    const data = await res.json()
-    return (data.list || [])
-      .filter((r: any) =>
-        r['Featured Startup']?.toLowerCase() === 'yes' ||
-        r['Y Combinator Alumni']?.toLowerCase() === 'yes' ||
-        r['EWOR']?.toLowerCase() === 'yes'
-      )
-      .map((r: any) => {
-        let logoUrl = `https://ui-avatars.com/api/?name=${encodeURIComponent(r['Startup Name'] || 'Startup')}&size=300&background=00002c&color=fff&bold=true&font-size=0.4`
-        if (r['Company Logo']?.[0]?.signedPath) logoUrl = `${NOCODB_BASE_URL}/${r['Company Logo'][0].signedPath}`
-        return {
-          id: r.Id || r.id,
-          name: r['Startup Name'] || 'Startup',
-          logoUrl,
-          isSpotlight: r['Featured Startup']?.toLowerCase() === 'yes',
-          isYCombinator: r['Y Combinator Alumni']?.toLowerCase() === 'yes',
-          isEWOR: r['EWOR']?.toLowerCase() === 'yes',
-        }
-      })
-  } catch {
-    return []
-  }
-}
-
-export default async function HomePage() {
-  const [partners, startups] = await Promise.all([
-    fetchFeaturedPartners(),
-    fetchFeaturedStartups(),
-  ])
-
-  return <HomeClient initialPartners={partners} initialStartups={startups} />
+export default function HomeLegacyPage() {
+  redirect('/')
 }
diff --git a/app/jobs/page.tsx b/app/jobs/page.tsx
deleted file mode 100644
index f0a39ba..0000000
--- a/app/jobs/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation"
-
-export default function JobsPage() {
-  redirect("https://jobs.startmunich.de/jobs")
-}
diff --git a/app/join-start/2026/page.tsx b/app/join-start/2026/page.tsx
index 2bdbc26..e396962 100644
--- a/app/join-start/2026/page.tsx
+++ b/app/join-start/2026/page.tsx
@@ -1,5 +1,19 @@
+import type { Metadata } from 'next'
 import Hero from '@/components/Hero'
 
+export const metadata: Metadata = {
+  title: 'Join START Munich 2026',
+  description:
+    'Apply to become a START Munich member in 2026. Join Munich\'s leading student entrepreneurship community at TUM, LMU, and HM.',
+  alternates: { canonical: 'https://www.startmunich.de/join-start/2026' },
+  openGraph: {
+    url: 'https://www.startmunich.de/join-start/2026',
+    title: 'Join START Munich 2026',
+    description:
+      'Apply to become a START Munich member in 2026. Join Munich\'s leading student entrepreneurship community at TUM, LMU, and HM.',
+  },
+}
+
 export default function JoinStart2026Page() {
   return (
     <main className="min-h-screen bg-brand-dark-blue text-white">
diff --git a/app/layout.tsx b/app/layout.tsx
index cff19e8..ed3630d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -16,9 +16,6 @@ export const metadata: Metadata = {
   description:
     "START Munich is the largest student-run entrepreneurship community in Munich. We empower the next generation of founders to dare, build, and belong.",
   metadataBase: new URL("https://www.startmunich.de"),
-  alternates: {
-    canonical: "/",
-  },
   openGraph: {
     type: "website",
     url: "https://www.startmunich.de",
diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..d67bce7
--- /dev/null
+++ b/app/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-brand-dark-blue flex items-center justify-center">
+      <div className="w-10 h-10 border-4 border-brand-pink border-t-transparent rounded-full animate-spin" />
+    </div>
+  )
+}
diff --git a/app/member-journey/MemberJourneyContent.tsx b/app/member-journey/MemberJourneyContent.tsx
new file mode 100644
index 0000000..bce24a1
--- /dev/null
+++ b/app/member-journey/MemberJourneyContent.tsx
@@ -0,0 +1,970 @@
+"use client"
+
+import { useState, useEffect, useRef } from 'react'
+import Script from 'next/script'
+import { ScrollIndicator } from '@/components/EventComponents'
+import Hero from "@/components/Hero"
+import HeroCard from "@/components/HeroCard"
+import TestimonialsSection from '@/components/TestimonialsSection'
+import CTA from "@/components/CTA"
+import { useAnimatedNumber } from '@/lib/hooks'
+
+export const dynamic = 'force-dynamic'
+
+interface TimelineEvent {
+  id: string
+  title: string
+  description: string
+  icon: string
+  image: string | string[]
+  details: string[]
+}
+
+interface Department {
+  id: string
+  name: string
+  description: string
+  icon: string
+  responsibilities: string[]
+}
+
+interface StartEvent {
+  id: string
+  title: string
+  description: string
+  category: string
+  frequency: string
+  icon: string
+  images: string[]
+}
+
+interface MemberStory {
+  id: string
+  name: string
+  role: string
+  company: string
+  image: string
+  story: string
+  department: string
+  logos?: { src: string; url?: string }[]
+}
+
+const placeholderImage = "/internalevents-opt.png"
+
+const timelineEvents: TimelineEvent[] = [
+  {
+    id: "application",
+    title: "Application",
+    description: "Your entry into START Munich.",
+    icon: "📝",
+    image: "",
+    details: ["Apply in April or October", "Stage 1: Written Application", "Stage 2: Two Interviews (same day, 30 minutes each)"]
+  },
+  {
+    id: "start-sprint",
+    title: "START Sprint",
+    description: "Your first month at START. Get to know and bond with ambitious people you wouldn't meet in your usual circles, and build a real product together.",
+    icon: "🚀",
+    image: [
+      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=800&auto=format&fit=crop",
+      "https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=800&auto=format&fit=crop"
+    ],
+    details: ["Develop your own idea from concept to MVP in just 4 weeks", "Two workshops per week to learn foundations of building a startup", "Get to know key players within Munich startup ecosystem", "Spend an unforgettable weekend with our community in Austria", "Final pitch in front of a jury, compete to win START Summit tickets"]
+  },
+  {
+    id: "department-selection",
+    title: "Department Selection",
+    description: "Develop yourself and shape the future of START. START is completely student-run. What happens here depends on what you do.",
+    icon: "🎯",
+    image: "",
+    details: ["Choose one of five departments", "Work on real projects with visible impact inside and outside START", "Learn useful startup skills in practice", "Grow fast by taking ownership", "Initiate new formats"]
+  },
+  {
+    id: "active-member",
+    title: "Active Member",
+    description: "Enjoy the benefits of being a STARTie and expand your network through exclusive opportunities.",
+    icon: "🌍",
+    image: placeholderImage,
+    details: [
+      "Join the Bay Area trip, 2 weeks, 20+ curated visits to top startups, VCs, and labs",
+      "Research Stay @ Cambridge through direct research collaboration",
+      "Become part of the START Network, 20+ chapters worldwide",
+      "Find co-founders or start your own venture within a community of 70+ startups, including teams backed by Y Combinator"
+    ]
+  },
+  {
+    id: "alumni",
+    title: "START Alumni",
+    description: "Once a STARTie, always a STARTie. Stay connected as you build your own path.",
+    icon: "⭐",
+    image: placeholderImage,
+    details: ["Become alumni after two active semesters", "Find co-founders, investors, and collaborators across the START Global Network", "Give back by mentoring, sharing, and supporting new STARTies", "Stay involved as much as you want, department work is optional"]
+  }
+]
+
+const departments: Department[] = [
+  {
+    id: "people",
+    name: "People",
+    description: "Learn how to spot the right talent, keep them motivated, and build a community that accelerates your startup journey.",
+    icon: "👥",
+    responsibilities: ["Run recruiting, interviews, and onboarding.", "Organize START Sprint and shape new batches.", "Keep members engaged and connected through formats like Hut Weekend, START Goes Eating, and more."]
+  },
+  {
+    id: "marketing",
+    name: "Marketing",
+    description: "Learn strategy and how to highlight our people, events, and achievements to reach millions and push the ecosystem forward. Build a trusted brand.",
+    icon: "📢",
+    responsibilities: ["Create content, posts, and campaigns for LinkedIn and Instagram.", "Shoot and edit photos and videos from events.", "Build and maintain START's brand and image."]
+  },
+  {
+    id: "finops",
+    name: "FinOps",
+    description: "Learn how to design and build custom tools and automate workflows to increase START's output and influence.",
+    icon: "💰",
+    responsibilities: ["Build internal tools like Members Platform or Financial Dashboard.", "Improve our core systems like Slack, n8n and Notion.", "Handle contract management, ensuring compliance."]
+  },
+  {
+    id: "partnerships",
+    name: "Partnerships",
+    description: "Learn how to secure partners, close deals. Run persistent outreach campaigns, handle rejection, and keep going.",
+    icon: "🤝",
+    responsibilities: ["Run persistent outreach, handle rejection, and keep going.", "Build and manage relationships that create long-term value.", "Close deals that fund START's projects."]
+  },
+  {
+    id: "events",
+    name: "Events",
+    description: "Learn how to run flagship events where people meet, learn, and build across START, the Munich ecosystem, and beyond.",
+    icon: "🎉",
+    responsibilities: ["Organize and run large-scale events with 300+ attendees, like hackathons and summits.", "Organize workshops, startup visits, and other learning opportunities.", "Create experiences people remember and come back for."]
+  }
+]
+
+const startEvents: StartEvent[] = [
+  {
+    id: "monthly",
+    title: "The Monthly",
+    description: "Each month all active members meet at MTZ to share updates, pitch their startups, and connect across the community.",
+    category: "Meeting",
+    frequency: "Monthly",
+    icon: "📅",
+    images: [
+      "/memberJourney/monthly/2-opt.jpg",
+      "/memberJourney/monthly/3-opt.png",
+      "/memberJourney/monthly/4-opt.png",
+    ]
+  },
+  {
+    id: "department-work",
+    title: "Department Work",
+    description: "Meet with your department at our MTZ office to align on projects and progress.",
+    category: "Department",
+    frequency: "Weekly",
+    icon: "💼",
+    images: [
+      "/memberJourney/departmentwork/2-opt.jpg",
+      "/memberJourney/departmentwork/1-opt.jpg"
+
+    ]
+  },
+  {
+    id: "builders-weekend",
+    title: "Builders Weekend",
+    description: "Meet on the weekend to build your own startup.",
+    category: "Building",
+    frequency: "Monthly",
+    icon: "🔨",
+    images: [
+      "/memberJourney/builderWeekend/1-opt.jpg"
+    ]
+  },
+  {
+    id: "workshops",
+    title: "Member Workshops",
+    description: "Workshops with VCs and other professionals.",
+    category: "Learning",
+    frequency: "",
+    icon: "🎓",
+    images: [
+      "/memberJourney/memberworkshop/1-opt.jpg",
+      "/memberJourney/memberworkshop/3-opt.jpeg"
+    ]
+  },
+  {
+    id: "startup-visits",
+    title: "Startup Visits",
+    description: "Visit startups and learn from the experienced.",
+    category: "Networking",
+    frequency: "",
+    icon: "🏢",
+    images: [
+      "/memberJourney/startupVisit/1-opt.png",
+      "/memberJourney/startupVisit/2-opt.png",
+    ]
+  }
+]
+
+const memberStories: MemberStory[] = [
+  {
+    id: "story-1",
+    name: "Felix Haas",
+    role: "Founder & Investor",
+    company: "IDNow | Bits & Pretzels",
+    image: "/memberJourney/alumni/FelixHaas-opt.png",
+    story: "At START Munich, I laid the foundation for my current network. From this starting point, I built several companies, invested in more than 80 start-ups and helped set up Bits & Pretzels.",
+    department: "Alumni",
+    logos: [
+      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbeea_Vectors-Wrapper.svg", url: "https://www.idnow.io/" },
+      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbece_logo.svg", url: "https://www.bitsandpretzels.com/" }
+    ]
+  },
+  {
+    id: "story-3",
+    name: "Elisabeth Goebel",
+    role: "Early Operator",
+    company: "ZeitAI | CDTM",
+    image: "/memberJourney/alumni/Elisa-opt.png",
+    story: "START is where things actually happen. I co-founded ISAR Unfiltered, met people who think and move the way I do, and built a network that directly led me to where I am today: Early Operator at a YC-backed AI startup.",
+    department: "People",
+    logos: [
+      { src: "https://cdn.prod.website-files.com/6902359088cc8683c4db0171/69249d98617b1b96682cca65_44a5d2ba9e6004a1281eed9068c62a95_zeitai-logo-opt.png", url: "https://www.zeit.ai/" },
+    ]
+  },
+    {
+    id: "story-2",
+    name: "Joshua Cornelius",
+    role: "Co-Founder",
+    company: "Freeletics | CDTM",
+    image: "/memberJourney/alumni/JoshuaCornelius-opt.png",
+    story: "Before we founded Freeletics, START Munich - in addition to CDTM - gave my co-founder and me the ideal opportunity to make first contacts in the Munich startup scene.",
+    department: "Alumni",
+    logos: [
+      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbeef_5eb3c929c8c4590004435152-opt.png", url: "https://www.freeletics.com/" }
+    ]
+  }
+]
+
+export default function MemberJourneyPage() {
+  const [loading, setLoading] = useState(true)
+  const [activeDeptId, setActiveDeptId] = useState<string | null>(departments[0].id)
+  const [eventImageIndex, setEventImageIndex] = useState(0)
+  const [currentEventIndex, setCurrentEventIndex] = useState(0)
+  const timelineSliderRef = useRef<HTMLDivElement>(null)
+  const isDraggingTimeline = useRef(false)
+  const dragStartX = useRef(0)
+  const dragStartScrollLeft = useRef(0)
+  const [scrollProgress, setScrollProgress] = useState(0)
+  const [hoveredEventId, setHoveredEventId] = useState<string | null>(null)
+  const [lockedEventId, setLockedEventId] = useState<string | null>(null)
+  const [isMoreHovered, setIsMoreHovered] = useState(false)
+  const [isMoreLocked, setIsMoreLocked] = useState(false)
+  const autoRotateTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const eventImageRef = useRef<HTMLDivElement>(null)
+  const eventsSectionRef = useRef<HTMLDivElement>(null)
+
+  // Unlock selection when clicking outside the events section
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (eventsSectionRef.current && !eventsSectionRef.current.contains(e.target as Node)) {
+        setLockedEventId(null)
+        setIsMoreLocked(false)
+      }
+    }
+    document.addEventListener('click', handleClickOutside)
+    return () => document.removeEventListener('click', handleClickOutside)
+  }, [])
+
+  // Animated counter for hero stats
+  const semesterCount = useAnimatedNumber(2, loading, 500)
+
+  // Images for "And a lot more..." section
+  const moreImages = [
+    "https://images.unsplash.com/photo-1528605105345-5344ea20e269?q=80&w=800&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=800&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=800&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1475721027785-f74eccf877e2?q=80&w=800&auto=format&fit=crop"
+  ]
+
+  const activeEventId = lockedEventId || hoveredEventId
+  const activeMore = isMoreLocked || isMoreHovered
+
+  const eventImages = activeEventId
+    ? startEvents
+      .find((event) => event.id === activeEventId)
+      ?.images.map((img) => ({ src: img, title: startEvents.find((e) => e.id === activeEventId)!.title })) || []
+    : []
+
+  // Get current event for auto-rotation (only if nothing is active)
+  const currentEvent = !activeEventId && !activeMore && currentEventIndex < startEvents.length
+    ? startEvents[currentEventIndex]
+    : null
+  const currentEventImages = currentEvent
+    ? currentEvent.images.map((img) => ({ src: img, title: currentEvent.title }))
+    : []
+
+  const scrollToEventImage = () => {
+    if (window.innerWidth < 1024 && eventImageRef.current) {
+      const yOffset = -80
+      const y = eventImageRef.current.getBoundingClientRect().top + window.scrollY + yOffset
+      window.scrollTo({ top: y, behavior: 'smooth' })
+    }
+  }
+
+  useEffect(() => {
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    const slider = timelineSliderRef.current
+    if (!slider || loading) return
+
+    const updateScroll = () => {
+      const maxScroll = slider.scrollWidth - slider.clientWidth
+      const progress = maxScroll > 0 ? (slider.scrollLeft / maxScroll) * 100 : 0
+      setScrollProgress(progress)
+    }
+
+    slider.addEventListener('scroll', updateScroll)
+    updateScroll()
+    setTimeout(updateScroll, 100)
+
+    return () => slider.removeEventListener('scroll', updateScroll)
+  }, [loading])
+
+  // Auto-rotate events every 5 seconds
+  useEffect(() => {
+    if (loading || activeEventId || activeMore) {
+      if (autoRotateTimerRef.current) {
+        clearInterval(autoRotateTimerRef.current)
+        autoRotateTimerRef.current = null
+      }
+      return
+    }
+
+    autoRotateTimerRef.current = setInterval(() => {
+      setCurrentEventIndex((prev) => (prev + 1) % (startEvents.length + 1))
+    }, 3000)
+
+    return () => {
+      if (autoRotateTimerRef.current) {
+        clearInterval(autoRotateTimerRef.current)
+      }
+    }
+  }, [loading, activeEventId, activeMore])
+
+  // Reset image index when event changes
+  useEffect(() => {
+    setEventImageIndex(0)
+  }, [activeEventId, activeMore, currentEventIndex])
+
+  // When hovering ends, continue auto-rotation from the active item
+  useEffect(() => {
+    if (!activeEventId && !activeMore) {
+      return
+    }
+    if (activeEventId) {
+      const index = startEvents.findIndex(e => e.id === activeEventId)
+      if (index !== -1) {
+        setCurrentEventIndex(index)
+      }
+    } else if (activeMore) {
+      setCurrentEventIndex(startEvents.length)
+    }
+  }, [activeEventId, activeMore])
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-brand-dark-blue py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-2xl font-bold text-white">Loading journey...</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(
+              document.documentElement.scrollHeight,
+              document.body.scrollHeight
+            );
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-brand-dark-blue">
+        {/* Hero Section */}
+        <Hero
+          backgroundImage="/memberJourney/hero-opt.png"
+          title={
+            <>
+              YOUR START MUNICH
+              <br />
+              <span className="outline-text">JOURNEY</span>
+            </>
+          }
+          description="Become a member and spend at least two active semesters contributing to the community"
+        >
+          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  {semesterCount}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Semesters</p>
+            </HeroCard>
+
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  ∞
+                </span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Possibilities</p>
+            </HeroCard>
+          </div>
+        </Hero>
+
+        {/* ═══ MEMBER JOURNEY TIMELINE ═══ */}
+        <div className="mb-0 w-full pt-12 lg:pt-28">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
+            <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Your Path</span>
+            <h2 className="text-3xl md:text-4xl font-black text-white">
+              MEMBER <span className="outline-text">JOURNEY</span>
+            </h2>
+            <p className="text-gray-400 text-lg mt-2 max-w-xl">
+              The 5 milestones of your first two semesters at START Munich
+            </p>
+          </div>
+
+          <div className="relative group/timeline">
+            <div
+              ref={timelineSliderRef}
+              className="overflow-x-auto scrollbar-hide pb-1 cursor-grab active:cursor-grabbing max-w-7xl mx-auto"
+              onMouseDown={(e) => {
+                isDraggingTimeline.current = true
+                dragStartX.current = e.pageX - (timelineSliderRef.current?.offsetLeft ?? 0)
+                dragStartScrollLeft.current = timelineSliderRef.current?.scrollLeft ?? 0
+              }}
+              onMouseMove={(e) => {
+                if (!isDraggingTimeline.current || !timelineSliderRef.current) return
+                e.preventDefault()
+                const x = e.pageX - (timelineSliderRef.current.offsetLeft ?? 0)
+                timelineSliderRef.current.scrollLeft = dragStartScrollLeft.current - (x - dragStartX.current)
+              }}
+              onMouseUp={() => { isDraggingTimeline.current = false }}
+              onMouseLeave={() => { isDraggingTimeline.current = false }}
+            >
+              <div className="flex gap-5 min-w-max px-8 lg:px-20">
+                {timelineEvents.map((event, index) => (
+                  <div
+                    key={event.id}
+                    className="group relative timeline-card-animate w-[320px] flex-shrink-0"
+                    style={{ animationDelay: `${index * 0.15}s` }}
+                  >
+                    <div className="relative h-full bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 overflow-hidden transition-all duration-500 hover:border-brand-pink/40 hover:bg-white/[0.09]">
+                      {/* Pink accent top bar */}
+                      <div className="h-px w-full bg-gradient-to-r from-transparent via-brand-pink/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+                      <div className="p-8">
+                        {/* Step number + divider */}
+                        <div className="flex items-center gap-4 mb-6">
+                          <span className="text-5xl font-black text-white/20 tracking-tight tabular-nums leading-none">
+                            0{index + 1}
+                          </span>
+                          <div className="h-px flex-1 bg-gradient-to-r from-white/20 to-transparent" />
+                          <span className="text-2xl">{event.icon}</span>
+                        </div>
+
+                        <h3 className="text-xl font-black text-white mb-3 group-hover:text-brand-pink transition-colors duration-300">
+                          {event.title}
+                        </h3>
+
+                        <p className="text-sm text-gray-400 leading-relaxed mb-6">
+                          {event.description}
+                        </p>
+
+                        <div className="space-y-3">
+                          {(event.details as string[]).map((detail, i) => (
+                            <div key={i} className="flex items-start gap-3">
+                              <div className="w-1 h-1 bg-brand-pink rounded-full mt-[0.45rem] flex-shrink-0" />
+                              <span className="text-sm text-gray-400 leading-relaxed">{detail}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <ScrollIndicator sliderRef={timelineSliderRef} scrollProgress={scrollProgress} />
+            </div>
+          </div>
+        </div>
+
+        {/* ═══ MAIN CONTENT ═══ */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-28 space-y-32">
+
+          {/* ═══ DEPARTMENTS ═══ */}
+          <section>
+            <div className="mb-1">
+              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Where You Fit</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white">
+                OUR <span className="outline-text">DEPARTMENTS</span>
+              </h2>
+              <p className="text-gray-400 text-lg mt-2 max-w-xl">
+                Choose your department and contribute to our community
+              </p>
+            </div>
+
+            {/* Desktop: arc layout */}
+            {(() => {
+              // Left-side half-circle "(" : center=(300,300), r=300
+              // Arc from (300,0) at top, curving LEFT through (0,300), to (300,600) at bottom
+              const cx = 300, cy = 300, r = 300
+              const toRad = (deg: number) => (deg * Math.PI) / 180
+              // Standard-math angles (CCW from +x): 108°→top-left … 252°→bottom-left
+              const angles = [108, 144, 180, 216, 252]
+              // Per-dot label vertical nudge (positive = lower, negative = higher)
+              const labelYOffsets = [18, 6, 6, 6, -8]
+              const dots = departments.map((dept, i) => {
+                const a = toRad(angles[i])
+                return {
+                  dept,
+                  x: cx + r * Math.cos(a),
+                  y: cy - r * Math.sin(a),
+                  labelYOffset: labelYOffsets[i],
+                }
+              })
+              const activeDept = departments.find(d => d.id === activeDeptId)
+
+              return (
+                <>
+                  {/* Desktop */}
+                  <div className="hidden lg:grid lg:grid-cols-[1fr_380px] gap-10 items-center">
+                    {/* Detail panel — left */}
+                    <div className="min-h-[320px]">
+                      {activeDept && (
+                        <div
+                          key={activeDept.id}
+                          className="bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-brand-pink/20 p-8 h-full"
+                          style={{ animation: 'fadeInPanel 0.3s ease-out' }}
+                        >
+                          <div className="w-14 h-14 bg-brand-pink/15 rounded-2xl flex items-center justify-center mb-5">
+                            <span className="text-3xl">{activeDept.icon}</span>
+                          </div>
+                          <h3 className="text-2xl font-black text-white mb-3">{activeDept.name.toUpperCase()}</h3>
+                          <p className="text-gray-300 text-sm leading-relaxed mb-6">{activeDept.description}</p>
+                          <div className="border-t border-white/10 pt-5">
+                            <p className="text-xs text-brand-pink font-bold tracking-[0.15em] uppercase mb-3">Responsibilities</p>
+                            <div className="space-y-3">
+                              {activeDept.responsibilities.map((resp, i) => (
+                                <div key={i} className="flex items-start gap-3">
+                                  <div className="w-1.5 h-1.5 bg-brand-pink rounded-full mt-1.5 flex-shrink-0" />
+                                  <span className="text-sm text-gray-400 leading-relaxed">{resp}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Arc — right */}
+                    <div className="relative w-full">
+                      <svg
+                        viewBox="-20 -20 400 640"
+                        className="w-full"
+                        style={{ overflow: 'visible' }}
+                      >
+                        {/* Always-pink arc: (300,0) CCW through (0,300) to (300,600) */}
+                        <path
+                          d={`M ${cx},${cy - r} A ${r},${r} 0 0 0 ${cx},${cy + r}`}
+                          fill="none"
+                          stroke="rgb(236,72,153)"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                        />
+
+                        {/* Dots + labels */}
+                        {dots.map(({ dept, x, y, labelYOffset }) => {
+                          const isActive = activeDeptId === dept.id
+                          return (
+                            <g
+                              key={dept.id}
+                              onClick={() => setActiveDeptId(dept.id)}
+                              className="cursor-pointer"
+                              style={{ transition: 'all 0.3s' }}
+                            >
+                              {isActive && (
+                                <circle cx={x} cy={y} r="22" fill="rgba(236,72,153,0.15)" />
+                              )}
+                              <circle
+                                cx={x}
+                                cy={y}
+                                r={isActive ? 11 : 7}
+                                fill={isActive ? 'rgb(236,72,153)' : 'rgba(255,255,255,0.22)'}
+                                stroke={isActive ? 'rgba(236,72,153,0.6)' : 'rgba(255,255,255,0.25)'}
+                                strokeWidth="2"
+                              />
+                              {isActive && <circle cx={x} cy={y} r="4" fill="white" />}
+                              {/* Label — to the right of dot, toward the opening */}
+                              <text
+                                x={x + 24}
+                                y={y + labelYOffset}
+                                textAnchor="start"
+                                fontSize="20"
+                                fontWeight="800"
+                                letterSpacing="0.08em"
+                                fill={isActive ? 'rgb(236,72,153)' : 'rgba(255,255,255,0.5)'}
+                                fontFamily="inherit"
+                                style={{ transition: 'fill 0.3s' }}
+                              >
+                                {dept.name.toUpperCase()}
+                              </text>
+                            </g>
+                          )
+                        })}
+                      </svg>
+                    </div>
+                  </div>
+
+                  {/* Mobile: icon strip + card */}
+                  <div className="lg:hidden">
+                    <div className="flex justify-center gap-3 mb-6 flex-wrap">
+                      {departments.map((dept) => (
+                        <button
+                          key={dept.id}
+                          onClick={() => setActiveDeptId(dept.id)}
+                          className={`flex flex-col items-center gap-1.5 p-2 rounded-xl transition-all duration-200 ${activeDeptId === dept.id ? 'opacity-100' : 'opacity-45 hover:opacity-70'}`}
+                        >
+                          <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border transition-all ${activeDeptId === dept.id ? 'bg-brand-pink/20 border-brand-pink/40' : 'bg-white/5 border-white/10'}`}>
+                            <span className="text-2xl">{dept.icon}</span>
+                          </div>
+                          <span className={`text-[10px] font-bold uppercase tracking-wider ${activeDeptId === dept.id ? 'text-brand-pink' : 'text-gray-500'}`}>{dept.name}</span>
+                        </button>
+                      ))}
+                    </div>
+                    {activeDept && (
+                      <div key={activeDept.id} className="bg-white/[0.06] rounded-3xl border border-brand-pink/20 p-6" style={{ animation: 'fadeInPanel 0.3s ease-out' }}>
+                        <h3 className="text-xl font-black text-white mb-2">{activeDept.name.toUpperCase()}</h3>
+                        <p className="text-gray-400 text-sm leading-relaxed mb-4">{activeDept.description}</p>
+                        <div className="border-t border-white/10 pt-4">
+                          <p className="text-xs text-brand-pink font-bold tracking-[0.15em] uppercase mb-2">Responsibilities</p>
+                          {activeDept.responsibilities.map((resp, i) => (
+                            <div key={i} className="flex items-start gap-2 mt-2">
+                              <div className="w-1 h-1 bg-brand-pink rounded-full mt-1.5 flex-shrink-0" />
+                              <span className="text-xs text-gray-400 leading-relaxed">{resp}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              )
+            })()}
+          </section>
+
+          {/* ═══ INTERNAL EVENTS ═══ */}
+          <section>
+            <div className="mb-12">
+              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Community Life</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white">
+                INTERNAL <span className="outline-text">EVENTS</span>
+              </h2>
+              <p className="text-gray-400 text-lg mt-2 max-w-xl">
+                Regular events and activities of our community
+              </p>
+            </div>
+
+            <div ref={eventsSectionRef} className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch lg:h-[620px]">
+              {/* Event list card */}
+              <div
+                className="bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 p-8 order-2 lg:order-1"
+                onMouseLeave={() => {
+                  if (!lockedEventId && !isMoreLocked) {
+                    setHoveredEventId(null)
+                    setIsMoreHovered(false)
+                  }
+                }}
+              >
+                <div className="space-y-1">
+                  {startEvents.map((event, index) => {
+                    const isActive = activeEventId === event.id || (!activeEventId && !activeMore && currentEventIndex === index)
+                    return (
+                      <div
+                        key={event.id}
+                        className={`flex items-start gap-4 p-4 cursor-pointer transition-all duration-200 rounded-2xl ${isActive ? 'bg-brand-pink/10 border border-brand-pink/30' : 'border border-transparent hover:bg-white/5'}`}
+                        onMouseEnter={() => { if (!lockedEventId && !isMoreLocked) setHoveredEventId(event.id) }}
+                        onMouseLeave={() => { if (!lockedEventId && !isMoreLocked) setHoveredEventId(null) }}
+                        onClick={() => { setLockedEventId(event.id); setIsMoreLocked(false); setIsMoreHovered(false); setHoveredEventId(null); scrollToEventImage() }}
+                      >
+                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-200 ${isActive ? 'bg-brand-pink/20' : 'bg-white/5'}`}>
+                          <span className="text-xl">{event.icon}</span>
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h3 className={`font-bold text-base transition-colors duration-200 ${isActive ? 'text-white' : 'text-gray-200'}`}>{event.title}</h3>
+                            {event.frequency && (
+                              <span className="text-xs text-brand-pink/70 font-semibold bg-brand-pink/10 px-2 py-0.5 rounded-full flex-shrink-0">{event.frequency}</span>
+                            )}
+                          </div>
+                          <p className="text-gray-400 text-sm leading-relaxed">
+                            {event.description}
+                          </p>
+                        </div>
+                      </div>
+                    )
+                  })}
+
+                  {/* And a lot more */}
+                  {(() => {
+                    const isMoreActive = activeMore || (!activeEventId && !activeMore && currentEventIndex === startEvents.length)
+                    return (
+                      <div
+                        className={`flex items-start gap-4 p-4 cursor-pointer transition-all duration-200 rounded-2xl ${isMoreActive ? 'bg-brand-pink/10 border border-brand-pink/30' : 'border border-transparent hover:bg-white/5'}`}
+                        onMouseEnter={() => { if (!lockedEventId && !isMoreLocked) setIsMoreHovered(true) }}
+                        onMouseLeave={() => { if (!lockedEventId && !isMoreLocked) setIsMoreHovered(false) }}
+                        onClick={() => { setIsMoreLocked(true); setLockedEventId(null); setHoveredEventId(null); setIsMoreHovered(false); scrollToEventImage() }}
+                      >
+                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-200 ${isMoreActive ? 'bg-brand-pink/20' : 'bg-white/5'}`}>
+                          <span className="text-xl">✨</span>
+                        </div>
+                        <div className="flex-1">
+                          <h3 className={`font-bold text-base mb-1 transition-colors duration-200 ${isMoreActive ? 'text-white' : 'text-gray-200'}`}>And a lot more...</h3>
+                          <p className="text-gray-400 text-sm leading-relaxed">
+                            Discover many more exciting events and opportunities.
+                          </p>
+                        </div>
+                      </div>
+                    )
+                  })()}
+                </div>
+              </div>
+
+              {/* Image panel */}
+              <div ref={eventImageRef} className="bg-white/[0.06] rounded-3xl border border-white/10 relative overflow-hidden order-1 lg:order-2 h-72 lg:h-auto">
+                {activeMore || (!activeEventId && !activeMore && currentEventIndex === startEvents.length) ? (
+                  <div className="grid grid-cols-2 grid-rows-2 w-full h-full gap-0">
+                    {moreImages.map((img, i) => (
+                      <div key={i} className="relative w-full h-full overflow-hidden">
+                        <img
+                          src={img}
+                          alt={`More activities ${i + 1}`}
+                          className="w-full h-full object-cover fade-swap"
+                        />
+                        <div className="absolute inset-0 bg-brand-dark-blue/20" />
+                      </div>
+                    ))}
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="bg-black/70 backdrop-blur-md px-8 py-4 rounded-2xl border border-brand-pink/40">
+                        <p className="text-2xl font-black text-white">AND MORE...</p>
+                      </div>
+                    </div>
+                  </div>
+                ) : (() => {
+                  const images = activeEventId && eventImages.length > 0
+                    ? eventImages
+                    : currentEventImages.length > 0
+                      ? currentEventImages
+                      : null
+                  if (!images) return null
+                  const idx = eventImageIndex % images.length
+                  return (
+                    <div className="relative w-full h-full">
+                      <img
+                        key={images[idx]?.src}
+                        src={images[idx]?.src}
+                        alt={images[idx]?.title}
+                        className="w-full h-full object-cover fade-swap"
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
+                        <p className="text-base font-bold text-white">{images[idx]?.title}</p>
+                      </div>
+                      <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 flex items-center justify-between px-4">
+                        <button
+                          onClick={() => setEventImageIndex((prev) => (prev - 1 + images.length) % images.length)}
+                          className="w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-brand-pink/80 border border-white/20 hover:border-brand-pink text-white transition-all duration-300 backdrop-blur-md hover:scale-110"
+                          aria-label="Previous image"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+                        </button>
+                        <button
+                          onClick={() => setEventImageIndex((prev) => (prev + 1) % images.length)}
+                          className="w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-brand-pink/80 border border-white/20 hover:border-brand-pink text-white transition-all duration-300 backdrop-blur-md hover:scale-110"
+                          aria-label="Next image"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+                        </button>
+                      </div>
+                      <div className="absolute top-4 right-4 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-md border border-white/20 text-white text-xs font-semibold tabular-nums">
+                        {idx + 1} / {images.length}
+                      </div>
+                    </div>
+                  )
+                })()}
+              </div>
+            </div>
+          </section>
+
+          {/* ═══ COMMUNITY SPECIALS ═══ */}
+          <section>
+            <div className="mb-12">
+              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Exclusive Access</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white">
+                COMMUNITY <span className="outline-text">SPECIALS</span>
+              </h2>
+              <p className="text-gray-400 text-lg mt-2 max-w-xl">
+                Unique opportunities exclusively for START Munich members
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {/* Bay Area */}
+              <a
+                href="https://www.startbayarea.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group relative overflow-hidden bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 hover:border-brand-pink/40 transition-all duration-500 block"
+              >
+                <div className="aspect-video relative overflow-hidden rounded-t-3xl">
+                  <img
+                    src="/memberJourney/SF-opt.png"
+                    alt="San Francisco Bay Area"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                </div>
+                <div className="p-8">
+                  <h3 className="text-2xl font-black text-white mb-3 group-hover:text-brand-pink transition-colors">
+                    START goes Bay Area
+                  </h3>
+                  <p className="text-gray-300 text-sm leading-relaxed mb-5">
+                    Once a year, 20 selected STARTies go on a two-week trip to the San Francisco Bay Area to experience one of the world's most vibrant startup ecosystems firsthand. Through curated visits with partner companies, research labs, and VC firms, participants strengthen our ties with international founders, researchers, and investors.
+                  </p>
+                  <span className="inline-flex items-center gap-2 text-brand-pink font-bold text-sm group-hover:gap-3 transition-all">
+                    Learn more
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    </svg>
+                  </span>
+                </div>
+              </a>
+
+              {/* Cambridge */}
+              <div className="group relative overflow-hidden bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 hover:border-brand-pink/30 transition-all duration-500">
+                <div className="aspect-video relative overflow-hidden rounded-t-3xl">
+                  <img
+                    src="/memberJourney/cambridge-aerial-opt.png"
+                    alt="University Research"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                </div>
+                <div className="p-8">
+                  <h3 className="text-2xl font-black text-white mb-3">
+                    Research Stay @ Cambridge
+                  </h3>
+                  <p className="text-gray-300 text-sm leading-relaxed mb-5">
+                    Spend a research stay with our partners at the University of Cambridge and Technical University of Munich. Gain access to world-class academic resources, mentorship from leading researchers, and the opportunity to contribute to cutting-edge research.
+                  </p>
+                  <div className="flex items-center gap-3">
+                    <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 font-semibold bg-white/5 border border-white/10 px-3 py-1.5 rounded-full">
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                      </svg>
+                      Cambridge
+                    </span>
+                    <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 font-semibold bg-white/5 border border-white/10 px-3 py-1.5 rounded-full">
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                      </svg>
+                      TUM
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Member Stories */}
+          <TestimonialsSection
+            title={<>
+              <span className="outline-text">MEMBER </span> STORIES
+            </>}
+            description="Real stories from our members who built successful startups with START Munich"
+            items={memberStories.map(story => ({
+              id: story.id,
+              name: story.name,
+              role: story.role,
+              company: story.company,
+              image: story.image,
+              story: story.story,
+              logos: story.logos
+            }))}
+          />
+
+          {/* CTA */}
+          <CTA
+            title="Ready to Join?"
+            description="Start your entrepreneurial journey with START Munich today. Apply to become a member and experience our vibrant community."
+            buttons={[
+              { label: "Apply Now", href: "/apply" },
+              { label: "Learn More", href: "/about-us", variant: "secondary" }
+            ]}
+          />
+
+        </div>
+      </main>
+
+      <style jsx global>{`
+        .fade-swap {
+          animation: fadeSwap 0.8s ease-in-out;
+        }
+        @keyframes fadeSwap {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        .timeline-card-animate {
+          animation: slideInFromLeft 0.6s ease-out forwards;
+          opacity: 0;
+          transform: translateX(-30px);
+        }
+        @keyframes slideInFromLeft {
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+
+        .overflow-x-auto {
+          scroll-behavior: smooth;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .tabular-nums { font-variant-numeric: tabular-nums; }
+
+        @keyframes fadeInPanel {
+          from { opacity: 0; transform: translateY(8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/app/member-journey/page.tsx b/app/member-journey/page.tsx
index 39c0502..fa9a481 100644
--- a/app/member-journey/page.tsx
+++ b/app/member-journey/page.tsx
@@ -1,970 +1,21 @@
-"use client"
-
-import { useState, useEffect, useRef } from 'react'
-import Script from 'next/script'
-import { ScrollIndicator } from '@/components/EventComponents'
-import Hero from "@/components/Hero"
-import HeroCard from "@/components/HeroCard"
-import TestimonialsSection from '@/components/TestimonialsSection'
-import CTA from "@/components/CTA"
-import { useAnimatedNumber } from '@/lib/hooks'
+import type { Metadata } from 'next'
+import MemberJourneyContent from './MemberJourneyContent'
 
 export const dynamic = 'force-dynamic'
 
-interface TimelineEvent {
-  id: string
-  title: string
-  description: string
-  icon: string
-  image: string | string[]
-  details: string[]
-}
-
-interface Department {
-  id: string
-  name: string
-  description: string
-  icon: string
-  responsibilities: string[]
-}
-
-interface StartEvent {
-  id: string
-  title: string
-  description: string
-  category: string
-  frequency: string
-  icon: string
-  images: string[]
-}
-
-interface MemberStory {
-  id: string
-  name: string
-  role: string
-  company: string
-  image: string
-  story: string
-  department: string
-  logos?: { src: string; url?: string }[]
-}
-
-const placeholderImage = "/internalevents-opt.png"
-
-const timelineEvents: TimelineEvent[] = [
-  {
-    id: "application",
-    title: "Application",
-    description: "Your entry into START Munich.",
-    icon: "📝",
-    image: "",
-    details: ["Apply in April or October", "Stage 1: Written Application", "Stage 2: Two Interviews (same day, 30 minutes each)"]
-  },
-  {
-    id: "start-sprint",
-    title: "START Sprint",
-    description: "Your first month at START. Get to know and bond with ambitious people you wouldn't meet in your usual circles, and build a real product together.",
-    icon: "🚀",
-    image: [
-      "https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=800&auto=format&fit=crop",
-      "https://images.unsplash.com/photo-1531482615713-2afd69097998?q=80&w=800&auto=format&fit=crop"
-    ],
-    details: ["Develop your own idea from concept to MVP in just 4 weeks", "Two workshops per week to learn foundations of building a startup", "Get to know key players within Munich startup ecosystem", "Hut weekend in Austria"]
-  },
-  {
-    id: "department-selection",
-    title: "Department Selection",
-    description: "Develop yourself and shape the future of START.",
-    icon: "🎯",
-    image: "",
-    details: ["Choose one of five departments", "Work on real projects with visible impact inside and outside START", "Learn useful startup skills in practice", "Grow fast by taking ownership", "Initiate new formats"]
-  },
-  {
-    id: "active-member",
-    title: "Active Member",
-    description: "Enjoy the benefits of being a STARTie and expand your network through exclusive opportunities.",
-    icon: "🌍",
-    image: placeholderImage,
-    details: [
-      "Join the Bay Area trip, 2 weeks, 20+ curated visits to top startups, VCs, and labs",
-      "Research Stay @ Cambridge through direct research collaboration",
-      "Become part of the START Network, 20+ chapters worldwide",
-      "Find co-founders or start your own venture within a community of 70+ startups, including teams backed by Y Combinator"
-    ]
-  },
-  {
-    id: "alumni",
-    title: "START Alumni",
-    description: "Once a STARTie, always a STARTie. Stay connected as you build your own path.",
-    icon: "⭐",
-    image: placeholderImage,
-    details: ["Become alumni after two active semesters", "Find co-founders, investors, and collaborators across the START Global Network", "Give back by mentoring, sharing, and supporting new STARTies", "Stay involved as much as you want, department work is optional"]
-  }
-]
-
-const departments: Department[] = [
-  {
-    id: "people",
-    name: "People",
-    description: "Learn how to spot the right talent, keep them motivated, and build a community that accelerates your startup journey.",
-    icon: "👥",
-    responsibilities: ["Run recruiting, interviews, and onboarding.", "Organize START Sprint and shape new batches.", "Keep members engaged and connected through formats like Hut Weekend, START Goes Eating, and more."]
-  },
-  {
-    id: "marketing",
-    name: "Marketing",
-    description: "Learn strategy and how to highlight START's people, events, and achievements to reach millions and push the ecosystem forward.",
-    icon: "📢",
-    responsibilities: ["Create content, posts, and campaigns for LinkedIn and Instagram.", "Shoot and edit photos and videos from events.", "Build and maintain START's brand and image."]
-  },
-  {
-    id: "finops",
-    name: "FinOps",
-    description: "Learn how to design and build custom tools and automate workflows to expand START's output and influence.",
-    icon: "💰",
-    responsibilities: ["Build internal tools like Members Platform or Financial Dashboard.", "Improve our core systems like Slack, n8n and Notion.", "Handle contract management, ensuring compliance."]
-  },
-  {
-    id: "partnerships",
-    name: "Partnerships",
-    description: "Learn how to secure partners, close deals, and bring in the resources that multiply START's impact across the ecosystem.",
-    icon: "🤝",
-    responsibilities: ["Run persistent outreach, handle rejection, and keep going.", "Build and manage relationships that create long-term value.", "Close deals that fund START's projects."]
-  },
-  {
-    id: "events",
-    name: "Events",
-    description: "Learn how to run flagship events where people meet, learn, and build across START, the Munich ecosystem, and beyond.",
-    icon: "🎉",
-    responsibilities: ["Organize and run large-scale events with 300+ attendees, like hackathons and summits.", "Organize workshops, startup visits, and other learning opportunities.", "Create experiences people remember and come back for."]
-  }
-]
-
-const startEvents: StartEvent[] = [
-  {
-    id: "monthly",
-    title: "The Monthly",
-    description: "Every month all Munich STARTies meet and get updated on START events or pitch their startups. Location: MTZ",
-    category: "Meeting",
-    frequency: "Monthly",
-    icon: "📅",
-    images: [
-      "/memberJourney/monthly/2-opt.jpg",
-      "/memberJourney/monthly/3-opt.png",
-      "/memberJourney/monthly/4-opt.png",
-    ]
+export const metadata: Metadata = {
+  title: 'Member Journey',
+  description:
+    'Discover the START Munich member journey — how you grow from applicant to founder within Europe\'s most vibrant student entrepreneurship community.',
+  alternates: { canonical: 'https://www.startmunich.de/member-journey' },
+  openGraph: {
+    url: 'https://www.startmunich.de/member-journey',
+    title: 'Member Journey | START Munich',
+    description:
+      'Discover the START Munich member journey — how you grow from applicant to founder within Europe\'s most vibrant student entrepreneurship community.',
   },
-  {
-    id: "department-work",
-    title: "Department Work",
-    description: "Work with your department. Meet weekly at the MTZ.",
-    category: "Department",
-    frequency: "Weekly",
-    icon: "💼",
-    images: [
-      "/memberJourney/departmentwork/2-opt.jpg",
-      "/memberJourney/departmentwork/1-opt.jpg"
-
-    ]
-  },
-  {
-    id: "builders-weekend",
-    title: "Builders Weekend",
-    description: "Meet on the weekend to build your own startup.",
-    category: "Building",
-    frequency: "Monthly",
-    icon: "🔨",
-    images: [
-      "/memberJourney/builderWeekend/1-opt.jpg"
-    ]
-  },
-  {
-    id: "workshops",
-    title: "Member Workshops",
-    description: "Workshops with VCs and other professionals.",
-    category: "Learning",
-    frequency: "",
-    icon: "🎓",
-    images: [
-      "/memberJourney/memberworkshop/1-opt.jpg",
-      "/memberJourney/memberworkshop/3-opt.jpeg"
-    ]
-  },
-  {
-    id: "startup-visits",
-    title: "Startup Visits",
-    description: "Visit startups and learn from the experienced.",
-    category: "Networking",
-    frequency: "",
-    icon: "🏢",
-    images: [
-      "/memberJourney/startupVisit/1-opt.png",
-      "/memberJourney/startupVisit/2-opt.png",
-    ]
-  }
-]
-
-const memberStories: MemberStory[] = [
-  {
-    id: "story-1",
-    name: "Felix Haas",
-    role: "Founder & Investor",
-    company: "IDNow | Bits & Pretzels",
-    image: "/memberJourney/alumni/FelixHaas-opt.png",
-    story: "At START Munich, I laid the foundation for my current network. From this starting point, I built several companies, invested in more than 80 start-ups and helped set up Bits & Pretzels.",
-    department: "Alumni",
-    logos: [
-      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbeea_Vectors-Wrapper.svg", url: "https://www.idnow.io/" },
-      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbece_logo.svg", url: "https://www.bitsandpretzels.com/" }
-    ]
-  },
-  {
-    id: "story-3",
-    name: "Elisabeth Goebel",
-    role: "Early Operator",
-    company: "ZeitAI | CDTM",
-    image: "/memberJourney/alumni/Elisa-opt.png",
-    story: "START is where things actually happen. I co-founded ISAR Unfiltered, met people who think and move the way I do, and built a network that directly led me to where I am today: Early Operator at a YC-backed AI startup.",
-    department: "People",
-    logos: [
-      { src: "https://cdn.prod.website-files.com/6902359088cc8683c4db0171/69249d98617b1b96682cca65_44a5d2ba9e6004a1281eed9068c62a95_zeitai-logo-opt.png", url: "https://www.zeit.ai/" },
-    ]
-  },
-    {
-    id: "story-2",
-    name: "Joshua Cornelius",
-    role: "Co-Founder",
-    company: "Freeletics | CDTM",
-    image: "/memberJourney/alumni/JoshuaCornelius-opt.png",
-    story: "Before we founded Freeletics, START Munich - in addition to CDTM - gave my co-founder and me the ideal opportunity to make first contacts in the Munich startup scene.",
-    department: "Alumni",
-    logos: [
-      { src: "https://cdn.prod.website-files.com/65f98ea7c70b10b668ccbeb3/65f98ea7c70b10b668ccbeef_5eb3c929c8c4590004435152-opt.png", url: "https://www.freeletics.com/" }
-    ]
-  }
-]
+}
 
 export default function MemberJourneyPage() {
-  const [loading, setLoading] = useState(true)
-  const [activeDeptId, setActiveDeptId] = useState<string | null>(departments[0].id)
-  const [eventImageIndex, setEventImageIndex] = useState(0)
-  const [currentEventIndex, setCurrentEventIndex] = useState(0)
-  const timelineSliderRef = useRef<HTMLDivElement>(null)
-  const isDraggingTimeline = useRef(false)
-  const dragStartX = useRef(0)
-  const dragStartScrollLeft = useRef(0)
-  const [scrollProgress, setScrollProgress] = useState(0)
-  const [hoveredEventId, setHoveredEventId] = useState<string | null>(null)
-  const [lockedEventId, setLockedEventId] = useState<string | null>(null)
-  const [isMoreHovered, setIsMoreHovered] = useState(false)
-  const [isMoreLocked, setIsMoreLocked] = useState(false)
-  const autoRotateTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const eventImageRef = useRef<HTMLDivElement>(null)
-  const eventsSectionRef = useRef<HTMLDivElement>(null)
-
-  // Unlock selection when clicking outside the events section
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (eventsSectionRef.current && !eventsSectionRef.current.contains(e.target as Node)) {
-        setLockedEventId(null)
-        setIsMoreLocked(false)
-      }
-    }
-    document.addEventListener('click', handleClickOutside)
-    return () => document.removeEventListener('click', handleClickOutside)
-  }, [])
-
-  // Animated counter for hero stats
-  const semesterCount = useAnimatedNumber(2, loading, 500)
-
-  // Images for "And a lot more..." section
-  const moreImages = [
-    "https://images.unsplash.com/photo-1528605105345-5344ea20e269?q=80&w=800&auto=format&fit=crop",
-    "https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=800&auto=format&fit=crop",
-    "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=800&auto=format&fit=crop",
-    "https://images.unsplash.com/photo-1475721027785-f74eccf877e2?q=80&w=800&auto=format&fit=crop"
-  ]
-
-  const activeEventId = lockedEventId || hoveredEventId
-  const activeMore = isMoreLocked || isMoreHovered
-
-  const eventImages = activeEventId
-    ? startEvents
-      .find((event) => event.id === activeEventId)
-      ?.images.map((img) => ({ src: img, title: startEvents.find((e) => e.id === activeEventId)!.title })) || []
-    : []
-
-  // Get current event for auto-rotation (only if nothing is active)
-  const currentEvent = !activeEventId && !activeMore && currentEventIndex < startEvents.length
-    ? startEvents[currentEventIndex]
-    : null
-  const currentEventImages = currentEvent
-    ? currentEvent.images.map((img) => ({ src: img, title: currentEvent.title }))
-    : []
-
-  const scrollToEventImage = () => {
-    if (window.innerWidth < 1024 && eventImageRef.current) {
-      const yOffset = -80
-      const y = eventImageRef.current.getBoundingClientRect().top + window.scrollY + yOffset
-      window.scrollTo({ top: y, behavior: 'smooth' })
-    }
-  }
-
-  useEffect(() => {
-    setLoading(false)
-  }, [])
-
-  useEffect(() => {
-    const slider = timelineSliderRef.current
-    if (!slider || loading) return
-
-    const updateScroll = () => {
-      const maxScroll = slider.scrollWidth - slider.clientWidth
-      const progress = maxScroll > 0 ? (slider.scrollLeft / maxScroll) * 100 : 0
-      setScrollProgress(progress)
-    }
-
-    slider.addEventListener('scroll', updateScroll)
-    updateScroll()
-    setTimeout(updateScroll, 100)
-
-    return () => slider.removeEventListener('scroll', updateScroll)
-  }, [loading])
-
-  // Auto-rotate events every 5 seconds
-  useEffect(() => {
-    if (loading || activeEventId || activeMore) {
-      if (autoRotateTimerRef.current) {
-        clearInterval(autoRotateTimerRef.current)
-        autoRotateTimerRef.current = null
-      }
-      return
-    }
-
-    autoRotateTimerRef.current = setInterval(() => {
-      setCurrentEventIndex((prev) => (prev + 1) % (startEvents.length + 1))
-    }, 3000)
-
-    return () => {
-      if (autoRotateTimerRef.current) {
-        clearInterval(autoRotateTimerRef.current)
-      }
-    }
-  }, [loading, activeEventId, activeMore])
-
-  // Reset image index when event changes
-  useEffect(() => {
-    setEventImageIndex(0)
-  }, [activeEventId, activeMore, currentEventIndex])
-
-  // When hovering ends, continue auto-rotation from the active item
-  useEffect(() => {
-    if (!activeEventId && !activeMore) {
-      return
-    }
-    if (activeEventId) {
-      const index = startEvents.findIndex(e => e.id === activeEventId)
-      if (index !== -1) {
-        setCurrentEventIndex(index)
-      }
-    } else if (activeMore) {
-      setCurrentEventIndex(startEvents.length)
-    }
-  }, [activeEventId, activeMore])
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-brand-dark-blue py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <p className="text-2xl font-bold text-white">Loading journey...</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(
-              document.documentElement.scrollHeight,
-              document.body.scrollHeight
-            );
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-brand-dark-blue">
-        {/* Hero Section */}
-        <Hero
-          backgroundImage="/memberJourney/hero-opt.png"
-          title={
-            <>
-              YOUR START MUNICH
-              <br />
-              <span className="outline-text">JOURNEY</span>
-            </>
-          }
-          description="Become a member and spend at least two active semesters contributing to the community"
-        >
-          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  {semesterCount}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Semesters</p>
-            </HeroCard>
-
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  ∞
-                </span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Possibilities</p>
-            </HeroCard>
-          </div>
-        </Hero>
-
-        {/* ═══ MEMBER JOURNEY TIMELINE ═══ */}
-        <div className="mb-0 w-full pt-12 lg:pt-28">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
-            <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Your Path</span>
-            <h2 className="text-3xl md:text-4xl font-black text-white">
-              MEMBER <span className="outline-text">JOURNEY</span>
-            </h2>
-            <p className="text-gray-400 text-lg mt-2 max-w-xl">
-              The 5 milestones of your first two semesters at START Munich
-            </p>
-          </div>
-
-          <div className="relative group/timeline">
-            <div
-              ref={timelineSliderRef}
-              className="overflow-x-auto scrollbar-hide pb-1 cursor-grab active:cursor-grabbing max-w-7xl mx-auto"
-              onMouseDown={(e) => {
-                isDraggingTimeline.current = true
-                dragStartX.current = e.pageX - (timelineSliderRef.current?.offsetLeft ?? 0)
-                dragStartScrollLeft.current = timelineSliderRef.current?.scrollLeft ?? 0
-              }}
-              onMouseMove={(e) => {
-                if (!isDraggingTimeline.current || !timelineSliderRef.current) return
-                e.preventDefault()
-                const x = e.pageX - (timelineSliderRef.current.offsetLeft ?? 0)
-                timelineSliderRef.current.scrollLeft = dragStartScrollLeft.current - (x - dragStartX.current)
-              }}
-              onMouseUp={() => { isDraggingTimeline.current = false }}
-              onMouseLeave={() => { isDraggingTimeline.current = false }}
-            >
-              <div className="flex gap-5 min-w-max px-8 lg:px-20">
-                {timelineEvents.map((event, index) => (
-                  <div
-                    key={event.id}
-                    className="group relative timeline-card-animate w-[320px] flex-shrink-0"
-                    style={{ animationDelay: `${index * 0.15}s` }}
-                  >
-                    <div className="relative h-full bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 overflow-hidden transition-all duration-500 hover:border-brand-pink/40 hover:bg-white/[0.09]">
-                      {/* Pink accent top bar */}
-                      <div className="h-px w-full bg-gradient-to-r from-transparent via-brand-pink/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-                      <div className="p-8">
-                        {/* Step number + divider */}
-                        <div className="flex items-center gap-4 mb-6">
-                          <span className="text-5xl font-black text-white/20 tracking-tight tabular-nums leading-none">
-                            0{index + 1}
-                          </span>
-                          <div className="h-px flex-1 bg-gradient-to-r from-white/20 to-transparent" />
-                          <span className="text-2xl">{event.icon}</span>
-                        </div>
-
-                        <h3 className="text-xl font-black text-white mb-3 group-hover:text-brand-pink transition-colors duration-300">
-                          {event.title}
-                        </h3>
-
-                        <p className="text-sm text-gray-400 leading-relaxed mb-6">
-                          {event.description}
-                        </p>
-
-                        <div className="space-y-3">
-                          {(event.details as string[]).map((detail, i) => (
-                            <div key={i} className="flex items-start gap-3">
-                              <div className="w-1 h-1 bg-brand-pink rounded-full mt-[0.45rem] flex-shrink-0" />
-                              <span className="text-sm text-gray-400 leading-relaxed">{detail}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              <ScrollIndicator sliderRef={timelineSliderRef} scrollProgress={scrollProgress} />
-            </div>
-          </div>
-        </div>
-
-        {/* ═══ MAIN CONTENT ═══ */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-28 space-y-32">
-
-          {/* ═══ DEPARTMENTS ═══ */}
-          <section>
-            <div className="mb-1">
-              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Where You Fit</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white">
-                OUR <span className="outline-text">DEPARTMENTS</span>
-              </h2>
-              <p className="text-gray-400 text-lg mt-2 max-w-xl">
-                Choose your department and contribute to our community
-              </p>
-            </div>
-
-            {/* Desktop: arc layout */}
-            {(() => {
-              // Left-side half-circle "(" : center=(300,300), r=300
-              // Arc from (300,0) at top, curving LEFT through (0,300), to (300,600) at bottom
-              const cx = 300, cy = 300, r = 300
-              const toRad = (deg: number) => (deg * Math.PI) / 180
-              // Standard-math angles (CCW from +x): 108°→top-left … 252°→bottom-left
-              const angles = [108, 144, 180, 216, 252]
-              // Per-dot label vertical nudge (positive = lower, negative = higher)
-              const labelYOffsets = [18, 6, 6, 6, -8]
-              const dots = departments.map((dept, i) => {
-                const a = toRad(angles[i])
-                return {
-                  dept,
-                  x: cx + r * Math.cos(a),
-                  y: cy - r * Math.sin(a),
-                  labelYOffset: labelYOffsets[i],
-                }
-              })
-              const activeDept = departments.find(d => d.id === activeDeptId)
-
-              return (
-                <>
-                  {/* Desktop */}
-                  <div className="hidden lg:grid lg:grid-cols-[1fr_380px] gap-10 items-center">
-                    {/* Detail panel — left */}
-                    <div className="min-h-[320px]">
-                      {activeDept && (
-                        <div
-                          key={activeDept.id}
-                          className="bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-brand-pink/20 p-8 h-full"
-                          style={{ animation: 'fadeInPanel 0.3s ease-out' }}
-                        >
-                          <div className="w-14 h-14 bg-brand-pink/15 rounded-2xl flex items-center justify-center mb-5">
-                            <span className="text-3xl">{activeDept.icon}</span>
-                          </div>
-                          <h3 className="text-2xl font-black text-white mb-3">{activeDept.name.toUpperCase()}</h3>
-                          <p className="text-gray-300 text-sm leading-relaxed mb-6">{activeDept.description}</p>
-                          <div className="border-t border-white/10 pt-5">
-                            <p className="text-xs text-brand-pink font-bold tracking-[0.15em] uppercase mb-3">Responsibilities</p>
-                            <div className="space-y-3">
-                              {activeDept.responsibilities.map((resp, i) => (
-                                <div key={i} className="flex items-start gap-3">
-                                  <div className="w-1.5 h-1.5 bg-brand-pink rounded-full mt-1.5 flex-shrink-0" />
-                                  <span className="text-sm text-gray-400 leading-relaxed">{resp}</span>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Arc — right */}
-                    <div className="relative w-full">
-                      <svg
-                        viewBox="-20 -20 400 640"
-                        className="w-full"
-                        style={{ overflow: 'visible' }}
-                      >
-                        {/* Always-pink arc: (300,0) CCW through (0,300) to (300,600) */}
-                        <path
-                          d={`M ${cx},${cy - r} A ${r},${r} 0 0 0 ${cx},${cy + r}`}
-                          fill="none"
-                          stroke="rgb(236,72,153)"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                        />
-
-                        {/* Dots + labels */}
-                        {dots.map(({ dept, x, y, labelYOffset }) => {
-                          const isActive = activeDeptId === dept.id
-                          return (
-                            <g
-                              key={dept.id}
-                              onClick={() => setActiveDeptId(dept.id)}
-                              className="cursor-pointer"
-                              style={{ transition: 'all 0.3s' }}
-                            >
-                              {isActive && (
-                                <circle cx={x} cy={y} r="22" fill="rgba(236,72,153,0.15)" />
-                              )}
-                              <circle
-                                cx={x}
-                                cy={y}
-                                r={isActive ? 11 : 7}
-                                fill={isActive ? 'rgb(236,72,153)' : 'rgba(255,255,255,0.22)'}
-                                stroke={isActive ? 'rgba(236,72,153,0.6)' : 'rgba(255,255,255,0.25)'}
-                                strokeWidth="2"
-                              />
-                              {isActive && <circle cx={x} cy={y} r="4" fill="white" />}
-                              {/* Label — to the right of dot, toward the opening */}
-                              <text
-                                x={x + 24}
-                                y={y + labelYOffset}
-                                textAnchor="start"
-                                fontSize="20"
-                                fontWeight="800"
-                                letterSpacing="0.08em"
-                                fill={isActive ? 'rgb(236,72,153)' : 'rgba(255,255,255,0.5)'}
-                                fontFamily="inherit"
-                                style={{ transition: 'fill 0.3s' }}
-                              >
-                                {dept.name.toUpperCase()}
-                              </text>
-                            </g>
-                          )
-                        })}
-                      </svg>
-                    </div>
-                  </div>
-
-                  {/* Mobile: icon strip + card */}
-                  <div className="lg:hidden">
-                    <div className="flex justify-center gap-3 mb-6 flex-wrap">
-                      {departments.map((dept) => (
-                        <button
-                          key={dept.id}
-                          onClick={() => setActiveDeptId(dept.id)}
-                          className={`flex flex-col items-center gap-1.5 p-2 rounded-xl transition-all duration-200 ${activeDeptId === dept.id ? 'opacity-100' : 'opacity-45 hover:opacity-70'}`}
-                        >
-                          <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border transition-all ${activeDeptId === dept.id ? 'bg-brand-pink/20 border-brand-pink/40' : 'bg-white/5 border-white/10'}`}>
-                            <span className="text-2xl">{dept.icon}</span>
-                          </div>
-                          <span className={`text-[10px] font-bold uppercase tracking-wider ${activeDeptId === dept.id ? 'text-brand-pink' : 'text-gray-500'}`}>{dept.name}</span>
-                        </button>
-                      ))}
-                    </div>
-                    {activeDept && (
-                      <div key={activeDept.id} className="bg-white/[0.06] rounded-3xl border border-brand-pink/20 p-6" style={{ animation: 'fadeInPanel 0.3s ease-out' }}>
-                        <h3 className="text-xl font-black text-white mb-2">{activeDept.name.toUpperCase()}</h3>
-                        <p className="text-gray-400 text-sm leading-relaxed mb-4">{activeDept.description}</p>
-                        <div className="border-t border-white/10 pt-4">
-                          <p className="text-xs text-brand-pink font-bold tracking-[0.15em] uppercase mb-2">Responsibilities</p>
-                          {activeDept.responsibilities.map((resp, i) => (
-                            <div key={i} className="flex items-start gap-2 mt-2">
-                              <div className="w-1 h-1 bg-brand-pink rounded-full mt-1.5 flex-shrink-0" />
-                              <span className="text-xs text-gray-400 leading-relaxed">{resp}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )
-            })()}
-          </section>
-
-          {/* ═══ INTERNAL EVENTS ═══ */}
-          <section>
-            <div className="mb-12">
-              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Community Life</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white">
-                INTERNAL <span className="outline-text">EVENTS</span>
-              </h2>
-              <p className="text-gray-400 text-lg mt-2 max-w-xl">
-                Regular events and activities for our member community
-              </p>
-            </div>
-
-            <div ref={eventsSectionRef} className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch lg:h-[620px]">
-              {/* Event list card */}
-              <div
-                className="bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 p-8 order-2 lg:order-1"
-                onMouseLeave={() => {
-                  if (!lockedEventId && !isMoreLocked) {
-                    setHoveredEventId(null)
-                    setIsMoreHovered(false)
-                  }
-                }}
-              >
-                <div className="space-y-1">
-                  {startEvents.map((event, index) => {
-                    const isActive = activeEventId === event.id || (!activeEventId && !activeMore && currentEventIndex === index)
-                    return (
-                      <div
-                        key={event.id}
-                        className={`flex items-start gap-4 p-4 cursor-pointer transition-all duration-200 rounded-2xl ${isActive ? 'bg-brand-pink/10 border border-brand-pink/30' : 'border border-transparent hover:bg-white/5'}`}
-                        onMouseEnter={() => { if (!lockedEventId && !isMoreLocked) setHoveredEventId(event.id) }}
-                        onMouseLeave={() => { if (!lockedEventId && !isMoreLocked) setHoveredEventId(null) }}
-                        onClick={() => { setLockedEventId(event.id); setIsMoreLocked(false); setIsMoreHovered(false); setHoveredEventId(null); scrollToEventImage() }}
-                      >
-                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-200 ${isActive ? 'bg-brand-pink/20' : 'bg-white/5'}`}>
-                          <span className="text-xl">{event.icon}</span>
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <h3 className={`font-bold text-base transition-colors duration-200 ${isActive ? 'text-white' : 'text-gray-200'}`}>{event.title}</h3>
-                            {event.frequency && (
-                              <span className="text-xs text-brand-pink/70 font-semibold bg-brand-pink/10 px-2 py-0.5 rounded-full flex-shrink-0">{event.frequency}</span>
-                            )}
-                          </div>
-                          <p className="text-gray-400 text-sm leading-relaxed">
-                            {event.description}
-                          </p>
-                        </div>
-                      </div>
-                    )
-                  })}
-
-                  {/* And a lot more */}
-                  {(() => {
-                    const isMoreActive = activeMore || (!activeEventId && !activeMore && currentEventIndex === startEvents.length)
-                    return (
-                      <div
-                        className={`flex items-start gap-4 p-4 cursor-pointer transition-all duration-200 rounded-2xl ${isMoreActive ? 'bg-brand-pink/10 border border-brand-pink/30' : 'border border-transparent hover:bg-white/5'}`}
-                        onMouseEnter={() => { if (!lockedEventId && !isMoreLocked) setIsMoreHovered(true) }}
-                        onMouseLeave={() => { if (!lockedEventId && !isMoreLocked) setIsMoreHovered(false) }}
-                        onClick={() => { setIsMoreLocked(true); setLockedEventId(null); setHoveredEventId(null); setIsMoreHovered(false); scrollToEventImage() }}
-                      >
-                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-200 ${isMoreActive ? 'bg-brand-pink/20' : 'bg-white/5'}`}>
-                          <span className="text-xl">✨</span>
-                        </div>
-                        <div className="flex-1">
-                          <h3 className={`font-bold text-base mb-1 transition-colors duration-200 ${isMoreActive ? 'text-white' : 'text-gray-200'}`}>And a lot more...</h3>
-                          <p className="text-gray-400 text-sm leading-relaxed">
-                            Discover many more exciting events and opportunities.
-                          </p>
-                        </div>
-                      </div>
-                    )
-                  })()}
-                </div>
-              </div>
-
-              {/* Image panel */}
-              <div ref={eventImageRef} className="bg-white/[0.06] rounded-3xl border border-white/10 relative overflow-hidden order-1 lg:order-2 h-72 lg:h-auto">
-                {activeMore || (!activeEventId && !activeMore && currentEventIndex === startEvents.length) ? (
-                  <div className="grid grid-cols-2 grid-rows-2 w-full h-full gap-0">
-                    {moreImages.map((img, i) => (
-                      <div key={i} className="relative w-full h-full overflow-hidden">
-                        <img
-                          src={img}
-                          alt={`More activities ${i + 1}`}
-                          className="w-full h-full object-cover fade-swap"
-                        />
-                        <div className="absolute inset-0 bg-brand-dark-blue/20" />
-                      </div>
-                    ))}
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="bg-black/70 backdrop-blur-md px-8 py-4 rounded-2xl border border-brand-pink/40">
-                        <p className="text-2xl font-black text-white">AND MORE...</p>
-                      </div>
-                    </div>
-                  </div>
-                ) : (() => {
-                  const images = activeEventId && eventImages.length > 0
-                    ? eventImages
-                    : currentEventImages.length > 0
-                      ? currentEventImages
-                      : null
-                  if (!images) return null
-                  const idx = eventImageIndex % images.length
-                  return (
-                    <div className="relative w-full h-full">
-                      <img
-                        key={images[idx]?.src}
-                        src={images[idx]?.src}
-                        alt={images[idx]?.title}
-                        className="w-full h-full object-cover fade-swap"
-                      />
-                      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
-                        <p className="text-base font-bold text-white">{images[idx]?.title}</p>
-                      </div>
-                      <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 flex items-center justify-between px-4">
-                        <button
-                          onClick={() => setEventImageIndex((prev) => (prev - 1 + images.length) % images.length)}
-                          className="w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-brand-pink/80 border border-white/20 hover:border-brand-pink text-white transition-all duration-300 backdrop-blur-md hover:scale-110"
-                          aria-label="Previous image"
-                        >
-                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
-                        </button>
-                        <button
-                          onClick={() => setEventImageIndex((prev) => (prev + 1) % images.length)}
-                          className="w-10 h-10 flex items-center justify-center rounded-full bg-black/40 hover:bg-brand-pink/80 border border-white/20 hover:border-brand-pink text-white transition-all duration-300 backdrop-blur-md hover:scale-110"
-                          aria-label="Next image"
-                        >
-                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
-                        </button>
-                      </div>
-                      <div className="absolute top-4 right-4 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-md border border-white/20 text-white text-xs font-semibold tabular-nums">
-                        {idx + 1} / {images.length}
-                      </div>
-                    </div>
-                  )
-                })()}
-              </div>
-            </div>
-          </section>
-
-          {/* ═══ COMMUNITY SPECIALS ═══ */}
-          <section>
-            <div className="mb-12">
-              <span className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase block mb-1">Exclusive Access</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white">
-                COMMUNITY <span className="outline-text">SPECIALS</span>
-              </h2>
-              <p className="text-gray-400 text-lg mt-2 max-w-xl">
-                Unique opportunities exclusively for START Munich members
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {/* Bay Area */}
-              <a
-                href="https://www.startbayarea.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group relative overflow-hidden bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 hover:border-brand-pink/40 transition-all duration-500 block"
-              >
-                <div className="aspect-video relative overflow-hidden rounded-t-3xl">
-                  <img
-                    src="/memberJourney/SF-opt.png"
-                    alt="San Francisco Bay Area"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                </div>
-                <div className="p-8">
-                  <h3 className="text-2xl font-black text-white mb-3 group-hover:text-brand-pink transition-colors">
-                    START goes Bay Area
-                  </h3>
-                  <p className="text-gray-300 text-sm leading-relaxed mb-5">
-                    A selective international exchange program connecting outstanding entrepreneurial talent from Europe with the innovation ecosystem of the San Francisco Bay Area. The program brings together a curated group of 20 participants and enables direct interaction with founders, researchers, and investors at leading technology and innovation organizations.
-                  </p>
-                  <span className="inline-flex items-center gap-2 text-brand-pink font-bold text-sm group-hover:gap-3 transition-all">
-                    Learn more
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
-                    </svg>
-                  </span>
-                </div>
-              </a>
-
-              {/* Cambridge */}
-              <div className="group relative overflow-hidden bg-white/[0.06] backdrop-blur-sm rounded-3xl border border-white/10 hover:border-brand-pink/30 transition-all duration-500">
-                <div className="aspect-video relative overflow-hidden rounded-t-3xl">
-                  <img
-                    src="/memberJourney/cambridge-aerial-opt.png"
-                    alt="University Research"
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                </div>
-                <div className="p-8">
-                  <h3 className="text-2xl font-black text-white mb-3">
-                    Research Stay @ Cambridge
-                  </h3>
-                  <p className="text-gray-300 text-sm leading-relaxed mb-5">
-                    Spend a research stay with our partners at the University of Cambridge and Technical University of Munich. Gain access to world-class academic resources, mentorship from leading researchers, and the opportunity to contribute to cutting-edge entrepreneurship research.
-                  </p>
-                  <div className="flex items-center gap-3">
-                    <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 font-semibold bg-white/5 border border-white/10 px-3 py-1.5 rounded-full">
-                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                      </svg>
-                      Cambridge
-                    </span>
-                    <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 font-semibold bg-white/5 border border-white/10 px-3 py-1.5 rounded-full">
-                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                      </svg>
-                      TUM
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          {/* Member Stories */}
-          <TestimonialsSection
-            title={<>
-              <span className="outline-text">MEMBER </span> STORIES
-            </>}
-            description="Real stories from our members who built successful startups with START Munich"
-            items={memberStories.map(story => ({
-              id: story.id,
-              name: story.name,
-              role: story.role,
-              company: story.company,
-              image: story.image,
-              story: story.story,
-              logos: story.logos
-            }))}
-          />
-
-          {/* CTA */}
-          <CTA
-            title="Ready to Join?"
-            description="Start your entrepreneurial journey with START Munich today. Apply to become a member and experience our vibrant community."
-            buttons={[
-              { label: "Apply Now", href: "/apply" },
-              { label: "Learn More", href: "/about-us", variant: "secondary" }
-            ]}
-          />
-
-        </div>
-      </main>
-
-      <style jsx global>{`
-        .fade-swap {
-          animation: fadeSwap 0.8s ease-in-out;
-        }
-        @keyframes fadeSwap {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-
-        .timeline-card-animate {
-          animation: slideInFromLeft 0.6s ease-out forwards;
-          opacity: 0;
-          transform: translateX(-30px);
-        }
-        @keyframes slideInFromLeft {
-          to {
-            opacity: 1;
-            transform: translateX(0);
-          }
-        }
-
-        .overflow-x-auto {
-          scroll-behavior: smooth;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        .tabular-nums { font-variant-numeric: tabular-nums; }
-
-        @keyframes fadeInPanel {
-          from { opacity: 0; transform: translateY(8px); }
-          to   { opacity: 1; transform: translateY(0); }
-        }
-      `}</style>
-    </>
-  )
-}
\ No newline at end of file
+  return <MemberJourneyContent />
+}
diff --git a/app/member-network/MemberNetworkContent.tsx b/app/member-network/MemberNetworkContent.tsx
new file mode 100644
index 0000000..d2e02dd
--- /dev/null
+++ b/app/member-network/MemberNetworkContent.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Script from "next/script"
+import Hero from "@/components/Hero"
+
+export const dynamic = 'force-dynamic'
+
+interface Company {
+  id: string
+  name: string
+  type: string
+  logoUrl: string
+}
+
+async function fetchCompanies(): Promise<Company[]> {
+  try {
+    const baseUrl = typeof window !== 'undefined'
+      ? window.location.origin
+      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
+
+    const response = await fetch(`${baseUrl}/api/member-network`, { cache: 'no-store' })
+    if (!response.ok) throw new Error('Failed to fetch')
+    return await response.json()
+  } catch (error) {
+    console.error('Error fetching member network:', error)
+    return []
+  }
+}
+
+function LogoCard({ company }: { company: Company }) {
+  const [imgFailed, setImgFailed] = useState(false)
+  const initials = company.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
+
+  return (
+    <div className="bg-white rounded-xl p-5 border border-white/10 hover:border-[#d0006f]/50 transition-all duration-300 hover:shadow-lg hover:shadow-[#d0006f]/10 flex items-center justify-center min-h-[100px]">
+      {company.logoUrl && !imgFailed ? (
+        <img
+          src={company.logoUrl}
+          alt={company.name}
+          className="max-w-full max-h-14 object-contain"
+          onError={() => setImgFailed(true)}
+        />
+      ) : (
+        <h3 className="text-gray-700 font-bold text-center text-lg">{company.name}</h3>
+      )}
+    </div>
+  )
+}
+
+export default function MemberNetworkPage() {
+  const [loading, setLoading] = useState(true)
+  const [companies, setCompanies] = useState<Company[]>([])
+
+  useEffect(() => {
+    fetchCompanies().then((data) => {
+      setCompanies(data)
+      setLoading(false)
+    })
+  }, [])
+
+  // Group by Type
+  const categories = Array.from(new Set(companies.map(c => c.type)))
+    .sort((a, b) => companies.filter(c => c.type === b).length - companies.filter(c => c.type === a).length)
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-2xl font-bold text-white">Loading member network...</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(
+              document.documentElement.scrollHeight,
+              document.body.scrollHeight
+            );
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-[#00002c]">
+        <Hero
+          backgroundImage="/memberNetwork/hero-opt.png"
+          title={
+            <>
+              MEMBER
+              <br />
+              <span className="outline-text">NETWORK</span>
+            </>
+          }
+          description="Discover where our talented members are making their mark across the industry"
+        />
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-20">
+
+          <div className="mb-16 w-full relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20 p-8 md:p-10">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
+            <div className="relative">
+              <h2 className="text-xl md:text-2xl font-bold text-white mb-3">
+                Where Our Members Work
+              </h2>
+              <p className="text-gray-400">
+                Our community spans some of the world's leading companies, research institutions, and startups. From global tech giants to early-stage ventures, START Munich members are building careers that make an impact.
+              </p>
+            </div>
+          </div>
+
+          {categories.map((category) => (
+            <div key={category} className="mb-16">
+              <h2 className="text-xl md:text-2xl font-black text-white mb-6">
+                {category}
+              </h2>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                {companies
+                  .filter(c => c.type === category)
+                  .map((company) => (
+                    <LogoCard key={company.id} company={company} />
+                  ))}
+              </div>
+            </div>
+          ))}
+
+        </div>
+      </main>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/app/member-network/page.tsx b/app/member-network/page.tsx
index d2e02dd..2fe45df 100644
--- a/app/member-network/page.tsx
+++ b/app/member-network/page.tsx
@@ -1,142 +1,21 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import Script from "next/script"
-import Hero from "@/components/Hero"
+import type { Metadata } from 'next'
+import MemberNetworkContent from './MemberNetworkContent'
 
 export const dynamic = 'force-dynamic'
 
-interface Company {
-  id: string
-  name: string
-  type: string
-  logoUrl: string
-}
-
-async function fetchCompanies(): Promise<Company[]> {
-  try {
-    const baseUrl = typeof window !== 'undefined'
-      ? window.location.origin
-      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
-
-    const response = await fetch(`${baseUrl}/api/member-network`, { cache: 'no-store' })
-    if (!response.ok) throw new Error('Failed to fetch')
-    return await response.json()
-  } catch (error) {
-    console.error('Error fetching member network:', error)
-    return []
-  }
-}
-
-function LogoCard({ company }: { company: Company }) {
-  const [imgFailed, setImgFailed] = useState(false)
-  const initials = company.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-
-  return (
-    <div className="bg-white rounded-xl p-5 border border-white/10 hover:border-[#d0006f]/50 transition-all duration-300 hover:shadow-lg hover:shadow-[#d0006f]/10 flex items-center justify-center min-h-[100px]">
-      {company.logoUrl && !imgFailed ? (
-        <img
-          src={company.logoUrl}
-          alt={company.name}
-          className="max-w-full max-h-14 object-contain"
-          onError={() => setImgFailed(true)}
-        />
-      ) : (
-        <h3 className="text-gray-700 font-bold text-center text-lg">{company.name}</h3>
-      )}
-    </div>
-  )
+export const metadata: Metadata = {
+  title: 'Member Network',
+  description:
+    'Explore the START Munich member network — connect with fellow students, alumni, and founders from TUM, LMU, and HM who are shaping the future.',
+  alternates: { canonical: 'https://www.startmunich.de/member-network' },
+  openGraph: {
+    url: 'https://www.startmunich.de/member-network',
+    title: 'Member Network | START Munich',
+    description:
+      'Explore the START Munich member network — connect with fellow students, alumni, and founders from TUM, LMU, and HM who are shaping the future.',
+  },
 }
 
 export default function MemberNetworkPage() {
-  const [loading, setLoading] = useState(true)
-  const [companies, setCompanies] = useState<Company[]>([])
-
-  useEffect(() => {
-    fetchCompanies().then((data) => {
-      setCompanies(data)
-      setLoading(false)
-    })
-  }, [])
-
-  // Group by Type
-  const categories = Array.from(new Set(companies.map(c => c.type)))
-    .sort((a, b) => companies.filter(c => c.type === b).length - companies.filter(c => c.type === a).length)
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <p className="text-2xl font-bold text-white">Loading member network...</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(
-              document.documentElement.scrollHeight,
-              document.body.scrollHeight
-            );
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-[#00002c]">
-        <Hero
-          backgroundImage="/memberNetwork/hero-opt.png"
-          title={
-            <>
-              MEMBER
-              <br />
-              <span className="outline-text">NETWORK</span>
-            </>
-          }
-          description="Discover where our talented members are making their mark across the industry"
-        />
-
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-20">
-
-          <div className="mb-16 w-full relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20 p-8 md:p-10">
-            <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
-            <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
-            <div className="relative">
-              <h2 className="text-xl md:text-2xl font-bold text-white mb-3">
-                Where Our Members Work
-              </h2>
-              <p className="text-gray-400">
-                Our community spans some of the world's leading companies, research institutions, and startups. From global tech giants to early-stage ventures, START Munich members are building careers that make an impact.
-              </p>
-            </div>
-          </div>
-
-          {categories.map((category) => (
-            <div key={category} className="mb-16">
-              <h2 className="text-xl md:text-2xl font-black text-white mb-6">
-                {category}
-              </h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                {companies
-                  .filter(c => c.type === category)
-                  .map((company) => (
-                    <LogoCard key={company.id} company={company} />
-                  ))}
-              </div>
-            </div>
-          ))}
-
-        </div>
-      </main>
-    </>
-  )
-}
\ No newline at end of file
+  return <MemberNetworkContent />
+}
diff --git a/app/members/MembersContent.tsx b/app/members/MembersContent.tsx
new file mode 100644
index 0000000..e3d40f3
--- /dev/null
+++ b/app/members/MembersContent.tsx
@@ -0,0 +1,743 @@
+"use client"
+
+import { useState, useEffect, useRef, useCallback } from "react"
+import Image from "next/image"
+import Script from "next/script"
+import Hero from "@/components/Hero"
+import HeroCard from "@/components/HeroCard"
+import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
+import { useInView } from "@/lib/hooks"
+
+export const dynamic = 'force-dynamic'
+
+interface Member {
+  id: number
+  name: string
+  batch: string
+  role: string
+  study?: string
+  university?: string
+  company?: string
+  linkedinUrl?: string
+  imageUrl: string
+  profileImage?: string
+  bio?: string
+  expertise?: string[]
+  achievements?: string
+  gender?: string
+}
+
+interface BoardMember {
+  name: string
+  role: string
+  imageUrl: string
+  profileImage?: string
+  linkedinUrl?: string
+  _hasMatch?: boolean
+}
+
+interface Board {
+  id: string
+  name: string
+  year: string
+  imageUrl: string
+  executiveBoard: BoardMember[]
+  departmentBoard: BoardMember[]
+}
+
+async function fetchMembers(): Promise<Member[]> {
+  try {
+    const response = await fetch('/api/members')
+    if (!response.ok) throw new Error('Failed to fetch members')
+    return await response.json()
+  } catch (error) {
+    console.error('Error fetching members:', error)
+    return []
+  }
+}
+
+export default function MembersPage() {
+  const [members, setMembers] = useState<Member[]>([])
+  const [expandedBatch, setExpandedBatch] = useState<string | null>(null)
+  const [expandedBoard, setExpandedBoard] = useState<string | null>(null)
+  const [batchMembers, setBatchMembers] = useState<Member[]>([])
+  const [loadingBatch, setLoadingBatch] = useState(false)
+  const [boardLoading, setBoardLoading] = useState(false)
+  const batchContentRef = useRef<HTMLDivElement>(null)
+  const [boards, setBoards] = useState<Board[]>([
+    {
+      id: '25-26', name: 'Board 25-26', year: '2025-2026', imageUrl: '/ourMembers/boads/boad26.jpeg',
+      executiveBoard: [
+        { name: 'BOARD MEMBER', role: 'CFO', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'President', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'Vice President', imageUrl: '/ourMembers/hero-opt.png' },
+      ],
+      departmentBoard: [
+        { name: 'BOARD MEMBER', role: 'MD Events', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'MD Marketing', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'MD People', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'MD Finance & Operations', imageUrl: '/ourMembers/hero-opt.png' },
+        { name: 'BOARD MEMBER', role: 'MD Partnerships', imageUrl: '/ourMembers/hero-opt.png' },
+      ],
+    },
+    {
+      id: '24-25', name: 'Board 24-25', year: '2024-2025', imageUrl: '',
+      executiveBoard: [
+        { name: 'SIMON BURMER', role: 'CFO', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/simon-burmer/' },
+        { name: 'ALI SERAG EL DIN', role: 'President', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/ali-serag-el-din/' },
+        { name: 'DEFNE AYTUNA', role: 'Vice President', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/defne-aytuna/' },
+      ],
+      departmentBoard: [
+        { name: 'MOHAMMED THABIT', role: 'MD Events', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/mohammed-thabit/' },
+        { name: 'PIOTR NOBIS', role: 'MD Marketing', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/piotr-nobis/' },
+        { name: 'ANNA HELETYCH', role: 'MD People', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/anna-heletych/' },
+        { name: 'NIKLAS SIMAKOV', role: 'MD Finance & Operations', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/niklas-simakov/' },
+        { name: 'MARIUS HEUMADER', role: 'MD Partnerships', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/marius-heumader/' },
+      ],
+    },
+  ])
+
+  const analyticsView = useInView(0.1)
+  const boardsView = useInView(0.1)
+  const batchesView = useInView(0.1)
+
+  const animatedActiveMembers = useAnimatedNumber(70, false, 1000)
+  const animatedAlumniCount = useAnimatedNumber(600, false, 1000)
+
+  const getInitials = (name: string) => {
+    const words = name.trim().split(/\s+/)
+    if (words.length === 0) return ''
+    if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase()
+  }
+
+  const isPlaceholderImage = (url?: string) => {
+    if (!url) return true
+    const normalized = url.toLowerCase().trim()
+    return normalized === '/batch-opt.jpeg' || normalized.endsWith('/batch-opt.jpeg') ||
+      normalized === '/batch-opt.jpg' || normalized.endsWith('/batch-opt.jpg') ||
+      normalized === '/batch-opt.png' || normalized.endsWith('/batch-opt.png') ||
+      normalized === '/example-opt.png' || normalized.endsWith('/example-opt.png') ||
+      normalized === '/example.png' || normalized.endsWith('/example.png') ||
+      normalized === '/ourmembers/hero-opt.png' || normalized.endsWith('/ourmembers/hero-opt.png')
+  }
+
+  useEffect(() => {
+    const loadMembers = async () => {
+      const data = await fetchMembers()
+      setMembers(data)
+    }
+    loadMembers()
+  }, [])
+
+  useEffect(() => {
+    if (expandedBatch) {
+      const loadBatchMembers = async () => {
+        setLoadingBatch(true)
+        try {
+          const response = await fetch(`/api/members/batch/${encodeURIComponent(expandedBatch)}`)
+          if (response.ok) {
+            const data = await response.json()
+            if (Array.isArray(data) && data.length > 0) {
+              const transformedData = data.map((member: Member) => ({
+                ...member,
+                profileImage: isPlaceholderImage(member.imageUrl) ? undefined : member.imageUrl
+              }))
+              setBatchMembers(transformedData)
+            } else {
+              setBatchMembers(members.filter(m => m.batch === expandedBatch))
+            }
+          } else {
+            setBatchMembers(members.filter(m => m.batch === expandedBatch))
+          }
+        } catch (error) {
+          console.error('Error fetching batch members:', error)
+          setBatchMembers(members.filter(m => m.batch === expandedBatch))
+        }
+        setLoadingBatch(false)
+      }
+      loadBatchMembers()
+    } else {
+      setBatchMembers([])
+    }
+  }, [expandedBatch, members])
+
+  const normalize = (text: string) =>
+    text.toLowerCase().replace(/[\.\-&\/]/g, ' ').replace(/[^a-z0-9\s]/g, '').replace(/\s+/g, ' ').trim()
+
+  const roleSynonyms: Record<string, string[]> = {
+    cfo: ['chief financial officer', 'chief financial officer (cfo)'],
+    'vice president': ['vice-president', 'vice president', 'vp'],
+    'md finance operations': ['md finance & operations', 'md finance and operations'],
+    'md partnerships': ['md partnerships', 'md partnership'],
+    'md marketing': ['md marketing'],
+    'md people': ['md people'],
+    'md events': ['md events'],
+    president: ['president'],
+  }
+
+  const roleFallbackImages: Record<string, string> = {
+    cfo: '/ourMembers/hero-opt.png', president: '/ourMembers/hero-opt.png', 'vice president': '/ourMembers/hero-opt.png',
+    'md events': '/ourMembers/hero-opt.png', 'md marketing': '/ourMembers/hero-opt.png', 'md people': '/ourMembers/hero-opt.png',
+    'md finance operations': '/ourMembers/hero-opt.png', 'md finance & operations': '/ourMembers/hero-opt.png', 'md partnerships': '/ourMembers/hero-opt.png',
+  }
+
+  const getFallbackImageByRole = (role: string) =>
+    roleFallbackImages[normalize(role)] ||
+    Object.entries(roleFallbackImages).find(([key]) => normalize(role).includes(key))?.[1] ||
+    '/ourMembers/hero-opt.png'
+
+  const termStartYearFromBoard = (board: Board) => {
+    if (board.year && board.year.includes('-')) {
+      const [from] = board.year.split('-').map(v => v.trim())
+      if (/^\d{4}$/.test(from)) return from
+    }
+    const parts = board.id.split('-').map(p => Number(p.trim()))
+    if (parts.length === 2 && !Number.isNaN(parts[0])) {
+      const from = parts[0] < 100 ? 2000 + parts[0] : parts[0]
+      return `${from}`
+    }
+    return '2024'
+  }
+
+  const findByRole = (normalizedBoardMembers: any[]) => (role: string) => {
+    if (!role) return null
+    const normalizedRole = normalize(role)
+    let match = normalizedBoardMembers.find(m => normalize(m.role || '') === normalizedRole)
+    if (match) return match
+    const normalizedRoleKey = Object.keys(roleSynonyms).find(key =>
+      key === normalizedRole || roleSynonyms[key].includes(normalizedRole)
+    )
+    if (normalizedRoleKey) {
+      const aliases = [normalizedRoleKey, ...(roleSynonyms[normalizedRoleKey] || [])].map(normalize)
+      match = normalizedBoardMembers.find(m => {
+        const candidate = normalize(m.role || '')
+        return aliases.some(alias => candidate.includes(alias) || alias.includes(candidate))
+      })
+      if (match) return match
+    }
+    return normalizedBoardMembers.find(m => {
+      const candidateRole = normalize(m.role || '')
+      return candidateRole.includes(normalizedRole) || normalizedRole.includes(candidateRole)
+    }) || null
+  }
+
+  const loadBoardMembers = async (boardId: string) => {
+    setBoardLoading(true)
+    try {
+      const board = boards.find(b => b.id === boardId)
+      if (!board) return
+      const termStartYear = termStartYearFromBoard(board)
+      const response = await fetch(`/api/board?termStartYears=${encodeURIComponent(termStartYear)}`)
+      if (!response.ok) return
+      const data = await response.json()
+      if (!data) return
+      const candidateData = Array.isArray(data) ? data : data?.data && Array.isArray(data.data) ? data.data : []
+      const rawMembers: any[] = []
+      candidateData.forEach((item: any) => {
+        if (item && Array.isArray(item.members)) rawMembers.push(...item.members)
+        else if (item && Array.isArray(item.boardMembers)) rawMembers.push(...item.boardMembers)
+        else if (item && Array.isArray(item.memberList)) rawMembers.push(...item.memberList)
+        else if (item && item.name && item.role) rawMembers.push(item)
+      })
+      if (rawMembers.length === 0) return
+      const normalizedBoardMembers = rawMembers.flatMap((member: any) => {
+        const normalizedName = member.name || member.fullName || member.displayName || 'Board Member'
+        const normalizedRole = member.role || member.position || member.title || ''
+        const profileImage = member.profileImage || ''
+        const splitRoles = normalizedRole.split(',').map((r: string) => r.trim()).filter((r: string) => r.length > 0)
+        if (splitRoles.length <= 1) return [{ ...member, name: normalizedName, role: normalizedRole, profileImage }]
+        return splitRoles.map((rolePart: string) => ({ ...member, name: normalizedName, role: rolePart, profileImage }))
+      })
+      const matchByRole = findByRole(normalizedBoardMembers)
+      setBoards(prev => prev.map(boardItem => {
+        if (boardItem.id !== boardId) return boardItem
+        return {
+          ...boardItem,
+          executiveBoard: boardItem.executiveBoard.map(member => {
+            const match = matchByRole(member.role)
+            const fallback = getFallbackImageByRole(member.role)
+            const hasMatch = !!match
+            return { ...member, name: match?.name || (hasMatch ? member.name : 'N/A'), profileImage: match?.profileImage || member.profileImage || '', imageUrl: match?.profileImage || member.profileImage || member.imageUrl || fallback, linkedinUrl: match?.linkedinUrl || member.linkedinUrl, _hasMatch: hasMatch }
+          }),
+          departmentBoard: boardItem.departmentBoard.map(member => {
+            const match = matchByRole(member.role)
+            const fallback = getFallbackImageByRole(member.role)
+            const hasMatch = !!match
+            return { ...member, name: match?.name || (hasMatch ? member.name : 'N/A'), profileImage: match?.profileImage || member.profileImage || '', imageUrl: match?.profileImage || member.profileImage || member.imageUrl || fallback, linkedinUrl: match?.linkedinUrl || member.linkedinUrl, _hasMatch: hasMatch }
+          }),
+        }
+      }))
+    } catch (error) {
+      console.error('Error fetching board data:', error)
+    } finally {
+      setBoardLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (expandedBoard) loadBoardMembers(expandedBoard)
+  }, [expandedBoard])
+
+  useEffect(() => {
+    void (async () => {
+      for (const board of boards) await loadBoardMembers(board.id)
+    })()
+  }, [])
+
+  const handleOutsideClick = useCallback((e: MouseEvent) => {
+    if (expandedBatch && batchContentRef.current && !batchContentRef.current.contains(e.target as Node)) {
+      setExpandedBatch(null)
+    }
+  }, [expandedBatch])
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleOutsideClick)
+    return () => document.removeEventListener('mousedown', handleOutsideClick)
+  }, [handleOutsideClick])
+
+  const defaultBatches = [
+    'Winter 2025', 'Summer 2025',
+    'Winter 2024', 'Summer 2024',
+    'Winter 2023', 'Summer 2023',
+    'Winter 2022', 'Summer 2022',
+    'Winter 2021',
+  ]
+  const allBatches = Array.from(new Set([...members.map(m => m.batch), ...defaultBatches]))
+    .filter(Boolean).sort().reverse()
+
+  const malePercentage = 59
+  const femalePercentage = 41
+
+  const topStudies = [
+    { study: 'Computer Science', percentage: 40 },
+    { study: 'Business Administration', percentage: 30 },
+    { study: 'Engineering', percentage: 16 },
+    { study: 'Others', percentage: 14 },
+  ]
+
+  const topUniversities = [
+    { university: 'TUM', percentage: 65 },
+    { university: 'LMU', percentage: 20 },
+    { university: 'HM', percentage: 7 },
+    { university: 'Others', percentage: 8 },
+  ]
+
+  const batchImageMap: Record<string, string> = {
+    ws21: 'WS21-opt.jpg', ws22: 'WS22-opt.jpg', ws23: 'WS23-opt.jpg', ws24: 'WS24-opt.jpg', ws25: 'WS25-opt.jpg',
+    ss22: 'SS22-opt.jpg', ss23: 'SS23-opt.jpg', ss24: 'SS24-opt.jpg', ss25: 'SS25-opt.jpg',
+  }
+
+  function getBatchImageKey(batchName: string): string | null {
+    const normalized = batchName.toLowerCase().trim()
+    const fullMatch = normalized.match(/^(winter|summer)\s+(\d{4})$/)
+    if (fullMatch) return `${fullMatch[1] === 'winter' ? 'ws' : 'ss'}${fullMatch[2].slice(-2)}`
+    const fourDigitMatch = normalized.match(/^(ws|ss)\s*(\d{4})$/)
+    if (fourDigitMatch) return `${fourDigitMatch[1]}${fourDigitMatch[2].slice(-2)}`
+    const shortMatch = normalized.match(/^(ws|ss)\s*(\d{2})$/)
+    if (shortMatch) return `${shortMatch[1]}${shortMatch[2]}`
+    return null
+  }
+
+  function isAfterWS21(batchName: string): boolean {
+    const normalized = batchName.toLowerCase().trim()
+    let year: number | null = null
+    let isWinter = false
+    const fullMatch = normalized.match(/^(winter|summer)\s+(\d{4})$/)
+    if (fullMatch) { year = parseInt(fullMatch[2].slice(-2)); isWinter = fullMatch[1] === 'winter' }
+    const shortMatch = normalized.match(/^(ws|ss)\s*(\d{2})$/)
+    if (shortMatch) { year = parseInt(shortMatch[2]); isWinter = shortMatch[1] === 'ws' }
+    if (year === null) return false
+    if (year > 21) return true
+    if (year === 21 && isWinter) return true
+    return false
+  }
+
+  const sortedBatches = allBatches.map(batchName => {
+    const batchKey = getBatchImageKey(batchName)
+    const shouldShowImage = isAfterWS21(batchName)
+    let groupImageUrl = '/ourMembers/hero-opt.png'
+    if (shouldShowImage && batchKey && batchImageMap[batchKey]) {
+      groupImageUrl = `/ourMembers/batches_group_pictures/${batchImageMap[batchKey]}`
+    }
+    return {
+      name: batchName,
+      semester: batchName.split(' ')[0] || 'Batch',
+      year: batchName.split(' ')[1] || '',
+      groupImageUrl,
+      memberCount: members.filter(m => m.batch === batchName).length,
+    }
+  }).sort((a, b) => {
+    const yearDiff = parseInt(b.year) - parseInt(a.year)
+    if (yearDiff !== 0) return yearDiff
+    if (a.semester.toLowerCase().includes('winter') || a.semester.toLowerCase().startsWith('w')) return -1
+    if (b.semester.toLowerCase().includes('winter') || b.semester.toLowerCase().startsWith('w')) return 1
+    return 0
+  })
+
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-brand-dark-blue text-white overflow-x-hidden">
+
+        {/* ═══ HERO ═══ */}
+        <Hero
+          backgroundImage="/ourMembers/hero-opt.png"
+          title={
+            <>
+              START MUNICH
+              <br />
+              <span className="outline-text">MEMBERS</span>
+            </>
+          }
+          description="Meet the ambitious student entrepreneurs building the future of technology and innovation."
+        >
+          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">
+                  {Math.floor(animatedActiveMembers)}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Active Members</p>
+            </HeroCard>
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">
+                  {Math.floor(animatedAlumniCount)}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Alumni</p>
+            </HeroCard>
+          </div>
+        </Hero>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+          {/* ═══ COMMUNITY ANALYTICS ═══ */}
+          <section ref={analyticsView.ref} className="py-12">
+            <div className={`mb-8 transition-all duration-700 ${analyticsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">By the Numbers</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">COMMUNITY ANALYTICS</h2>
+            </div>
+
+            <div className={`grid grid-cols-1 md:grid-cols-3 gap-6 transition-all duration-700 delay-150 ${analyticsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              {/* Gender */}
+              <div className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
+                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Gender Distribution</span>
+                </div>
+                <div className="space-y-4">
+                  <div>
+                    <div className="flex justify-between items-center mb-2">
+                      <span className="text-gray-400 text-sm">Male</span>
+                      <span className="text-white font-bold text-sm">{malePercentage}%</span>
+                    </div>
+                    <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
+                      <div className="h-full bg-gradient-to-r from-blue-500 to-blue-400 rounded-full transition-all duration-1000" style={{ width: `${malePercentage}%` }} />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="flex justify-between items-center mb-2">
+                      <span className="text-gray-400 text-sm">Female</span>
+                      <span className="text-white font-bold text-sm">{femalePercentage}%</span>
+                    </div>
+                    <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
+                      <div className="h-full bg-gradient-to-r from-brand-pink to-pink-400 rounded-full transition-all duration-1000" style={{ width: `${femalePercentage}%` }} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Study Fields */}
+              <div className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
+                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                    </svg>
+                  </div>
+                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Top Study Fields</span>
+                </div>
+                <div className="space-y-3">
+                  {topStudies.map(({ study, percentage }) => (
+                    <div key={study} className="flex items-center justify-between gap-4">
+                      <span className="text-gray-300 text-sm truncate">{study}</span>
+                      <span className="text-brand-pink text-sm font-bold flex-shrink-0">{percentage}%</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Universities */}
+              <div className="bg-white/5 border border-white/10 rounded-3xl p-8">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
+                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                  </div>
+                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Top Universities</span>
+                </div>
+                <div className="space-y-3">
+                  {topUniversities.map(({ university, percentage }) => (
+                    <div key={university} className="flex items-center justify-between gap-4">
+                      <span className="text-gray-300 text-sm truncate">{university}</span>
+                      <span className="text-brand-pink text-sm font-bold flex-shrink-0">{percentage}%</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Divider */}
+          <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+
+          {/* ═══ THE BOARDS ═══ */}
+          <section ref={boardsView.ref} className="py-12">
+            <div className={`mb-8 transition-all duration-700 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">Leadership</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">THE BOARDS</h2>
+            </div>
+
+            {expandedBoard ? (
+              <div className={`transition-all duration-700 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+                <button
+                  onClick={() => setExpandedBoard(null)}
+                  className="mb-8 group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+                >
+                  <svg className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                  </svg>
+                  <span className="text-sm font-medium">Back to all boards</span>
+                </button>
+
+                {boards.filter(b => b.id === expandedBoard).map(board => (
+                  <div key={board.id} className="space-y-10">
+                    {/* Executive Board */}
+                    <div>
+                      <div className="flex items-center gap-3 mb-6">
+                        <div className="w-6 h-px bg-brand-pink" />
+                        <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Executive Board</span>
+                      </div>
+                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+                        {board.executiveBoard.map((member, i) => (
+                          <a key={i} href={member.linkedinUrl || '#'} target={member.linkedinUrl ? '_blank' : undefined} rel={member.linkedinUrl ? 'noopener noreferrer' : undefined} className={`relative${member.linkedinUrl ? ' cursor-pointer' : ' cursor-default'}`}>
+                            <div className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-white/5 border border-white/10">
+                              {member.profileImage ? (
+                                <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 15vw" className="object-cover object-top" referrerPolicy="no-referrer" />
+                              ) : (
+                                <div className="w-full h-full flex items-center justify-center text-white/20 text-3xl font-black">
+                                  {member.name === 'N/A' ? 'N/A' : getInitials(member.name)}
+                                </div>
+                              )}
+                              <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/20 to-transparent" />
+                              <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
+                                <p className="font-black uppercase text-white text-xs leading-tight tracking-wide">{member.name}</p>
+                                <p className="text-brand-pink text-[10px] font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
+                              </div>
+                            </div>
+                          </a>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Department Board */}
+                    <div>
+                      <div className="flex items-center gap-3 mb-6">
+                        <div className="w-6 h-px bg-brand-pink" />
+                        <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Department Board</span>
+                      </div>
+                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+                        {board.departmentBoard.map((member, i) => (
+                          <a key={i} href={member.linkedinUrl || '#'} target={member.linkedinUrl ? '_blank' : undefined} rel={member.linkedinUrl ? 'noopener noreferrer' : undefined} className={`relative${member.linkedinUrl ? ' cursor-pointer' : ' cursor-default'}`}>
+                            <div className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-white/5 border border-white/10">
+                              {member.profileImage ? (
+                                <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 15vw" className="object-cover object-top" referrerPolicy="no-referrer" />
+                              ) : (
+                                <div className="w-full h-full flex items-center justify-center text-white/20 text-3xl font-black">
+                                  {member.name === 'N/A' ? 'N/A' : getInitials(member.name)}
+                                </div>
+                              )}
+                              <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/20 to-transparent" />
+                              <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
+                                <p className="font-black uppercase text-white text-xs leading-tight tracking-wide">{member.name}</p>
+                                <p className="text-brand-pink text-[10px] font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
+                              </div>
+                            </div>
+                          </a>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 transition-all duration-700 delay-150 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+                {boards.map((board, i) => (
+                  <button
+                    key={board.id}
+                    onClick={() => setExpandedBoard(board.id)}
+                    className="group relative bg-white/5 border border-white/10 rounded-3xl overflow-hidden hover:border-brand-pink/30 hover:bg-white/[0.07] transition-all duration-300 text-left"
+                    style={{ transitionDelay: `${i * 100}ms` }}
+                  >
+                    <div className="relative overflow-hidden h-52">
+                      {board.imageUrl ? (
+                        <Image src={board.imageUrl} alt={board.name} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover group-hover:scale-105 transition-transform duration-500" />
+                      ) : (
+                        <div className="w-full h-full bg-gradient-to-br from-white/5 to-white/[0.02] flex items-center justify-center">
+                          <span className="text-white/10 text-6xl font-black tracking-tight">{board.year}</span>
+                        </div>
+                      )}
+                      <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/50 to-transparent" />
+                      <div className="absolute bottom-0 left-0 right-0 p-6">
+                        <h3 className="text-xl font-black text-white uppercase tracking-tight">{board.name}</h3>
+                        <p className="text-gray-400 text-xs mt-1 uppercase tracking-wider">{board.year}</p>
+                      </div>
+                    </div>
+                    <div className="px-6 py-4 flex items-center justify-between">
+                      <span className="text-gray-400 text-sm">{board.executiveBoard.length + board.departmentBoard.length} members</span>
+                      <span className="text-brand-pink text-sm font-medium group-hover:translate-x-1 transition-transform inline-block">View board →</span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </section>
+
+          {/* Divider */}
+          <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+
+          {/* ═══ OUR BATCHES ═══ */}
+          <section ref={batchesView.ref} className="py-12">
+            <div className={`mb-8 transition-all duration-700 ${batchesView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
+              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">Our Community</span>
+              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">OUR BATCHES</h2>
+            </div>
+
+            {expandedBatch ? (
+              <div ref={batchContentRef}>
+                <button
+                  onClick={() => setExpandedBatch(null)}
+                  className="mb-8 group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+                >
+                  <svg className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                  </svg>
+                  <span className="text-sm font-medium">Back to all batches</span>
+                </button>
+
+                {sortedBatches.filter(b => b.name === expandedBatch).map(batch => (
+                  <div key={batch.name} className="space-y-8">
+                    <h3 className="text-3xl sm:text-4xl font-black text-white">{batch.name}</h3>
+
+                    <div
+                      onClick={() => setExpandedBatch(null)}
+                      className="w-full relative rounded-3xl overflow-hidden border border-white/10 cursor-pointer hover:border-brand-pink/30 transition-all duration-300"
+                    >
+                      <div className="relative w-full h-[70vh] overflow-hidden bg-white/5">
+                        <Image src={batch.groupImageUrl} alt={batch.name} fill sizes="100vw" className="object-cover" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/40 via-transparent to-transparent" />
+                      </div>
+                    </div>
+
+                    <div className="mt-6">
+                      {loadingBatch ? (
+                        <div className="flex justify-center items-center py-16">
+                          <div className="w-10 h-10 border-2 border-brand-pink/30 border-t-brand-pink rounded-full animate-spin" />
+                        </div>
+                      ) : (
+                        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                          {[...batchMembers].sort((a, b) => {
+                            const aHasImage = a.profileImage ? 0 : 1
+                            const bHasImage = b.profileImage ? 0 : 1
+                            return aHasImage - bHasImage
+                          }).map(member => (
+                            <a
+                              key={member.id}
+                              href={member.linkedinUrl || '#'}
+                              target={member.linkedinUrl ? '_blank' : undefined}
+                              rel={member.linkedinUrl ? 'noopener noreferrer' : undefined}
+                              className={`group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-brand-pink/30 hover:bg-white/[0.07] transition-all duration-300 aspect-square ${member.linkedinUrl ? 'cursor-pointer' : 'cursor-default'}`}
+                            >
+                              <div className="relative w-full h-full">
+                                {member.profileImage ? (
+                                  <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 33vw, 10vw" className="object-cover" referrerPolicy="no-referrer" />
+                                ) : (
+                                  <div className="w-full h-full flex items-center justify-center bg-white/5">
+                                    <span className="text-white/50 text-2xl font-black tracking-wider">
+                                      {getInitials(member.name)}
+                                    </span>
+                                  </div>
+                                )}
+                                <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/60 via-transparent to-transparent" />
+                                <div className="absolute bottom-0 left-0 right-0 p-3 text-center">
+                                  <p className="font-black text-white text-sm leading-tight">{member.name}</p>
+                                  <p className="text-brand-pink text-xs mt-0.5">{member.study || member.role}</p>
+                                </div>
+                              </div>
+                            </a>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {sortedBatches.map((batch, i) => (
+                  <div
+                    key={batch.name}
+                    className={`transition-all duration-700 ${batchesView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}
+                    style={{ transitionDelay: `${150 + i * 80}ms` }}
+                  >
+                    <button
+                      onClick={() => setExpandedBatch(batch.name)}
+                      className="w-full group relative rounded-3xl overflow-hidden border border-white/10 hover:border-brand-pink/30 transition-all duration-300"
+                    >
+                      <div className="relative h-72 sm:h-80 overflow-hidden bg-white/5">
+                        <img
+                          src={batch.groupImageUrl}
+                          alt={batch.name}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/70 via-transparent to-transparent" />
+                        <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between">
+                          <h3 className="text-xl sm:text-2xl font-black text-white">{batch.name}</h3>
+                          <span className="text-white/50 text-xs font-bold uppercase tracking-widest">Explore →</span>
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+
+        </div>
+      </main>
+    </>
+  )
+}
diff --git a/app/members/page.tsx b/app/members/page.tsx
index b39f30e..97011f0 100644
--- a/app/members/page.tsx
+++ b/app/members/page.tsx
@@ -1,737 +1,21 @@
-"use client"
-
-import { useState, useEffect, useRef, useCallback } from "react"
-import Image from "next/image"
-import Script from "next/script"
-import Hero from "@/components/Hero"
-import HeroCard from "@/components/HeroCard"
-import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
-import { useInView } from "@/lib/hooks"
+import type { Metadata } from 'next'
+import MembersContent from './MembersContent'
 
 export const dynamic = 'force-dynamic'
 
-interface Member {
-  id: number
-  name: string
-  batch: string
-  role: string
-  study?: string
-  university?: string
-  company?: string
-  linkedinUrl?: string
-  imageUrl: string
-  profileImage?: string
-  bio?: string
-  expertise?: string[]
-  achievements?: string
-  gender?: string
-}
-
-interface BoardMember {
-  name: string
-  role: string
-  imageUrl: string
-  profileImage?: string
-  linkedinUrl?: string
-  _hasMatch?: boolean
-}
-
-interface Board {
-  id: string
-  name: string
-  year: string
-  imageUrl: string
-  executiveBoard: BoardMember[]
-  departmentBoard: BoardMember[]
-}
-
-async function fetchMembers(): Promise<Member[]> {
-  try {
-    const response = await fetch('/api/members')
-    if (!response.ok) throw new Error('Failed to fetch members')
-    return await response.json()
-  } catch (error) {
-    console.error('Error fetching members:', error)
-    return []
-  }
+export const metadata: Metadata = {
+  title: 'Members',
+  description:
+    'Meet START Munich members — 70+ active members and 600+ alumni from TUM, LMU, and HM building the companies of tomorrow.',
+  alternates: { canonical: 'https://www.startmunich.de/members' },
+  openGraph: {
+    url: 'https://www.startmunich.de/members',
+    title: 'Members | START Munich',
+    description:
+      'Meet START Munich members — 70+ active members and 600+ alumni from TUM, LMU, and HM building the companies of tomorrow.',
+  },
 }
 
 export default function MembersPage() {
-  const [members, setMembers] = useState<Member[]>([])
-  const [expandedBatch, setExpandedBatch] = useState<string | null>(null)
-  const [expandedBoard, setExpandedBoard] = useState<string | null>(null)
-  const [batchMembers, setBatchMembers] = useState<Member[]>([])
-  const [loadingBatch, setLoadingBatch] = useState(false)
-  const [boardLoading, setBoardLoading] = useState(false)
-  const batchContentRef = useRef<HTMLDivElement>(null)
-  const [boards, setBoards] = useState<Board[]>([
-    {
-      id: '25-26', name: 'Board 25-26', year: '2025-2026', imageUrl: '/ourMembers/boads/boad26.jpeg',
-      executiveBoard: [
-        { name: 'BOARD MEMBER', role: 'CFO', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'President', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'Vice President', imageUrl: '/ourMembers/hero-opt.png' },
-      ],
-      departmentBoard: [
-        { name: 'BOARD MEMBER', role: 'MD Events', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'MD Marketing', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'MD People', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'MD Finance & Operations', imageUrl: '/ourMembers/hero-opt.png' },
-        { name: 'BOARD MEMBER', role: 'MD Partnerships', imageUrl: '/ourMembers/hero-opt.png' },
-      ],
-    },
-    {
-      id: '24-25', name: 'Board 24-25', year: '2024-2025', imageUrl: '',
-      executiveBoard: [
-        { name: 'SIMON BURMER', role: 'CFO', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/simon-burmer/' },
-        { name: 'ALI SERAG EL DIN', role: 'President', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/ali-serag-el-din/' },
-        { name: 'DEFNE AYTUNA', role: 'Vice President', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/defne-aytuna/' },
-      ],
-      departmentBoard: [
-        { name: 'MOHAMMED THABIT', role: 'MD Events', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/mohammed-thabit/' },
-        { name: 'PIOTR NOBIS', role: 'MD Marketing', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/piotr-nobis/' },
-        { name: 'ANNA HELETYCH', role: 'MD People', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/anna-heletych/' },
-        { name: 'NIKLAS SIMAKOV', role: 'MD Finance & Operations', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/niklas-simakov/' },
-        { name: 'MARIUS HEUMADER', role: 'MD Partnerships', imageUrl: '/ourMembers/hero-opt.png', linkedinUrl: 'https://www.linkedin.com/in/marius-heumader/' },
-      ],
-    },
-  ])
-
-  const analyticsView = useInView(0.1)
-  const boardsView = useInView(0.1)
-  const batchesView = useInView(0.1)
-
-  const animatedActiveMembers = useAnimatedNumber(70, false, 1000)
-  const animatedAlumniCount = useAnimatedNumber(600, false, 1000)
-
-  const getInitials = (name: string) => {
-    const words = name.trim().split(/\s+/)
-    if (words.length === 0) return ''
-    if (words.length === 1) return words[0].slice(0, 2).toUpperCase()
-    return (words[0][0] + words[words.length - 1][0]).toUpperCase()
-  }
-
-  const isPlaceholderImage = (url?: string) => {
-    if (!url) return true
-    const normalized = url.toLowerCase().trim()
-    return normalized === '/batch-opt.jpeg' || normalized.endsWith('/batch-opt.jpeg') ||
-      normalized === '/batch-opt.jpg' || normalized.endsWith('/batch-opt.jpg') ||
-      normalized === '/batch-opt.png' || normalized.endsWith('/batch-opt.png') ||
-      normalized === '/example-opt.png' || normalized.endsWith('/example-opt.png') ||
-      normalized === '/example.png' || normalized.endsWith('/example.png') ||
-      normalized === '/ourmembers/hero-opt.png' || normalized.endsWith('/ourmembers/hero-opt.png')
-  }
-
-  useEffect(() => {
-    const loadMembers = async () => {
-      const data = await fetchMembers()
-      setMembers(data)
-    }
-    loadMembers()
-  }, [])
-
-  useEffect(() => {
-    if (expandedBatch) {
-      const loadBatchMembers = async () => {
-        setLoadingBatch(true)
-        try {
-          const response = await fetch(`/api/members/batch/${encodeURIComponent(expandedBatch)}`)
-          if (response.ok) {
-            const data = await response.json()
-            if (Array.isArray(data) && data.length > 0) {
-              const transformedData = data.map((member: Member) => ({
-                ...member,
-                profileImage: isPlaceholderImage(member.imageUrl) ? undefined : member.imageUrl
-              }))
-              setBatchMembers(transformedData)
-            } else {
-              setBatchMembers(members.filter(m => m.batch === expandedBatch))
-            }
-          } else {
-            setBatchMembers(members.filter(m => m.batch === expandedBatch))
-          }
-        } catch (error) {
-          console.error('Error fetching batch members:', error)
-          setBatchMembers(members.filter(m => m.batch === expandedBatch))
-        }
-        setLoadingBatch(false)
-      }
-      loadBatchMembers()
-    } else {
-      setBatchMembers([])
-    }
-  }, [expandedBatch, members])
-
-  const normalize = (text: string) =>
-    text.toLowerCase().replace(/[\.\-&\/]/g, ' ').replace(/[^a-z0-9\s]/g, '').replace(/\s+/g, ' ').trim()
-
-  const roleSynonyms: Record<string, string[]> = {
-    cfo: ['chief financial officer', 'chief financial officer (cfo)'],
-    'vice president': ['vice-president', 'vice president', 'vp'],
-    'md finance operations': ['md finance & operations', 'md finance and operations'],
-    'md partnerships': ['md partnerships', 'md partnership'],
-    'md marketing': ['md marketing'],
-    'md people': ['md people'],
-    'md events': ['md events'],
-    president: ['president'],
-  }
-
-  const roleFallbackImages: Record<string, string> = {
-    cfo: '/ourMembers/hero-opt.png', president: '/ourMembers/hero-opt.png', 'vice president': '/ourMembers/hero-opt.png',
-    'md events': '/ourMembers/hero-opt.png', 'md marketing': '/ourMembers/hero-opt.png', 'md people': '/ourMembers/hero-opt.png',
-    'md finance operations': '/ourMembers/hero-opt.png', 'md finance & operations': '/ourMembers/hero-opt.png', 'md partnerships': '/ourMembers/hero-opt.png',
-  }
-
-  const getFallbackImageByRole = (role: string) =>
-    roleFallbackImages[normalize(role)] ||
-    Object.entries(roleFallbackImages).find(([key]) => normalize(role).includes(key))?.[1] ||
-    '/ourMembers/hero-opt.png'
-
-  const termStartYearFromBoard = (board: Board) => {
-    if (board.year && board.year.includes('-')) {
-      const [from] = board.year.split('-').map(v => v.trim())
-      if (/^\d{4}$/.test(from)) return from
-    }
-    const parts = board.id.split('-').map(p => Number(p.trim()))
-    if (parts.length === 2 && !Number.isNaN(parts[0])) {
-      const from = parts[0] < 100 ? 2000 + parts[0] : parts[0]
-      return `${from}`
-    }
-    return '2024'
-  }
-
-  const findByRole = (normalizedBoardMembers: any[]) => (role: string) => {
-    if (!role) return null
-    const normalizedRole = normalize(role)
-    let match = normalizedBoardMembers.find(m => normalize(m.role || '') === normalizedRole)
-    if (match) return match
-    const normalizedRoleKey = Object.keys(roleSynonyms).find(key =>
-      key === normalizedRole || roleSynonyms[key].includes(normalizedRole)
-    )
-    if (normalizedRoleKey) {
-      const aliases = [normalizedRoleKey, ...(roleSynonyms[normalizedRoleKey] || [])].map(normalize)
-      match = normalizedBoardMembers.find(m => {
-        const candidate = normalize(m.role || '')
-        return aliases.some(alias => candidate.includes(alias) || alias.includes(candidate))
-      })
-      if (match) return match
-    }
-    return normalizedBoardMembers.find(m => {
-      const candidateRole = normalize(m.role || '')
-      return candidateRole.includes(normalizedRole) || normalizedRole.includes(candidateRole)
-    }) || null
-  }
-
-  const loadBoardMembers = async (boardId: string) => {
-    setBoardLoading(true)
-    try {
-      const board = boards.find(b => b.id === boardId)
-      if (!board) return
-      const termStartYear = termStartYearFromBoard(board)
-      const response = await fetch(`/api/board?termStartYears=${encodeURIComponent(termStartYear)}`)
-      if (!response.ok) return
-      const data = await response.json()
-      if (!data) return
-      const candidateData = Array.isArray(data) ? data : data?.data && Array.isArray(data.data) ? data.data : []
-      const rawMembers: any[] = []
-      candidateData.forEach((item: any) => {
-        if (item && Array.isArray(item.members)) rawMembers.push(...item.members)
-        else if (item && Array.isArray(item.boardMembers)) rawMembers.push(...item.boardMembers)
-        else if (item && Array.isArray(item.memberList)) rawMembers.push(...item.memberList)
-        else if (item && item.name && item.role) rawMembers.push(item)
-      })
-      if (rawMembers.length === 0) return
-      const normalizedBoardMembers = rawMembers.flatMap((member: any) => {
-        const normalizedName = member.name || member.fullName || member.displayName || 'Board Member'
-        const normalizedRole = member.role || member.position || member.title || ''
-        const profileImage = member.profileImage || ''
-        const splitRoles = normalizedRole.split(',').map((r: string) => r.trim()).filter((r: string) => r.length > 0)
-        if (splitRoles.length <= 1) return [{ ...member, name: normalizedName, role: normalizedRole, profileImage }]
-        return splitRoles.map((rolePart: string) => ({ ...member, name: normalizedName, role: rolePart, profileImage }))
-      })
-      const matchByRole = findByRole(normalizedBoardMembers)
-      setBoards(prev => prev.map(boardItem => {
-        if (boardItem.id !== boardId) return boardItem
-        return {
-          ...boardItem,
-          executiveBoard: boardItem.executiveBoard.map(member => {
-            const match = matchByRole(member.role)
-            const fallback = getFallbackImageByRole(member.role)
-            const hasMatch = !!match
-            return { ...member, name: match?.name || (hasMatch ? member.name : 'N/A'), profileImage: match?.profileImage || member.profileImage || '', imageUrl: match?.profileImage || member.profileImage || member.imageUrl || fallback, linkedinUrl: match?.linkedinUrl || member.linkedinUrl, _hasMatch: hasMatch }
-          }),
-          departmentBoard: boardItem.departmentBoard.map(member => {
-            const match = matchByRole(member.role)
-            const fallback = getFallbackImageByRole(member.role)
-            const hasMatch = !!match
-            return { ...member, name: match?.name || (hasMatch ? member.name : 'N/A'), profileImage: match?.profileImage || member.profileImage || '', imageUrl: match?.profileImage || member.profileImage || member.imageUrl || fallback, linkedinUrl: match?.linkedinUrl || member.linkedinUrl, _hasMatch: hasMatch }
-          }),
-        }
-      }))
-    } catch (error) {
-      console.error('Error fetching board data:', error)
-    } finally {
-      setBoardLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    if (expandedBoard) loadBoardMembers(expandedBoard)
-  }, [expandedBoard])
-
-  useEffect(() => {
-    void (async () => {
-      for (const board of boards) await loadBoardMembers(board.id)
-    })()
-  }, [])
-
-  const handleOutsideClick = useCallback((e: MouseEvent) => {
-    if (expandedBatch && batchContentRef.current && !batchContentRef.current.contains(e.target as Node)) {
-      setExpandedBatch(null)
-    }
-  }, [expandedBatch])
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleOutsideClick)
-    return () => document.removeEventListener('mousedown', handleOutsideClick)
-  }, [handleOutsideClick])
-
-  const defaultBatches = ['Winter 2021', 'Winter 2022', 'Summer 2022']
-  const allBatches = Array.from(new Set([...members.map(m => m.batch), ...defaultBatches]))
-    .filter(Boolean).sort().reverse()
-
-  const malePercentage = 59
-  const femalePercentage = 41
-
-  const topStudies = [
-    { study: 'Computer Science', percentage: 40 },
-    { study: 'Business Administration', percentage: 30 },
-    { study: 'Engineering', percentage: 16 },
-    { study: 'Others', percentage: 14 },
-  ]
-
-  const topUniversities = [
-    { university: 'TUM', percentage: 65 },
-    { university: 'LMU', percentage: 20 },
-    { university: 'HM', percentage: 7 },
-    { university: 'Others', percentage: 8 },
-  ]
-
-  const batchImageMap: Record<string, string> = {
-    ws21: 'WS21-opt.jpg', ws22: 'WS22-opt.jpg', ws23: 'WS23-opt.jpg', ws24: 'WS24-opt.jpg', ws25: 'WS25-opt.jpg',
-    ss22: 'SS22-opt.jpg', ss23: 'SS23-opt.jpg', ss24: 'SS24-opt.jpg', ss25: 'SS25-opt.jpg',
-  }
-
-  function getBatchImageKey(batchName: string): string | null {
-    const normalized = batchName.toLowerCase().trim()
-    const fullMatch = normalized.match(/^(winter|summer)\s+(\d{4})$/)
-    if (fullMatch) return `${fullMatch[1] === 'winter' ? 'ws' : 'ss'}${fullMatch[2].slice(-2)}`
-    const fourDigitMatch = normalized.match(/^(ws|ss)\s*(\d{4})$/)
-    if (fourDigitMatch) return `${fourDigitMatch[1]}${fourDigitMatch[2].slice(-2)}`
-    const shortMatch = normalized.match(/^(ws|ss)\s*(\d{2})$/)
-    if (shortMatch) return `${shortMatch[1]}${shortMatch[2]}`
-    return null
-  }
-
-  function isAfterWS21(batchName: string): boolean {
-    const normalized = batchName.toLowerCase().trim()
-    let year: number | null = null
-    let isWinter = false
-    const fullMatch = normalized.match(/^(winter|summer)\s+(\d{4})$/)
-    if (fullMatch) { year = parseInt(fullMatch[2].slice(-2)); isWinter = fullMatch[1] === 'winter' }
-    const shortMatch = normalized.match(/^(ws|ss)\s*(\d{2})$/)
-    if (shortMatch) { year = parseInt(shortMatch[2]); isWinter = shortMatch[1] === 'ws' }
-    if (year === null) return false
-    if (year > 21) return true
-    if (year === 21 && isWinter) return true
-    return false
-  }
-
-  const sortedBatches = allBatches.map(batchName => {
-    const batchKey = getBatchImageKey(batchName)
-    const shouldShowImage = isAfterWS21(batchName)
-    let groupImageUrl = '/ourMembers/hero-opt.png'
-    if (shouldShowImage && batchKey && batchImageMap[batchKey]) {
-      groupImageUrl = `/ourMembers/batches_group_pictures/${batchImageMap[batchKey]}`
-    }
-    return {
-      name: batchName,
-      semester: batchName.split(' ')[0] || 'Batch',
-      year: batchName.split(' ')[1] || '',
-      groupImageUrl,
-      memberCount: members.filter(m => m.batch === batchName).length,
-    }
-  }).sort((a, b) => {
-    const yearDiff = parseInt(b.year) - parseInt(a.year)
-    if (yearDiff !== 0) return yearDiff
-    if (a.semester.toLowerCase().includes('winter') || a.semester.toLowerCase().startsWith('w')) return -1
-    if (b.semester.toLowerCase().includes('winter') || b.semester.toLowerCase().startsWith('w')) return 1
-    return 0
-  })
-
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-brand-dark-blue text-white overflow-x-hidden">
-
-        {/* ═══ HERO ═══ */}
-        <Hero
-          backgroundImage="/ourMembers/hero-opt.png"
-          title={
-            <>
-              START MUNICH
-              <br />
-              <span className="outline-text">MEMBERS</span>
-            </>
-          }
-          description="Meet the ambitious student entrepreneurs building the future of technology and innovation."
-        >
-          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">
-                  {Math.floor(animatedActiveMembers)}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Active Members</p>
-            </HeroCard>
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300">
-                  {Math.floor(animatedAlumniCount)}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Alumni</p>
-            </HeroCard>
-          </div>
-        </Hero>
-
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-
-          {/* ═══ COMMUNITY ANALYTICS ═══ */}
-          <section ref={analyticsView.ref} className="py-12">
-            <div className={`mb-8 transition-all duration-700 ${analyticsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">By the Numbers</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">COMMUNITY ANALYTICS</h2>
-            </div>
-
-            <div className={`grid grid-cols-1 md:grid-cols-3 gap-6 transition-all duration-700 delay-150 ${analyticsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              {/* Gender */}
-              <div className="bg-white/5 border border-white/10 rounded-3xl p-8 hover:border-brand-pink/30 transition-all duration-300">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                  </div>
-                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Gender Distribution</span>
-                </div>
-                <div className="space-y-4">
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <span className="text-gray-400 text-sm">Male</span>
-                      <span className="text-white font-bold text-sm">{malePercentage}%</span>
-                    </div>
-                    <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
-                      <div className="h-full bg-gradient-to-r from-blue-500 to-blue-400 rounded-full transition-all duration-1000" style={{ width: `${malePercentage}%` }} />
-                    </div>
-                  </div>
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <span className="text-gray-400 text-sm">Female</span>
-                      <span className="text-white font-bold text-sm">{femalePercentage}%</span>
-                    </div>
-                    <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
-                      <div className="h-full bg-gradient-to-r from-brand-pink to-pink-400 rounded-full transition-all duration-1000" style={{ width: `${femalePercentage}%` }} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Study Fields */}
-              <div className="bg-white/5 border border-white/10 rounded-3xl p-8 hover:border-brand-pink/30 transition-all duration-300">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                    </svg>
-                  </div>
-                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Top Study Fields</span>
-                </div>
-                <div className="space-y-3">
-                  {topStudies.map(({ study, percentage }) => (
-                    <div key={study} className="flex items-center justify-between gap-4">
-                      <span className="text-gray-300 text-sm truncate">{study}</span>
-                      <span className="text-brand-pink text-sm font-bold flex-shrink-0">{percentage}%</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Universities */}
-              <div className="bg-white/5 border border-white/10 rounded-3xl p-8 hover:border-brand-pink/30 transition-all duration-300">
-                <div className="flex items-center gap-3 mb-6">
-                  <div className="w-10 h-10 rounded-xl bg-brand-pink/10 border border-brand-pink/20 flex items-center justify-center">
-                    <svg className="w-5 h-5 text-brand-pink" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                    </svg>
-                  </div>
-                  <span className="text-brand-pink text-xs font-bold tracking-[0.25em] uppercase">Top Universities</span>
-                </div>
-                <div className="space-y-3">
-                  {topUniversities.map(({ university, percentage }) => (
-                    <div key={university} className="flex items-center justify-between gap-4">
-                      <span className="text-gray-300 text-sm truncate">{university}</span>
-                      <span className="text-brand-pink text-sm font-bold flex-shrink-0">{percentage}%</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </section>
-
-          {/* Divider */}
-          <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-
-          {/* ═══ THE BOARDS ═══ */}
-          <section ref={boardsView.ref} className="py-12">
-            <div className={`mb-8 transition-all duration-700 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">Leadership</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">THE BOARDS</h2>
-            </div>
-
-            {expandedBoard ? (
-              <div className={`transition-all duration-700 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-                <button
-                  onClick={() => setExpandedBoard(null)}
-                  className="mb-8 group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
-                >
-                  <svg className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                  </svg>
-                  <span className="text-sm font-medium">Back to all boards</span>
-                </button>
-
-                {boards.filter(b => b.id === expandedBoard).map(board => (
-                  <div key={board.id} className="space-y-10">
-                    {/* Executive Board */}
-                    <div>
-                      <div className="flex items-center gap-3 mb-6">
-                        <div className="w-6 h-px bg-brand-pink" />
-                        <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Executive Board</span>
-                      </div>
-                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-                        {board.executiveBoard.map((member, i) => (
-                          <a key={i} href={member.linkedinUrl || '#'} target={member.linkedinUrl ? '_blank' : undefined} rel={member.linkedinUrl ? 'noopener noreferrer' : undefined} className={`relative${member.linkedinUrl ? ' cursor-pointer' : ' cursor-default'}`}>
-                            <div className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-white/5 border border-white/10">
-                              {member.profileImage ? (
-                                <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 15vw" className="object-cover object-top" referrerPolicy="no-referrer" />
-                              ) : (
-                                <div className="w-full h-full flex items-center justify-center text-white/20 text-3xl font-black">
-                                  {member.name === 'N/A' ? 'N/A' : getInitials(member.name)}
-                                </div>
-                              )}
-                              <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/20 to-transparent" />
-                              <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
-                                <p className="font-black uppercase text-white text-xs leading-tight tracking-wide">{member.name}</p>
-                                <p className="text-brand-pink text-[10px] font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
-                              </div>
-                            </div>
-                          </a>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Department Board */}
-                    <div>
-                      <div className="flex items-center gap-3 mb-6">
-                        <div className="w-6 h-px bg-brand-pink" />
-                        <span className="text-brand-pink text-xs font-bold tracking-[0.35em] uppercase">Department Board</span>
-                      </div>
-                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-                        {board.departmentBoard.map((member, i) => (
-                          <a key={i} href={member.linkedinUrl || '#'} target={member.linkedinUrl ? '_blank' : undefined} rel={member.linkedinUrl ? 'noopener noreferrer' : undefined} className={`relative${member.linkedinUrl ? ' cursor-pointer' : ' cursor-default'}`}>
-                            <div className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-white/5 border border-white/10">
-                              {member.profileImage ? (
-                                <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 15vw" className="object-cover object-top" referrerPolicy="no-referrer" />
-                              ) : (
-                                <div className="w-full h-full flex items-center justify-center text-white/20 text-3xl font-black">
-                                  {member.name === 'N/A' ? 'N/A' : getInitials(member.name)}
-                                </div>
-                              )}
-                              <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/20 to-transparent" />
-                              <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4">
-                                <p className="font-black uppercase text-white text-xs leading-tight tracking-wide">{member.name}</p>
-                                <p className="text-brand-pink text-[10px] font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
-                              </div>
-                            </div>
-                          </a>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 transition-all duration-700 delay-150 ${boardsView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-                {boards.map((board, i) => (
-                  <button
-                    key={board.id}
-                    onClick={() => setExpandedBoard(board.id)}
-                    className="group relative bg-white/5 border border-white/10 rounded-3xl overflow-hidden hover:border-brand-pink/30 hover:bg-white/[0.07] transition-all duration-300 text-left"
-                    style={{ transitionDelay: `${i * 100}ms` }}
-                  >
-                    <div className="relative overflow-hidden h-52">
-                      {board.imageUrl ? (
-                        <Image src={board.imageUrl} alt={board.name} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover group-hover:scale-105 transition-transform duration-500" />
-                      ) : (
-                        <div className="w-full h-full bg-gradient-to-br from-white/5 to-white/[0.02] flex items-center justify-center">
-                          <span className="text-white/10 text-6xl font-black tracking-tight">{board.year}</span>
-                        </div>
-                      )}
-                      <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/50 to-transparent" />
-                      <div className="absolute bottom-0 left-0 right-0 p-6">
-                        <h3 className="text-xl font-black text-white uppercase tracking-tight">{board.name}</h3>
-                        <p className="text-gray-400 text-xs mt-1 uppercase tracking-wider">{board.year}</p>
-                      </div>
-                    </div>
-                    <div className="px-6 py-4 flex items-center justify-between">
-                      <span className="text-gray-400 text-sm">{board.executiveBoard.length + board.departmentBoard.length} members</span>
-                      <span className="text-brand-pink text-sm font-medium group-hover:translate-x-1 transition-transform inline-block">View board →</span>
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </section>
-
-          {/* Divider */}
-          <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-
-          {/* ═══ OUR BATCHES ═══ */}
-          <section ref={batchesView.ref} className="py-12">
-            <div className={`mb-8 transition-all duration-700 ${batchesView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
-              <span className="text-brand-pink text-sm font-bold tracking-[0.3em] uppercase">Our Community</span>
-              <h2 className="text-3xl md:text-4xl font-black text-white mt-2">OUR BATCHES</h2>
-            </div>
-
-            {expandedBatch ? (
-              <div ref={batchContentRef}>
-                <button
-                  onClick={() => setExpandedBatch(null)}
-                  className="mb-8 group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
-                >
-                  <svg className="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                  </svg>
-                  <span className="text-sm font-medium">Back to all batches</span>
-                </button>
-
-                {sortedBatches.filter(b => b.name === expandedBatch).map(batch => (
-                  <div key={batch.name} className="space-y-8">
-                    <h3 className="text-3xl sm:text-4xl font-black text-white">{batch.name}</h3>
-
-                    <div
-                      onClick={() => setExpandedBatch(null)}
-                      className="w-full relative rounded-3xl overflow-hidden border border-white/10 cursor-pointer hover:border-brand-pink/30 transition-all duration-300"
-                    >
-                      <div className="relative w-full h-[70vh] overflow-hidden bg-white/5">
-                        <Image src={batch.groupImageUrl} alt={batch.name} fill sizes="100vw" className="object-cover" />
-                        <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/40 via-transparent to-transparent" />
-                      </div>
-                    </div>
-
-                    <div className="mt-6">
-                      {loadingBatch ? (
-                        <div className="flex justify-center items-center py-16">
-                          <div className="w-10 h-10 border-2 border-brand-pink/30 border-t-brand-pink rounded-full animate-spin" />
-                        </div>
-                      ) : (
-                        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-                          {[...batchMembers].sort((a, b) => {
-                            const aHasImage = a.profileImage ? 0 : 1
-                            const bHasImage = b.profileImage ? 0 : 1
-                            return aHasImage - bHasImage
-                          }).map(member => (
-                            <a
-                              key={member.id}
-                              href={member.linkedinUrl || '#'}
-                              target={member.linkedinUrl ? '_blank' : undefined}
-                              rel={member.linkedinUrl ? 'noopener noreferrer' : undefined}
-                              className={`group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 hover:border-brand-pink/30 hover:bg-white/[0.07] transition-all duration-300 aspect-square ${member.linkedinUrl ? 'cursor-pointer' : 'cursor-default'}`}
-                            >
-                              <div className="relative w-full h-full">
-                                {member.profileImage ? (
-                                  <Image src={member.profileImage} alt={member.name} fill sizes="(max-width: 640px) 33vw, 10vw" className="object-cover" referrerPolicy="no-referrer" />
-                                ) : (
-                                  <div className="w-full h-full flex items-center justify-center bg-white/5">
-                                    <span className="text-white/50 text-2xl font-black tracking-wider">
-                                      {getInitials(member.name)}
-                                    </span>
-                                  </div>
-                                )}
-                                <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/60 via-transparent to-transparent" />
-                                <div className="absolute bottom-0 left-0 right-0 p-3 text-center">
-                                  <p className="font-black text-white text-sm leading-tight">{member.name}</p>
-                                  <p className="text-brand-pink text-xs mt-0.5">{member.study || member.role}</p>
-                                </div>
-                              </div>
-                            </a>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                {sortedBatches.map((batch, i) => (
-                  <div
-                    key={batch.name}
-                    className={`transition-all duration-700 ${batchesView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}
-                    style={{ transitionDelay: `${150 + i * 80}ms` }}
-                  >
-                    <button
-                      onClick={() => setExpandedBatch(batch.name)}
-                      className="w-full group relative rounded-3xl overflow-hidden border border-white/10 hover:border-brand-pink/30 transition-all duration-300"
-                    >
-                      <div className="relative h-72 sm:h-80 overflow-hidden bg-white/5">
-                        <img
-                          src={batch.groupImageUrl}
-                          alt={batch.name}
-                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                        />
-                        <div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue/70 via-transparent to-transparent" />
-                        <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between">
-                          <h3 className="text-xl sm:text-2xl font-black text-white">{batch.name}</h3>
-                          <span className="text-white/50 text-xs font-bold uppercase tracking-widest">Explore →</span>
-                        </div>
-                      </div>
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </section>
-
-        </div>
-      </main>
-    </>
-  )
+  return <MembersContent />
 }
diff --git a/app/our-mission/page.tsx b/app/our-mission/page.tsx
deleted file mode 100644
index 10a4f8b..0000000
--- a/app/our-mission/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation'
-
-export default function OurMissionRedirect() {
-  redirect('/about-us')
-}
diff --git a/app/page.tsx b/app/page.tsx
index ff6d01c..197e6d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,132 @@
-import { redirect } from 'next/navigation'
+/**
+ * Home page — Server Component
+ *
+ * Fetches featured partners and startups directly from NocoDB at request time.
+ * Next.js ISR caches the result for 1 hour (`revalidate = 3600`), so the
+ * database is only hit once per hour across all visitors. The pre-fetched data
+ * is passed as props to HomeClient, which means logos are available on the
+ * initial HTML render — no client-side fetch or flash of missing content.
+ */
+import type { Metadata } from 'next'
+import HomeClient from './home/HomeClient'
+import type { Partner, Startup } from '@/lib/types'
 
-export default function RootPage() {
-  redirect('/home')
+export const metadata: Metadata = {
+  title: 'START Munich – Student Entrepreneurship Community',
+  description:
+    'START Munich is the largest student-run entrepreneurship community in Munich. We empower the next generation of founders to dare, build, and belong.',
+  alternates: { canonical: 'https://www.startmunich.de/' },
+  openGraph: {
+    url: 'https://www.startmunich.de/',
+    title: 'START Munich – Student Entrepreneurship Community',
+    description:
+      'START Munich is the largest student-run entrepreneurship community in Munich. We empower the next generation of founders to dare, build, and belong.',
+  },
+}
+
+// Revalidate the cached page every hour
+export const revalidate = 3600
+
+const NOCODB_API_TOKEN = process.env.NOCODB_API_TOKEN
+const NOCODB_BASE_URL = process.env.NOCODB_BASE_URL || 'https://ndb.startmunich.de'
+const NOCODB_PARTNERS_TABLE_ID = process.env.NOCODB_PARTNERS_TABLE_ID
+const NOCODB_STARTUPS_TABLE_ID = process.env.NOCODB_STARTUPS_TABLE_ID
+
+async function fetchFeaturedPartners(): Promise<Partner[]> {
+  if (!NOCODB_API_TOKEN || !NOCODB_PARTNERS_TABLE_ID) return []
+  try {
+    const res = await fetch(
+      `${NOCODB_BASE_URL}/api/v2/tables/${NOCODB_PARTNERS_TABLE_ID}/records?limit=1000`,
+      {
+        headers: { 'xc-token': NOCODB_API_TOKEN, 'Content-Type': 'application/json' },
+        next: { revalidate: 3600 },
+      }
+    )
+    if (!res.ok) return []
+    const data = await res.json()
+    return (data.list || [])
+      .filter((r: any) => {
+        const show = r.Show
+        const featured = r.Featured
+        return (show === true || show === 1 || String(show).toLowerCase() === 'true') &&
+               (featured === true || featured === 1 || String(featured).toLowerCase() === 'true')
+      })
+      .map((r: any) => {
+        const logos: any[] = r.LogoNoBackground || []
+        const logo = logos.length > 0 ? logos[logos.length - 1] : null
+        const logoUrl = logo?.signedPath
+          ? `${NOCODB_BASE_URL}/${logo.signedPath}`
+          : `https://ui-avatars.com/api/?name=${encodeURIComponent(r.Name || 'Partner')}&size=300&background=4f46e5&color=fff&bold=true&font-size=0.4`
+        return { id: r.Id || String(Math.random()), name: r.Name || 'Partner', category: r.Categrory || 'Other', logoUrl, featured: true }
+      })
+  } catch {
+    return []
+  }
+}
+
+async function fetchFeaturedStartups(): Promise<Startup[]> {
+  if (!NOCODB_API_TOKEN || !NOCODB_STARTUPS_TABLE_ID) return []
+  try {
+    const res = await fetch(
+      `${NOCODB_BASE_URL}/api/v2/tables/${NOCODB_STARTUPS_TABLE_ID}/records?limit=1000`,
+      {
+        headers: { 'xc-token': NOCODB_API_TOKEN, 'Content-Type': 'application/json' },
+        next: { revalidate: 3600 },
+      }
+    )
+    if (!res.ok) return []
+    const data = await res.json()
+    return (data.list || [])
+      .filter((r: any) =>
+        r['Featured Startup']?.toLowerCase() === 'yes' ||
+        r['Y Combinator Alumni']?.toLowerCase() === 'yes' ||
+        r['EWOR']?.toLowerCase() === 'yes'
+      )
+      .map((r: any) => {
+        let logoUrl = `https://ui-avatars.com/api/?name=${encodeURIComponent(r['Startup Name'] || 'Startup')}&size=300&background=00002c&color=fff&bold=true&font-size=0.4`
+        if (r['Company Logo']?.[0]?.signedPath) logoUrl = `${NOCODB_BASE_URL}/${r['Company Logo'][0].signedPath}`
+        return {
+          id: r.Id || r.id,
+          name: r['Startup Name'] || 'Startup',
+          logoUrl,
+          isSpotlight: r['Featured Startup']?.toLowerCase() === 'yes',
+          isYCombinator: r['Y Combinator Alumni']?.toLowerCase() === 'yes',
+          isEWOR: r['EWOR']?.toLowerCase() === 'yes',
+        }
+      })
+  } catch {
+    return []
+  }
+}
+
+export default async function HomePage() {
+  const [partners, startups] = await Promise.all([
+    fetchFeaturedPartners(),
+    fetchFeaturedStartups(),
+  ])
+
+  const organizationJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: 'START Munich',
+    url: 'https://www.startmunich.de',
+    logo: 'https://www.startmunich.de/startIcon.png',
+    description:
+      'START Munich is the largest student-run entrepreneurship community in Munich.',
+    foundingDate: '2003',
+    sameAs: [
+      'https://www.linkedin.com/company/start-munich',
+      'https://www.instagram.com/startmunich',
+    ],
+  }
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
+      />
+      <HomeClient initialPartners={partners} initialStartups={startups} />
+    </>
+  )
 }
diff --git a/app/partners/PartnersContent.tsx b/app/partners/PartnersContent.tsx
new file mode 100644
index 0000000..6819c49
--- /dev/null
+++ b/app/partners/PartnersContent.tsx
@@ -0,0 +1,369 @@
+"use client"
+
+import { useState, useEffect, useRef } from 'react'
+import Script from 'next/script'
+import { cn } from "@/lib/utils"
+import Hero from "@/components/Hero"
+import HeroCard from "@/components/HeroCard"
+import CTA from "@/components/CTA"
+
+export const dynamic = 'force-dynamic'
+
+interface Partner {
+  id: string
+  name: string
+  category: string
+  logoUrl: string
+}
+
+// Fetch partners from API
+async function fetchPartners(): Promise<Partner[]> {
+  try {
+    // Use absolute URL in production, relative in development
+    const baseUrl = typeof window !== 'undefined'
+      ? window.location.origin
+      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+
+    const response = await fetch(`${baseUrl}/api/partners`, {
+      cache: 'no-store', // Ensure fresh data
+    });
+
+    if (!response.ok) {
+      console.error(`API error: ${response.status} ${response.statusText}`);
+      throw new Error('Failed to fetch partners');
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching partners:', error);
+    return [];
+  }
+}
+
+interface PartnersByCategory {
+  [category: string]: Partner[]
+}
+
+const CATEGORY_ORDER = [
+  'TECHNOLOGY',
+  "RESEARCH",
+  'VENTURE CAPITAL',
+  'ECOSYSTEM',
+  'INITIATIVES',
+  'STARTUP',
+  'INDUSTRY',
+  'OTHER'
+];
+
+export default function PartnersPage() {
+  const [loading, setLoading] = useState(true)
+  const [partners, setPartners] = useState<Partner[]>([])
+  const [partnersByCategory, setPartnersByCategory] = useState<PartnersByCategory>({})
+  const [activeCategory, setActiveCategory] = useState<string>('ALL')
+  const [searchQuery, setSearchQuery] = useState('')
+  const categoryRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
+
+  // Animation states for numbers
+  const [animatedPartners, setAnimatedPartners] = useState(0)
+  const [animatedCategories, setAnimatedCategories] = useState(0)
+  const hasAnimatedRef = useRef(false)
+
+  useEffect(() => {
+    const loadPartners = async () => {
+      setLoading(true)
+      const data = await fetchPartners()
+      setPartners(data)
+
+      // Group partners by category
+      const grouped = data.reduce((acc: PartnersByCategory, partner) => {
+        const category = partner.category ? partner.category.toUpperCase() : 'OTHER'
+        if (!acc[category]) {
+          acc[category] = []
+        }
+        acc[category].push(partner)
+        return acc
+      }, {})
+
+      setPartnersByCategory(grouped)
+      setLoading(false)
+    }
+
+    loadPartners()
+  }, [])
+
+  // Calculate stats
+  const totalPartners = partners.length;
+  // Count unique categories actually present in data
+  const totalCategories = Object.keys(partnersByCategory).length;
+
+  // Animate numbers
+  useEffect(() => {
+    if (!loading && !hasAnimatedRef.current && totalPartners > 0) {
+      hasAnimatedRef.current = true
+
+      const duration = 1500 // 1.5 seconds
+      const steps = 60
+      const interval = duration / steps
+
+      const partnersIncrement = totalPartners / steps
+      const categoriesIncrement = totalCategories / steps
+
+      let partnersCurrent = 0
+      let categoriesCurrent = 0
+      let step = 0
+
+      const timer = setInterval(() => {
+        step++
+        partnersCurrent += partnersIncrement
+        categoriesCurrent += categoriesIncrement
+
+        if (step >= steps) {
+          setAnimatedPartners(totalPartners)
+          setAnimatedCategories(totalCategories)
+          clearInterval(timer)
+        } else {
+          setAnimatedPartners(partnersCurrent)
+          setAnimatedCategories(categoriesCurrent)
+        }
+      }, interval)
+
+      return () => clearInterval(timer)
+    }
+  }, [loading, totalPartners, totalCategories])
+
+  // Sort categories based on predefined order
+  const sortedCategories = Object.keys(partnersByCategory).sort((a, b) => {
+    const indexA = CATEGORY_ORDER.indexOf(a);
+    const indexB = CATEGORY_ORDER.indexOf(b);
+
+    if (indexA !== -1 && indexB !== -1) return indexA - indexB;
+    if (indexA !== -1) return -1;
+    if (indexB !== -1) return 1;
+    return a.localeCompare(b);
+  });
+
+  const scrollToCategory = (category: string) => {
+    setActiveCategory(category)
+    if (category === 'ALL') {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      return
+    }
+    const element = categoryRefs.current[category]
+    if (element) {
+      const yOffset = -180; // Offset for sticky navigation (80px) + filter bar (~100px)
+      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: 'smooth' });
+    }
+  }
+
+  const filteredPartners = (category: string) => {
+    const categoryPartners = partnersByCategory[category] || [];
+    if (!searchQuery) return categoryPartners;
+    return categoryPartners.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  }
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-brand-dark-blue py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-16 h-16 border-4 border-brand-pink border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <p className="text-2xl font-bold text-white tracking-widest animate-pulse">LOADING PARTNERS...</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(
+              document.documentElement.scrollHeight,
+              document.body.scrollHeight
+            );
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-brand-dark-blue selection:bg-brand-pink selection:text-white">
+
+        {/* Hero Section - Restored Old Style with Stats Added */}
+        <Hero
+          backgroundImage="/ourPartners/hero1-opt.png"
+          title={
+            <>
+              OUR
+              <br />
+              <span className="outline-text">PARTNERS</span>
+            </>
+          }
+          description="Powering the next generation of entrepreneurs through world-class collaboration."
+        >
+          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+            {/** Stat 1 **/}
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  {Math.floor(animatedPartners)}
+                </span>
+                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Partners</p>
+            </HeroCard>
+
+            {/** Stat 2 **/}
+            <HeroCard>
+              <div className="flex items-baseline justify-center gap-2 mb-3">
+                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                  {Math.floor(animatedCategories)}
+                </span>
+              </div>
+              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Industries</p>
+            </HeroCard>
+          </div>
+        </Hero>
+
+        {/* Sticky Filter & Search Bar */}
+        <div className="sticky top-20 z-40 bg-brand-dark-blue/95 backdrop-blur-md border-b border-white/10 shadow-2xl">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+
+              {/* Category Pills */}
+              <div className="flex overflow-x-auto pb-2 md:pb-0 w-full md:w-auto scrollbar-hide gap-2 no-scrollbar">
+                <button
+                  onClick={() => scrollToCategory('ALL')}
+                  className={cn(
+                    "px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border",
+                    activeCategory === 'ALL'
+                      ? "bg-brand-pink border-brand-pink text-white shadow-[0_0_15px_rgba(208,0,111,0.5)]"
+                      : "bg-transparent border-white/20 text-gray-400 hover:text-white hover:border-white/50"
+                  )}
+                >
+                  All
+                </button>
+                {sortedCategories.map((category) => (
+                  <button
+                    key={category}
+                    onClick={() => scrollToCategory(category)}
+                    className={cn(
+                      "px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border",
+                      activeCategory === category
+                        ? "bg-brand-pink border-brand-pink text-white shadow-[0_0_15px_rgba(208,0,111,0.5)]"
+                        : "bg-transparent border-white/20 text-gray-400 hover:text-white hover:border-white/50"
+                    )}
+                  >
+                    {category.charAt(0) + category.slice(1).toLowerCase()}
+                  </button>
+                ))}
+              </div>
+
+              {/* Search Input */}
+              <div className="relative w-full md:w-52">
+                <div className="absolute inset-y-1 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg className="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+                <input
+                  type="text"
+                  placeholder="Search partner..."
+                  className="block w-full pl-10 pr-3 py-2 border border-white/10 rounded-full leading-5 bg-white/5 text-gray-300 placeholder-gray-500 focus:outline-none focus:bg-white/10 focus:border-brand-pink transition duration-150 ease-in-out sm:text-sm"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Content Below Hero */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20 space-y-24">
+
+          {sortedCategories.map((categoryName) => {
+            const partnersToShow = filteredPartners(categoryName);
+            if (partnersToShow.length === 0) return null;
+
+            return (
+              <div
+                key={categoryName}
+                ref={(el) => {
+                  categoryRefs.current[categoryName] = el;
+                }}
+                className="scroll-mt-44"
+              >
+                <div className="flex items-end gap-4 mb-8 border-b border-white/10 pb-4">
+                  <h2 className="text-3xl md:text-4xl font-black text-white">
+                    {categoryName.toUpperCase().split(' ')[0]}{' '}
+                    <span className="outline-text">
+                      {categoryName.toUpperCase().split(' ').slice(1).join(' ') || ''}
+                    </span>
+                  </h2>
+                  <span className="text-gray-500 text-lg font-mono mb-2">
+                    ({partnersToShow.length})
+                  </span>
+                </div>
+
+                {/* Partners Grid */}
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+                  {partnersToShow.map((partner: Partner) => (
+                    <div
+                      key={partner.id}
+                      className="group relative"
+                    >
+                      {/* Logo Card - Reverted to Original Styling */}
+                      <div className="relative bg-white rounded-2xl p-6 h-32 flex items-center justify-center transition-all duration-300 group-hover:shadow-xl group-hover:shadow-brand-pink/20 group-hover:scale-105 border-2 border-transparent group-hover:border-brand-pink">
+                        <img
+                          src={partner.logoUrl}
+                          alt={partner.name}
+                          className="max-w-full max-h-full object-contain transition-all duration-300"
+                          onError={(e) => {
+                            // Fallback to initials if logo fails to load
+                            const target = e.target as HTMLImageElement
+                            target.style.display = 'none'
+                            const parent = target.parentElement
+                            if (parent) {
+                              const fallback = document.createElement('div')
+                              fallback.className = 'text-2xl font-bold text-gray-600'
+                              fallback.textContent = partner.name.split(' ').map((w: string) => w[0]).join('').slice(0, 2)
+                              parent.appendChild(fallback)
+                            }
+                          }}
+                        />
+                      </div>
+
+                      {/* Partner Name */}
+                      <div className="mt-3 text-center">
+                        <p className="text-white font-bold text-sm group-hover:text-brand-pink transition-colors duration-300">
+                          {partner.name}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Become a Partner CTA */}
+          <CTA
+            title="Join the Ecosystem"
+            description="Become a partner and connect with the most ambitious talents from Munich's leading universities. Collaborate on sponsor events, host workshops, and gain access to a vibrant community of future innovators."
+            layout="split"
+            buttons={[
+              { label: "View Partnership Benefits", href: "/for-partners" },
+              { label: "Contact Us", href: "https://tally.so/r/3xpGQG", variant: "secondary" }
+            ]}
+          />
+
+        </div>
+      </main>
+    </>
+  )
+}
diff --git a/app/partners/page.tsx b/app/partners/page.tsx
index 6819c49..0fbce4d 100644
--- a/app/partners/page.tsx
+++ b/app/partners/page.tsx
@@ -1,369 +1,21 @@
-"use client"
-
-import { useState, useEffect, useRef } from 'react'
-import Script from 'next/script'
-import { cn } from "@/lib/utils"
-import Hero from "@/components/Hero"
-import HeroCard from "@/components/HeroCard"
-import CTA from "@/components/CTA"
+import type { Metadata } from 'next'
+import PartnersContent from './PartnersContent'
 
 export const dynamic = 'force-dynamic'
 
-interface Partner {
-  id: string
-  name: string
-  category: string
-  logoUrl: string
-}
-
-// Fetch partners from API
-async function fetchPartners(): Promise<Partner[]> {
-  try {
-    // Use absolute URL in production, relative in development
-    const baseUrl = typeof window !== 'undefined'
-      ? window.location.origin
-      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
-
-    const response = await fetch(`${baseUrl}/api/partners`, {
-      cache: 'no-store', // Ensure fresh data
-    });
-
-    if (!response.ok) {
-      console.error(`API error: ${response.status} ${response.statusText}`);
-      throw new Error('Failed to fetch partners');
-    }
-
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching partners:', error);
-    return [];
-  }
+export const metadata: Metadata = {
+  title: 'Our Partners',
+  description:
+    'Meet START Munich\'s partners — leading companies, VCs, research institutions, and ecosystem players that empower our student entrepreneur community.',
+  alternates: { canonical: 'https://www.startmunich.de/partners' },
+  openGraph: {
+    url: 'https://www.startmunich.de/partners',
+    title: 'Our Partners | START Munich',
+    description:
+      'Meet START Munich\'s partners — leading companies, VCs, research institutions, and ecosystem players that empower our student entrepreneur community.',
+  },
 }
 
-interface PartnersByCategory {
-  [category: string]: Partner[]
-}
-
-const CATEGORY_ORDER = [
-  'TECHNOLOGY',
-  "RESEARCH",
-  'VENTURE CAPITAL',
-  'ECOSYSTEM',
-  'INITIATIVES',
-  'STARTUP',
-  'INDUSTRY',
-  'OTHER'
-];
-
 export default function PartnersPage() {
-  const [loading, setLoading] = useState(true)
-  const [partners, setPartners] = useState<Partner[]>([])
-  const [partnersByCategory, setPartnersByCategory] = useState<PartnersByCategory>({})
-  const [activeCategory, setActiveCategory] = useState<string>('ALL')
-  const [searchQuery, setSearchQuery] = useState('')
-  const categoryRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
-
-  // Animation states for numbers
-  const [animatedPartners, setAnimatedPartners] = useState(0)
-  const [animatedCategories, setAnimatedCategories] = useState(0)
-  const hasAnimatedRef = useRef(false)
-
-  useEffect(() => {
-    const loadPartners = async () => {
-      setLoading(true)
-      const data = await fetchPartners()
-      setPartners(data)
-
-      // Group partners by category
-      const grouped = data.reduce((acc: PartnersByCategory, partner) => {
-        const category = partner.category ? partner.category.toUpperCase() : 'OTHER'
-        if (!acc[category]) {
-          acc[category] = []
-        }
-        acc[category].push(partner)
-        return acc
-      }, {})
-
-      setPartnersByCategory(grouped)
-      setLoading(false)
-    }
-
-    loadPartners()
-  }, [])
-
-  // Calculate stats
-  const totalPartners = partners.length;
-  // Count unique categories actually present in data
-  const totalCategories = Object.keys(partnersByCategory).length;
-
-  // Animate numbers
-  useEffect(() => {
-    if (!loading && !hasAnimatedRef.current && totalPartners > 0) {
-      hasAnimatedRef.current = true
-
-      const duration = 1500 // 1.5 seconds
-      const steps = 60
-      const interval = duration / steps
-
-      const partnersIncrement = totalPartners / steps
-      const categoriesIncrement = totalCategories / steps
-
-      let partnersCurrent = 0
-      let categoriesCurrent = 0
-      let step = 0
-
-      const timer = setInterval(() => {
-        step++
-        partnersCurrent += partnersIncrement
-        categoriesCurrent += categoriesIncrement
-
-        if (step >= steps) {
-          setAnimatedPartners(totalPartners)
-          setAnimatedCategories(totalCategories)
-          clearInterval(timer)
-        } else {
-          setAnimatedPartners(partnersCurrent)
-          setAnimatedCategories(categoriesCurrent)
-        }
-      }, interval)
-
-      return () => clearInterval(timer)
-    }
-  }, [loading, totalPartners, totalCategories])
-
-  // Sort categories based on predefined order
-  const sortedCategories = Object.keys(partnersByCategory).sort((a, b) => {
-    const indexA = CATEGORY_ORDER.indexOf(a);
-    const indexB = CATEGORY_ORDER.indexOf(b);
-
-    if (indexA !== -1 && indexB !== -1) return indexA - indexB;
-    if (indexA !== -1) return -1;
-    if (indexB !== -1) return 1;
-    return a.localeCompare(b);
-  });
-
-  const scrollToCategory = (category: string) => {
-    setActiveCategory(category)
-    if (category === 'ALL') {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      return
-    }
-    const element = categoryRefs.current[category]
-    if (element) {
-      const yOffset = -180; // Offset for sticky navigation (80px) + filter bar (~100px)
-      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-      window.scrollTo({ top: y, behavior: 'smooth' });
-    }
-  }
-
-  const filteredPartners = (category: string) => {
-    const categoryPartners = partnersByCategory[category] || [];
-    if (!searchQuery) return categoryPartners;
-    return categoryPartners.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()));
-  }
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-brand-dark-blue py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
-        <div className="text-center">
-          <div className="w-16 h-16 border-4 border-brand-pink border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-          <p className="text-2xl font-bold text-white tracking-widest animate-pulse">LOADING PARTNERS...</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(
-              document.documentElement.scrollHeight,
-              document.body.scrollHeight
-            );
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-brand-dark-blue selection:bg-brand-pink selection:text-white">
-
-        {/* Hero Section - Restored Old Style with Stats Added */}
-        <Hero
-          backgroundImage="/ourPartners/hero1-opt.png"
-          title={
-            <>
-              OUR
-              <br />
-              <span className="outline-text">PARTNERS</span>
-            </>
-          }
-          description="Powering the next generation of entrepreneurs through world-class collaboration."
-        >
-          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-            {/** Stat 1 **/}
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  {Math.floor(animatedPartners)}
-                </span>
-                <span className="text-xl lg:text-3xl font-bold text-brand-pink">+</span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Partners</p>
-            </HeroCard>
-
-            {/** Stat 2 **/}
-            <HeroCard>
-              <div className="flex items-baseline justify-center gap-2 mb-3">
-                <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                  {Math.floor(animatedCategories)}
-                </span>
-              </div>
-              <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Industries</p>
-            </HeroCard>
-          </div>
-        </Hero>
-
-        {/* Sticky Filter & Search Bar */}
-        <div className="sticky top-20 z-40 bg-brand-dark-blue/95 backdrop-blur-md border-b border-white/10 shadow-2xl">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-
-              {/* Category Pills */}
-              <div className="flex overflow-x-auto pb-2 md:pb-0 w-full md:w-auto scrollbar-hide gap-2 no-scrollbar">
-                <button
-                  onClick={() => scrollToCategory('ALL')}
-                  className={cn(
-                    "px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border",
-                    activeCategory === 'ALL'
-                      ? "bg-brand-pink border-brand-pink text-white shadow-[0_0_15px_rgba(208,0,111,0.5)]"
-                      : "bg-transparent border-white/20 text-gray-400 hover:text-white hover:border-white/50"
-                  )}
-                >
-                  All
-                </button>
-                {sortedCategories.map((category) => (
-                  <button
-                    key={category}
-                    onClick={() => scrollToCategory(category)}
-                    className={cn(
-                      "px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border",
-                      activeCategory === category
-                        ? "bg-brand-pink border-brand-pink text-white shadow-[0_0_15px_rgba(208,0,111,0.5)]"
-                        : "bg-transparent border-white/20 text-gray-400 hover:text-white hover:border-white/50"
-                    )}
-                  >
-                    {category.charAt(0) + category.slice(1).toLowerCase()}
-                  </button>
-                ))}
-              </div>
-
-              {/* Search Input */}
-              <div className="relative w-full md:w-52">
-                <div className="absolute inset-y-1 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg className="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                </div>
-                <input
-                  type="text"
-                  placeholder="Search partner..."
-                  className="block w-full pl-10 pr-3 py-2 border border-white/10 rounded-full leading-5 bg-white/5 text-gray-300 placeholder-gray-500 focus:outline-none focus:bg-white/10 focus:border-brand-pink transition duration-150 ease-in-out sm:text-sm"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Content Below Hero */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20 space-y-24">
-
-          {sortedCategories.map((categoryName) => {
-            const partnersToShow = filteredPartners(categoryName);
-            if (partnersToShow.length === 0) return null;
-
-            return (
-              <div
-                key={categoryName}
-                ref={(el) => {
-                  categoryRefs.current[categoryName] = el;
-                }}
-                className="scroll-mt-44"
-              >
-                <div className="flex items-end gap-4 mb-8 border-b border-white/10 pb-4">
-                  <h2 className="text-3xl md:text-4xl font-black text-white">
-                    {categoryName.toUpperCase().split(' ')[0]}{' '}
-                    <span className="outline-text">
-                      {categoryName.toUpperCase().split(' ').slice(1).join(' ') || ''}
-                    </span>
-                  </h2>
-                  <span className="text-gray-500 text-lg font-mono mb-2">
-                    ({partnersToShow.length})
-                  </span>
-                </div>
-
-                {/* Partners Grid */}
-                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
-                  {partnersToShow.map((partner: Partner) => (
-                    <div
-                      key={partner.id}
-                      className="group relative"
-                    >
-                      {/* Logo Card - Reverted to Original Styling */}
-                      <div className="relative bg-white rounded-2xl p-6 h-32 flex items-center justify-center transition-all duration-300 group-hover:shadow-xl group-hover:shadow-brand-pink/20 group-hover:scale-105 border-2 border-transparent group-hover:border-brand-pink">
-                        <img
-                          src={partner.logoUrl}
-                          alt={partner.name}
-                          className="max-w-full max-h-full object-contain transition-all duration-300"
-                          onError={(e) => {
-                            // Fallback to initials if logo fails to load
-                            const target = e.target as HTMLImageElement
-                            target.style.display = 'none'
-                            const parent = target.parentElement
-                            if (parent) {
-                              const fallback = document.createElement('div')
-                              fallback.className = 'text-2xl font-bold text-gray-600'
-                              fallback.textContent = partner.name.split(' ').map((w: string) => w[0]).join('').slice(0, 2)
-                              parent.appendChild(fallback)
-                            }
-                          }}
-                        />
-                      </div>
-
-                      {/* Partner Name */}
-                      <div className="mt-3 text-center">
-                        <p className="text-white font-bold text-sm group-hover:text-brand-pink transition-colors duration-300">
-                          {partner.name}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            );
-          })}
-
-          {/* Become a Partner CTA */}
-          <CTA
-            title="Join the Ecosystem"
-            description="Become a partner and connect with the most ambitious talents from Munich's leading universities. Collaborate on sponsor events, host workshops, and gain access to a vibrant community of future innovators."
-            layout="split"
-            buttons={[
-              { label: "View Partnership Benefits", href: "/for-partners" },
-              { label: "Contact Us", href: "https://tally.so/r/3xpGQG", variant: "secondary" }
-            ]}
-          />
-
-        </div>
-      </main>
-    </>
-  )
+  return <PartnersContent />
 }
diff --git a/app/robots.ts b/app/robots.ts
new file mode 100644
index 0000000..74bbd0a
--- /dev/null
+++ b/app/robots.ts
@@ -0,0 +1,11 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://www.startmunich.de/sitemap.xml',
+  }
+}
diff --git a/app/sitemap.ts b/app/sitemap.ts
new file mode 100644
index 0000000..e8efcaa
--- /dev/null
+++ b/app/sitemap.ts
@@ -0,0 +1,21 @@
+import { MetadataRoute } from 'next'
+
+const BASE = 'https://www.startmunich.de'
+
+// Static last-modified date — update when content changes significantly
+const LAST_MODIFIED = '2025-04-06'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    { url: `${BASE}/`,               lastModified: LAST_MODIFIED, changeFrequency: 'weekly',  priority: 1.0 },
+    { url: `${BASE}/about-us`,        lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.8 },
+    { url: `${BASE}/events`,          lastModified: LAST_MODIFIED, changeFrequency: 'weekly',  priority: 0.9 },
+    { url: `${BASE}/startups`,        lastModified: LAST_MODIFIED, changeFrequency: 'weekly',  priority: 0.8 },
+    { url: `${BASE}/partners`,        lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/for-partners`,    lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/members`,         lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/member-journey`,  lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/member-network`,  lastModified: LAST_MODIFIED, changeFrequency: 'monthly', priority: 0.6 },
+    { url: `${BASE}/apply`, lastModified: LAST_MODIFIED, changeFrequency: 'weekly',  priority: 0.8 },
+  ]
+}
diff --git a/app/startup-details/[id]/StartupDetailsContent.tsx b/app/startup-details/[id]/StartupDetailsContent.tsx
new file mode 100644
index 0000000..bcf08e1
--- /dev/null
+++ b/app/startup-details/[id]/StartupDetailsContent.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import { useState, useEffect, use } from "react"
+import Link from "next/link"
+import { notFound, useRouter } from "next/navigation"
+import type { Company } from "@/lib/types"
+
+// Fetch companies from API
+async function fetchCompanies(): Promise<Company[]> {
+  try {
+    const response = await fetch('/api/startups');
+    if (!response.ok) throw new Error('Failed to fetch startups');
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching startups:', error);
+    return [];
+  }
+}
+
+export default function StartupDetailsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const router = useRouter()
+  const [company, setCompany] = useState<Company | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadCompany = async () => {
+      setLoading(true)
+      const companies = await fetchCompanies()
+      const foundCompany = companies.find(c => c.id.toString() === id)
+      
+      if (!foundCompany) {
+        notFound()
+        return
+      }
+      
+      setCompany(foundCompany)
+      setLoading(false)
+    }
+    loadCompany()
+  }, [id])
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-2xl font-bold text-white">Loading startup details...</p>
+        </div>
+      </main>
+    )
+  }
+
+  if (!company) {
+    return notFound()
+  }
+
+  return (
+    <main className="min-h-screen bg-[#00002c]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Company Details */}
+        <div className="bg-[#00002c] border border-white/20 rounded-2xl max-w-4xl mx-auto relative">
+          {/* Close Button */}
+          <button
+            onClick={() => router.back()}
+            className="absolute top-4 right-4 z-10 w-10 h-10 flex items-center justify-center bg-white/10 hover:bg-white/20 rounded-full transition-all"
+          >
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+
+          <div className="p-8">
+            {/* Header with Logo */}
+            <div className="flex flex-col md:flex-row gap-6 mb-6">
+              <div className="flex-shrink-0 bg-white rounded-lg p-6 w-full md:w-48 h-48 flex items-center justify-center border-2 border-white/20 hover:border-[#d0006f] transition-all">
+                <img
+                  src={company.logoUrl}
+                  alt={`${company.name} logo`}
+                  className="max-w-full max-h-full w-auto h-auto object-contain"
+                />
+              </div>
+              
+              <div className="flex-1">
+                <h1 className="text-5xl font-bold text-white mb-3 h1-small">{company.name}</h1>
+                
+                {/* Categories */}
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {company.category.map((cat, idx) => (
+                    <span
+                      key={idx}
+                      className="inline-flex items-center px-3 py-1 text-xs font-medium bg-[#d0006f]/20 text-[#d0006f] border border-[#d0006f]/40 rounded-full"
+                    >
+                      {cat}
+                    </span>
+                  ))}
+                </div>
+
+                {/* Quick Info */}
+                <div className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-gray-400 mb-4">
+
+                  {company.lastUpdated && (
+                    <>
+                      <span>Infromation Updated {new Date(company.lastUpdated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</span>
+                    </>
+                  )}
+                </div>
+              {/* Links */}
+                <div className="flex flex-wrap gap-3">
+                  <a
+                    href={`https://${company.website}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 text-[#d0006f] hover:text-pink-400 font-medium transition-colors"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                    Visit Website
+                  </a>
+                  {company.companyLinkedin && (
+                    <a
+                      href={company.companyLinkedin}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 text-[#d0006f] hover:text-pink-400 font-medium transition-colors"
+                    >
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                      </svg>
+                      Visit LinkedIn
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="mb-6">
+              <h2 className="text-lg font-semibold text-white mb-3">About</h2>
+              <p className="text-gray-300 leading-relaxed">{company.description}</p>
+            </div>
+
+                        {/* Supporting Programs */}
+            {company.supportingPrograms && (
+              <div className="mb-6">
+                <h2 className="text-lg font-semibold text-white mb-4">Programs</h2>
+                <div className="flex flex-wrap gap-2">
+                  {company.supportingPrograms.split(',').filter(p => p.trim()).map((program, idx) => (
+                    <span
+                      key={idx}
+                      className="px-3 py-1.5 text-sm bg-white/5 text-gray-300 rounded-lg"
+                    >
+                      {program.trim()}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {/* Company Info */}
+            <div className="mb-6">
+              <h2 className="text-lg font-semibold text-white mb-3">Company Info</h2>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <div className="bg-white/5 rounded-lg p-3 border border-white/10">
+                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Founded</p>
+                  <p className="text-base font-semibold text-white">{company.foundingYear}</p>
+                </div>
+              </div>
+            </div>
+
+
+            {/* Founders */}
+            {company.founders.length > 0 && (
+              <div className="mb-1 pb-1">
+                <h2 className="text-lg font-semibold text-white mb-4">
+                  {company.founders.length > 1 ? 'Founders' : 'Founder'}
+                </h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {company.founders.map((founder, idx) => (
+                    <div key={idx} className="flex items-center gap-4 p-4 bg-white/5 rounded-lg">
+                      {founder.linkedinUrl ? (
+                        <a
+                          href={founder.linkedinUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex-shrink-0"
+                        >
+                          <img
+                            src={founder.imageUrl}
+                            alt={founder.name}
+                            className="w-16 h-16 rounded-full object-cover border-2 border-white/20 hover:border-[#d0006f] transition-all"
+                          />
+                        </a>
+                      ) : (
+                        <img
+                          src={founder.imageUrl}
+                          alt={founder.name}
+                          className="w-16 h-16 rounded-full object-cover border-2 border-white/20"
+                        />
+                      )}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-base font-semibold text-white mb-1">
+                          {founder.name}
+                          {founder.batch && (
+                            <span className="ml-2 font-normal text-gray-500">
+                              (Batch: {founder.batch})
+                            </span>
+                          )}
+                        </p>
+                        <p className="text-sm text-gray-400 mb-1">{founder.role}</p>
+                      </div>
+                      {founder.linkedinUrl && (
+                        <a
+                          href={founder.linkedinUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-[#d0006f] hover:text-pink-400 transition-colors"
+                        >
+                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                          </svg>
+                        </a>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+
+            {/* Footer Links */}
+            {/* <div className="flex flex-wrap gap-4 pt-6 border-t border-white/10">
+              <a
+                href={`https://${company.website}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-1 min-w-[200px] flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-semibold rounded-xl transition-all hover:scale-105"
+              >
+                Visit Website
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+              {company.companyLinkedin && (
+                <a
+                  href={company.companyLinkedin}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2 px-6 py-3 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl transition-all"
+                >
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                  </svg>
+                  LinkedIn
+                </a>
+              )}
+            </div> */}
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
\ No newline at end of file
diff --git a/app/startup-details/[id]/page.tsx b/app/startup-details/[id]/page.tsx
index bcf08e1..78c3be0 100644
--- a/app/startup-details/[id]/page.tsx
+++ b/app/startup-details/[id]/page.tsx
@@ -1,263 +1,54 @@
-"use client"
+import type { Metadata } from 'next'
+import StartupDetailsContent from './StartupDetailsContent'
 
-import { useState, useEffect, use } from "react"
-import Link from "next/link"
-import { notFound, useRouter } from "next/navigation"
-import type { Company } from "@/lib/types"
+const NOCODB_API_TOKEN = process.env.NOCODB_API_TOKEN
+const NOCODB_BASE_URL = process.env.NOCODB_BASE_URL || 'https://ndb.startmunich.de'
+const NOCODB_STARTUPS_TABLE_ID = process.env.NOCODB_STARTUPS_TABLE_ID
 
-// Fetch companies from API
-async function fetchCompanies(): Promise<Company[]> {
-  try {
-    const response = await fetch('/api/startups');
-    if (!response.ok) throw new Error('Failed to fetch startups');
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching startups:', error);
-    return [];
-  }
-}
-
-export default function StartupDetailsPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = use(params)
-  const router = useRouter()
-  const [company, setCompany] = useState<Company | null>(null)
-  const [loading, setLoading] = useState(true)
+export async function generateMetadata(
+  { params }: { params: Promise<{ id: string }> }
+): Promise<Metadata> {
+  const { id } = await params
 
-  useEffect(() => {
-    const loadCompany = async () => {
-      setLoading(true)
-      const companies = await fetchCompanies()
-      const foundCompany = companies.find(c => c.id.toString() === id)
-      
-      if (!foundCompany) {
-        notFound()
-        return
+  try {
+    if (NOCODB_API_TOKEN && NOCODB_STARTUPS_TABLE_ID) {
+      const res = await fetch(
+        `${NOCODB_BASE_URL}/api/v2/tables/${NOCODB_STARTUPS_TABLE_ID}/records?where=(Id,eq,${id})&limit=1`,
+        {
+          headers: { 'xc-token': NOCODB_API_TOKEN },
+          next: { revalidate: 3600 },
+        }
+      )
+      if (res.ok) {
+        const data = await res.json()
+        const startup = data?.list?.[0]
+        if (startup) {
+          const name = startup['Startup Name'] || 'Startup'
+          const description = startup['Description'] || `Learn about ${name}, a startup founded by START Munich alumni.`
+          return {
+            title: name,
+            description,
+            alternates: { canonical: `https://www.startmunich.de/startup-details/${id}` },
+            openGraph: {
+              url: `https://www.startmunich.de/startup-details/${id}`,
+              title: `${name} | START Munich`,
+              description,
+            },
+          }
+        }
       }
-      
-      setCompany(foundCompany)
-      setLoading(false)
     }
-    loadCompany()
-  }, [id])
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-[#00002c] py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <p className="text-2xl font-bold text-white">Loading startup details...</p>
-        </div>
-      </main>
-    )
+  } catch {
+    // fall through to default
   }
 
-  if (!company) {
-    return notFound()
+  return {
+    title: 'Startup',
+    description: 'A startup founded by START Munich alumni.',
+    alternates: { canonical: `https://www.startmunich.de/startup-details/${id}` },
   }
+}
 
-  return (
-    <main className="min-h-screen bg-[#00002c]">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Company Details */}
-        <div className="bg-[#00002c] border border-white/20 rounded-2xl max-w-4xl mx-auto relative">
-          {/* Close Button */}
-          <button
-            onClick={() => router.back()}
-            className="absolute top-4 right-4 z-10 w-10 h-10 flex items-center justify-center bg-white/10 hover:bg-white/20 rounded-full transition-all"
-          >
-            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-
-          <div className="p-8">
-            {/* Header with Logo */}
-            <div className="flex flex-col md:flex-row gap-6 mb-6">
-              <div className="flex-shrink-0 bg-white rounded-lg p-6 w-full md:w-48 h-48 flex items-center justify-center border-2 border-white/20 hover:border-[#d0006f] transition-all">
-                <img
-                  src={company.logoUrl}
-                  alt={`${company.name} logo`}
-                  className="max-w-full max-h-full w-auto h-auto object-contain"
-                />
-              </div>
-              
-              <div className="flex-1">
-                <h1 className="text-5xl font-bold text-white mb-3 h1-small">{company.name}</h1>
-                
-                {/* Categories */}
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {company.category.map((cat, idx) => (
-                    <span
-                      key={idx}
-                      className="inline-flex items-center px-3 py-1 text-xs font-medium bg-[#d0006f]/20 text-[#d0006f] border border-[#d0006f]/40 rounded-full"
-                    >
-                      {cat}
-                    </span>
-                  ))}
-                </div>
-
-                {/* Quick Info */}
-                <div className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-gray-400 mb-4">
-
-                  {company.lastUpdated && (
-                    <>
-                      <span>Infromation Updated {new Date(company.lastUpdated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</span>
-                    </>
-                  )}
-                </div>
-              {/* Links */}
-                <div className="flex flex-wrap gap-3">
-                  <a
-                    href={`https://${company.website}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 text-[#d0006f] hover:text-pink-400 font-medium transition-colors"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                    </svg>
-                    Visit Website
-                  </a>
-                  {company.companyLinkedin && (
-                    <a
-                      href={company.companyLinkedin}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center gap-2 text-[#d0006f] hover:text-pink-400 font-medium transition-colors"
-                    >
-                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
-                      </svg>
-                      Visit LinkedIn
-                    </a>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Description */}
-            <div className="mb-6">
-              <h2 className="text-lg font-semibold text-white mb-3">About</h2>
-              <p className="text-gray-300 leading-relaxed">{company.description}</p>
-            </div>
-
-                        {/* Supporting Programs */}
-            {company.supportingPrograms && (
-              <div className="mb-6">
-                <h2 className="text-lg font-semibold text-white mb-4">Programs</h2>
-                <div className="flex flex-wrap gap-2">
-                  {company.supportingPrograms.split(',').filter(p => p.trim()).map((program, idx) => (
-                    <span
-                      key={idx}
-                      className="px-3 py-1.5 text-sm bg-white/5 text-gray-300 rounded-lg"
-                    >
-                      {program.trim()}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-            
-            {/* Company Info */}
-            <div className="mb-6">
-              <h2 className="text-lg font-semibold text-white mb-3">Company Info</h2>
-              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-                <div className="bg-white/5 rounded-lg p-3 border border-white/10">
-                  <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Founded</p>
-                  <p className="text-base font-semibold text-white">{company.foundingYear}</p>
-                </div>
-              </div>
-            </div>
-
-
-            {/* Founders */}
-            {company.founders.length > 0 && (
-              <div className="mb-1 pb-1">
-                <h2 className="text-lg font-semibold text-white mb-4">
-                  {company.founders.length > 1 ? 'Founders' : 'Founder'}
-                </h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {company.founders.map((founder, idx) => (
-                    <div key={idx} className="flex items-center gap-4 p-4 bg-white/5 rounded-lg">
-                      {founder.linkedinUrl ? (
-                        <a
-                          href={founder.linkedinUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="flex-shrink-0"
-                        >
-                          <img
-                            src={founder.imageUrl}
-                            alt={founder.name}
-                            className="w-16 h-16 rounded-full object-cover border-2 border-white/20 hover:border-[#d0006f] transition-all"
-                          />
-                        </a>
-                      ) : (
-                        <img
-                          src={founder.imageUrl}
-                          alt={founder.name}
-                          className="w-16 h-16 rounded-full object-cover border-2 border-white/20"
-                        />
-                      )}
-                      <div className="flex-1 min-w-0">
-                        <p className="text-base font-semibold text-white mb-1">
-                          {founder.name}
-                          {founder.batch && (
-                            <span className="ml-2 font-normal text-gray-500">
-                              (Batch: {founder.batch})
-                            </span>
-                          )}
-                        </p>
-                        <p className="text-sm text-gray-400 mb-1">{founder.role}</p>
-                      </div>
-                      {founder.linkedinUrl && (
-                        <a
-                          href={founder.linkedinUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-[#d0006f] hover:text-pink-400 transition-colors"
-                        >
-                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
-                          </svg>
-                        </a>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-
-            {/* Footer Links */}
-            {/* <div className="flex flex-wrap gap-4 pt-6 border-t border-white/10">
-              <a
-                href={`https://${company.website}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex-1 min-w-[200px] flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-semibold rounded-xl transition-all hover:scale-105"
-              >
-                Visit Website
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                </svg>
-              </a>
-              {company.companyLinkedin && (
-                <a
-                  href={company.companyLinkedin}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center justify-center gap-2 px-6 py-3 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl transition-all"
-                >
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
-                  </svg>
-                  LinkedIn
-                </a>
-              )}
-            </div> */}
-          </div>
-        </div>
-      </div>
-    </main>
-  )
-}
\ No newline at end of file
+export default function StartupDetailsPage({ params }: { params: Promise<{ id: string }> }) {
+  return <StartupDetailsContent params={params} />
+}
diff --git a/components/StartupCard.tsx b/app/startups/StartupCard.tsx
similarity index 100%
rename from components/StartupCard.tsx
rename to app/startups/StartupCard.tsx
diff --git a/app/startups/StartupsContent.tsx b/app/startups/StartupsContent.tsx
new file mode 100644
index 0000000..048f3fc
--- /dev/null
+++ b/app/startups/StartupsContent.tsx
@@ -0,0 +1,668 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import type { Company } from "@/lib/types"
+import StartupCard from "./StartupCard"
+import Hero from "@/components/Hero"
+import HeroCard from "@/components/HeroCard"
+import CTA from "@/components/CTA"
+import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
+
+export const dynamic = 'force-dynamic'
+import Image from "next/image"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import Script from "next/script"
+
+// Fetch companies from API
+async function fetchCompanies(): Promise<Company[]> {
+  try {
+    // Use absolute URL in production, relative in development
+    const baseUrl = typeof window !== 'undefined'
+      ? window.location.origin
+      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+
+    const response = await fetch(`${baseUrl}/api/startups`, {
+      cache: 'no-store', // Ensure fresh data
+    });
+
+    if (!response.ok) {
+      console.error(`API error: ${response.status} ${response.statusText}`);
+      throw new Error('Failed to fetch startups');
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching startups:', error);
+    return [];
+  }
+}
+
+// Helper function to get preview text (first 30 words)
+function getPreviewText(text: string): string {
+  if (!text) return '';
+
+  const words = text.split(/\s+/);
+  const maxWords = 30;
+
+  if (words.length <= maxWords) {
+    return text;
+  }
+
+  return words.slice(0, maxWords).join(' ') + '...';
+}
+
+export default function StartupsPage() {
+  const [companies, setCompanies] = useState<Company[]>([])
+  const [loading, setLoading] = useState(true)
+  const [selectedCategory, setSelectedCategory] = useState<string>("all")
+  const [selectedYear, setSelectedYear] = useState<string>("all")
+  const [selectedProgram, setSelectedProgram] = useState<string>("all")
+  const [searchQuery, setSearchQuery] = useState<string>("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 12 // Reduced to approximate 3000px height (about 5-6 cards)
+
+  // Tooltip states for section explanations
+  const [showFeaturedInfo, setShowFeaturedInfo] = useState(false)
+  const [showYCInfo, setShowYCInfo] = useState(false)
+  const [showEWORInfo, setShowEWORInfo] = useState(false)
+
+  // Load companies on mount
+  useEffect(() => {
+    const loadCompanies = async () => {
+      setLoading(true)
+      const data = await fetchCompanies()
+      setCompanies(data)
+      setLoading(false)
+
+      // Restore scroll position after returning from startup detail
+      const savedScroll = sessionStorage.getItem('startups-scroll')
+      if (savedScroll) {
+        requestAnimationFrame(() => {
+          window.scrollTo(0, parseInt(savedScroll))
+          sessionStorage.removeItem('startups-scroll')
+        })
+      }
+    }
+    loadCompanies()
+  }, [])
+
+  // Extract unique categories
+  const allCategories = Array.from(
+    new Set(
+      companies.flatMap(company => company.category)
+    )
+  ).sort()
+
+  // Extract unique founding years
+  const allYears = Array.from(
+    new Set(
+      companies.map(company => company.foundingYear.toString())
+    )
+  ).sort()
+
+  // Extract unique supporting programs
+  const allPrograms = Array.from(
+    new Set(
+      companies
+        .map(company => company.supportingPrograms)
+        .filter((program): program is string => program !== undefined && program.trim() !== '')
+        .flatMap(program => program.split(',').map(p => p.trim()))
+    )
+  ).sort()
+
+  // Filter companies based on all selected filters
+  const filteredCompanies = companies
+    .filter(company => {
+      const matchesCategory = selectedCategory === "all" ||
+        company.category.some(cat => cat.toLowerCase().includes(selectedCategory.toLowerCase()))
+
+      const matchesYear = selectedYear === "all" ||
+        company.foundingYear.toString() === selectedYear
+
+      const matchesProgram = selectedProgram === "all" ||
+        (company.supportingPrograms &&
+          company.supportingPrograms.split(',').some(program =>
+            program.trim().toLowerCase().includes(selectedProgram.toLowerCase())
+          ))
+
+      const matchesSearch = searchQuery === "" ||
+        company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        company.founders.some(founder => founder.name.toLowerCase().includes(searchQuery.toLowerCase()))
+
+      return matchesCategory && matchesYear && matchesProgram && matchesSearch
+    })
+
+  // Pagination calculations
+  const totalPages = Math.ceil(filteredCompanies.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const paginatedCompanies = filteredCompanies.slice(startIndex, endIndex)
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [selectedCategory, selectedYear, selectedProgram, searchQuery])
+
+  // Calculate total statistics
+  const totalStartups = companies.length
+
+  // Get spotlight startups (show all featured startups)
+  const spotlightStartups = companies.filter(company => company.isSpotlight)
+
+  // Get Y Combinator startups (show all YC alumni)
+  const yCombinatorStartups = companies.filter(company => company.isYCombinator)
+
+  // Get EWOR startups
+  const eworStartups = companies.filter(company => company.isEWOR)
+
+  // Use animated number hook for statistics - hardcoded 3B+ funding
+  const animatedStartups = useAnimatedNumber(totalStartups, loading)
+  const animatedFunding = useAnimatedNumber(3, loading)
+
+  if (loading) {
+    return (
+      <main className="min-h-screen bg-white py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-2xl font-bold text-[#00002c]">Loading startups...</p>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <>
+      <Script id="iframe-height-sender" strategy="afterInteractive">
+        {`
+          function sendHeight() {
+            const h = Math.max(
+              document.documentElement.scrollHeight,
+              document.body.scrollHeight
+            );
+            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
+          }
+
+          // initial + on changes
+          window.addEventListener("load", sendHeight);
+          const ro = new ResizeObserver(sendHeight);
+          ro.observe(document.documentElement);
+          document.addEventListener("DOMContentLoaded", sendHeight);
+        `}
+      </Script>
+
+      <main className="min-h-screen bg-[#00002c] overflow-x-hidden">
+        {/* Hero Section with Full-Width Image */}
+        <Hero
+          backgroundImage="/ourStartups/hero-opt.jpg"
+          title={
+            <>
+              START MUNICH
+              <br />
+              <span className="outline-text">STARTUPS</span>
+            </>
+          }
+          description="Discover the innovative companies built by our community of ambitious student entrepreneurs"
+        >
+          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
+          {/** Stat 1 **/}
+          <HeroCard>
+            <div className="flex items-baseline justify-center gap-2 mb-3">
+              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                {Math.floor(animatedStartups)}
+              </span>
+              <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
+            </div>
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Companies</p>
+          </HeroCard>
+
+          {/** Stat 2 **/}
+          <HeroCard>
+            <div className="flex items-baseline justify-center gap-1 mb-3">
+              <span className="text-lg lg:text-2xl font-bold text-[#d0006f]">€</span>
+              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
+                {Math.floor(animatedFunding)}
+              </span>
+              <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">B+</span>
+            </div>
+            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Funding</p>
+          </HeroCard>
+          </div>
+        </Hero>
+
+
+        {/* Content Below Hero */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-20">
+
+          {/* Growth Champions Section */}
+          {spotlightStartups.length > 0 && (
+            <div className="mb-16">
+              <div className="mb-10">
+                <div className="flex items-center gap-3">
+                  <h2 className="text-3xl md:text-4xl font-black text-white">
+                    Featured Startups
+                  </h2>
+                  <div className="relative" onMouseEnter={() => setShowFeaturedInfo(true)} onMouseLeave={() => setShowFeaturedInfo(false)}>
+                    <button
+                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
+                      aria-label="Info about Featured Startups"
+                    >
+                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                    {showFeaturedInfo && (
+                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
+                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
+                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
+                        <div className="relative">
+                          <div className="flex items-center gap-2 mb-3">
+                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
+                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">Featured Startups</h4>
+                          </div>
+                          <p className="text-sm text-gray-300 leading-relaxed">
+                            These startups are super successful and have achieved a valuation of over €10 million, showcasing exceptional growth and market impact.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {spotlightStartups.map((company, index) => (
+                  <StartupCard
+                    key={company.id}
+                    id={company.id}
+                    name={company.name}
+                    logoUrl={company.logoUrl}
+                    summary={company.summary}
+                    isMTZ={company.isMTZ}
+                    accentColor="bg-blue-300/20"
+                    badge={{
+                      text: "★",
+                      color: "text-yellow-400",
+                      bgColor: "bg-yellow-500/20"
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* MTZ Location Partner Info Card */}
+          <div className="mb-16 relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20">
+            {/* Decorative Elements */}
+            <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
+
+            <div className="relative p-8 md:p-10">
+              <div className="flex flex-col lg:flex-row gap-8 items-start">
+                {/* Left Side - Content */}
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="p-2 bg-[#d0006f]/20 rounded-lg">
+                      <svg className="w-6 h-6 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    </div>
+                    <h3 className="text-2xl md:text-3xl font-bold text-white">
+                      Our Location Partner: MTZ
+                    </h3>
+                  </div>
+
+                  <div className="space-y-4">
+                    <p className="text-gray-300 leading-relaxed">
+                      Startups with the <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold bg-[#d0006f] text-white rounded mx-1">MTZ</span> label are located at our location partner, the <strong className="text-white">MTZ (Münchner Technologiezentrum)</strong>, one of Munich's leading innovation hubs. START Munich is also located at the MTZ, fostering a vibrant community of entrepreneurs and innovators.
+                    </p>
+
+                    <div className="flex flex-col gap-2 text-sm text-gray-400">
+                      <div className="flex items-center gap-2">
+                        <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                        </svg>
+                        <span>Agnes-Pockels-Bogen 1, 80992 München</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <span>Home to START Munich and innovative startups</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Side - Map */}
+                <div className="w-full lg:w-80 h-52 lg:h-64 rounded-xl overflow-hidden border-2 border-[#d0006f]/40 shadow-lg">
+                  <iframe
+                    width="100%"
+                    height="100%"
+                    frameBorder="0"
+                    scrolling="no"
+                    marginHeight={0}
+                    marginWidth={0}
+                    src="https://www.openstreetmap.org/export/embed.html?bbox=11.5397%2C48.1925%2C11.5497%2C48.1975&layer=mapnik&marker=48.1950%2C11.5447"
+                    style={{ border: 0 }}
+                  ></iframe>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Y Combinator Section */}
+          {yCombinatorStartups.length > 0 && (
+            <div className="mb-16">
+              <div className="mb-10">
+                <div className="flex items-center gap-3">
+                  <h2 className="text-3xl md:text-4xl font-black text-white">
+                    Y Combinator Alumni
+                  </h2>
+                  <div className="relative" onMouseEnter={() => setShowYCInfo(true)} onMouseLeave={() => setShowYCInfo(false)}>
+                    <button
+                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
+                      aria-label="Info about Y Combinator"
+                    >
+                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                    {showYCInfo && (
+                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
+                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
+                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
+                        <div className="relative">
+                          <div className="flex items-center gap-2 mb-3">
+                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
+                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">Y Combinator</h4>
+                          </div>
+                          <p className="text-sm text-gray-300 leading-relaxed">
+                            Y Combinator is the world's most prestigious startup accelerator, having funded over 4,000 companies including Airbnb, Dropbox, Stripe, and Reddit. These alumni have gone through YC's intensive 3-month program.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {yCombinatorStartups.map((company, index) => (
+                  <StartupCard
+                    key={company.id}
+                    id={company.id}
+                    name={company.name}
+                    logoUrl={company.logoUrl}
+                    summary={company.summary}
+                    isMTZ={company.isMTZ}
+                    accentColor="bg-blue-300/20"
+                    badge={{
+                      text: "YC",
+                      color: "text-orange-400",
+                      bgColor: "bg-orange-500/20"
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* EWOR Section */}
+          {eworStartups.length > 0 && (
+            <div className="mb-16">
+              <div className="mb-10">
+                <div className="flex items-center gap-3">
+                  <h2 className="text-3xl md:text-4xl font-black text-white">
+                    EWOR Alumni
+                  </h2>
+                  <div className="relative" onMouseEnter={() => setShowEWORInfo(true)} onMouseLeave={() => setShowEWORInfo(false)}>
+                    <button
+                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
+                      aria-label="Info about EWOR"
+                    >
+                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                    {showEWORInfo && (
+                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
+                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
+                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
+                        <div className="relative">
+                          <div className="flex items-center gap-2 mb-3">
+                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
+                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">EWOR</h4>
+                          </div>
+                          <p className="text-sm text-gray-300 leading-relaxed">
+                            EWOR is a global fellowship program that supports ambitious founders by providing funding, mentorship, and a community of exceptional entrepreneurs building the next generation of impactful companies.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {eworStartups.map((company, index) => (
+                  <StartupCard
+                    key={company.id}
+                    id={company.id}
+                    name={company.name}
+                    logoUrl={company.logoUrl}
+                    summary={company.summary}
+                    isMTZ={company.isMTZ}
+                    accentColor="bg-blue-300/20"
+                    badge={{
+                      text: "EWOR",
+                      color: "text-blue-400",
+                      bgColor: "bg-blue-500/20"
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Join Our Startups - Innovative CTA Section */}
+          <div className="mb-16 relative">
+            <div className="relative overflow-hidden rounded-2xl  border-2 border-[#d0006f]">
+
+              <div className="relative bg-[#00002c] rounded-xl p-8 md:p-12">
+                {/* Floating animated orbs */}
+                <div className="absolute top-10 right-10 w-32 h-32 bg-[#d0006f]/30 rounded-full blur-3xl animate-blob"></div>
+                <div className="absolute bottom-10 left-10 w-40 h-40 bg-[#d0006f]/20 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
+
+                <div className="relative flex flex-col md:flex-row items-center justify-between gap-8">
+                  {/* Left Side - Content */}
+                  <div className="flex-1 text-center md:text-left">
+                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-[#d0006f]/20 border border-[#d0006f]/40 rounded-full mb-4">
+                      <span className="text-[#d0006f] font-bold text-xs tracking-widest uppercase">We're Hiring</span>
+                    </div>
+
+                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight">
+                      Join the{" "}
+                      <span className="text-[#d0006f]">
+                        Next Big Thing
+                      </span>
+                    </h2>
+
+                    <p className="text-lg text-gray-300 mb-6 max-w-2xl leading-relaxed">
+                      Our startups are looking for talented individuals to join their teams.
+                      Explore open positions and be part of building innovative products that matter.
+                    </p>
+                  </div>
+
+                  {/* Right Side - CTA Button */}
+                  <div className="flex-shrink-0">
+                    <a
+                      href="https://jobs.startmunich.de"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-bold text-lg rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-[#d0006f]/50 overflow-hidden"
+                    >
+                      <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700"></span>
+                      <span className="relative">Explore Jobs</span>
+                      <svg className="relative w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Filter Section */}
+          <div className="mb-12 p-6 bg-white/5 border border-white/10 rounded-lg">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {/* Category Filter */}
+              <div>
+                <label htmlFor="category-filter" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
+                  Category
+                </label>
+                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                  <SelectTrigger className="w-full bg-white/5 border-white/20 text-white focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all">
+                    <SelectValue placeholder="Select category" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Categories</SelectItem>
+                    {allCategories.map((category) => (
+                      <SelectItem key={category} value={category}>
+                        {category}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Founding Year Filter */}
+              <div>
+                <label htmlFor="year-filter" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
+                  Founded
+                </label>
+                <Select value={selectedYear} onValueChange={setSelectedYear}>
+                  <SelectTrigger className="w-full bg-white/5 border-white/20 text-white focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all">
+                    <SelectValue placeholder="Select year" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Years</SelectItem>
+                    {allYears.map((year) => (
+                      <SelectItem key={year} value={year}>
+                        {year}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* Search Bar and Clear Filters */}
+            <div className="mt-4 grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4">
+              <div>
+                <label htmlFor="search-input" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
+                  Search by Name or Founder
+                </label>
+                <input
+                  id="search-input"
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Type startup or founder name..."
+                  className="w-full px-4 py-2.5 bg-white/5 border border-white/20 text-white placeholder-gray-500 focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all rounded focus:outline-none"
+                />
+              </div>
+              <div className="flex items-end">
+                <button
+                  onClick={() => {
+                    setSelectedCategory("all")
+                    setSelectedYear("all")
+                    setSelectedProgram("all")
+                    setSearchQuery("")
+                  }}
+                  className="w-full lg:w-auto px-6 py-2.5 text-sm font-medium text-white bg-white/10 hover:bg-white/20 transition-all rounded border border-white/20 hover:border-white/30 whitespace-nowrap"
+                >
+                  Clear Filters
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Company List - Grid Layout */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {paginatedCompanies.map((company) => (
+              <StartupCard
+                key={company.id}
+                id={company.id}
+                name={company.name}
+                logoUrl={company.logoUrl}
+                summary={company.summary}
+                category={company.category}
+                foundingYear={company.foundingYear}
+                founders={company.founders}
+                isMTZ={company.isMTZ}
+                showDetails={true}
+              />
+            ))}
+          </div>
+
+          {filteredCompanies.length === 0 && (
+            <div className="text-center py-20">
+              <div className="inline-block p-12 bg-white/5 border border-white/20 rounded-lg">
+                <p className="text-xl font-semibold text-white mb-2">No Results Found</p>
+                <p className="text-gray-400 text-sm">Try adjusting your filters to see more startups</p>
+              </div>
+            </div>
+          )}
+
+          {/* Pagination Controls */}
+          {filteredCompanies.length > 0 && totalPages > 1 && (
+            <div className="flex justify-center items-center gap-4 mt-12">
+              <button
+                onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
+                disabled={currentPage === 1}
+                className="px-6 py-2 text-sm font-medium text-white bg-white/10 hover:bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all rounded border border-white/20"
+              >
+                ← Previous
+              </button>
+
+              <div className="flex items-center gap-2">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                  <button
+                    key={page}
+                    onClick={() => setCurrentPage(page)}
+                    className={`w-10 h-10 text-sm font-medium rounded transition-all ${currentPage === page
+                      ? 'bg-white text-[#00002c]'
+                      : 'bg-white/10 text-white hover:bg-white/20 border border-white/20'
+                      }`}
+                  >
+                    {page}
+                  </button>
+                ))}
+              </div>
+
+              <button
+                onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
+                disabled={currentPage === totalPages}
+                className="px-6 py-2 text-sm font-medium text-white bg-white/10 hover:bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all rounded border border-white/20"
+              >
+                Next →
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Footer CTA Section */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pb-16">
+          <CTA
+            title="Want to Start Your Own Journey?"
+            description={<>Join START Munich and get the support, network, and resources you need to turn your idea into reality. Our community has helped launch {companies.length}+ startups — yours could be next.</>}
+            buttons={[
+              { label: "Discover the Member Journey", href: "/member-journey" },
+              { label: "Apply Now", href: "/join-start/2026", variant: "secondary" }
+            ]}
+          />
+        </div>
+      </main>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/app/startups/page.tsx b/app/startups/page.tsx
index 4f0868d..a2dff00 100644
--- a/app/startups/page.tsx
+++ b/app/startups/page.tsx
@@ -1,668 +1,21 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import Link from "next/link"
-import type { Company } from "@/lib/types"
-import StartupCard from "@/components/StartupCard"
-import Hero from "@/components/Hero"
-import HeroCard from "@/components/HeroCard"
-import CTA from "@/components/CTA"
-import { useAnimatedNumber } from "@/lib/useAnimatedNumber"
+import type { Metadata } from 'next'
+import StartupsContent from './StartupsContent'
 
 export const dynamic = 'force-dynamic'
-import Image from "next/image"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import Script from "next/script"
-
-// Fetch companies from API
-async function fetchCompanies(): Promise<Company[]> {
-  try {
-    // Use absolute URL in production, relative in development
-    const baseUrl = typeof window !== 'undefined'
-      ? window.location.origin
-      : process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
-
-    const response = await fetch(`${baseUrl}/api/startups`, {
-      cache: 'no-store', // Ensure fresh data
-    });
-
-    if (!response.ok) {
-      console.error(`API error: ${response.status} ${response.statusText}`);
-      throw new Error('Failed to fetch startups');
-    }
 
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching startups:', error);
-    return [];
-  }
-}
-
-// Helper function to get preview text (first 30 words)
-function getPreviewText(text: string): string {
-  if (!text) return '';
-
-  const words = text.split(/\s+/);
-  const maxWords = 30;
-
-  if (words.length <= maxWords) {
-    return text;
-  }
-
-  return words.slice(0, maxWords).join(' ') + '...';
+export const metadata: Metadata = {
+  title: 'Startups',
+  description:
+    'Explore startups founded by START Munich alumni — from Y Combinator companies to cutting-edge deep tech. Discover the next generation of Munich founders.',
+  alternates: { canonical: 'https://www.startmunich.de/startups' },
+  openGraph: {
+    url: 'https://www.startmunich.de/startups',
+    title: 'Startups | START Munich',
+    description:
+      'Explore startups founded by START Munich alumni — from Y Combinator companies to cutting-edge deep tech. Discover the next generation of Munich founders.',
+  },
 }
 
 export default function StartupsPage() {
-  const [companies, setCompanies] = useState<Company[]>([])
-  const [loading, setLoading] = useState(true)
-  const [selectedCategory, setSelectedCategory] = useState<string>("all")
-  const [selectedYear, setSelectedYear] = useState<string>("all")
-  const [selectedProgram, setSelectedProgram] = useState<string>("all")
-  const [searchQuery, setSearchQuery] = useState<string>("")
-  const [currentPage, setCurrentPage] = useState(1)
-  const itemsPerPage = 12 // Reduced to approximate 3000px height (about 5-6 cards)
-
-  // Tooltip states for section explanations
-  const [showFeaturedInfo, setShowFeaturedInfo] = useState(false)
-  const [showYCInfo, setShowYCInfo] = useState(false)
-  const [showEWORInfo, setShowEWORInfo] = useState(false)
-
-  // Load companies on mount
-  useEffect(() => {
-    const loadCompanies = async () => {
-      setLoading(true)
-      const data = await fetchCompanies()
-      setCompanies(data)
-      setLoading(false)
-
-      // Restore scroll position after returning from startup detail
-      const savedScroll = sessionStorage.getItem('startups-scroll')
-      if (savedScroll) {
-        requestAnimationFrame(() => {
-          window.scrollTo(0, parseInt(savedScroll))
-          sessionStorage.removeItem('startups-scroll')
-        })
-      }
-    }
-    loadCompanies()
-  }, [])
-
-  // Extract unique categories
-  const allCategories = Array.from(
-    new Set(
-      companies.flatMap(company => company.category)
-    )
-  ).sort()
-
-  // Extract unique founding years
-  const allYears = Array.from(
-    new Set(
-      companies.map(company => company.foundingYear.toString())
-    )
-  ).sort()
-
-  // Extract unique supporting programs
-  const allPrograms = Array.from(
-    new Set(
-      companies
-        .map(company => company.supportingPrograms)
-        .filter((program): program is string => program !== undefined && program.trim() !== '')
-        .flatMap(program => program.split(',').map(p => p.trim()))
-    )
-  ).sort()
-
-  // Filter companies based on all selected filters
-  const filteredCompanies = companies
-    .filter(company => {
-      const matchesCategory = selectedCategory === "all" ||
-        company.category.some(cat => cat.toLowerCase().includes(selectedCategory.toLowerCase()))
-
-      const matchesYear = selectedYear === "all" ||
-        company.foundingYear.toString() === selectedYear
-
-      const matchesProgram = selectedProgram === "all" ||
-        (company.supportingPrograms &&
-          company.supportingPrograms.split(',').some(program =>
-            program.trim().toLowerCase().includes(selectedProgram.toLowerCase())
-          ))
-
-      const matchesSearch = searchQuery === "" ||
-        company.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        company.founders.some(founder => founder.name.toLowerCase().includes(searchQuery.toLowerCase()))
-
-      return matchesCategory && matchesYear && matchesProgram && matchesSearch
-    })
-
-  // Pagination calculations
-  const totalPages = Math.ceil(filteredCompanies.length / itemsPerPage)
-  const startIndex = (currentPage - 1) * itemsPerPage
-  const endIndex = startIndex + itemsPerPage
-  const paginatedCompanies = filteredCompanies.slice(startIndex, endIndex)
-
-  // Reset to page 1 when filters change
-  useEffect(() => {
-    setCurrentPage(1)
-  }, [selectedCategory, selectedYear, selectedProgram, searchQuery])
-
-  // Calculate total statistics
-  const totalStartups = companies.length
-
-  // Get spotlight startups (show all featured startups)
-  const spotlightStartups = companies.filter(company => company.isSpotlight)
-
-  // Get Y Combinator startups (show all YC alumni)
-  const yCombinatorStartups = companies.filter(company => company.isYCombinator)
-
-  // Get EWOR startups
-  const eworStartups = companies.filter(company => company.isEWOR)
-
-  // Use animated number hook for statistics - hardcoded 3B+ funding
-  const animatedStartups = useAnimatedNumber(totalStartups, loading)
-  const animatedFunding = useAnimatedNumber(3, loading)
-
-  if (loading) {
-    return (
-      <main className="min-h-screen bg-white py-12 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          <p className="text-2xl font-bold text-[#00002c]">Loading startups...</p>
-        </div>
-      </main>
-    )
-  }
-
-  return (
-    <>
-      <Script id="iframe-height-sender" strategy="afterInteractive">
-        {`
-          function sendHeight() {
-            const h = Math.max(
-              document.documentElement.scrollHeight,
-              document.body.scrollHeight
-            );
-            parent.postMessage({ type: "EMBED_HEIGHT", height: h }, "*");
-          }
-
-          // initial + on changes
-          window.addEventListener("load", sendHeight);
-          const ro = new ResizeObserver(sendHeight);
-          ro.observe(document.documentElement);
-          document.addEventListener("DOMContentLoaded", sendHeight);
-        `}
-      </Script>
-
-      <main className="min-h-screen bg-[#00002c] overflow-x-hidden">
-        {/* Hero Section with Full-Width Image */}
-        <Hero
-          backgroundImage="/ourStartups/hero-opt.jpg"
-          title={
-            <>
-              START MUNICH
-              <br />
-              <span className="outline-text">STARTUPS</span>
-            </>
-          }
-          description="Discover the innovative companies built by our community of ambitious student entrepreneurs"
-        >
-          <div className="grid grid-cols-2 lg:flex lg:flex-col gap-4 lg:gap-6">
-          {/** Stat 1 **/}
-          <HeroCard>
-            <div className="flex items-baseline justify-center gap-2 mb-3">
-              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                {Math.floor(animatedStartups)}
-              </span>
-              <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">+</span>
-            </div>
-            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Companies</p>
-          </HeroCard>
-
-          {/** Stat 2 **/}
-          <HeroCard>
-            <div className="flex items-baseline justify-center gap-1 mb-3">
-              <span className="text-lg lg:text-2xl font-bold text-[#d0006f]">€</span>
-              <span className="text-4xl lg:text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 transition">
-                {Math.floor(animatedFunding)}
-              </span>
-              <span className="text-xl lg:text-3xl font-bold text-[#d0006f]">B+</span>
-            </div>
-            <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Funding</p>
-          </HeroCard>
-          </div>
-        </Hero>
-
-
-        {/* Content Below Hero */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-20">
-
-          {/* Growth Champions Section */}
-          {spotlightStartups.length > 0 && (
-            <div className="mb-16">
-              <div className="mb-10">
-                <div className="flex items-center gap-3">
-                  <h2 className="text-3xl md:text-4xl font-black text-white">
-                    Featured Startups
-                  </h2>
-                  <div className="relative" onMouseEnter={() => setShowFeaturedInfo(true)} onMouseLeave={() => setShowFeaturedInfo(false)}>
-                    <button
-                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
-                      aria-label="Info about Featured Startups"
-                    >
-                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                    {showFeaturedInfo && (
-                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
-                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
-                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
-                        <div className="relative">
-                          <div className="flex items-center gap-2 mb-3">
-                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
-                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">Featured Startups</h4>
-                          </div>
-                          <p className="text-sm text-gray-300 leading-relaxed">
-                            These startups are super successful and have achieved a valuation of over €10 million, showcasing exceptional growth and market impact.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                {spotlightStartups.map((company, index) => (
-                  <StartupCard
-                    key={company.id}
-                    id={company.id}
-                    name={company.name}
-                    logoUrl={company.logoUrl}
-                    summary={company.summary}
-                    isMTZ={company.isMTZ}
-                    accentColor="bg-blue-300/20"
-                    badge={{
-                      text: "★",
-                      color: "text-yellow-400",
-                      bgColor: "bg-yellow-500/20"
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* MTZ Location Partner Info Card */}
-          <div className="mb-16 relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1a1a3e] via-[#00002c] to-[#0d0d1f] border-2 border-[#d0006f]/50 shadow-2xl shadow-[#d0006f]/20">
-            {/* Decorative Elements */}
-            <div className="absolute top-0 right-0 w-64 h-64 bg-[#d0006f]/10 rounded-full blur-3xl"></div>
-            <div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d0006f]/5 rounded-full blur-3xl"></div>
-
-            <div className="relative p-8 md:p-10">
-              <div className="flex flex-col lg:flex-row gap-8 items-start">
-                {/* Left Side - Content */}
-                <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="p-2 bg-[#d0006f]/20 rounded-lg">
-                      <svg className="w-6 h-6 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                      </svg>
-                    </div>
-                    <h3 className="text-2xl md:text-3xl font-bold text-white">
-                      Our Location Partner: MTZ
-                    </h3>
-                  </div>
-
-                  <div className="space-y-4">
-                    <p className="text-gray-300 leading-relaxed">
-                      Startups with the <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold bg-[#d0006f] text-white rounded mx-1">MTZ</span> label are located at our location partner, the <strong className="text-white">MTZ (Münchner Technologiezentrum)</strong>, one of Munich's leading innovation hubs. START Munich is also located at the MTZ, fostering a vibrant community of entrepreneurs and innovators.
-                    </p>
-
-                    <div className="flex flex-col gap-2 text-sm text-gray-400">
-                      <div className="flex items-center gap-2">
-                        <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        </svg>
-                        <span>Agnes-Pockels-Bogen 1, 80992 München</span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <svg className="w-4 h-4 text-[#d0006f]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
-                        <span>Home to START Munich and innovative startups</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Right Side - Map */}
-                <div className="w-full lg:w-80 h-52 lg:h-64 rounded-xl overflow-hidden border-2 border-[#d0006f]/40 shadow-lg">
-                  <iframe
-                    width="100%"
-                    height="100%"
-                    frameBorder="0"
-                    scrolling="no"
-                    marginHeight={0}
-                    marginWidth={0}
-                    src="https://www.openstreetmap.org/export/embed.html?bbox=11.5397%2C48.1925%2C11.5497%2C48.1975&layer=mapnik&marker=48.1950%2C11.5447"
-                    style={{ border: 0 }}
-                  ></iframe>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Y Combinator Section */}
-          {yCombinatorStartups.length > 0 && (
-            <div className="mb-16">
-              <div className="mb-10">
-                <div className="flex items-center gap-3">
-                  <h2 className="text-3xl md:text-4xl font-black text-white">
-                    Y Combinator Alumni
-                  </h2>
-                  <div className="relative" onMouseEnter={() => setShowYCInfo(true)} onMouseLeave={() => setShowYCInfo(false)}>
-                    <button
-                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
-                      aria-label="Info about Y Combinator"
-                    >
-                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                    {showYCInfo && (
-                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
-                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
-                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
-                        <div className="relative">
-                          <div className="flex items-center gap-2 mb-3">
-                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
-                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">Y Combinator</h4>
-                          </div>
-                          <p className="text-sm text-gray-300 leading-relaxed">
-                            Y Combinator is the world's most prestigious startup accelerator, having funded over 4,000 companies including Airbnb, Dropbox, Stripe, and Reddit. These alumni have gone through YC's intensive 3-month program.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                {yCombinatorStartups.map((company, index) => (
-                  <StartupCard
-                    key={company.id}
-                    id={company.id}
-                    name={company.name}
-                    logoUrl={company.logoUrl}
-                    summary={company.summary}
-                    isMTZ={company.isMTZ}
-                    accentColor="bg-blue-300/20"
-                    badge={{
-                      text: "YC",
-                      color: "text-orange-400",
-                      bgColor: "bg-orange-500/20"
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* EWOR Section */}
-          {eworStartups.length > 0 && (
-            <div className="mb-16">
-              <div className="mb-10">
-                <div className="flex items-center gap-3">
-                  <h2 className="text-3xl md:text-4xl font-black text-white">
-                    EWOR Alumni
-                  </h2>
-                  <div className="relative" onMouseEnter={() => setShowEWORInfo(true)} onMouseLeave={() => setShowEWORInfo(false)}>
-                    <button
-                      className="text-[#d0006f] hover:text-[#ff0080] transition-all duration-300 hover:scale-110 cursor-pointer"
-                      aria-label="Info about EWOR"
-                    >
-                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                    {showEWORInfo && (
-                      <div className="absolute right-0 sm:left-0 sm:right-auto top-full mt-3 w-72 sm:w-96 p-5 bg-gradient-to-br from-[#1a1a3e] to-[#0d0d1f] backdrop-blur-xl border-2 border-[#d0006f]/60 rounded-xl shadow-2xl shadow-[#d0006f]/20 z-50 animate-[fadeIn_0.2s_ease-out]">
-                        <div className="absolute -top-2 right-6 sm:left-6 sm:right-auto w-4 h-4 bg-[#1a1a3e] border-l-2 border-t-2 border-[#d0006f]/60 transform rotate-45"></div>
-                        <div className="absolute top-1 right-1 w-16 h-16 bg-[#d0006f]/10 rounded-full blur-2xl"></div>
-                        <div className="relative">
-                          <div className="flex items-center gap-2 mb-3">
-                            <div className="w-1.5 h-1.5 bg-[#d0006f] rounded-full animate-pulse"></div>
-                            <h4 className="text-sm font-bold text-[#d0006f] uppercase tracking-wide">EWOR</h4>
-                          </div>
-                          <p className="text-sm text-gray-300 leading-relaxed">
-                            EWOR is a global fellowship program that supports ambitious founders by providing funding, mentorship, and a community of exceptional entrepreneurs building the next generation of impactful companies.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                {eworStartups.map((company, index) => (
-                  <StartupCard
-                    key={company.id}
-                    id={company.id}
-                    name={company.name}
-                    logoUrl={company.logoUrl}
-                    summary={company.summary}
-                    isMTZ={company.isMTZ}
-                    accentColor="bg-blue-300/20"
-                    badge={{
-                      text: "EWOR",
-                      color: "text-blue-400",
-                      bgColor: "bg-blue-500/20"
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Join Our Startups - Innovative CTA Section */}
-          <div className="mb-16 relative">
-            <div className="relative overflow-hidden rounded-2xl  border-2 border-[#d0006f]">
-
-              <div className="relative bg-[#00002c] rounded-xl p-8 md:p-12">
-                {/* Floating animated orbs */}
-                <div className="absolute top-10 right-10 w-32 h-32 bg-[#d0006f]/30 rounded-full blur-3xl animate-blob"></div>
-                <div className="absolute bottom-10 left-10 w-40 h-40 bg-[#d0006f]/20 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
-
-                <div className="relative flex flex-col md:flex-row items-center justify-between gap-8">
-                  {/* Left Side - Content */}
-                  <div className="flex-1 text-center md:text-left">
-                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-[#d0006f]/20 border border-[#d0006f]/40 rounded-full mb-4">
-                      <span className="text-[#d0006f] font-bold text-xs tracking-widest uppercase">We're Hiring</span>
-                    </div>
-
-                    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight">
-                      Join the{" "}
-                      <span className="text-[#d0006f]">
-                        Next Big Thing
-                      </span>
-                    </h2>
-
-                    <p className="text-lg text-gray-300 mb-6 max-w-2xl leading-relaxed">
-                      Our startups are looking for talented individuals to join their teams.
-                      Explore open positions and be part of building innovative products that matter.
-                    </p>
-                  </div>
-
-                  {/* Right Side - CTA Button */}
-                  <div className="flex-shrink-0">
-                    <a
-                      href="https://jobs.startmunich.de"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="group relative inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[#d0006f] to-pink-600 hover:from-[#d0006f] hover:to-[#d0006f] text-white font-bold text-lg rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-[#d0006f]/50 overflow-hidden"
-                    >
-                      <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700"></span>
-                      <span className="relative">Explore Jobs</span>
-                      <svg className="relative w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                      </svg>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Filter Section */}
-          <div className="mb-12 p-6 bg-white/5 border border-white/10 rounded-lg">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {/* Category Filter */}
-              <div>
-                <label htmlFor="category-filter" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
-                  Category
-                </label>
-                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
-                  <SelectTrigger className="w-full bg-white/5 border-white/20 text-white focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all">
-                    <SelectValue placeholder="Select category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Categories</SelectItem>
-                    {allCategories.map((category) => (
-                      <SelectItem key={category} value={category}>
-                        {category}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* Founding Year Filter */}
-              <div>
-                <label htmlFor="year-filter" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
-                  Founded
-                </label>
-                <Select value={selectedYear} onValueChange={setSelectedYear}>
-                  <SelectTrigger className="w-full bg-white/5 border-white/20 text-white focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all">
-                    <SelectValue placeholder="Select year" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Years</SelectItem>
-                    {allYears.map((year) => (
-                      <SelectItem key={year} value={year}>
-                        {year}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            {/* Search Bar and Clear Filters */}
-            <div className="mt-4 grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4">
-              <div>
-                <label htmlFor="search-input" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wide">
-                  Search by Name or Founder
-                </label>
-                <input
-                  id="search-input"
-                  type="text"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Type startup or founder name..."
-                  className="w-full px-4 py-2.5 bg-white/5 border border-white/20 text-white placeholder-gray-500 focus:ring-1 focus:ring-white/30 hover:bg-white/10 transition-all rounded focus:outline-none"
-                />
-              </div>
-              <div className="flex items-end">
-                <button
-                  onClick={() => {
-                    setSelectedCategory("all")
-                    setSelectedYear("all")
-                    setSelectedProgram("all")
-                    setSearchQuery("")
-                  }}
-                  className="w-full lg:w-auto px-6 py-2.5 text-sm font-medium text-white bg-white/10 hover:bg-white/20 transition-all rounded border border-white/20 hover:border-white/30 whitespace-nowrap"
-                >
-                  Clear Filters
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* Company List - Grid Layout */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {paginatedCompanies.map((company) => (
-              <StartupCard
-                key={company.id}
-                id={company.id}
-                name={company.name}
-                logoUrl={company.logoUrl}
-                summary={company.summary}
-                category={company.category}
-                foundingYear={company.foundingYear}
-                founders={company.founders}
-                isMTZ={company.isMTZ}
-                showDetails={true}
-              />
-            ))}
-          </div>
-
-          {filteredCompanies.length === 0 && (
-            <div className="text-center py-20">
-              <div className="inline-block p-12 bg-white/5 border border-white/20 rounded-lg">
-                <p className="text-xl font-semibold text-white mb-2">No Results Found</p>
-                <p className="text-gray-400 text-sm">Try adjusting your filters to see more startups</p>
-              </div>
-            </div>
-          )}
-
-          {/* Pagination Controls */}
-          {filteredCompanies.length > 0 && totalPages > 1 && (
-            <div className="flex justify-center items-center gap-4 mt-12">
-              <button
-                onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
-                disabled={currentPage === 1}
-                className="px-6 py-2 text-sm font-medium text-white bg-white/10 hover:bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all rounded border border-white/20"
-              >
-                ← Previous
-              </button>
-
-              <div className="flex items-center gap-2">
-                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                  <button
-                    key={page}
-                    onClick={() => setCurrentPage(page)}
-                    className={`w-10 h-10 text-sm font-medium rounded transition-all ${currentPage === page
-                      ? 'bg-white text-[#00002c]'
-                      : 'bg-white/10 text-white hover:bg-white/20 border border-white/20'
-                      }`}
-                  >
-                    {page}
-                  </button>
-                ))}
-              </div>
-
-              <button
-                onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
-                disabled={currentPage === totalPages}
-                className="px-6 py-2 text-sm font-medium text-white bg-white/10 hover:bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed transition-all rounded border border-white/20"
-              >
-                Next →
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Footer CTA Section */}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pb-16">
-          <CTA
-            title="Want to Start Your Own Journey?"
-            description={<>Join START Munich and get the support, network, and resources you need to turn your idea into reality. Our community has helped launch {companies.length}+ startups — yours could be next.</>}
-            buttons={[
-              { label: "Discover the Member Journey", href: "/member-journey" },
-              { label: "Apply Now", href: "/join-start/2026", variant: "secondary" }
-            ]}
-          />
-        </div>
-      </main>
-    </>
-  )
-}
\ No newline at end of file
+  return <StartupsContent />
+}
diff --git a/components/CTA.tsx b/components/CTA.tsx
index 8d9beb9..cbe773f 100644
--- a/components/CTA.tsx
+++ b/components/CTA.tsx
@@ -26,7 +26,7 @@ export default function CTA({
 }: CTAProps) {
   const renderButton = (button: CTAButton, index: number) => {
     const isPrimary = button.variant === 'primary' || (index === 0 && !button.variant)
-    const baseClasses = "px-8 py-3 font-bold rounded-lg transition-all duration-300"
+    const baseClasses = "px-8 py-3 font-bold rounded-full transition-all duration-300"
     const primaryClasses = "bg-[#d0006f] hover:bg-[#d0006f]/90 text-white hover:shadow-lg hover:shadow-[#d0006f]/50"
     const secondaryClasses = "border border-[#d0006f] text-[#d0006f] hover:bg-[#d0006f]/10"
 
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 2a178bf..e011d14 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -35,7 +35,7 @@ export default function Navigation() {
       <div className="mx-auto px-10 lg:px-20">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
-          <Link href="/home" className="flex items-center hover:opacity-80 transition-opacity">
+          <Link href="/" className="flex items-center hover:opacity-80 transition-opacity">
             <Image
               src="/startlogo.svg"
               alt="START Munich"
@@ -48,7 +48,7 @@ export default function Navigation() {
           {/* Desktop Navigation Links */}
           <div className="hidden lg:flex items-center space-x-8">
             <Link
-              href="/home"
+              href="/"
               className="text-white font-bold text-base hover:text-brand-pink transition-colors uppercase tracking-wide"
             >
               HOME
@@ -115,7 +115,7 @@ export default function Navigation() {
                       </span>
                     </Link>
                     <Link
-                      href="/jobs"
+                      href="https://jobs.startmunich.de/jobs"
                       onClick={() => setIsCommunityOpen(false)}
                       className="group block px-6 py-3.5 text-white text-base font-bold hover:bg-brand-pink transition-all duration-200"
                     >
@@ -243,7 +243,7 @@ export default function Navigation() {
           <div className="lg:hidden fixed inset-0 z-50 bg-brand-dark-blue flex flex-col overflow-y-auto">
             {/* Header row with logo and close button */}
             <div className="flex items-center justify-between px-10 h-20 shrink-0">
-              <Link href="/home" className="flex items-center hover:opacity-80 transition-opacity" onClick={() => setIsMobileMenuOpen(false)}>
+              <Link href="/" className="flex items-center hover:opacity-80 transition-opacity" onClick={() => setIsMobileMenuOpen(false)}>
                 <Image
                   src="/startlogo.svg"
                   alt="START Munich"
@@ -266,7 +266,7 @@ export default function Navigation() {
             {/* Menu items */}
             <div className="flex flex-col px-10 py-6 space-y-1 border-t border-white/10 grow">
               <Link
-                href="/home"
+                href="/"
                 className="block py-4 text-white font-bold text-lg hover:text-brand-pink transition-colors uppercase tracking-wide border-b border-white/10"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
@@ -314,7 +314,7 @@ export default function Navigation() {
                       Our Members
                     </Link>
                     <Link
-                      href="/jobs"
+                      href="https://jobs.startmunich.de/jobs"
                       className="block pl-4 py-2.5 text-white/80 text-base font-semibold hover:text-brand-pink transition-colors"
                       onClick={() => setIsMobileMenuOpen(false)}
                     >
diff --git a/lib/mockMembers.ts b/lib/mockMembers.ts
deleted file mode 100644
index 31fb3c9..0000000
--- a/lib/mockMembers.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-// Mock member data for development and testing
-// Base members that are replicated across all batches
-
-export interface Member {
-  id: number
-  name: string
-  batch: string
-  role: string
-  study?: string
-  company?: string
-  linkedinUrl?: string
-  imageUrl: string
-  bio?: string
-  expertise?: string[]
-  achievements?: string
-  gender?: string
-}
-
-// Base member templates (8 unique members)
-const baseMemberTemplates = [
-  {
-    name: "Sarah Chen",
-    role: "CEO & Co-Founder",
-    study: "Computer Science",
-    company: "TechFlow AI",
-    linkedinUrl: "https://linkedin.com/in/sarahchen",
-    imageUrl: "/example.png",
-    bio: "Passionate about using AI to solve real-world problems. Previously at Google and Meta.",
-    expertise: ["Machine Learning", "Product Strategy", "Leadership"],
-    achievements: "Raised $5M seed round, 50K+ users in first year",
-    gender: "female"
-  },
-  {
-    name: "Marcus Weber",
-    role: "CTO & Co-Founder",
-    study: "Computer Science",
-    company: "CloudSync",
-    linkedinUrl: "https://linkedin.com/in/marcusweber",
-    imageUrl: "/example.png",
-    bio: "Building scalable cloud infrastructure. Former principal engineer at AWS.",
-    expertise: ["Cloud Architecture", "DevOps", "Distributed Systems"],
-    achievements: "Built systems serving 10M+ daily active users",
-    gender: "male"
-  },
-  {
-    name: "Priya Patel",
-    role: "CEO & Founder",
-    study: "Medicine",
-    company: "HealthTech Solutions",
-    linkedinUrl: "https://linkedin.com/in/priyapatel",
-    imageUrl: "/example.png",
-    bio: "Revolutionizing healthcare delivery with technology. MD turned entrepreneur.",
-    expertise: ["Healthcare", "Digital Health", "Product Development"],
-    achievements: "Y Combinator W24, Partnership with 20+ hospitals",
-    gender: "female"
-  },
-  {
-    name: "David Müller",
-    role: "CPO & Co-Founder",
-    study: "Design",
-    company: "DesignHub",
-    linkedinUrl: "https://linkedin.com/in/davidmuller",
-    imageUrl: "/example.png",
-    bio: "Creating beautiful and functional design tools for the next generation of creators.",
-    expertise: ["Product Design", "UX/UI", "Creative Tools"],
-    achievements: "15K designers using platform, Featured in ProductHunt top 5",
-    gender: "male"
-  },
-  {
-    name: "Lisa Anderson",
-    role: "CEO & Co-Founder",
-    study: "Business Administration",
-    company: "EduTech Pro",
-    linkedinUrl: "https://linkedin.com/in/lisaanderson",
-    imageUrl: "/example.png",
-    bio: "Making quality education accessible to everyone. Former teacher and education consultant.",
-    expertise: ["EdTech", "Growth Marketing", "Business Development"],
-    achievements: "100K+ students, 15 countries, €2M ARR",
-    gender: "female"
-  },
-  {
-    name: "Alex Thompson",
-    role: "CTO & Co-Founder",
-    study: "Engineering",
-    company: "FinanceFlow",
-    linkedinUrl: "https://linkedin.com/in/alexthompson",
-    imageUrl: "/example.png",
-    bio: "Building modern financial infrastructure for SMEs. Ex-Goldman Sachs and Stripe.",
-    expertise: ["FinTech", "Backend Engineering", "Security"],
-    achievements: "€10M Series A, Processing €50M monthly",
-    gender: "male"
-  },
-  {
-    name: "Nina Kowalski",
-    role: "CEO & Founder",
-    study: "Environmental Science",
-    company: "GreenTech Innovations",
-    linkedinUrl: "https://linkedin.com/in/ninakowalski",
-    imageUrl: "/example.png",
-    bio: "Fighting climate change through innovative sustainability solutions. Environmental scientist and entrepreneur.",
-    expertise: ["Sustainability", "Climate Tech", "Impact Investing"],
-    achievements: "B Corp certified, Reduced 50K tons CO2, €3M raised",
-    gender: "female"
-  },
-  {
-    name: "James Park",
-    role: "CEO & Co-Founder",
-    study: "Marketing",
-    company: "FoodTech Labs",
-    linkedinUrl: "https://linkedin.com/in/jamespark",
-    imageUrl: "/example.png",
-    bio: "Reimagining the food industry with sustainable alternatives. Former Michelin-starred chef.",
-    expertise: ["Food Science", "Supply Chain", "Operations"],
-    achievements: "Partnership with 100+ restaurants, €1.5M seed",
-    gender: "male"
-  }
-]
-
-// All batches
-const allBatches = [
-  "Winter 2025",
-  "Summer 2025", 
-  "Winter 2024",
-  "Summer 2024",
-  "Winter 2023",
-  "Summer 2023"
-]
-
-// Generate members: replicate base members across all batches (about 30 per batch)
-let idCounter = 1
-export const mockMembers: Member[] = []
-
-allBatches.forEach(batch => {
-  // Add each base member 4 times to simulate ~32 members per batch
-  for (let repeat = 0; repeat < 4; repeat++) {
-    baseMemberTemplates.forEach(template => {
-      mockMembers.push({
-        id: idCounter++,
-        batch,
-        ...template
-      })
-    })
-  }
-})
-
-// Helper function to get members by batch
-export function getMembersByBatch(batch: string): Member[] {
-  return mockMembers.filter(member => member.batch === batch)
-}
-
-// Helper function to get members by role
-export function getMembersByRole(role: string): Member[] {
-  return mockMembers.filter(member => member.role === role)
-}
-
-// Helper function to get all unique batches
-export function getAllBatches(): string[] {
-  return Array.from(new Set(mockMembers.map(m => m.batch))).sort().reverse()
-}
-
-// Helper function to get all unique roles
-export function getAllRoles(): string[] {
-  return Array.from(new Set(mockMembers.map(m => m.role))).sort()
-}
diff --git a/lib/types.ts b/lib/types.ts
index 8f77b54..fc69e5d 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,5 +1,22 @@
 // Shared type definitions for the application
 
+export interface Partner {
+  id: string
+  name: string
+  category: string
+  logoUrl: string
+  featured?: boolean
+}
+
+export interface Startup {
+  id: string
+  name: string
+  logoUrl: string
+  isSpotlight?: boolean
+  isYCombinator?: boolean
+  isEWOR?: boolean
+}
+
 export interface Founder {
   name: string
   role: string