Skip to content

Fix: use animated number #13

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 5 commits into from
Mar 24, 2026
Merged

Fix: use animated number #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
943ace5
init
SimonBurmer Mar 24, 2026
647ab6a
init
SimonBurmer Mar 24, 2026
74f2b91
init
SimonBurmer Mar 24, 2026
db6afee
init
SimonBurmer Mar 24, 2026
43e1eff
fix
SimonBurmer Mar 24, 2026
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
2 changes: 1 addition & 1 deletion app/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -821,7 +821,7 @@ export default function EventsPage() {
</div>

{/* Past Events Calendar Section */}
<div className="mb-20">
<div className="pb-20">
<div className="mb-10">
<h2 className="text-3xl md:text-4xl font-black text-white mb-3">
PAST EVENTS
Expand Down
47 changes: 7 additions & 40 deletions app/home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
"use client"

import { useState, useEffect, useRef } from 'react'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import Script from 'next/script'
import { useAnimatedNumber, useInView } from '@/lib/hooks'

export const dynamic = 'force-dynamic'

Expand Down Expand Up @@ -147,40 +148,6 @@ const networkCities = [
{ name: "Cambridge", flag: "🇬🇧", image: "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=400&auto=format&fit=crop" },
]

// ── Hooks ───────────────────────────────────────────────────────────────────────

function useCountUp(target: number, duration = 1800, start = false) {
const [count, setCount] = useState(0)
useEffect(() => {
if (!start) return
let current = 0
const steps = 60
const increment = target / steps
const interval = duration / steps
let step = 0
const timer = setInterval(() => {
step++
current += increment
if (step >= steps) { setCount(target); clearInterval(timer) }
else setCount(current)
}, interval)
return () => clearInterval(timer)
}, [target, duration, start])
return count
}

function useInView(threshold = 0.2) {
const ref = useRef<HTMLDivElement>(null)
const [visible, setVisible] = useState(false)
useEffect(() => {
if (!ref.current) return
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect() } }, { threshold })
obs.observe(ref.current)
return () => obs.disconnect()
}, [threshold])
return { ref, visible }
}

// ── Component ───────────────────────────────────────────────────────────────────

export default function HomePage() {
Expand All @@ -200,11 +167,11 @@ export default function HomePage() {
}, [])

const animatedValues = [
useCountUp(facts[0].value, 1800, factsView.visible),
useCountUp(facts[1].value, 1800, factsView.visible),
useCountUp(facts[2].value, 1800, factsView.visible),
useCountUp(facts[3].value, 1800, factsView.visible),
useCountUp(facts[4].value, 1800, factsView.visible),
useAnimatedNumber(facts[0].value, !factsView.visible, 1800),
useAnimatedNumber(facts[1].value, !factsView.visible, 1800),
useAnimatedNumber(facts[2].value, !factsView.visible, 1800),
useAnimatedNumber(facts[3].value, !factsView.visible, 1800),
useAnimatedNumber(facts[4].value, !factsView.visible, 1800),
]

return (
Expand Down
8 changes: 6 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Metadata } from "next"
import "./globals.css"
import Navigation from "@/components/Navigation"
import Footer from "@/components/Footer"

export const metadata: Metadata = {
title: "START Munich - Our Startups",
Expand All @@ -14,9 +15,12 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>
<body className="flex flex-col min-h-screen">
<Navigation />
{children}
<main className="flex-grow">
{children}
</main>
<Footer />
</body>
</html>
)
Expand Down
17 changes: 17 additions & 0 deletions app/legal-notice/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export default function LegalNoticePage() {
return (
<div className="min-h-screen bg-brand-dark-blue">
<div className="mx-auto px-10 lg:px-20 py-20">
<h1 className="text-4xl md:text-5xl font-black text-white mb-12">
LEGAL NOTICE
</h1>

<div className="prose prose-invert max-w-none">
<p className="text-gray-300 text-lg">
Content coming soon...
</p>
</div>
</div>
</div>
)
}
54 changes: 30 additions & 24 deletions app/member-journey/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ScrollIndicator } from '@/components/EventComponents'
import Hero from "@/components/Hero"
import TestimonialsSection from '@/components/TestimonialsSection'
import CTA from "@/components/CTA"
import { useAnimatedNumber } from '@/lib/hooks'

export const dynamic = 'force-dynamic'

Expand Down Expand Up @@ -45,6 +46,7 @@ interface MemberStory {
story: string
quote: string
department: string
logos?: { src: string; url?: string }[]
}

