Navbar link's scroll position resolved.

frontend/src/App.css

@@ -30,4 +30,13 @@ input[type="radio"] {
     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 */
+  }

frontend/src/components/Pages/About.jsx

@@ -1,6 +1,10 @@
 import bgpic from "../../assets/img/abt1.jpg";
+import React, { useEffect } from 'react';
 
 export default function About() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div id="about" className="relative w-full h-screen md:mt-28">
       <div

frontend/src/components/Pages/Boardgame.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState , useEffect } from 'react';
 import board1 from "../../assets/Boardgames/board1.png";
 import board2 from "../../assets/Boardgames/board2.png";
 import board3 from "../../assets/Boardgames/board3.jpg";
@@ -188,7 +188,9 @@ export default function Boardgame() {
         },
     ];
 
-
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
 
     return (
         <>

frontend/src/components/Pages/Event.jsx

@@ -111,6 +111,10 @@ export default function Event() {
     };
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">

frontend/src/components/Pages/Home.jsx

@@ -3,8 +3,12 @@ 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() {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
     return (
         <div id="home" className="bg-[#FDF3C7]">
             <Landing />

frontend/src/components/Pages/Login.jsx

@@ -1,8 +1,14 @@
+
+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";
   const [data, setData] = useState({
@@ -43,6 +49,10 @@ const Login = () => {
     }
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
       <img src={photo} alt="login" className=" w-3/4 absolute" />

frontend/src/components/Pages/Menu.jsx

@@ -1,4 +1,4 @@
-import  { useState } from 'react';
+import  { useState , useEffect } from 'react';
 import { motion } from 'framer-motion';
 import Mybook from './MyBook';
 import TodaysSpecial from './TodaysSpecial';
@@ -28,6 +28,10 @@ function ParallaxImage() {
     y: mousePosition.y / 30,
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div className="w-full h-auto bg-amber-100 items-center justify-center overflow-hidden" onMouseMove={handleMouseMove}>
@@ -56,10 +60,16 @@ function ParallaxImage() {
           <h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
           <GiArrowDunk size={60} className="mt-2 text-orange-400" />
         </div>
-        <div className="w-full md:flex md:items-center md:justify-center">
+        {/* <div className="w-full md:flex md:items-center md:justify-center">
+          <Mybook />
+        </div>
+        <TodaysSpecial /> */}
+        <div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
           <Mybook />
         </div>
-        <TodaysSpecial />
+        <div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
+          <TodaysSpecial />
+</div>
       </div>
     </>
   );

frontend/src/components/Pages/MyBook.jsx

@@ -42,6 +42,10 @@ function MyBook() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div style={BgTextureStyle} className=" mt-2 mb-20 overflow-hidden w-full h-full flex justify-center items-center ">
       <HTMLFlipBook

frontend/src/components/Pages/Notfound.jsx

@@ -1,6 +1,10 @@
 import Notfound from "../../assets/Menu_assets/Notfound.gif"
+import React, { useState , useEffect } from 'react';
 
 const NotFound = () => {
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
     return (
        <div>
          <div className="flex flex-col items-center justify-center h-screen">

frontend/src/components/Pages/Pages.jsx

@@ -1,7 +1,10 @@
-import  { forwardRef } from "react";
 import PropTypes from "prop-types";
+import React, { useState , useEffect , forwardRef } from 'react';
 
 const Page = forwardRef((props, ref) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="demoPage bg-white" ref={ref}>
       <div className="h-full">{props.children}</div>

frontend/src/components/Pages/Register.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+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";
@@ -33,6 +33,10 @@ export default function Register() {
       .catch((error) => console.log(error));
   };
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">

frontend/src/components/Pages/Signup.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState , useEffect } from "react";
 import photo from "../../assets/login.png";
 import { useNavigate } from "react-router-dom";
 
@@ -70,6 +70,10 @@ const Signup = () => {
     }
   };
 
+    useEffect(() => {
+      window.scrollTo(0, 0);
+    }, []);
+
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
       <img src={photo} alt="login" className=" w-3/4 absolute" />

frontend/src/components/Pages/TodaysSpecial.jsx

@@ -11,24 +11,25 @@ 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 [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item
 
   // Function to update today's special (cycling through 3 items)
   const updateTodaysSpecial = () => {
@@ -51,20 +52,61 @@ const TodaysSpecial = () => {
     <div className="mt-10">
       <h2 className="text-5xl font-bold text-center mb-9">Today's Special</h2>
       <div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+        {/* Coffee Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('coffee')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
           <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'coffee' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+
+        {/* Food Card */}
+        <div
+          className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('food')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
           <p className="text-gray-600">{todaysSpecial.food.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'food' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.food.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.food.offerPrice}</p>
+            </div>
+          )}
         </div>
-        <div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
+
+        {/* Drink Card */}
+        <div
+          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          style={{ minHeight: '300px' }} // Ensure a minimum height for the card
+          onMouseEnter={() => setHoveredItem('drink')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
           <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          {/* Show prices below the image and description */}
+          {hoveredItem === 'drink' && (
+            <div className="mt-4">
+              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>
+              <p className="text-xl font-bold text-red-500">{todaysSpecial.drink.offerPrice}</p>
+            </div>
+          )}
         </div>
       </div>
     </div>