-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #401 from lynaDev2/modalfix
Modalfix
- Loading branch information
Showing
64 changed files
with
4,651 additions
and
4,791 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,22 @@ | ||
| import FeatureCards from "./about-us/FeatureCards"; | ||
| import HeroSection from "./about-us/HeroSection"; | ||
| import JoinSection from "./about-us/JoinSection"; | ||
| import StatsSection from "./about-us/StatsSection"; | ||
| import VisionSection from "./about-us/VisionSection"; | ||
| import Footer from "./Footer"; | ||
| import Header from "./Header"; | ||
|
|
||
|
|
||
| export default function AboutPage() { | ||
| return ( | ||
| <div className="bg-white"> | ||
| <Header /> | ||
| <HeroSection /> | ||
| <FeatureCards /> | ||
| <VisionSection /> | ||
| <JoinSection /> | ||
| <StatsSection /> | ||
| <Footer /> | ||
| </div> | ||
| ); | ||
| import FeatureCards from "./about-us/FeatureCards"; | ||
| import HeroSection from "./about-us/HeroSection"; | ||
| import JoinSection from "./about-us/JoinSection"; | ||
| import StatsSection from "./about-us/StatsSection"; | ||
| import VisionSection from "./about-us/VisionSection"; | ||
| import Footer from "./Footer"; | ||
| import Header from "./Header"; | ||
|
|
||
|
|
||
| export default function AboutPage() { | ||
| return ( | ||
| <div className="bg-white"> | ||
| <Header /> | ||
| <HeroSection /> | ||
| <FeatureCards /> | ||
| <VisionSection /> | ||
| <JoinSection /> | ||
| <StatsSection /> | ||
| <Footer /> | ||
| </div> | ||
| ); | ||
| } |
98 changes: 49 additions & 49 deletions
98
.../components/how-to-play/ActionButtons.jsx → frontend/components/ActionButtons.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,49 @@ | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
| import { FaPlay, FaWallet } from "react-icons/fa"; | ||
| import { Modal } from "../ui/modal"; | ||
| import { GameSetupForm } from "../modal/GameSetupForm"; | ||
| import { useGameStore } from "@/store/gameStore"; | ||
|
|
||
| export const ActionButtons = () => { | ||
| const { handleStartGame, isModalOpen, setIsModalOpen } = useGameStore(); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className="flex flex-col items-center justify-center gap-6 md:flex-row" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.8, delay: 0.6 }} | ||
| > | ||
| <motion.button | ||
| className="group w-full rounded-full bg-gradient-to-r from-primary-light to-purple-500 px-[69px] py-6 font-bold text-text-primary shadow-lg hover:shadow-[0_0_25px_rgba(123,31,162,0.6)] transition md:w-auto relative overflow-hidden" | ||
| onClick={() => setIsModalOpen(true)} | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| > | ||
| <span className="relative z-10 flex items-center justify-center gap-2"> | ||
| <FaPlay /> Start Guessing | ||
| <span className="absolute inset-0 bg-white rounded-full opacity-0 group-hover:opacity-20 transition-opacity"></span> | ||
| </span> | ||
| </motion.button> | ||
|
|
||
| <Modal | ||
| isOpen={isModalOpen} | ||
| onClose={() => setIsModalOpen(false)} | ||
| title="Guess the song" | ||
| > | ||
| <GameSetupForm onStart={handleStartGame} /> | ||
| </Modal> | ||
|
|
||
| <motion.button | ||
| className="group w-full rounded-full border-2 border-primary-light px-[51px] py-6 font-bold text-primary-light hover:bg-primary-light hover:text-text-primary transition md:w-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| > | ||
| <span className="flex items-center justify-center gap-2"> | ||
| <FaWallet /> Connect Wallet | ||
| </span> | ||
| </motion.button> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
| import { FaPlay, FaWallet } from "react-icons/fa"; | ||
| import { Modal } from "./ui/modal"; | ||
| import { GameSetupForm } from "./modal/GameSetupForm"; | ||
| import { useGameStore } from "@/store/gameStore"; | ||
|
|
||
| export const ActionButtons = () => { | ||
| const { handleStartGame, isModalOpen, setIsModalOpen } = useGameStore(); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className="flex flex-col items-center justify-center gap-6 md:flex-row" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.8, delay: 0.6 }} | ||
| > | ||
| <motion.button | ||
| className="group w-full rounded-full bg-gradient-to-r from-primary-light to-purple-500 px-[69px] py-6 font-bold text-[#090909] shadow-lg hover:shadow-[0_0_25px_rgba(123,31,162,0.6)] transition md:w-auto relative overflow-hidden" | ||
| onClick={() => setIsModalOpen(true)} | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| > | ||
| <span className="relative z-10 flex items-center justify-center gap-2"> | ||
| <FaPlay /> Start Guessing | ||
| <span className="absolute inset-0 bg-white rounded-full opacity-0 group-hover:opacity-20 transition-opacity"></span> | ||
| </span> | ||
| </motion.button> | ||
| <Modal | ||
| isOpen={isModalOpen} | ||
| onClose={() => setIsModalOpen(false)} | ||
| title="Guess the song" | ||
| > | ||
| <GameSetupForm onStart={handleStartGame} /> | ||
| </Modal> | ||
| <motion.button | ||
| className="group w-full rounded-full border-2 border-primary-light px-[51px] py-6 font-bold text-primary-light hover:bg-primary-light hover:text-[#090909] transition md:w-auto" | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| > | ||
| <span className="flex items-center justify-center gap-2"> | ||
| <FaWallet /> Connect Wallet | ||
| </span> | ||
| </motion.button> | ||
| </motion.div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| // ArrowIcon.jsx | ||
| const ArrowIcon = () => ( | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#7B1FA2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default ArrowIcon; | ||
| // ArrowIcon.jsx | ||
| const ArrowIcon = () => ( | ||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#7B1FA2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default ArrowIcon; | ||
|
|
72 changes: 36 additions & 36 deletions
72
...tend/components/how-to-play/AudioWave.jsx → frontend/components/AudioWave.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,36 @@ | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| const audioWaveHeights = [ | ||
| [10, 30, 20, 15, 10], | ||
| [15, 40, 25, 50, 15], | ||
| [20, 35, 15, 45, 20], | ||
| [12, 45, 30, 60, 12], | ||
| [18, 30, 40, 25, 18], | ||
| [14, 50, 20, 40, 14], | ||
| [25, 35, 15, 30, 25], | ||
| [10, 25, 45, 20, 10], | ||
| [15, 30, 20, 55, 15], | ||
| [22, 40, 25, 35, 22], | ||
| [17, 45, 30, 40, 17], | ||
| [13, 30, 50, 25, 13] | ||
| ]; | ||
|
|
||
| export const AudioWave = () => ( | ||
| <div className="flex items-end justify-center h-16 gap-1 my-4"> | ||
| {Array.from({ length: 12 }).map((_, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="w-2 bg-primary-light rounded-full" | ||
| initial={{ height: audioWaveHeights[i][0] }} | ||
| animate={{ height: audioWaveHeights[i] }} | ||
| transition={{ | ||
| duration: 1.5, | ||
| repeat: Infinity, | ||
| repeatType: "reverse", | ||
| delay: i * 0.08, | ||
| }} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| const audioWaveHeights = [ | ||
| [10, 30, 20, 15, 10], | ||
| [15, 40, 25, 50, 15], | ||
| [20, 35, 15, 45, 20], | ||
| [12, 45, 30, 60, 12], | ||
| [18, 30, 40, 25, 18], | ||
| [14, 50, 20, 40, 14], | ||
| [25, 35, 15, 30, 25], | ||
| [10, 25, 45, 20, 10], | ||
| [15, 30, 20, 55, 15], | ||
| [22, 40, 25, 35, 22], | ||
| [17, 45, 30, 40, 17], | ||
| [13, 30, 50, 25, 13] | ||
| ]; | ||
|
|
||
| export const AudioWave = () => ( | ||
| <div className="flex items-end justify-center h-16 gap-1 my-4"> | ||
| {Array.from({ length: 12 }).map((_, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| className="w-2 bg-primary-light rounded-full" | ||
| initial={{ height: audioWaveHeights[i][0] }} | ||
| animate={{ height: audioWaveHeights[i] }} | ||
| transition={{ | ||
| duration: 1.5, | ||
| repeat: Infinity, | ||
| repeatType: "reverse", | ||
| delay: i * 0.08, | ||
| }} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); |
40 changes: 20 additions & 20 deletions
40
...d/components/how-to-play/BonusSection.jsx → frontend/components/BonusSection.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,20 @@ | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
| import { FaTrophy } from "react-icons/fa"; | ||
|
|
||
| export const BonusSection = () => ( | ||
| <motion.div | ||
| className="mt-20 p-6 bg-black bg-opacity-40 backdrop-blur-sm rounded-xl max-w-2xl mx-auto" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.8, delay: 0.8 }} | ||
| > | ||
| <div className="flex items-center justify-center gap-3 mb-4"> | ||
| <FaTrophy className="text-yellow-400 text-3xl" /> | ||
| <h3 className="text-2xl font-bold text-white">Earn While You Learn</h3> | ||
| </div> | ||
| <p className="text-white opacity-90"> | ||
| Every correct guess earns you crypto rewards! The faster you identify the lyrics, the bigger your earnings. Challenge friends, climb global leaderboards, and become the ultimate music maestro. | ||
| </p> | ||
| </motion.div> | ||
| ); | ||
| "use client"; | ||
| import { motion } from "framer-motion"; | ||
| import { FaTrophy } from "react-icons/fa"; | ||
|
|
||
| export const BonusSection = () => ( | ||
| <motion.div | ||
| className="mt-20 p-6 bg-black bg-opacity-40 backdrop-blur-sm rounded-xl max-w-2xl mx-auto" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.8, delay: 0.8 }} | ||
| > | ||
| <div className="flex items-center justify-center gap-3 mb-4"> | ||
| <FaTrophy className="text-yellow-400 text-3xl" /> | ||
| <h3 className="text-2xl font-bold text-white">Earn While You Learn</h3> | ||
| </div> | ||
| <p className="text-white opacity-90"> | ||
| Every correct guess earns you crypto rewards! The faster you identify the lyrics, the bigger your earnings. Challenge friends, climb global leaderboards, and become the ultimate music maestro. | ||
| </p> | ||
| </motion.div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,43 @@ | ||
| "use client"; | ||
|
|
||
| import React, { Component } from "react"; | ||
|
|
||
| class ErrorBoundary extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { hasError: false }; | ||
| } | ||
|
|
||
| static getDerivedStateFromError(error) { | ||
| return { hasError: true }; | ||
| } | ||
|
|
||
| componentDidCatch(error, errorInfo) { | ||
| console.error("Error caught in ErrorBoundary:", error, errorInfo); | ||
| } | ||
|
|
||
| handleRetry = () => { | ||
| this.setState({ hasError: false }); | ||
| }; | ||
|
|
||
| render() { | ||
| if (this.state.hasError) { | ||
| return ( | ||
| <div className="flex flex-col items-center justify-center p-4 border rounded-lg shadow-md bg-white text-red-800"> | ||
| <h2 className="text-lg font-bold">Something went wrong.</h2> | ||
| <p className="text-sm">Please try again.</p> | ||
| <button | ||
| onClick={this.handleRetry} | ||
| className="mt-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600" | ||
| > | ||
| Retry | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return this.props.children; | ||
| } | ||
| } | ||
|
|
||
| export default ErrorBoundary; | ||
| "use client"; | ||
|
|
||
| import React, { Component } from "react"; | ||
|
|
||
| class ErrorBoundary extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { hasError: false }; | ||
| } | ||
|
|
||
| static getDerivedStateFromError(error) { | ||
| return { hasError: true }; | ||
| } | ||
|
|
||
| componentDidCatch(error, errorInfo) { | ||
| console.error("Error caught in ErrorBoundary:", error, errorInfo); | ||
| } | ||
|
|
||
| handleRetry = () => { | ||
| this.setState({ hasError: false }); | ||
| }; | ||
|
|
||
| render() { | ||
| if (this.state.hasError) { | ||
| return ( | ||
| <div className="flex flex-col items-center justify-center p-4 border rounded-lg shadow-md bg-white text-red-800"> | ||
| <h2 className="text-lg font-bold">Something went wrong.</h2> | ||
| <p className="text-sm">Please try again.</p> | ||
| <button | ||
| onClick={this.handleRetry} | ||
| className="mt-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600" | ||
| > | ||
| Retry | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return this.props.children; | ||
| } | ||
| } | ||
|
|
||
| export default ErrorBoundary; |
Oops, something went wrong.