From 2be66cda3ccd7fe664c77d041adf6fa1d1d29248 Mon Sep 17 00:00:00 2001
From: Ashwini Bisen <ashwinibisen26@gmail.com>
Date: Wed, 9 Oct 2024 13:02:34 +0530
Subject: [PATCH 1/3] Fix - Fixed Scroll View of Navigation Links

---
 frontend/src/components/Pages/About.jsx     | 4 ++++
 frontend/src/components/Pages/Boardgame.jsx | 6 ++++--
 frontend/src/components/Pages/Event.jsx     | 4 ++++
 frontend/src/components/Pages/Home.jsx      | 4 ++++
 frontend/src/components/Pages/Login.jsx     | 6 +++++-
 frontend/src/components/Pages/Menu.jsx      | 6 +++++-
 frontend/src/components/Pages/MyBook.jsx    | 4 ++++
 frontend/src/components/Pages/Notfound.jsx  | 4 ++++
 frontend/src/components/Pages/Pages.jsx     | 5 ++++-
 frontend/src/components/Pages/Register.jsx  | 6 +++++-
 frontend/src/components/Pages/Signup.jsx    | 6 +++++-
 11 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index 794229f3..c3ac6edc 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/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
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index 768068d3..7d7ef6b7 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/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";
@@ -162,7 +162,9 @@ export default function Boardgame() {
         },
     ];
     
-    
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
 
     return (
         <>
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index ff2fe6c7..627eb383 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 (
     <>
       <div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx
index 4d3ea1d0..0d22861c 100644
--- a/frontend/src/components/Pages/Home.jsx
+++ b/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 />
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index 849c39d5..7ac7cfc6 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import photo from "../../assets/login.png";
-import React, { useState } from "react";
+import React, { useState , useEffect } from "react";
 
 const Login = () => {
   const API_URL = process.env.VITE_BACKEND_URL || "http://localhost:3000";
@@ -41,6 +41,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" />
diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx
index 4a36ec53..28fef21e 100644
--- a/frontend/src/components/Pages/Menu.jsx
+++ b/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}>
diff --git a/frontend/src/components/Pages/MyBook.jsx b/frontend/src/components/Pages/MyBook.jsx
index e71059ae..7b78580a 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 (
     <div style={BgTextureStyle} className=" mt-2 mb-20 overflow-hidden w-full h-full flex justify-center items-center ">
       <HTMLFlipBook
diff --git a/frontend/src/components/Pages/Notfound.jsx b/frontend/src/components/Pages/Notfound.jsx
index 699f4fd8..a1ddb365 100644
--- a/frontend/src/components/Pages/Notfound.jsx
+++ b/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">
diff --git a/frontend/src/components/Pages/Pages.jsx b/frontend/src/components/Pages/Pages.jsx
index fe4bddca..d136aecf 100644
--- a/frontend/src/components/Pages/Pages.jsx
+++ b/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>
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
index 5cd9bb9d..e077c73d 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/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">
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index b5105c6f..129783c6 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/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";
 
 const Signup = () => {
@@ -26,6 +26,10 @@ const Signup = () => {
         console.log(result);    
     };
 
+    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" />

From 6a0fbf08d65c0a70b513c16105a09edcce8d5586 Mon Sep 17 00:00:00 2001
From: Ashwini Bisen <ashwinibisen26@gmail.com>
Date: Wed, 9 Oct 2024 21:07:52 +0530
Subject: [PATCH 2/3] Add - Added hover effect to Item boxes , added original
 and offer prices of the item

---
 frontend/src/App.css                          | 11 +++-
 frontend/src/components/Pages/Menu.jsx        | 10 ++-
 .../src/components/Pages/TodaysSpecial.jsx    | 66 +++++++++++++++----
 3 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index fe1a1f51..af7dc652 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -30,4 +30,13 @@ input[type="radio"] {
     cursor: pointer;
     font-size: 2rem;
     margin-bottom: 0;
-}
\ No newline at end of file
+}
+
+.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 */
+  }
\ No newline at end of file
diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx
index 28fef21e..79788bcc 100644
--- a/frontend/src/components/Pages/Menu.jsx
+++ b/frontend/src/components/Pages/Menu.jsx
@@ -60,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 />
+        <TodaysSpecial /> */}
+        <div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
+          <Mybook />
+        </div>
+        <div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
+          <TodaysSpecial />
+</div>
       </div>
     </>
   );
diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index 97932921..c0d5b9b0 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/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>

From d2711fa519d964756456155e890735b6f583e6bb Mon Sep 17 00:00:00 2001
From: Ashwini Bisen <ashwinibisen26@gmail.com>
Date: Wed, 9 Oct 2024 23:17:53 +0530
Subject: [PATCH 3/3] Pull

---
 frontend/src/components/Pages/Login.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index 7ac7cfc6..8d7da4ae 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -1,6 +1,6 @@
+import React, { useState , useEffect } from "react";
 import { Link } from "react-router-dom";
 import photo from "../../assets/login.png";
-import React, { useState , useEffect } from "react";
 
 const Login = () => {
   const API_URL = process.env.VITE_BACKEND_URL || "http://localhost:3000";