Skip to content

feat: add About Us page replacing Our Mission #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SimonBurmer merged 1 commit into from
Mar 30, 2026
+267 −175
Merged

feat: add About Us page replacing Our Mission #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 260 additions & 0 deletions app/about-us/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,260 @@
"use client"

import { useState } from 'react'
import { useInView } from '@/lib/hooks'
import Hero from '@/components/Hero'

const executiveBoard = [
{ name: "Simon Burmer", role: "CFO", photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop&crop=face" },
{ name: "Ali Serag El Din", role: "President", photo: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop&crop=face" },
{ name: "Defne Aytuna", role: "Vice President", photo: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop&crop=face" },
]

const departmentBoard = [
{ name: "Mohammed Thabit", role: "MD Events", photo: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop&crop=face" },
{ name: "Piotr Nobis", role: "MD Marketing", photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=500&fit=crop&crop=face" },
{ name: "Anna Heletych", role: "MD People", photo: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=500&fit=crop&crop=face" },
{ name: "Niklas Simakov", role: "MD Finance & Operations", photo: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=500&fit=crop&crop=face" },
{ name: "Marius Heumader", role: "MD Partnerships", photo: "https://images.unsplash.com/photo-1463453091185-61582044d556?w=400&h=500&fit=crop&crop=face" },
]

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: "", image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&h=400&fit=crop" },
{ 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: "", image: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=600&h=400&fit=crop" },
]

export default function AboutUsPage() {
const [selectedAdvisor, setSelectedAdvisor] = useState<number | null>(null)
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="https://images.unsplash.com/photo-1523580494863-6f3031224c94?q=80&w=2070&auto=format&fit=crop"
title={<>About <span className="text-brand-pink">Us</span></>}
description="We empower the next generation of founders to dare, build, and belong."
/>

{/* ═══ 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">
We provide the education, network, and hands-on experience that transforms ambitious students into successful entrepreneurs.
</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">
Munich as<br />Europe&apos;s<br /><span className="text-white/30">startup hub.</span>
</h3>
<p className="text-gray-400 text-base lg:text-lg leading-relaxed max-w-md">
We envision a Munich where every ambitious idea has the chance to become reality — a thriving ecosystem that rivals Silicon Valley.
</p>
</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>

{/* ═══ 02 MISSION PARTNERS ═══ */}
<section className="py-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 max-w-lg">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="group bg-white/[0.03] border border-white/10 rounded-2xl overflow-hidden hover:border-brand-pink/30 hover:bg-white/[0.05] transition-all duration-300 flex flex-col md:flex-row">
<div className="md:w-72 lg:w-80 flex-shrink-0 h-48 md:h-auto overflow-hidden">
<img src={partner.image} alt={partner.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div className="p-8 lg:p-10 flex flex-col justify-center gap-4">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 group-hover:border-brand-pink/30 flex items-center justify-center transition-colors flex-shrink-0">
{partner.logo
? <img src={partner.logo} alt={partner.name} className="w-7 h-7 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">{partner.description}</p>
</div>
</div>
))}
</div>
</div>
</section>

{/* ═══ 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-start transition-all duration-700 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
{/* Left: sticky heading */}
<div className="lg:sticky lg:top-28">
<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 mb-6">
THE<br />EXECUTIVE<br />BOARD
</h2>
<p className="text-gray-500 text-sm leading-relaxed max-w-xs">
Leading START Munich&apos;s strategic direction and day-to-day operations.
</p>
</div>

{/* Right: portrait cards */}
<div className={`grid grid-cols-2 sm:grid-cols-3 gap-4 transition-all duration-700 delay-200 ${execView.visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
{executiveBoard.map((member) => (
<div key={member.name} className="group relative">
<div className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-white/5 border border-white/10 hover:border-brand-pink/30 transition-all duration-300">
<img src={member.photo} alt={member.name} className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105" />
<div className="absolute inset-0 bg-gradient-to-t from-[#05112a] via-[#05112a]/30 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 p-4 lg:p-5">
<p className="font-black uppercase text-white text-sm leading-tight tracking-wide">{member.name}</p>
<p className="text-brand-pink text-xs font-semibold mt-1 uppercase tracking-widest">{member.role}</p>
</div>
</div>
</div>
))}
</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">Department Board</span>
</div>

<div className="flex flex-wrap justify-between gap-y-8 gap-x-4">
{departmentBoard.map((member, i) => (
<div
key={member.name}
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="w-28 h-36 lg:w-32 lg:h-44 rounded-xl overflow-hidden border-2 border-white/10 group-hover:border-brand-pink/50 transition-colors mb-3">
<img src={member.photo} alt={member.name} className="w-full h-full object-cover object-top" />
</div>
<p className="font-black uppercase text-white text-xs lg:text-sm tracking-wide leading-tight">{member.name}</p>
<p className="text-gray-500 text-[11px] lg:text-xs mt-1 uppercase tracking-wider">{member.role}</p>
</div>
))}
</div>
</div>
</div>
</section>

{/* ═══ 05 ADVISORY BOARD — thumbnail grid with expandable detail ═══ */}
<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'}`}>
<img src={member.photo} alt={member.name} className="w-full h-full 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 flex-shrink-0 w-20 h-24 rounded-xl overflow-hidden border-2 border-brand-pink">
<img src={advisoryBoard[selectedAdvisor].photo} alt={advisoryBoard[selectedAdvisor].name} className="w-full h-full 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>
)
}
Loading