-
+
{buttons.map(({ key, Icon }) => {
const isActive = activeTab === key;
@@ -78,6 +78,7 @@ export default function AboutCard({
rounded-r-[40px] rounded-l-[6px] about-section-button p-1 md:p-2
flex items-center justify-end shadow-lg
h-10 md:h-16
+ transition-all duration-300 ease-in-out
${isActive ? "w-[72px] md:w-[140px] brightness-125" : "w-12 md:w-16"}
`}
aria-label={`Show ${key} info`}
@@ -133,11 +134,11 @@ export default function AboutCard({
);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/ExpectationsV2/ExpectationCard.tsx b/frontend/src/app/components/ExpectationsV2/ExpectationCard.tsx
new file mode 100644
index 0000000..faef669
--- /dev/null
+++ b/frontend/src/app/components/ExpectationsV2/ExpectationCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+import { ReactElement } from "react";
+import { cabinetBold } from "@/app/utils/fonts";
+
+export default function ExpectationCard({
+ svg,
+ title,
+ description,
+ isActive,
+}: {
+ svg?: ReactElement;
+ title?: string;
+ description?: string;
+ isActive?: boolean;
+}): ReactElement {
+ return (
+
+ );
+}
diff --git a/frontend/src/app/components/ExpectationsV2/ExpectationImage.tsx b/frontend/src/app/components/ExpectationsV2/ExpectationImage.tsx
new file mode 100644
index 0000000..676cbd0
--- /dev/null
+++ b/frontend/src/app/components/ExpectationsV2/ExpectationImage.tsx
@@ -0,0 +1,24 @@
+ import Image, { StaticImageData } from "next/image";
+ import { ReactElement } from "react";
+
+ export default function ExpectationImage({
+ imageSrc,
+ className,
+ }: {
+ imageSrc: StaticImageData;
+ className?:string;
+ }): ReactElement {
+ return (
+
+ );
+ }
diff --git a/frontend/src/app/global.d.ts b/frontend/src/app/global.d.ts
new file mode 100644
index 0000000..7f70183
--- /dev/null
+++ b/frontend/src/app/global.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
\ No newline at end of file
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index b815cb4..3188bd3 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -25,17 +25,17 @@ export const metadata = {
" why participate in hackathon",
],
openGraph: {
- title: "Deerhack 2026 - Fawning over Innovation",
+ title: "DeerHack 2026 - Fawning over Innovation",
description:
"DeerHack 2026 is the brainchild of a small team to unleash the potential of young innovators through a 36-hour hackathon in which developers, designers, students, entrepreneurs, educators, and mentors collaborate to create solutions that tackle real-world problems. When people from many backgrounds collaborate, they do more than merely do good; they become a force for global change",
url: "https://deerhack.deerwalk.edu.np",
- siteName: "Deerhack 2026 - Fawning Over Innovation",
+ siteName: "DeerHack 2026 - Fawning Over Innovation",
images: [
{
url: "/banner.webp",
width: 400,
height: 250,
- alt: "Deerhack 2026 Banner",
+ alt: "DeerHack 2026 Banner",
},
],
locale: "en_US",
@@ -43,7 +43,7 @@ export const metadata = {
},
twitter: {
card: "summary_large_image",
- title: "Deerhack 2026",
+ title: "DeerHack 2026",
description:
"DeerHack 2026 is the brainchild of a small team to unleash the potential of young innovators through a 36-hour hackathon in which developers, designers, students, entrepreneurs, educators, and mentors collaborate to create solutions that tackle real-world problems. When people from many backgrounds collaborate, they do more than merely do good; they become a force for global change",
images: ["/banner.webp"],
diff --git a/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx b/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx
index b0da563..c78c075 100644
--- a/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx
+++ b/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx
@@ -7,7 +7,7 @@ const AboutTheEventCards = () => {
const tabs = {
deerhack: {
svg:
,
- title: "Deerhack 2026",
+ title: "DeerHack 2026",
description:
"DeerHack 2026 is a 48-hour hackathon where developers, designers, students, entrepreneurs, educators, and mentors work together to build ideas that solve real-world complications. DeerHack provides an opportunity for individuals to sharpen their teamwork, communication, leadership skills, and networking in a risk-free and comfortable environment.",
},
diff --git a/frontend/src/app/sections/ExpectationsV2/ExpectationCards.tsx b/frontend/src/app/sections/ExpectationsV2/ExpectationCards.tsx
new file mode 100644
index 0000000..7897c12
--- /dev/null
+++ b/frontend/src/app/sections/ExpectationsV2/ExpectationCards.tsx
@@ -0,0 +1,181 @@
+"use client";
+import ExpectationCard from "@/app/components/ExpectationsV2/ExpectationCard";
+import { ReactElement, useState, useEffect, useRef } from "react";
+import ExpectationImage from "@/app/components/ExpectationsV2/ExpectationImage";
+import ExpectationsArrow from "@/app/assets/icons/ExpectationsArrow";
+import { originalCards } from "./data";
+
+export default function ExpectationCards(): ReactElement {
+ const cards = [...originalCards, ...originalCards, ...originalCards];
+
+ const [currentIndex, setCurrentIndex] = useState(originalCards.length);
+ const [isTransitioning, setIsTransitioning] = useState(false);
+
+ const [gap, setGap] = useState(98);
+ const [cardWidth, setCardWidth] = useState(380);
+
+ useEffect(() => {
+ const handleResize = () => {
+ const width = window.innerWidth;
+ if (width >= 1280) {
+ setGap(98);
+ setCardWidth(380);
+ } else if (width >= 768) {
+ setGap(50);
+ setCardWidth(320);
+ } else {
+ setGap(28);
+ setCardWidth(300);
+ }
+ };
+
+ handleResize();
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ const nextSlide = () => {
+ if (isTransitioning) return;
+ setIsTransitioning(true);
+ setCurrentIndex((prev) => prev + 1);
+ };
+
+ const prevSlide = () => {
+ if (isTransitioning) return;
+ setIsTransitioning(true);
+ setCurrentIndex((prev) => prev - 1);
+ };
+
+ const handleTransitionEnd = () => {
+ setIsTransitioning(false);
+
+ if (currentIndex >= originalCards.length * 2) {
+ setCurrentIndex(currentIndex - originalCards.length);
+ } else if (currentIndex < originalCards.length) {
+ setCurrentIndex(currentIndex + originalCards.length);
+ }
+ };
+
+ const touchStartX = useRef
(null);
+ const touchEndX = useRef(null);
+ const minSwipeDistance = 50;
+
+ const onTouchStart = (e: React.TouchEvent) => {
+ touchEndX.current = null;
+ touchStartX.current = e.targetTouches[0].clientX;
+ };
+
+ const onTouchMove = (e: React.TouchEvent) => {
+ touchEndX.current = e.targetTouches[0].clientX;
+ };
+
+ const onTouchEnd = () => {
+ if (!touchStartX.current || !touchEndX.current) return;
+
+ const distance = touchStartX.current - touchEndX.current;
+ const isLeftSwipe = distance > minSwipeDistance;
+ const isRightSwipe = distance < -minSwipeDistance;
+
+ if (isLeftSwipe) {
+ nextSlide();
+ } else if (isRightSwipe) {
+ prevSlide();
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ {cards.map((card, index) => {
+ const isActive = index === currentIndex;
+
+ return (
+
+ );
+ })}
+
+
+
+ {originalCards.map((_, dotIndex) => {
+ const activeDotIndex = currentIndex % originalCards.length;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+