diff --git a/website/public/images/celonis_entry.jpg b/website/public/images/celonis_entry.jpg new file mode 100644 index 0000000..29ae087 Binary files /dev/null and b/website/public/images/celonis_entry.jpg differ diff --git a/website/src/App.tsx b/website/src/App.tsx index da35f94..5e10c05 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; import NotFound from "./pages/NotFound"; +import Guidebook from "./pages/Guidebook"; const queryClient = new QueryClient(); @@ -17,6 +18,7 @@ const App = () => ( } /> } /> + } /> diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx index 64e538f..5254492 100644 --- a/website/src/components/Navbar.tsx +++ b/website/src/components/Navbar.tsx @@ -54,6 +54,7 @@ const Navbar = () => { { id: "speakers", label: "Speakers", url: "#speakers" }, { id: "schedule", label: "Schedule", url: "#schedule" }, { id: "about-us", label: "Organisers", url: "#about-us" }, + { id: "guidebook", label: "Guidebook", url: "/guidebook" }, { id: "github", label: "GitHub", @@ -112,6 +113,12 @@ const Navbar = () => { > Organisers + + Guidebook + { /> {/* Applications Closed Dialog */} - + ); }; diff --git a/website/src/constants/guidebook.ts b/website/src/constants/guidebook.ts new file mode 100644 index 0000000..2c162ee --- /dev/null +++ b/website/src/constants/guidebook.ts @@ -0,0 +1,409 @@ +import { + Info, + Star, + MapPin, + MessageSquare, + Menu, + CheckSquare, + Truck, + Award, + Pill, + Calendar, + Map, + Users, + Wrench, + Upload, + Phone, + MessageCircle, + Utensils, + Building, + LucideIcon, +} from "lucide-react"; + +// Define icon names as strings instead of JSX elements +export type IconName = + | "info" + | "star" + | "mapPin" + | "messageSquare" + | "menu" + | "checkSquare" + | "truck" + | "award" + | "pill" + | "calendar" + | "map" + | "users" + | "wrench" + | "upload" + | "phone" + | "messageCircle" + | "utensils" + | "building"; + +// Map of icon names to their components +export const iconMap: Record = { + info: Info, + star: Star, + mapPin: MapPin, + messageSquare: MessageSquare, + menu: Menu, + checkSquare: CheckSquare, + truck: Truck, + award: Award, + pill: Pill, + calendar: Calendar, + map: Map, + users: Users, + wrench: Wrench, + upload: Upload, + phone: Phone, + messageCircle: MessageCircle, + utensils: Utensils, + building: Building, +}; + +export interface GuidebookSubsection { + id: string; + title: string; + icon: IconName; + content: string; +} + +export interface GuidebookSection { + id: string; + title: string; + icon: IconName; + subsections: GuidebookSubsection[]; +} + +export const GUIDEBOOK_DATA: GuidebookSection[] = [ + { + id: "general", + title: "General Information", + icon: "info", + subsections: [ + { + id: "checklist", + title: "Participant Checklist", + icon: "checkSquare", + content: `

🤝 Must Haves:

+• Valid ID / Passport +• Laptop +• Charger +• Water bottle +• Comfortable clothes +• Good Vibes :) + +

😴 If you plan to stay overnight:

+• Air mattress +• Sleeping bag +• Small Pillow +• Sleeping mask +• Ear plugs +• Basic toiletries: Toothpaste, Toothbrush, Shampoo, Deodorant, Medications, etc. +• Towel (You will get free access to shower at the venue (ground floor)) +• ...`, + }, + { + id: "accreditation", + title: "Accreditation Process", + icon: "award", + content: `

How to get your participant badge and complete registration:

+1. Go to the registration desk at the entrance of the Celonis Office +2. Show your ID +3. After the verification, you will get your hacker badge +4. You will also get a goodie bag +5. And done. Enjoy CDTM Hacks 2025 🎉 +`, + }, + { + id: "venue", + title: "Venue Details and Map", + icon: "map", + content: ` +

Event Venue - Celonis Office:

+Theresienstraße 4, 80333 München
Germany

+ +• The doors open on Friday, 9th May, 16:00 (4:00 PM). +• Please make sure to arrive no later than 18:30 (6:30 PM) so we can kick things off smoothly together. +• Make sure to check for the CDTM Hacks signposts on main door and the hallway to get to the registration desks. + +

❗Please note that the entrance at Theresienstraße 6 is closed. Please only use the entrance at Theresienstraße 4.

+ +

Here's a small guide to walk you through the venue:

+ +Enter the Celonis Office from the main entrance on Theresienstraße 4. + +Celonis Office Entrance + + + + +- +`, + }, + { + id: "firstaid", + title: "First Aid & Safety", + icon: "pill", + content: ` +Our Team (everybody who is wearing Team Merch) is there for you and will help you in every situation. If you need (medical) help, reach out to them or call the emergency number 112. In case of an emergency, please follow their instructions! + +/* Nils Telefon Nummer */ + +What to do when you call 112? + +Make the call yourself if you can +→ Call from a safe place +→ Explain what happened +→ Tell your exact address and municipality: Celonis, Theresienstraße 6, 80333 München +→ Answer all the ERC operator's questions +→ Follow the instructions given +→ Don't end the call until permitted + +Safety & wellbeing + +If you have face any situation that makes you feel not safe & uncomfortable in the environment of the hackathon please reach out to the team. There is always someone there from the team at the venue. We will help you to get out of the situation & handle it with care. You can also reach out individually to the team on Discord or approach us in person. + +`, + }, + { + id: "wifi", + title: "Internet Access", + icon: "award", + content: `To join our WiFi network, please connect to "Celonis Visitors" and follow the instructions. As a company you can enter "CDTM HACKS".`, + }, + { + id: "schedule-overview", + title: "Schedule Overview", + icon: "calendar", + content: ` + + TODO: Add schedule + + You should also add the event calendar here to your calendar to stay updated even when you're totaly locked-in.`, + }, + { + id: "channels", + title: "Communication Channels", + icon: "messageSquare", + content: `We have several communication channels for you to stay update: + + Discord + We will use Discord as our main communication channel to communicate with you during the event. You can join the server hacks.cdtm.com/discord. Next to all the organisational & informational things there is also a lot of space to post your photos, memes, ideas & shit talk about that one team that you totally crushed in the last 24 hours. + + Images + If you take any photos during the event, please share them with us on Discord. We will also have a photo booth setup at the event. + + Social Media + We will use Instagram & X to post updates about the event to the public. + You can follow us on Instagram under centerlings & on Twitter/X under @cdtm_munich. + + Feel free to post about the event on your own social media. Tag us & use the hashtag #cdtmhacks to get some engagement from the crew. + + Website + We will try our best to keep the website & especially the Guidebook updated with the latest information about the event. If you are here you probably found the website. Good job 🍪. + + `, + }, + { + id: "food", + title: "Food & Drinks", + icon: "utensils", + content: ` + TODO: Add food & drinks + `, + }, + { + id: "feedback", + title: "Feedback", + icon: "messageCircle", + content: `We are always looking for ways to improve the event. If you have any immediate feedback during the event, please just talk to us or reach out to us on Discord. We will try to help you as soon as possible. + + After the event, we will also ask you to fill out a feedback form to help us improve the event.`, + }, + ], + }, + { + id: "challenges", + title: "Cases & Challenges", + icon: "star", + subsections: [ + { + id: "pref-submission", + title: "Case Preference", + icon: "star", + content: `All teams will need to submit their case preferences on Friday, 9th May until 22:00. You can choose one of the 3 cases to work on with your team. We will do our best to accommodate all preferences. + + For the challenges you don't need to submit a preference in the beginning. You can choose the challenges in the final submission form.`, + }, + { + id: "cases-vs-challenges", + title: "Cases vs. Challenges", + icon: "star", + content: ` + There are 3 Cases, which define a problem space you can work on. You can work on exactly one case & need to submit your preference on Friday, 9th May until 22:00. + + At the same time you can compete in several Challenges at a time. Challenges are open to all teams of all cases. You will only need to pick the challenges you want to work on in the final submission form. + `, + }, + { + id: "how-you-can-win", + title: "How you can win..", + icon: "star", + content: ` + Cases: + - Submit your preference on Friday, 9th May until 22:00 + - Work on the case you get confirmed from the crew + - Hackhackhackhack... + - Create a video pitch for your final submission + - Submit your solution on Sunday, 11th May until 10:00 + - Winners will be announced on Sunday, 11th May at the closing ceremony + + Challenges: + - Look at the challenges list & integrate those you find interesting into your project work + - More hackhackhack... + - In the final submission form pick the challenges you worked on & submit your solution by Sunday, 11th May until 10:00 + - Winners will be announced on Sunday, 11th May at the closing ceremony + + Main Prizes: + - Work on your case & challenges + - Complete the final submission for your case + - The jury will select the best solutions across all cases & challenges + - Winners will be announced on Sunday, 11th May at the closing ceremony + + San Francisco Trip: + - We will keep you updated on the information on the San Francisco trip + `, + }, + { + id: "main-prices", + title: "Main Prizes", + icon: "star", + content: ` + We will have 3 main prizes for everybody competing in one of the 3 cases. The exact prizes will be announced on Friday, 9th May at the opening ceremony. + `, + }, + { + id: "descriptions", + title: "Case Descriptions", + icon: "star", + content: `The cases will be presented on Friday, 9th May at the opening ceremony. You will find more information afterwards on the website.`, + }, + { + id: "challenge-descriptions", + title: "Challenge Descriptions", + icon: "star", + content: `The challenges will be presented on Friday, 9th May at the opening ceremony. You will find more information afterwards on the website.`, + }, + { + id: "san-francisco", + title: "San Francisco Trip", + icon: "star", + content: `We will update on the information on the San Francisco trip soon.`, + }, + { + id: "teams", + title: "Team Formation", + icon: "users", + content: `If you'd like to start looking for a team before the event (which we strongly recommend), we have a team-building channel on Discord. Here's how it works: + +

After you are in the Discord server:

+In the #looking-for-team channel, post a message introducing yourself and your team-building preferences: + +🧑‍💻 What you do (e.g., dev, design, biz) +🌱 Your skills you bring to the table +👀 Who you are looking for + +If you don't find a team, don't worry! You will have time after the case deep dive sessions on Friday. + +

❗Please note that the maximum team size is 4 people.

+

How to register your team:

+Register your team after the opening ceremony using the provided form. You will have time until 22:00 to register your team.`, + }, + { + id: "tools", + title: "Available Tools & Resources", + icon: "wrench", + content: `

Tech Sponsors

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PartnerContribution
OpenAI300€ worth of credits per team
MistralAI10€ worth of credits per participant
Cognition50€ worth of credits per participant
Make.comStudent Membership
LovableTBD
Langfuse3 months access to Langfuse Core/Pro
CedarDBAccess to CedarDB Alpha
+

We will update the factsheet with more details as we go.

`, + }, + { + id: "submission", + title: "Submission Process", + icon: "upload", + content: + "We are working on the submission process. More information on Friday. Please stay tuned.", + }, + ], + }, + { + id: "cdtm", + title: "CDTM & Munich", + icon: "menu", + subsections: [ + { + id: "about", + title: "About CDTM", + icon: "building", + content: `The Center of Digital Technology and Management, Munich is a joint entrepreneurship-focused program by Technical University of Munich and Ludwig-Maximilan-University, with a community of 1,000+ students and alumni who have founded 20% of German unicorns, raised 11% of Germany's VC funding ($1.2B in 2022), and lead research at MIT, Google DeepMind, and Stanford. To Learn more about CDTM, visit our website. + +Join our community in Munich as part of the Fall 2025 Class. Apply here. The deadline is 30th May 2025.There are a lot of Centerlings running around the hackathon. Feel free to say hi and ask them about CDTM. `, + }, + { + id: "local", + title: "Local Transportation", + icon: "truck", + content: ` + The Celonis headquarters at Theresienstraße 6 is located in the Maxvorstadt district near the Technical University of Munich. Here are the best ways to reach this location: + + Just use Google Maps to find the best way to get to the venue: +

MVV System:

+ U-Bahn: U2 to Theresienstraße station → 2-3 min walk east, U3 to Universität station → 2-3 min walk north + Tram: Line 27 or 28 to Pinakotheken → 5 min walk west + From Central Station: U2 (direction Feldmoching) → 3 stops to Theresienstraße + Bus: Take Bus 100 or Bus 150 to Pinakotheken stop → Walk approximately 5 minutes west along Theresienstraße + `, + }, + ], + }, +]; diff --git a/website/src/pages/Guidebook.tsx b/website/src/pages/Guidebook.tsx new file mode 100644 index 0000000..06f6c00 --- /dev/null +++ b/website/src/pages/Guidebook.tsx @@ -0,0 +1,288 @@ +import Footer from "@/components/Footer"; +import { GUIDEBOOK_DATA, IconName, iconMap } from "@/constants/guidebook"; +import * as Accordion from "@radix-ui/react-accordion"; +import * as ScrollArea from "@radix-ui/react-scroll-area"; +import { motion } from "framer-motion"; +import { ArrowLeft, CornerDownLeft, Edit, Search } from "lucide-react"; +import { useEffect, useRef, useState } from "react"; + +const Logo = () => ( + + CDTM Hacks + +); + +// Helper function to render an icon by name +const renderIcon = (name: IconName, size: number) => { + const IconComponent = iconMap[name]; + return ; +}; +const githubEditUrl = `https://github.com/cdtm/cdtm-hacks/edit/main/website/src/constants/guidebook.ts`; + +const Guidebook = () => { + const [activeSection, setActiveSection] = useState(GUIDEBOOK_DATA[0].id); + const [searchQuery, setSearchQuery] = useState(""); + const [searchResults, setSearchResults] = useState< + Array<{ section: string; subsection: string; title: string }> + >([]); + const sectionRefs = useRef<{ [key: string]: HTMLElement | null }>({}); + + // Handle search functionality + useEffect(() => { + if (searchQuery.trim() === "") { + setSearchResults([]); + return; + } + + const query = searchQuery.toLowerCase(); + const results = GUIDEBOOK_DATA.flatMap((section) => + section.subsections + .filter( + (subsection) => + subsection.title.toLowerCase().includes(query) || + subsection.content.toLowerCase().includes(query) + ) + .map((subsection) => ({ + section: section.id, + subsection: subsection.id, + title: subsection.title, + })) + ); + + setSearchResults(results); + }, [searchQuery]); + + // Scroll to section when nav item is clicked + const scrollToSection = (sectionId: string) => { + setActiveSection(sectionId); + const element = sectionRefs.current[sectionId]; + if (element) { + element.scrollIntoView({ behavior: "smooth", block: "start" }); + } + }; + + // Scroll to subsection from search results + const scrollToSubsection = (sectionId: string, subsectionId: string) => { + setActiveSection(sectionId); + const sectionElement = sectionRefs.current[sectionId]; + if (sectionElement) { + sectionElement.scrollIntoView({ behavior: "smooth", block: "start" }); + + // Find and expand the accordion item for this subsection + const accordionTrigger = document.getElementById( + `accordion-trigger-${subsectionId}` + ); + if (accordionTrigger) { + accordionTrigger.click(); + } + } + setSearchQuery(""); + }; + + return ( +
+
+
+ +
+
+ + {/* Hero section */} +
+
+

+ Hackathon Guidebook +

+

+ Everything you need to know about CDTM Hacks 2025 +

+
+
+ + {/* Search bar */} +
+
+
+
+ +
+ setSearchQuery(e.target.value)} + /> +
+ + {/* Search results */} + {searchResults.length > 0 && ( +
+
    + {searchResults.map((result, index) => ( +
  • + +
    • + ))} +
+
+ )} +
+
+ + {/* Navigation and content */} +
+ {/* Side navigation */} +
+
+ +
+
+ + {/* Main content */} +
+ + + {GUIDEBOOK_DATA.map((section) => ( +
(sectionRefs.current[section.id] = el)} + className="mb-12" + > +
+
+ {renderIcon(section.icon, 24)} +
+

+ {section.title} +

+
+ + + {section.subsections.map((subsection) => ( + + +
+ + {renderIcon(subsection.icon, 20)} + + + {subsection.title} + +
+ + + + + + +
+ + + + ))} + +
+ ))} + + {/* GitHub edit section */} +
+
+

+ Improve this guidebook +

+

+ Found a typo or want to add more information? This guidebook + is open source! +

+ +
+
+ + + + + +
+
+ +
+
+ ); +}; + +export default Guidebook; diff --git a/website/src/pages/Index.tsx b/website/src/pages/Index.tsx index 2090604..78d5495 100644 --- a/website/src/pages/Index.tsx +++ b/website/src/pages/Index.tsx @@ -171,7 +171,7 @@ const Index = () => {
Join us for 36 hours of building in the heart of Europe.

- { Celonis, Munich - + {/* Mobile buttons - only show on small screens */}
{
{/* Applications Closed Dialog */} - + {/* Content sections */}