)
}
diff --git a/frontend/src/app/components/DeerhackStats/CardMini.tsx b/frontend/src/app/components/DeerhackStats/CardMini.tsx
index e318f0d..33c619f 100644
--- a/frontend/src/app/components/DeerhackStats/CardMini.tsx
+++ b/frontend/src/app/components/DeerhackStats/CardMini.tsx
@@ -8,21 +8,24 @@ export default function CardMini({
numbers,
customClass,
border,
+ className = "",
}: {
svg: ReactElement;
title: string;
numbers: number;
customClass?: string;
border?: boolean;
+ className?: string; // ← pass any height/sizing class from outside
}) {
return (
{svg}
diff --git a/frontend/src/app/components/DeerhackStats/page.tsx b/frontend/src/app/components/DeerhackStats/page.tsx
index 2672a2b..1c6ed18 100644
--- a/frontend/src/app/components/DeerhackStats/page.tsx
+++ b/frontend/src/app/components/DeerhackStats/page.tsx
@@ -9,10 +9,24 @@ export default function StatsSection() {
- } title="Hackers" numbers={215} customClass="bg-[#532B6A]"/>
- } title="Total Projects" border={true} numbers={33} />
+ }
+ title="Hackers"
+ numbers={215}
+ customClass="bg-[#532B6A]"
+ className="h-[200px]"
+ />
+ }
+ title="Total Projects"
+ border={true}
+ numbers={33}
+ className="h-[200px]"
+ />
+
+
+
-
);
-}
+}
\ 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 (
+
+ );
+ })}
+
+
+
+
+
+
+