From 1327cbd89d7d61a21cb9c1e81f5fe7bb96db6c0d Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Tue, 18 Mar 2025 21:30:52 +0545 Subject: [PATCH 1/9] Fix: New Testimony page --- .../app/(pages)/DeerhackExperiencePage.tsx | 82 ++++ frontend/src/app/MainPage.tsx | 2 + .../src/app/assets/images/MentorReview.svg | 97 ++++ .../src/app/assets/images/MentorReview.tsx | 112 +++++ .../app/assets/images/ParticipantReview.svg | 410 +++++++++++++++++ .../app/assets/images/ParticipantReview.tsx | 425 ++++++++++++++++++ .../src/app/assets/images/VolunteerReview.svg | 94 ++++ .../src/app/assets/images/VolunteerReview.tsx | 108 +++++ .../components/TheDeerHackExp/MainExpCard.tsx | 42 ++ frontend/src/app/globals.css | 4 + .../sections/Experience/ExperienceCard.tsx | 115 +++++ 11 files changed, 1491 insertions(+) create mode 100644 frontend/src/app/(pages)/DeerhackExperiencePage.tsx create mode 100644 frontend/src/app/assets/images/MentorReview.svg create mode 100644 frontend/src/app/assets/images/MentorReview.tsx create mode 100644 frontend/src/app/assets/images/ParticipantReview.svg create mode 100644 frontend/src/app/assets/images/ParticipantReview.tsx create mode 100644 frontend/src/app/assets/images/VolunteerReview.svg create mode 100644 frontend/src/app/assets/images/VolunteerReview.tsx create mode 100644 frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx create mode 100644 frontend/src/app/sections/Experience/ExperienceCard.tsx diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx new file mode 100644 index 0000000..6662042 --- /dev/null +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -0,0 +1,82 @@ +"use client" +import { cabinetExtraBold } from "../utils/fonts" +// Use dynamic imports to prevent build errors if files don't exist +const leaf_prizes_right = "/placeholder.svg?height=250&width=250" +const leaf_deerhack2023_right = "/placeholder.svg?height=250&width=250" +import Image from "next/image" +import ExperienceCard from "../sections/Experience/ExperienceCard" +import { useState, useRef } from "react" + +export default function ExperiencePage() { + const [activeCard, setActiveCard] = useState(0) + const scrollContainerRef = useRef(null) + + const handleDotClick = (index: number) => { + setActiveCard(index) + + // Scroll to the selected card + if (scrollContainerRef.current) { + const cardWidth = scrollContainerRef.current.querySelector(".snap-center")?.clientWidth || 0 + const spacing = 16 // space-x-4 = 1rem = 16px + scrollContainerRef.current.scrollTo({ + left: index * (cardWidth + spacing), + behavior: "smooth", + }) + } + } + + 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 4be9a14..d46984d 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/components/TheDeerHackExp/MainExpCard.tsx b/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx new file mode 100644 index 0000000..75d0cd9 --- /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 b545b60..c7ce475 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -11,6 +11,10 @@ background: linear-gradient(140.3deg, #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/sections/Experience/ExperienceCard.tsx b/frontend/src/app/sections/Experience/ExperienceCard.tsx new file mode 100644 index 0000000..2afb2b0 --- /dev/null +++ b/frontend/src/app/sections/Experience/ExperienceCard.tsx @@ -0,0 +1,115 @@ +"use client"; +import MentorReviewSVG from "@/app/assets/images/MentorReview"; +import VolunteerReviewSVG from "@/app/assets/images/VolunteerReview"; +import MainExpCard from "@/app/components/TheDeerHackExp/MainExpCard"; +import { useRef, useState, useEffect, ReactElement } from "react"; + +type Testimonial = { + id: number; + description: string; + bottomText: string; + finBottomText: string; + svg: ReactElement; +} + +export default function ExperienceCard(){ + const scrollRef = useRef(null); + const [activeIndex, setActiveIndex] = useState(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: + } + ]; + + const scrollToSlide = (index: number) => { + if(scrollRef.current){ + const slideWidth = scrollRef.current.offsetWidth; + scrollRef.current.scrollTo({ + left: slideWidth * index, + behavior: "smooth", + }) + setActiveIndex(index); + } + } + + const nextSlide = () => { + const newIndex = activeIndex === testimonials.length - 1 ? 0: activeIndex + 1; + scrollToSlide(newIndex); + } + + const prevSlide = () => { + const newIndex = activeIndex === 0 ? testimonials.length - 1 : activeIndex - 1; + scrollToSlide(newIndex); + } + + useEffect(() => { + const handleScroll = () => { + if(scrollRef.current){ + const scrollPosition = scrollRef.current.scrollLeft; + const slideWidth = scrollRef.current.offsetWidth; + const newIndex = Math.round(scrollPosition / slideWidth); + + if(newIndex !== activeIndex){ + setActiveIndex(newIndex); + } + } + } + + const scrollContainer = scrollRef.current; + if(scrollContainer){ + scrollContainer.addEventListener("scroll", handleScroll); + return () => scrollContainer.removeEventListener("scroll", handleScroll) + } + }, [activeIndex]) + + return( +
+
+ {testimonials.map((testimonial, index) => + + ) + } +
+ +
+ {testimonials.map((_, index) => ( + + ))} +
+
+ + ); +} \ No newline at end of file From c2749405885b036bde80ebb7afa7e089307d7699 Mon Sep 17 00:00:00 2001 From: chrisdvkta Date: Tue, 18 Mar 2025 21:46:33 +0545 Subject: [PATCH 2/9] Add:comments --- .../sections/Experience/ExperienceCard.tsx | 182 +++++++++--------- 1 file changed, 94 insertions(+), 88 deletions(-) diff --git a/frontend/src/app/sections/Experience/ExperienceCard.tsx b/frontend/src/app/sections/Experience/ExperienceCard.tsx index 2afb2b0..755a2d9 100644 --- a/frontend/src/app/sections/Experience/ExperienceCard.tsx +++ b/frontend/src/app/sections/Experience/ExperienceCard.tsx @@ -10,106 +10,112 @@ type Testimonial = { bottomText: string; finBottomText: string; svg: ReactElement; -} +}; -export default function ExperienceCard(){ - const scrollRef = useRef(null); - const [activeIndex, setActiveIndex] = useState(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: - } - ]; +export default function ExperienceCard() { + const scrollRef = useRef(null); + const [activeIndex, setActiveIndex] = useState(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: , + }, + ]; - const scrollToSlide = (index: number) => { - if(scrollRef.current){ - const slideWidth = scrollRef.current.offsetWidth; - scrollRef.current.scrollTo({ - left: slideWidth * index, - behavior: "smooth", - }) - setActiveIndex(index); - } + const scrollToSlide = (index: number) => { + if (scrollRef.current) { + const slideWidth = scrollRef.current.offsetWidth; + scrollRef.current.scrollTo({ + left: slideWidth * index, + behavior: "smooth", + }); + setActiveIndex(index); } + }; - const nextSlide = () => { - const newIndex = activeIndex === testimonials.length - 1 ? 0: activeIndex + 1; - scrollToSlide(newIndex); - } + const nextSlide = () => { + const newIndex = + activeIndex === testimonials.length - 1 ? 0 : activeIndex + 1; + scrollToSlide(newIndex); + }; - const prevSlide = () => { - const newIndex = activeIndex === 0 ? testimonials.length - 1 : activeIndex - 1; - scrollToSlide(newIndex); - } + const prevSlide = () => { + const newIndex = + activeIndex === 0 ? testimonials.length - 1 : activeIndex - 1; + scrollToSlide(newIndex); + }; - useEffect(() => { - const handleScroll = () => { - if(scrollRef.current){ - const scrollPosition = scrollRef.current.scrollLeft; - const slideWidth = scrollRef.current.offsetWidth; - const newIndex = Math.round(scrollPosition / slideWidth); + useEffect(() => { + const handleScroll = () => { + if (scrollRef.current) { + const scrollPosition = scrollRef.current.scrollLeft; + const slideWidth = scrollRef.current.offsetWidth; + const newIndex = Math.round(scrollPosition / slideWidth); - if(newIndex !== activeIndex){ - setActiveIndex(newIndex); - } - } + if (newIndex !== activeIndex) { + setActiveIndex(newIndex); } + } + }; - const scrollContainer = scrollRef.current; - if(scrollContainer){ - scrollContainer.addEventListener("scroll", handleScroll); - return () => scrollContainer.removeEventListener("scroll", handleScroll) - } - }, [activeIndex]) + const scrollContainer = scrollRef.current; + if (scrollContainer) { + scrollContainer.addEventListener("scroll", handleScroll); + return () => scrollContainer.removeEventListener("scroll", handleScroll); + } + }, [activeIndex]); - return( -
-
- {testimonials.map((testimonial, index) => - + {/* {Make each div snappy (research), + for each snap shift the dot button by 1. Reset buttons at 3} + To achieve this lift the scrollRef value to DeerhackExperiencePage.tsx + */} +
+ {testimonials.map((testimonial, index) => ( + - ) - } -
+ svg={testimonial.svg} + /> + ))} +
-
- {testimonials.map((_, index) => ( - - ))} -
-
- - ); -} \ No newline at end of file + {/*
+ {testimonials.map((_, index) => ( + + ))} +
*/} + + ); +} From 9a3ee3746b1b67c316aa25d0d4fb2dac3fae6b1b Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Fri, 28 Mar 2025 11:31:42 +0545 Subject: [PATCH 3/9] updating task --- frontend/src/app/(pages)/DeerhackExperiencePage.tsx | 8 ++++---- .../src/app/components/TheDeerHackExp/MainExpCard.tsx | 6 +++--- frontend/src/app/sections/Experience/ExperienceCard.tsx | 8 +++++--- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx index 6662042..76fa4ed 100644 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -41,13 +41,13 @@ export default function ExperiencePage() { The DeerHack Experience -
+
-
-
+
+
diff --git a/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx b/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx index 75d0cd9..6bf75e6 100644 --- a/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx +++ b/frontend/src/app/components/TheDeerHackExp/MainExpCard.tsx @@ -20,10 +20,10 @@ export default function MainExpCard({ }){ return(
-
+ p-[0.1875rem] relative items-center"> +
-
+
{svg}
+
{/* {Make each div snappy (research), for each snap shift the dot button by 1. Reset buttons at 3} To achieve this lift the scrollRef value to DeerhackExperiencePage.tsx */} -
+
{testimonials.map((testimonial, index) => ( +
+
))}
From d8279eef1ae8a7de06ead2094bb99cb4f3c7b576 Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Sun, 30 Mar 2025 18:04:30 +0545 Subject: [PATCH 4/9] added leaf images --- .../app/(pages)/DeerhackExperiencePage.tsx | 54 +- .../images/leaf_right_deerhack_2025.svg | 11 + .../src/app/assets/images/new_404_image.svg | 651 ++++++++++++++++++ frontend/src/app/not-found.tsx | 10 +- .../sections/Experience/ExperienceCard.tsx | 106 +-- frontend/src/app/styles.module.css | 11 +- 6 files changed, 729 insertions(+), 114 deletions(-) create mode 100644 frontend/src/app/assets/images/leaf_right_deerhack_2025.svg create mode 100644 frontend/src/app/assets/images/new_404_image.svg diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx index 76fa4ed..0753d50 100644 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -1,11 +1,9 @@ "use client" import { cabinetExtraBold } from "../utils/fonts" -// Use dynamic imports to prevent build errors if files don't exist -const leaf_prizes_right = "/placeholder.svg?height=250&width=250" -const leaf_deerhack2023_right = "/placeholder.svg?height=250&width=250" +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 } from "react" +import { useState, useRef, useEffect } from "react" export default function ExperiencePage() { const [activeCard, setActiveCard] = useState(0) @@ -14,22 +12,41 @@ export default function ExperiencePage() { const handleDotClick = (index: number) => { setActiveCard(index) - // Scroll to the selected card if (scrollContainerRef.current) { - const cardWidth = scrollContainerRef.current.querySelector(".snap-center")?.clientWidth || 0 - const spacing = 16 // space-x-4 = 1rem = 16px + const cardWidth = scrollContainerRef.current.clientWidth scrollContainerRef.current.scrollTo({ - left: index * (cardWidth + spacing), + 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) => (
) -} +} \ No newline at end of file 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/not-found.tsx b/frontend/src/app/not-found.tsx index dcbfeb3..5b69792 100644 --- a/frontend/src/app/not-found.tsx +++ b/frontend/src/app/not-found.tsx @@ -8,11 +8,12 @@ import GoBackToHome from "./components/GoBack/GoBackToHome"; export default function NotFound() { return ( +
-

-

+
+ ); } diff --git a/frontend/src/app/sections/Experience/ExperienceCard.tsx b/frontend/src/app/sections/Experience/ExperienceCard.tsx index d657de9..70ae33d 100644 --- a/frontend/src/app/sections/Experience/ExperienceCard.tsx +++ b/frontend/src/app/sections/Experience/ExperienceCard.tsx @@ -1,20 +1,18 @@ -"use client"; -import MentorReviewSVG from "@/app/assets/images/MentorReview"; -import VolunteerReviewSVG from "@/app/assets/images/VolunteerReview"; -import MainExpCard from "@/app/components/TheDeerHackExp/MainExpCard"; -import { useRef, useState, useEffect, ReactElement } from "react"; +"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; -}; + id: number + description: string + bottomText: string + finBottomText: string + svg: ReactElement +} -export default function ExperienceCard() { - const scrollRef = useRef(null); - const [activeIndex, setActiveIndex] = useState(0); +export default function ExperienceCard({ activeIndex = 0 }) { const testimonials: Testimonial[] = [ { id: 1, @@ -40,84 +38,20 @@ export default function ExperienceCard() { finBottomText: "DeerHack 2024", svg: , }, - ]; - - const scrollToSlide = (index: number) => { - if (scrollRef.current) { - const slideWidth = scrollRef.current.offsetWidth; - scrollRef.current.scrollTo({ - left: slideWidth * index, - behavior: "smooth", - }); - setActiveIndex(index); - } - }; - - const nextSlide = () => { - const newIndex = - activeIndex === testimonials.length - 1 ? 0 : activeIndex + 1; - scrollToSlide(newIndex); - }; - - const prevSlide = () => { - const newIndex = - activeIndex === 0 ? testimonials.length - 1 : activeIndex - 1; - scrollToSlide(newIndex); - }; - - useEffect(() => { - const handleScroll = () => { - if (scrollRef.current) { - const scrollPosition = scrollRef.current.scrollLeft; - const slideWidth = scrollRef.current.offsetWidth; - const newIndex = Math.round(scrollPosition / slideWidth); - - if (newIndex !== activeIndex) { - setActiveIndex(newIndex); - } - } - }; - - const scrollContainer = scrollRef.current; - if (scrollContainer) { - scrollContainer.addEventListener("scroll", handleScroll); - return () => scrollContainer.removeEventListener("scroll", handleScroll); - } - }, [activeIndex]); + ] return ( -
- {/* {Make each div snappy (research), - for each snap shift the dot button by 1. Reset buttons at 3} - To achieve this lift the scrollRef value to DeerhackExperiencePage.tsx - */} -
- {testimonials.map((testimonial, index) => ( -
+
+ {testimonials.map((testimonial, index) => ( +
-
- ))} -
- - {/*
- {testimonials.map((_, 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..e344a79 100644 --- a/frontend/src/app/styles.module.css +++ b/frontend/src/app/styles.module.css @@ -1,19 +1,24 @@ .background_container { - background-image: url("./assets/images/404_Desktop_Upscaled.svg"); + background-image: url("./assets/images/new_404_image.svg"); background-position: top; + background-size: cover; background-repeat: no-repeat; + height: 100vh; + } .muted_color { - background-color: rgba(17, 12, 36, 0.6); + background-color: rgba(17, 12, 36, 0.3); } @media (max-width: 3000px) { .background_container { - background-image: url("./assets/images/404_Desktop_Upscaled.svg"); + background-image: url("./assets/images/new_404_image.svg"); background-repeat: no-repeat; background-size: cover; background-position: top; + height: 100vh; + } } From 4e3f03d94c7d0eb89b079842c377168e913f6a5d Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Sun, 30 Mar 2025 18:16:25 +0545 Subject: [PATCH 5/9] reverting changes done to the wrong branch --- frontend/src/app/not-found.tsx | 11 +++++------ frontend/src/app/styles.module.css | 13 ++++--------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx index 5b69792..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"; @@ -8,12 +9,11 @@ import GoBackToHome from "./components/GoBack/GoBackToHome"; export default function NotFound() { return ( -
-

-

+
- ); } diff --git a/frontend/src/app/styles.module.css b/frontend/src/app/styles.module.css index e344a79..c2ec503 100644 --- a/frontend/src/app/styles.module.css +++ b/frontend/src/app/styles.module.css @@ -1,24 +1,19 @@ .background_container { - background-image: url("./assets/images/new_404_image.svg"); + background-image: url("./assets/images/404_Desktop_Upscaled.svg"); background-position: top; - background-size: cover; background-repeat: no-repeat; - height: 100vh; - } .muted_color { - background-color: rgba(17, 12, 36, 0.3); + background-color: rgba(17, 12, 36, 0.6); } @media (max-width: 3000px) { .background_container { - background-image: url("./assets/images/new_404_image.svg"); + background-image: url("./assets/images/404_Desktop_Upscaled.svg"); background-repeat: no-repeat; background-size: cover; background-position: top; - height: 100vh; - } } @@ -47,4 +42,4 @@ background-size: cover; background-position: top; } -} +} \ No newline at end of file From 0faf99979c3fa8ad493fe5e9ddde60016e3986a8 Mon Sep 17 00:00:00 2001 From: ConfusedKnight Date: Sun, 6 Apr 2025 15:17:38 +0545 Subject: [PATCH 6/9] fix: fixed the carousel indicator size, and spacing between other components --- frontend/src/app/(pages)/DeerhackExperiencePage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx index 0753d50..d6ff7e9 100644 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -42,7 +42,7 @@ export default function ExperiencePage() { }, [activeCard]) return ( -
+
leaf
@@ -72,8 +72,8 @@ export default function ExperiencePage() {
+
+ + leaf +
+ ) +} From a862dacc111b60e7c67a4908e26f10c8ab1bf37b Mon Sep 17 00:00:00 2001 From: Srijan Dahal Date: Sat, 12 Apr 2025 20:28:01 +0545 Subject: [PATCH 8/9] fix: responsiveness on right leaf svg --- .../src/app/(pages)/.BenefitsPage.tsx.un~ | Bin 576 -> 0 bytes .../(pages)/.DeerhackExperiencePage.tsx.un~ | Bin 9275 -> 0 bytes frontend/src/app/(pages)/BenefitsPage.tsx~ | 33 ------ .../app/(pages)/DeerhackExperiencePage.tsx | 4 +- .../app/(pages)/DeerhackExperiencePage.tsx~ | 94 ------------------ 5 files changed, 1 insertion(+), 130 deletions(-) delete mode 100644 frontend/src/app/(pages)/.BenefitsPage.tsx.un~ delete mode 100644 frontend/src/app/(pages)/.DeerhackExperiencePage.tsx.un~ delete mode 100644 frontend/src/app/(pages)/BenefitsPage.tsx~ delete mode 100644 frontend/src/app/(pages)/DeerhackExperiencePage.tsx~ diff --git a/frontend/src/app/(pages)/.BenefitsPage.tsx.un~ b/frontend/src/app/(pages)/.BenefitsPage.tsx.un~ deleted file mode 100644 index c984f0d16faee7ff50dbc4b0df7123ec473a7732..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 576 zcmWH`%$*;a=aT=Ffhn;{R_zJP+LPKBzWu#FU;1*Xn%1^ItADcOJh}FT+v|lY0|SF1 z2rEE=Q)*snT4qVHLVlV;Kw?ozW^!ghVo7FRI#7`?5Q_jYBNhx4Vqi%ByyrO!NS28q z{sLG8l>kY>3}N^W1Yo03)r|6}76S0-U}X3z0W?(zh(YnE2*jYM5WyDdrj5^60RXW_ BH0%HX diff --git a/frontend/src/app/(pages)/.DeerhackExperiencePage.tsx.un~ b/frontend/src/app/(pages)/.DeerhackExperiencePage.tsx.un~ deleted file mode 100644 index 9bf90df5d6ac095189bc397bc628df347577b73d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9275 zcmeI&&rcIU6bJC7fFg*92Q~3BR*w$0r4(qi2cn63P%mJVplrKKTe|Jmc4?~wqy7_m zFfs9H@IUaP9!(SzqbHAQJm`gZ@L=?Pr@M4h3pSK39Ofm%PG{2}^Y)Y1=`2&}?BmJY z8S}H^3;8}Byzn-5^8J(Nlci_9Y~{nT*QsfY;*^#yv4o)( zix<_be%c>Ta!oB{cz&UfH*_{<=oRsYCrpFoZ}CuonI*k2XP9N4N^6>)V+Gw%t#nCe zNj1-d0hW#P;RwrGd^qHf(fe>}Gt@e$4c4`OdaNW@zr60k*#YIo3I-^A)r0tpQzO)_ z;?W-p@ltpo!-EVYS6}$V<>*j;9;Vk1Q;Sf88C;5Ma8nHz95r4vjRi|*c}@hV8Ty>X zr^f;XJv+lJGta{jb{jryHWecpH_Swa@q%fomd=AA|HwT70PoUC%?V%tfN=~+0LX%u zK>&^l0KUcmGS1~^?#i(h0BW_RlrE;@hVF=ffG*dZp#vf&FeXJH3tk3^7#1Rw#v-iE zi-?<+WoCKkf3;y<8lceanmm|*#yrL(4P?Q~AR6O>MrUIh+fXbZV3%vo(1EWG9b-}i zvfyQqh==ZCF-C6|rRJ<3Qq^KnxAI(^J-(PwIUVD(@(-CoEb}44BCUE(8yCw`8;E=(X2y$TEWOzH~;C?NJ#4}yuLVJD;ILo+n0cP0CG2#rX s8mgetyF;o*nEnaF{z>9g3?~C%B563;X!Y0(jk2K8w^L|DK;!Gvzh&omjQ{`u diff --git a/frontend/src/app/(pages)/BenefitsPage.tsx~ b/frontend/src/app/(pages)/BenefitsPage.tsx~ deleted file mode 100644 index 28e5ba7..0000000 --- a/frontend/src/app/(pages)/BenefitsPage.tsx~ +++ /dev/null @@ -1,33 +0,0 @@ -import BenefitsCards from "../sections/Benefits/BenefitsCard"; -import { cabinetBlack, cabinetExtraBold } from "../utils/fonts"; -import leaf_prizes_right from "@/app/assets/images/leaf_prizes_right.svg"; -import leaf_deerhack2023_right from "@/app/assets/images/leaf_deerhack2023_right.svg"; -import Image from "next/image"; - -export default function BenefitsPage() { - return ( -
-
- leaf -
-
- Benefits of -
-
- -
- leaf -
- ); -} diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx index ad769bc..5c94d29 100644 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx +++ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx @@ -43,16 +43,14 @@ export default function ExperiencePage() { return (
-
leaf -
The DeerHack Experience diff --git a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx~ b/frontend/src/app/(pages)/DeerhackExperiencePage.tsx~ deleted file mode 100644 index ad769bc..0000000 --- a/frontend/src/app/(pages)/DeerhackExperiencePage.tsx~ +++ /dev/null @@ -1,94 +0,0 @@ -"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 -
- ) -} From e732a536edd0b55f4c4ce051bf49cc74a7417969 Mon Sep 17 00:00:00 2001 From: Srijan Dahal Date: Sat, 19 Apr 2025 22:00:09 +0545 Subject: [PATCH 9/9] add: exoerience page in main pages --- frontend/src/app/MainPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/MainPage.tsx b/frontend/src/app/MainPage.tsx index ba570b3..b700e1d 100644 --- a/frontend/src/app/MainPage.tsx +++ b/frontend/src/app/MainPage.tsx @@ -27,6 +27,7 @@ export default function Home() { + {/* */} {/* */}