-
-
-
+
Rs.
50,000
@@ -30,5 +88,5 @@ export default function GrandPrizeCard(): ReactElement {
- )
-}
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/OtherPrizes/SwagPrizes.tsx b/frontend/src/app/components/OtherPrizes/SwagPrizes.tsx
index 5e25a21..6ce43be 100644
--- a/frontend/src/app/components/OtherPrizes/SwagPrizes.tsx
+++ b/frontend/src/app/components/OtherPrizes/SwagPrizes.tsx
@@ -1,11 +1,24 @@
-import type { ReactElement } from "react"
-import { cabinetExtraBold } from "@/app/utils/fonts"
-export default function Swagprizes({
- svg,
-}: {
- svg: ReactElement
-}) {
+"use client";
+import type { ReactElement } from "react";
+import Lottie from "lottie-react";
+import thumbsUpAnimation from "../../../../public/animations/thumbs.json";
+
+
+import { cabinetExtraBold } from "@/app/utils/fonts";
+import { useEffect, useRef } from "react";
+
+export default function SwagPrizes({ scrollProgress }: { scrollProgress: number }): ReactElement {
+ const lottieRef = useRef
(null);
+
+ useEffect(() => {
+ if (!lottieRef.current) return;
+ const anim = lottieRef.current;
+ const totalFrames = anim.getDuration(true);
+ const frame = Math.floor(scrollProgress * totalFrames);
+ anim.goToAndStop(frame, true);
+ }, [scrollProgress]);
+
return (
@@ -14,8 +27,16 @@ export default function Swagprizes({
>
Swags and Freebies!
-
{svg}
+
+
+
- )
-}
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/TrackWinner/TrackWinner.tsx b/frontend/src/app/components/TrackWinner/TrackWinner.tsx
index b81a5c9..c827fc0 100644
--- a/frontend/src/app/components/TrackWinner/TrackWinner.tsx
+++ b/frontend/src/app/components/TrackWinner/TrackWinner.tsx
@@ -1,38 +1,101 @@
-import type { ReactElement } from "react"
-import Confetti from "@/app/assets/images/confetti"
-import { cabinetBlack, cabinetBold, cabinetRegular } from "@/app/utils/fonts"
+// "use client";
+// import type { ReactElement } from "react";
+// import Lottie from "lottie-react";
+// import confettiAnimation from "../../../../public/animations/confetti.json";
+// import { cabinetBlack, cabinetBold, cabinetRegular } from "@/app/utils/fonts";
+// import { useEffect, useRef } from "react";
+
+// export default function TrackWinner({ scrollProgress }: { scrollProgress: number }): ReactElement {
+// const lottieRef = useRef
(null);
+
+// useEffect(() => {
+// if (!lottieRef.current) return;
+// const anim = lottieRef.current;
+// const totalFrames = anim.getDuration(true);
+// const frame = Math.floor(scrollProgress * totalFrames);
+// anim.goToAndStop(frame, true);
+// }, [scrollProgress]);
+
+// return (
+//
+//
+//
+//
+//
+//
+// Track Winner
+//
+//
+//
+//
+//
+// New Track Added !
+//
+//
+// Rs. 15,000
+//
+//
+// per track
+//
+//
+//
+//
-
-
+
+
+ { dotLottieRef.current = ref; }}
+ src="/animations/confetti.json"
+ loop={false}
+ autoplay={false}
+ style={{ width: 120, height: 120 }}
+ />
+
+
+
-
+
New Track Added !
Rs. 15,000
-
+
per track
- )
-}
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/sections/Prizes/PrizesGrid.tsx b/frontend/src/app/sections/Prizes/PrizesGrid.tsx
index dc0cbb7..29bb621 100644
--- a/frontend/src/app/sections/Prizes/PrizesGrid.tsx
+++ b/frontend/src/app/sections/Prizes/PrizesGrid.tsx
@@ -1,25 +1,49 @@
-import { ReactElement } from "react";
-import Solana from "@/app/components/Solana/Solana";
-import Replit from "@/app/components/Replit/Replit";
+"use client";
+import { ReactElement, useRef, useEffect, useState } from "react";
import GrandPrizeCard from "@/app/components/GrandPrize/GrandPrizeCard";
import SwagPrizes from "@/app/components/OtherPrizes/SwagPrizes";
import TrackWinner from "@/app/components/TrackWinner/TrackWinner";
-import Filecoin from "@/app/components/Filecoin/Filecoin";
-import Polygon from "@/app/components/Polygon/Polygon";
import OtherPrizes from "@/app/components/OtherPrizes/OtherPrizes";
-import ThumbsUp from "@/app/assets/images/ThumbsUp";
import GiftBox from "@/app/assets/images/giftbox";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
export default function PrizesGrid(): ReactElement {
+ const sectionRef = useRef(null);
+ const [scrollProgress, setScrollProgress] = useState(0);
+
+ useEffect(() => {
+ if (!sectionRef.current) return;
+
+ const ctx = gsap.context(() => {
+ ScrollTrigger.create({
+ trigger: sectionRef.current,
+ start: "top 70%",
+ end: "bottom 20%",
+ scrub: true,
+ onUpdate: (self) => {
+ setScrollProgress(self.progress);
+ },
+ });
+ }, sectionRef);
+
+ return () => ctx.revert();
+ }, []);
+
return (
-
+
-
+
-
- } />
+
+
} />
@@ -27,4 +51,4 @@ export default function PrizesGrid(): ReactElement {
);
-}
+}
\ No newline at end of file