Merge pull request #215 from Ashwinib26/scroll-view-fix

Fixed Scroll View of Navbar links and added effects on TodaysSpecial component #138
RamakrushnaBiswal · Oct 11, 2024 · fe9a474 · fe9a474
2 parents d3e9f67 + 2f95c40
commit fe9a474
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 123 deletions.
diff --git 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
@@ -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 (
     <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
@@ -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';
@@ -202,6 +202,10 @@ export default function Boardgame() {
     },
   ];
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <>
       <div className="w-full mt-10 md:mt-0">
@@ -318,4 +322,4 @@ export default function Boardgame() {
       </div>
     </>
   );
-}
+}
diff --git 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
@@ -1,15 +1,20 @@
-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 (
-    <div id="home" className="bg-[#FDF3C7]">
-      <Landing />
-      <About />
-      <ReviewCarousel />
-      <FeedbackForm />
-    </div>
-  );
-}
+    useEffect(() => {
+        window.scrollTo(0, 0);
+      }, []);
+    return (
+        <div id="home" className="bg-[#FDF3C7]">
+            <Landing />
+            <About/>
+            <ReviewCarousel/>
+            <FeedbackForm />
+        </div>
+    )
+}
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
@@ -1,8 +1,10 @@
-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 photo from "../../assets/login.png";
+import { Link, useNavigate } from "react-router-dom";
+import { message } from "antd";
 import Cookies from 'js-cookie'
+
 const Login = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
   const [data, setData] = useState({
@@ -47,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" />

diff --git 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 (
     <>
       <div
@@ -61,10 +67,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>
     </>
   );

diff --git 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}

diff --git a/frontend/src/components/Pages/Notfound.jsx b/frontend/src/components/Pages/Notfound.jsx
@@ -1,21 +1,25 @@
-import Notfound from '../../assets/Menu_assets/Notfound.gif';
 
-const NotFound = () => {
-  return (
-    <div>
-      <div className="flex flex-col items-center justify-center h-screen">
-        <h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
-        <img
-          src={Notfound} // Replace with your actual GIF path
-          alt="Not Found GIF"
-          className="w-full max-w-md"
-        />
-        <p className="mt-8 text-lg text-gray-700 text-center">
-          Sorry, the page you are looking for could not be found.
-        </p>
-      </div>
-    </div>
-  );
-};
+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">
+            <h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
+            <img
+                src={Notfound} // Replace with your actual GIF path
+                alt="Not Found GIF"
+                className="w-full max-w-md"
+            />
+            <p className="mt-8 text-lg text-gray-700 text-center">
+                Sorry, the page you are looking for could not be found.
+            </p>
+        </div>
+       </div>
+    );
+}
 export default NotFound;
diff --git 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 (
     <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
@@ -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 (
     <>
       <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
@@ -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 (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
       <img src={photo} alt="login" className=" w-3/4 absolute" />