Hackathon page

app/hackathons/page.tsx

@@ -1,17 +1,105 @@
 import { Content } from "@/components/content";
 import { Navbar } from "@/components/navbar";
 import type { Metadata } from "next";
+import { Timeline } from "./timeline"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Grain, Heading } from "@/components/utils";
+import { Button } from "@/components/ui/button";
+import NextLink from "next/link";
 
 export const metadata: Metadata = {
 	title: "Hackathons",
 };
 
+
 export default function Hackathons() {
+	const FAQS = [
+		{
+			question: "What is a hackathon?",
+			answer: "A hackathon is like a super cool tech event where folks team up to create awesome stuff! Picture this: you and your friends, or even new buddies, get together for a day or weekend to come up with fun and creative tech projects. It could be making a game, a website, or even inventing a cool gadget. You brainstorm, build, and then show off your project to others. It's all about having a blast, being creative, and learning cool tech skills along the way. Hackathons are like a tech party where you bring your wildest ideas to life!"
+		},
+		{
+			question: "How much does it cost?",
+			answer: "Participating in the Hackathon is absolutely free. We don't have any registration fees or costs because we're committed to ensuring that everyone, no matter their financial situation, can have a chance to code and learn."
+		},
+		{
+			question: "Do I need experience to join?",
+			answer: "Absolutely not! Our hackathon is super beginner-friendly. We're thrilled to have participants of all skill levels, whether you're just starting or already a coding pro. We know that everyone has to begin somewhere, and our aim is to create a friendly and inclusive atmosphere for everyone. We've got workshops to help you kickstart your coding journey and boost your skills during the hackathon."
+		},
+		{
+			question: "Do I need a team?",
+			answer: "Feel free to go solo or team up with others—it's totally up to you! You have the choice to work on your own or join forces with fellow participants."
+		},
+		{
+			question: "Who will be judging?",
+			answer: "The hack.place() members will be the judges of your work."
+		},
+		{
+			question: "Is this an online event?",
+			answer: "You can fully participate in this hackathon online.!"
+		},
+		{
+			question: "What is the theme?",
+			answer: "Suprise!"
+		},
+	]
 	return (
 		<>
 			<Navbar currentTitle="Hackathons" />
-			<Content as="section" className="py-16" border="bottom">
-				Coming soon
+			<Content as="section" className="py-16">
+				<p className="text-8xl font-bold">EquiHacks S1</p>
+				<h1 className="text-5xl">Welcome to our first Hackathon</h1>
+
+				<div className="flex flex-row mt-5 mb-6 lg:mb-0 gap-x-2 mx-10">
+					<NextLink href="https://discord.gg/QmPdqegQNb">
+						<Button>Devpost</Button>
+					</NextLink>
+
+					<NextLink href="https://discord.gg/QmPdqegQNb">
+						<Button variant="outline" >
+							Discord
+						</Button>
+					</NextLink>
+				</div>
+
+
+			</Content>
+			<Content as="div" className="py-16" >
+				<div className="h-full w-full">
+					<Heading>About the Hackathon</Heading>
+					<h1 className="m-5 text-xl">EquiHacks is a fun hackathon just for middle and high school students. You can create apps, software, and hardware projects and show them to judges who will decide if they're good. You can work with friends or by yourself to learn new things. Plus, there are workshops and talks to help you learn and work together with others. It's a great way to have fun and get better at making things with technology!</h1>
+				</div>
+			</Content>
+
+			<Content as="div" className="py-16">				
+				<div className="m-3">
+					<Heading >Timeline</Heading>
+				</div>
+				<Timeline/>
+			</Content>
+
+			<Content as="div" className="grid py-16" border="top" >
+				<h1 className="m-40 text-3xl justify-self-center"> Infomation about the prizes and sponors will be released soon!</h1>
+			</Content>
+
+			<Content as="div" outerClassName="relative" className="py-16" border="bottom">
+				<Grain />
+				<Heading className="my-10">FAQ</Heading> 
+
+				<Accordion type="single" className="w-full mt-4" collapsible>
+					{FAQS &&
+						FAQS.map((FAQ, i) => (
+							<AccordionItem value={"item-" + i}>
+								<AccordionTrigger>
+									{FAQ.question}
+								</AccordionTrigger>
+								<AccordionContent>
+									{FAQ.answer}
+								</AccordionContent>
+							</AccordionItem>
+						))
+					}
+				</Accordion>
 			</Content>
 		</>
 	);

app/hackathons/timeline.tsx

@@ -2,9 +2,11 @@
 
 import { useState, type HTMLAttributes } from "react";
 
+import { useRef, type PropsWithChildren, type MouseEventHandler } from "react";
 import { cn } from "@/lib/utils";
 import { stages } from "@/lib/siteConfig";
 import { type LucideIcon } from "lucide-react";
+import { CardItem } from "@/components/card";
 
 interface TimelineIconProps extends HTMLAttributes<HTMLDivElement> {
 	selected: boolean;
@@ -38,13 +40,78 @@ interface TimelineStageProps {
 }
 
 const TimelineStage = ({ stageIndex }: TimelineStageProps) => {
+	const ref1 = useRef<HTMLDivElement>(null);
+    const ref2 = useRef<HTMLDivElement>(null);
+    const ref3 = useRef<HTMLDivElement>(null);
+    const ref4 = useRef<HTMLDivElement>(null);
+
+	const correctRef = (i:number) => {
+		if(i==0){
+		return ref1	
+		}
+		if(i==1){
+			return ref2	
+		}	
+		if(i==2){
+			return ref3	
+		}
+		if(i==3){
+			return ref4	
+		}
+	}
+
+	const onMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
+        [ref1, ref2, ref3, ref4].forEach(
+            (ref) => {
+                const card = ref.current;
+                if (!card) return;
+
+                const rect = card.getBoundingClientRect(),
+                    x = e.clientX - rect.left,
+                    y = e.clientY - rect.top;
+
+                card.style.setProperty("--mouse-x", `${x}px`);
+                card.style.setProperty("--mouse-y", `${y}px`);
+            }
+        );
+    };
+
+
+
 	const stage = stages[stageIndex];
 
 	return (
 		<div className="mt-8">
-			<h1 className="flex flex-row justify-center text-4xl font-bold gap-x-3 md:justify-start">
-				<stage.Icon className="my-auto w-9 h-9" />
-				{stage.name}
+			<h1 className="flex flex-col justify-center text-4xl font-bold gap-x-3 md:justify-start">
+				<div className="flex justify-center">
+					<h1 className="text-5xl">{stage.name}</h1>
+
+				</div>
+				<div className="grid justify-items-center"  onMouseMove={onMouseMove}>
+					{stage.events.map((event, i)=>(
+						<div className= "w-3/5 gap-2 mt-8">
+							 <CardItem  ref={correctRef(i)}>
+								<div>
+									<div className="flex flex-row">
+										<div className="basis-3/4 justify-center">
+											<p className="text-4xl">{event.eventName}</p>
+										</div>	
+										<div className="basis-1/4 justify-center">
+											<p className="text-2xl mt-2">{event.endTime == "00" ?  event.startTime : event.startTime == "00" ?  event.endTime :event.startTime + "-" + event.endTime}</p>
+										</div>
+									</div>
+									<div className="mt-3">
+										<p className="text-2xl">{event.description}</p>
+									</div>
+								</div>
+						 	</CardItem>
+
+						</div>
+					))}
+				</div>
+
+
+
 			</h1>
 		</div>
 	);

app/workshops/page.tsx

@@ -32,25 +32,22 @@ export default function Workshop() {
 
 
 				<Heading>Want to learn more about Coding!</Heading>
+
+			</Content>
+			<Content
+				as="div"
+				className="py-16"
+				outerClassName="relative"
+				border="bottom"
+			>
 				<h2 className="my-4 text-2xl font-thin">
 					hack.place() is happy to present a few workshops to
 					{" "} <Hover>increase your knowledge</Hover> {" "} of this world
 
 				</h2>
 
-				<div className="absolute bottom-0 right-0 translate-y-24 text-muted -z-10">
-					<Anchor
-						className="w-72 h-72 rotate-[15deg]"
-						strokeWidth={0.75}
-					/>
-				</div>
-			</Content>
-			<Content as="section" className="py-16" border="bottom">
-
-				<h1 className="p-4 mx-auto text-6xl font-bold text-center w-fit rounded-2xl bg-brand text-sky-900">
-					Workshops
-				</h1>
 
+
 				<WorkshopsList></WorkshopsList>
 			</Content>