const placeholderImage = "/internalevents.png"
Expand Down Expand Up @@ -204,23 +206,30 @@ const startEvents: StartEvent[] = [
const memberStories: MemberStory[] = [
{
id: "story-1",
name: "Sarah Mueller",
role: "Founder & CEO",
company: "TechFlow GmbH",
image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=500&auto=format&fit=crop",
story: "I joined START Munich with just an idea and a lot of passion. Through the intensive onboarding and department selection, I found my place in the Events team. The network and mentorship I received were instrumental in launching TechFlow.",
quote: "START Munich didn't just give me a startup, it gave me a community that believed in my vision.",
department: "Events"
name: "Felix Haas",
role: "Founder & Investor",
company: "Bits & Pretzels",
image: "/memberJourney/alumni/FelixHaas.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.",
quote: "At START Munich, I laid the foundation for my current network.",
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-2",
name: "Alex Rodriguez",
role: "Founder & CTO",
company: "DataSync AI",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=500&auto=format&fit=crop",
story: "The San Francisco trip was a game-changer for my startup. Meeting investors and engineers in Silicon Valley opened doors I didn't know existed. Combined with the Marketing team's support, we scaled from 0 to 50k users.",
quote: "The global perspective I gained at START Munich accelerated our growth by years.",
department: "Marketing"
name: "Joshua Cornelius",
role: "Co-Founder",
company: "Freeletics",
image: "/memberJourney/alumni/JoshuaCornelius.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.",
quote: "START Munich gave us 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.png", url: "https://www.freeletics.com/" }
]
},
{
id: "story-3",
Expand All @@ -244,6 +253,9 @@ export default function MemberJourneyPage() {
const [isMoreHovered, setIsMoreHovered] = useState(false)
const autoRotateTimerRef = useRef<NodeJS.Timeout | null>(null)

// 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",
Expand Down Expand Up @@ -388,7 +400,7 @@ export default function MemberJourneyPage() {
<div className="relative text-center">
<div className="flex items-baseline justify-center gap-2 mb-3">
<span className="text-6xl font-black bg-clip-text text-transparent bg-gradient-to-br from-white to-gray-300 group-hover:to-brand-pink transition">
2
{semesterCount}
</span>
<span className="text-3xl font-bold text-brand-pink">+</span>
</div>
Expand Down Expand Up @@ -565,14 +577,7 @@ export default function MemberJourneyPage() {
>
<span className="text-4xl flex-shrink-0">{event.icon}</span>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-white font-bold text-lg">{event.title}</h3>
{event.frequency && (
<span className="px-2.5 py-1 bg-brand-pink/20 border border-brand-pink/50 rounded-full text-xs font-semibold text-brand-pink">
{event.frequency}
</span>
)}
</div>
<h3 className="text-white font-bold text-lg mb-2">{event.title}</h3>
<p className="text-gray-300 text-sm leading-relaxed">
{event.description}
</p>
Expand Down Expand Up @@ -814,7 +819,8 @@ export default function MemberJourneyPage() {
company: story.company,
image: story.image,
story: story.story,
quote: story.quote
quote: story.quote,
logos: story.logos
}))}
/>

Expand Down
2 changes: 1 addition & 1 deletion app/members/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export default function MembersPage() {
<main className="min-h-screen bg-[#00002c]">
{/* Hero Section with Full-Width Image */}
<Hero
backgroundImage="/member-background.png"
backgroundImage="/ourMembers/hero.png"
title={
<>
START MUNICH
Expand Down
17 changes: 17 additions & 0 deletions app/privacy-policy/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export default function PrivacyPolicyPage() {
return (
<div className="min-h-screen bg-brand-dark-blue">
<div className="mx-auto px-10 lg:px-20 py-20">
<h1 className="text-4xl md:text-5xl font-black text-white mb-12">
PRIVACY POLICY
</h1>

<div className="prose prose-invert max-w-none">
<p className="text-gray-300 text-lg">
Content coming soon...
</p>
</div>
</div>
</div>
)
}
82 changes: 82 additions & 0 deletions components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import Link from 'next/link'

export default function Footer() {
return (
<footer className="bg-brand-dark-blue">
<div className= "mx-auto px-20 py-10">
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Minor: Extra space in className attribute.

There's an extra space between className= and the opening quote. While this works, it's inconsistent with the codebase style.

Fix 
-      <div className= "mx-auto px-20 py-10">
+      <div className="mx-auto px-20 py-10">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className= "mx-auto px-20 py-10">
<div className="mx-auto px-20 py-10">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/Footer.tsx` at line 6, In components/Footer.tsx there is an extra
space between the attribute name and its opening quote in the JSX div (the line
with className= "mx-auto px-20 py-10"); remove the stray space so the attribute
reads className="mx-auto px-20 py-10" to match project style and consistency
when rendering the Footer component.

<div className="flex flex-col md:flex-row items-center justify-between gap-6">
{/* Donate Link - Left */}
<a
href="https://buy.stripe.com/6oE16k2dg6gz3n2145"
target="_blank"
rel="noopener noreferrer"
className="text-white font-bold text-sm tracking-widest hover:text-brand-pink transition-colors uppercase"
>
DONATE
</a>

{/* Legal Links - Center */}
<div className="flex items-center gap-8">
<Link
href="/legal-notice"
className="text-white font-bold text-sm tracking-widest hover:text-brand-pink transition-colors uppercase"
>
LEGAL NOTICE
</Link>
<Link
href="/privacy-policy"
className="text-white font-bold text-sm tracking-widest hover:text-brand-pink transition-colors uppercase"
>
PRIVACY POLICY
</Link>
</div>

{/* Social Icons - Right */}
<div className="flex items-center gap-4">
{/* Instagram */}
<a
href="https://www.instagram.com/startmunich/"
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-brand-pink transition-colors"
aria-label="Instagram"
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
</a>

{/* LinkedIn */}
<a
href="https://www.linkedin.com/company/startmunich/"
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-brand-pink transition-colors"
aria-label="LinkedIn"
>
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<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>
</a>
</div>
</div>
</div>
</footer>
)
}
9 changes: 0 additions & 9 deletions components/PastEventsGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,15 +150,6 @@ export default function PastEventsGrid() {

{/* Content */}
<div className="p-5 flex flex-col flex-grow">
{/* Date Badge */}
<div className="mb-3">
<div className="inline-block px-2.5 py-1 rounded-md bg-[#d0006f]/20 border border-[#d0006f]/40">
<p className="text-xs text-[#d0006f] font-bold uppercase tracking-wide">
{formattedDate}
</p>
</div>
</div>

<h3 className="text-lg font-bold text-white mb-2 line-clamp-2">
{event.name}
</h3>
Expand Down
Loading