diff --git a/frontend/src/App.css b/frontend/src/App.css index 198e47bb..6af73281 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -26,7 +26,16 @@ input[type='radio'] { } .star { - cursor: pointer; - font-size: 2rem; - margin-bottom: 0; + cursor: pointer; + font-size: 2rem; + margin-bottom: 0; } + +.card { + transition: all 0.3s ease; /* Ensure smooth transitions */ + } + + /* Shadow effect on hover */ + .card:hover { + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */ + } diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx index 5a67a734..f4ab679b 100644 --- a/frontend/src/components/Pages/About.jsx +++ b/frontend/src/components/Pages/About.jsx @@ -1,6 +1,12 @@ -import bgpic from '../../assets/img/abt1.jpg'; + +import bgpic from "../../assets/img/abt1.jpg"; +import React, { useEffect } from 'react'; + export default function About() { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
{ - setSelectedBoard(board); - }; + const handleCloseInstructions = () => { + setSelectedBoard(null); + }; + const boards = [ + { + src: "https://th.bing.com/th/id/OSK.HEROqYqMhD-y4GKqP62-uYHPi1C0P_LIEmg92q6L1uwt3xo?rs=1&pid=ImgDetMain", + title: "Monopoly", + description: "Buy, sell, and trade properties to bankrupt your opponents.", + instructions: [ + "Players roll two six-sided dice to determine how many spaces they can move around the board.", + "When a player lands on an unowned property, they can choose to buy it at the price listed on the space.", + "If a player lands on a property owned by another player, they must pay rent, which varies depending on property development.", + "Players can build houses and hotels on their properties to increase the rent other players must pay when they land there.", + "Landing on 'Chance' or 'Community Chest' squares requires drawing a card that can provide rewards or impose penalties.", + "The game continues until all but one player is bankrupt, with the last remaining player declared the winner." + ] + }, + { + src: "https://cdn.cloudflare.steamstatic.com/steam/apps/1088150/capsule_616x353.jpg?t=1605966437", + title: "Scribble", + description: "Create words on a board using letter tiles and score points based on letter value.", + instructions: [ + "Players take turns creating words on a grid using letter tiles.", + "Each letter has a designated point value, and players score based on the total points of the letters used.", + "Players can create new words by adding letters to existing words on the grid, forming crosswords.", + "Bonus spaces on the board may multiply the points for specific words or letters.", + "The player with the highest total score at the end of the game wins." + ] + }, + { + src: "https://th.bing.com/th/id/OIP.dRy3iD5zetm02WmkuYW2bQAAAA?rs=1&pid=ImgDetMain", + title: "Chess", + description: "A strategic game of checkmate, where two players move pieces to capture the opponent's king.", + instructions: [ + "Each player begins with 16 pieces: 1 king, 1 queen, 2 rooks, 2 knights, 2 bishops, and 8 pawns.", + "Players take turns moving one piece at a time according to the specific movement rules of each piece.", + "The objective is to checkmate the opponent's king, meaning the king is under threat of capture with no legal moves to escape.", + "If a king is in check, the player must make a move to remove the check on their next turn.", + "The game can end in checkmate, stalemate, or draw based on various conditions, including insufficient material to checkmate." + ] + }, + { + src: "https://th.bing.com/th/id/OIP.BEqgB5UEEz92gHe3XzLbRAHaEx?rs=1&pid=ImgDetMain", + title: "Life", + description: "Simulate life by choosing a career, family, and lifestyle to accumulate wealth and happiness.", + instructions: [ + "Players spin a wheel to determine how many spaces to move on the board, making choices along the way.", + "As players progress, they make decisions about careers, education, and family, which affect their financial situation.", + "Collect salary and pay bills, and make strategic investments to grow wealth.", + "At the end of the game, players tally their wealth and happiness to determine who has led the most successful life." + ] + }, + { + src: "https://i1.wp.com/www.boardgameanalysis.com/wp-content/uploads/2020/01/DSC_5586.jpg?fit=1200%2C905&ssl=1", + title: "Catan", + description: "Settle the island of Catan in this classic resource management game.", + instructions: [ + "Players roll two six-sided dice to gather resources based on the hexes adjacent to their settlements.", + "Trade resources with other players to obtain what you need to build roads, settlements, and cities.", + "Construct roads to expand your territory and connect to resource-rich areas.", + "The first player to reach 10 victory points through building and development wins the game." + ] + }, + { + src: board2, + title: "Ticket to Ride", + description: "Connect cities across a map and complete your railway routes.", + instructions: [ + "Players collect train cards of various colors to claim routes on the map between cities.", + "To claim a route, players must play a number of cards matching the color and length of the route.", + "Longer routes earn more points, and players can complete secret destination tickets for bonus points.", + "The game ends when a player has two or fewer trains left, at which point final scores are calculated." + ] + }, + { + src: board3, + title: "Pandemic", + description: "Work together to contain the spread of deadly diseases across the globe.", + instructions: [ + "Players take on different roles with unique abilities to strategize and treat infections.", + "Move your character around the board to cities to treat infections, build research stations, and discover cures.", + "Collaborate with teammates to manage outbreaks and ensure diseases do not spread out of control.", + "The team wins by discovering cures for all four diseases before they spread excessively." + ] + }, + { + src: "https://th.bing.com/th/id/OIP.8GSKPTci8prggscpqzpQTAHaDt?rs=1&pid=ImgDetMain", + title: "Codenames", + description: "Compete to make word associations and guess your team's secret code words.", + instructions: [ + "Players are divided into two teams, each with a Spymaster and field operatives.", + "The Spymaster gives one-word clues that relate to multiple words on the grid.", + "Field operatives discuss and guess the words based on the clues given by their Spymaster.", + "The first team to correctly guess all their words without picking the opposing team's words wins." + ] + }, + { + src: "https://th.bing.com/th/id/OIP.uQnK77iWmXoZHH1xgrHXLwHaHa?rs=1&pid=ImgDetMain", + title: "Azul", + description: "Collect and place beautiful tiles to decorate the walls of a palace.", + instructions: [ + "Players take turns drafting tiles from a central market and placing them on their boards.", + "Tiles must be placed in rows and can only be added if they complete a row or column.", + "Earn points for completed rows and patterns, and lose points for unplaced tiles.", + "The game ends when one player completes a row on their board, and the player with the most points wins." + ] + }, + { + src: "https://th.bing.com/th/id/OIP.zie_-I5v0VE5cwVk1P9tswHaEK?rs=1&pid=ImgDetMain", + title: "Cluedo", + description: "Solve the mystery of who committed the murder in the mansion.", + instructions: [ + "Players move their pieces around the mansion to gather clues about the murder.", + "Make deductions about the suspect, weapon, and room based on the clues gathered.", + "Players can make suggestions and must keep track of their findings and other players' clues.", + "The first player to correctly identify the murderer, weapon, and location wins the game." + ] + }, + { + src: "https://th.bing.com/th/id/R.928702e46c4d6f8a5e6ae7a98abc507d?rik=h6j8OdTmlyLETQ&riu=http%3a%2f%2f4.bp.blogspot.com%2f-LL5zs-V6z9Y%2fTil9973hSbI%2fAAAAAAAAAp8%2fC9J5Q3NhWJc%2fs1600%2fstratego-1.jpg&ehk=2C4%2f8CFzZloqDXImPW2gPpTTTPmBLS0mr%2bjXP39OC3s%3d&risl=&pid=ImgRaw&r=0", + title: "Stratego", + description: "Outwit your opponent by moving pieces to capture the flag while protecting your own.", + instructions: [ + "Players secretly set up their pieces on the board, each with a specific rank and ability.", + "Move pieces strategically to capture the opponent's flag while defending your own.", + "Combat occurs when two pieces occupy the same space, with the higher-ranked piece capturing the lower one.", + "The game ends when one player successfully captures the opponent's flag." + ] + }, + { + src: "https://c8.alamy.com/comp/A6GN87/anti-monopoly-board-game-A6GN87.jpg", + title: "Anti-Monopoly", + description: "A twist on Monopoly where competitors and monopolists clash in different business strategies.", + instructions: [ + "Players choose to be either a monopolist or a competitor at the start of the game.", + "Monopolists can form monopolies and charge higher rents on their properties.", + "Competitors aim to disrupt monopolies and benefit from lower prices and fewer fees.", + "The game ends when one group dominates the market, leading to victory." + ] + }, + ]; + + useEffect(() => { + window.scrollTo(0, 0); + }, []); const handleCloseInstructions = () => { setSelectedBoard(null); diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx index 7f2bf488..1663f37a 100644 --- a/frontend/src/components/Pages/Event.jsx +++ b/frontend/src/components/Pages/Event.jsx @@ -111,6 +111,10 @@ export default function Event() { }; }, []); + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx index 9b6aa343..c3f467d2 100644 --- a/frontend/src/components/Pages/Home.jsx +++ b/frontend/src/components/Pages/Home.jsx @@ -1,15 +1,19 @@ -import Landing from '../ui/Landing'; -import ReviewCarousel from '../ui/ReviewCarousel'; -import FeedbackForm from '../ui/FeedbackForm'; -import About from './About'; + +import Landing from "../ui/Landing"; +import ReviewCarousel from "../ui/ReviewCarousel"; +import FeedbackForm from "../ui/FeedbackForm"; +import About from "./About"; +import React, { useEffect } from 'react'; export default function Home() { - return ( -
- - - - -
- ); -} + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( +
+ + + + +
+ ) diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx index c233e569..0b593d9e 100644 --- a/frontend/src/components/Pages/Login.jsx +++ b/frontend/src/components/Pages/Login.jsx @@ -1,7 +1,12 @@ -import { Link, useNavigate } from 'react-router-dom'; -import photo from '../../assets/login.png'; -import React, { useState } from 'react'; -import { message } from 'antd'; + +import React, { useState , useEffect } from "react"; +import { Link } from "react-router-dom"; +import photo from "../../assets/login.png"; +import { Link, useNavigate } from "react-router-dom"; +import photo from "../../assets/login.png"; +import React, { useState } from "react"; +import { message } from "antd"; + const Login = () => { const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000'; @@ -43,6 +48,10 @@ const Login = () => { } }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
login diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx index 5dcbff43..70fdddae 100644 --- a/frontend/src/components/Pages/Menu.jsx +++ b/frontend/src/components/Pages/Menu.jsx @@ -1,4 +1,6 @@ -import { useState } from 'react'; + +import { useState , useEffect } from 'react'; + import { motion } from 'framer-motion'; import Mybook from './MyBook'; import TodaysSpecial from './TodaysSpecial'; @@ -28,6 +30,10 @@ function ParallaxImage() { y: mousePosition.y / 30, }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
Flip Menu
-
+ {/*
+ +
+ */} +
{/* Adjust this container */}
- +
{/* Add bottom padding here */} + +
); diff --git a/frontend/src/components/Pages/MyBook.jsx b/frontend/src/components/Pages/MyBook.jsx index e0061a62..ca9866ed 100644 --- a/frontend/src/components/Pages/MyBook.jsx +++ b/frontend/src/components/Pages/MyBook.jsx @@ -42,6 +42,10 @@ function MyBook() { return () => window.removeEventListener('resize', handleResize); }, []); + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
{ - return ( -
-
-

404 Not Found

- Not Found GIF -

- Sorry, the page you are looking for could not be found. -

-
-
- ); -}; +import Notfound from "../../assets/Menu_assets/Notfound.gif" +import React, { useState , useEffect } from 'react'; +const NotFound = () => { + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( +
+
+

404 Not Found

+ Not Found GIF +

+ Sorry, the page you are looking for could not be found. +

+
+
+ ); +} export default NotFound; diff --git a/frontend/src/components/Pages/Pages.jsx b/frontend/src/components/Pages/Pages.jsx index 57aeddc7..473dd4e8 100644 --- a/frontend/src/components/Pages/Pages.jsx +++ b/frontend/src/components/Pages/Pages.jsx @@ -1,7 +1,12 @@ -import { forwardRef } from 'react'; -import PropTypes from 'prop-types'; + +import PropTypes from "prop-types"; +import React, { useState , useEffect , forwardRef } from 'react'; + const Page = forwardRef((props, ref) => { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
{props.children}
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx index 91b88e90..b01b506d 100644 --- a/frontend/src/components/Pages/Register.jsx +++ b/frontend/src/components/Pages/Register.jsx @@ -1,9 +1,11 @@ -import { useState } from 'react'; -import pic from '../../assets/img/abt1.jpg'; -import pic2 from '../../assets/img/abt1.png'; -import pic3 from '../../assets/img/abt2.png'; -import pic4 from '../../assets/img/abt3.png'; -import pic5 from '../../assets/img/abt4.png'; + +import { useState , useEffect } from "react"; +import pic from "../../assets/img/abt1.jpg"; +import pic2 from "../../assets/img/abt1.png"; +import pic3 from "../../assets/img/abt2.png"; +import pic4 from "../../assets/img/abt3.png"; +import pic5 from "../../assets/img/abt4.png"; + export default function Register() { const [date, setDate] = useState(''); @@ -32,6 +34,10 @@ export default function Register() { .catch((error) => console.log(error)); }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx index 1fdd97e7..0d8e47b6 100644 --- a/frontend/src/components/Pages/Signup.jsx +++ b/frontend/src/components/Pages/Signup.jsx @@ -1,6 +1,7 @@ -import { useState } from 'react'; -import photo from '../../assets/login.png'; -import { useNavigate } from 'react-router-dom'; + +import { useState , useEffect } from "react"; +import photo from "../../assets/login.png"; +import { useNavigate } from "react-router-dom"; const Signup = () => { const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000'; @@ -70,6 +71,10 @@ const Signup = () => { } }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
login diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx index 0d15c297..5b911ffc 100644 --- a/frontend/src/components/Pages/TodaysSpecial.jsx +++ b/frontend/src/components/Pages/TodaysSpecial.jsx @@ -11,64 +11,27 @@ import caesar_salad from '../../assets/TSimg/caesar_salad.webp'; const menuItems = { coffee: [ - { - name: 'Espresso', - description: 'Rich and bold coffee shot.', - image: espresso, - }, - { - name: 'Cappuccino', - description: 'Creamy coffee with frothy milk.', - image: cappuccino, - }, - { - name: 'Latte', - description: 'Smooth coffee with steamed milk.', - image: latte, - }, + { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" }, + { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino, originalPrice: "$3.50", offerPrice: "$3.00" }, + { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte, originalPrice: "$4.00", offerPrice: "$3.50" }, ], drinks: [ - { - name: 'Mango Smoothie', - description: 'Refreshing mango blend.', - image: mango_smoothie, - }, - { - name: 'Lemonade', - description: 'Zesty and chilled lemonade.', - image: lemonade, - }, - { - name: 'Iced Tea', - description: 'Cool iced tea with lemon.', - image: iced_tea, - }, + { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie, originalPrice: "$4.50", offerPrice: "$4.00" }, + { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade, originalPrice: "$2.50", offerPrice: "$2.00" }, + { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea, originalPrice: "$2.00", offerPrice: "$1.50" }, ], food: [ - { - name: 'Cheese Sandwich', - description: 'Toasted sandwich with cheese.', - image: cheese_sandwich, - }, - { - name: 'Pasta Primavera', - description: 'Veggies and pasta in a light sauce.', - image: pasta_primavera, - }, - { - name: 'Caesar Salad', - description: 'Crispy salad with Caesar dressing.', - image: caesar_salad, - }, + { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich, originalPrice: "$3.50", offerPrice: "$3.00" }, + { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera, originalPrice: "$5.50", offerPrice: "$5.00" }, + { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad, originalPrice: "$5.00", offerPrice: "$4.50" }, + ], }; const TodaysSpecial = () => { - const [todaysSpecial, setTodaysSpecial] = useState({ - coffee: {}, - drink: {}, - food: {}, - }); + + const [todaysSpecial, setTodaysSpecial] = useState({ coffee: {}, drink: {}, food: {} }); + const [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item // Function to update today's special (cycling through 3 items) const updateTodaysSpecial = () => { @@ -91,32 +54,64 @@ const TodaysSpecial = () => {

Today's Special

-
- {todaysSpecial.coffee.name} + {/* Coffee Card */} +
setHoveredItem('coffee')} + onMouseLeave={() => setHoveredItem(null)} + > + {todaysSpecial.coffee.name} +

{todaysSpecial.coffee.name}

{todaysSpecial.coffee.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'coffee' && ( +
+

{todaysSpecial.coffee.originalPrice}

+

{todaysSpecial.coffee.offerPrice}

+
+ )}
-
- {todaysSpecial.food.name} + + {/* Food Card */} +
setHoveredItem('food')} + onMouseLeave={() => setHoveredItem(null)} + > + {todaysSpecial.food.name} +

{todaysSpecial.food.name}

{todaysSpecial.food.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'food' && ( +
+

{todaysSpecial.food.originalPrice}

+

{todaysSpecial.food.offerPrice}

+
+ )}
-
- {todaysSpecial.drink.name} + + {/* Drink Card */} +
setHoveredItem('drink')} + onMouseLeave={() => setHoveredItem(null)} + > + {todaysSpecial.drink.name} +

{todaysSpecial.drink.name}

{todaysSpecial.drink.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'drink' && ( +
+

{todaysSpecial.drink.originalPrice}

+

{todaysSpecial.drink.offerPrice}

+
+ )}