diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx new file mode 100644 index 0000000..5c94d29 --- /dev/null +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -0,0 +1,92 @@ +"use client" +import { cabinetExtraBold } from "../utils/fonts" +import leaf_right_deerhack_2025 from "@/app/assets/images/leaf_right_deerhack_2025.svg"; +import Image from "next/image" +import ExperienceCard from "../sections/Experience/ExperienceCard" +import { useState, useRef, useEffect } from "react" + +export default function ExperiencePage() { + const [activeCard, setActiveCard] = useState(0) + const scrollContainerRef = useRef(null) + + const handleDotClick = (index: number) => { + setActiveCard(index) + + if (scrollContainerRef.current) { + const cardWidth = scrollContainerRef.current.clientWidth + scrollContainerRef.current.scrollTo({ + left: index * cardWidth, + behavior: "smooth", + }) + } + } + + useEffect(() => { + const handleScroll = () => { + if (scrollContainerRef.current) { + const scrollPosition = scrollContainerRef.current.scrollLeft + const cardWidth = scrollContainerRef.current.clientWidth + const newIndex = Math.round(scrollPosition / cardWidth) + + if (newIndex !== activeCard && newIndex >= 0 && newIndex <= 2) { + setActiveCard(newIndex) + } + } + } + + const scrollContainer = scrollContainerRef.current + if (scrollContainer) { + scrollContainer.addEventListener("scroll", handleScroll) + return () => scrollContainer.removeEventListener("scroll", handleScroll) + } + }, [activeCard]) + + return ( +
+ + leaf + +
+ The DeerHack Experience +
+ +
+
+ +
+ + {/* Dots indicator */} +
+ {[0, 1, 2].map((index) => ( +
+
+ + leaf +
+ ) +} diff --git a/frontend/src/app/MainPage.tsx b/frontend/src/app/MainPage.tsx index 48ef1fa..b700e1d 100644 --- a/frontend/src/app/MainPage.tsx +++ b/frontend/src/app/MainPage.tsx @@ -13,6 +13,7 @@ import FAQ from "@/app/(pages)/FAQ"; import Judges from "@/app/(pages)/Judges"; import Mentors from "@/app/(pages)/Mentors"; import Navbar from "@/app/components/Navbar/Navbar"; +import ExperiencePage from "./(pages)/DeerhackExperiencePage"; export default function Home() { return ( @@ -26,6 +27,7 @@ export default function Home() { + {/* */} {/* */} diff --git a/frontend/src/app/assets/images/MentorReview.svg b/frontend/src/app/assets/images/MentorReview.svg new file mode 100644 index 0000000..50aaa71 --- /dev/null +++ b/frontend/src/app/assets/images/MentorReview.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/MentorReview.tsx b/frontend/src/app/assets/images/MentorReview.tsx new file mode 100644 index 0000000..bf793a3 --- /dev/null +++ b/frontend/src/app/assets/images/MentorReview.tsx @@ -0,0 +1,112 @@ +import { ReactElement } from "react"; + +export default function MentorReviewSVG({ + width = 88, + height = 118, + className = "", +}: { + width?: number; + height?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/images/ParticipantReview.svg b/frontend/src/app/assets/images/ParticipantReview.svg new file mode 100644 index 0000000..6bdef68 --- /dev/null +++ b/frontend/src/app/assets/images/ParticipantReview.svg @@ -0,0 +1,410 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/ParticipantReview.tsx b/frontend/src/app/assets/images/ParticipantReview.tsx new file mode 100644 index 0000000..8f018af --- /dev/null +++ b/frontend/src/app/assets/images/ParticipantReview.tsx @@ -0,0 +1,425 @@ +import { ReactElement } from "react"; + +export default function ParticipantReviewSVG({ + width = 88, + height = 118, + className = "", +}: { + width?: number; + height?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/images/VolunteerReview.svg b/frontend/src/app/assets/images/VolunteerReview.svg new file mode 100644 index 0000000..b85834a --- /dev/null +++ b/frontend/src/app/assets/images/VolunteerReview.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/VolunteerReview.tsx b/frontend/src/app/assets/images/VolunteerReview.tsx new file mode 100644 index 0000000..0631553 --- /dev/null +++ b/frontend/src/app/assets/images/VolunteerReview.tsx @@ -0,0 +1,108 @@ +import { ReactElement } from "react"; + +export default function VolunteerReviewSVG({ + width = 88, + height = 118, + className = "", +}: { + width?: number; + height?: number; + className?: string; +}): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/app/assets/images/leaf_right_deerhack_2025.svg b/frontend/src/app/assets/images/leaf_right_deerhack_2025.svg new file mode 100644 index 0000000..cf5e762 --- /dev/null +++ b/frontend/src/app/assets/images/leaf_right_deerhack_2025.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/app/assets/images/new_404_image.svg b/frontend/src/app/assets/images/new_404_image.svg new file mode 100644 index 0000000..3307477 --- /dev/null +++ b/frontend/src/app/assets/images/new_404_image.svg @@ -0,0 +1,651 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx b/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx new file mode 100644 index 0000000..6bf75e6 --- /dev/null +++ b/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx @@ -0,0 +1,42 @@ +import { ReactElement } from "react"; +import { + cabinetBlack, + cabinetBold, + cabinetExtraBold, + cabinetMedium, + cabinetRegular, +} from "@/app/utils/fonts"; + +export default function MainExpCard({ + svg, + description, + bottomText, + finBottomText, +}: { + svg: ReactElement; + description: string; + bottomText: string; + finBottomText: string; +}){ + return( +
+
+ +
+
{svg}
+
+ {description} +
+
{bottomText} +
{finBottomText}
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 3335311..b569788 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -35,6 +35,10 @@ background: linear-gradient(180deg, #6633cc -15.9%, #f5c144 72.56%); } + .exp-gradient-background { + background: linear-gradient(270deg, #F5C144 0%, #6633CC 100%); + } + .text-primary-gradient-color { @apply bg-gradient-to-r from-primary from-1% to-secondary bg-clip-text text-transparent; } diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx index dcbfeb3..9088224 100644 --- a/frontend/src/app/not-found.tsx +++ b/frontend/src/app/not-found.tsx @@ -1,3 +1,4 @@ + "use client"; import Link from "next/link"; diff --git a/frontend/src/app/sections/Experience/ExperienceCard.tsx b/frontend/src/app/sections/Experience/ExperienceCard.tsx new file mode 100644 index 0000000..70ae33d --- /dev/null +++ b/frontend/src/app/sections/Experience/ExperienceCard.tsx @@ -0,0 +1,57 @@ +"use client" +import MentorReviewSVG from "@/app/assets/images/MentorReview" +import VolunteerReviewSVG from "@/app/assets/images/VolunteerReview" +import MainExpCard from "@/app/components/TheDeerHackExp/MainExpCard" +import type { ReactElement } from "react" + +type Testimonial = { + id: number + description: string + bottomText: string + finBottomText: string + svg: ReactElement +} + +export default function ExperienceCard({ activeIndex = 0 }) { + const testimonials: Testimonial[] = [ + { + id: 1, + description: + "Everything was pretty smooth. For the students to be able to organize something as amazing as this is pretty remarkable. So, take your time and pat yourself on the back maybe.", + bottomText: "Mentor", + finBottomText: "DeerHack 2024", + svg: , + }, + { + id: 2, + description: + "Nice learning experience. Workshops were mind refreshing. Organizers and volunteers were super friendly. Would love to join more events organized by them.", + bottomText: "Volunteer", + finBottomText: "DeerHack 2024", + svg: , + }, + { + id: 3, + description: + "Everything was as well managed as it could be! From amazing coffee and food to the awesome group of motivating mentors and super helpful volunteers and the organizers. Thank you for an amazing experience!", + bottomText: "Participant", + finBottomText: "DeerHack 2024", + svg: , + }, + ] + + return ( +
+ {testimonials.map((testimonial, index) => ( +
+ +
+ ))} +
+ ) +} \ No newline at end of file diff --git a/frontend/src/app/styles.module.css b/frontend/src/app/styles.module.css index 443d051..c2ec503 100644 --- a/frontend/src/app/styles.module.css +++ b/frontend/src/app/styles.module.css @@ -42,4 +42,4 @@ background-size: cover; background-position: top; } -} +} \ No newline at end of file