preloader and page transition added

README.md

@@ -140,18 +140,34 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Arindam</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/Ashwinib26">
+                    <img src="https://avatars.githubusercontent.com/u/149402720?v=4" width="100;" alt="Ashwinib26"/>
+                    <br />
+                    <sub><b>Ashwini_ab</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/itznayan">
+                    <img src="https://avatars.githubusercontent.com/u/136584376?v=4" width="100;" alt="itznayan"/>
+                    <br />
+                    <sub><b>Mahera Nayan</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/tejasbenibagde">
                     <img src="https://avatars.githubusercontent.com/u/124677750?v=4" width="100;" alt="tejasbenibagde"/>
                     <br />
                     <sub><b>Tejas Benibagde</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
-                <a href="https://github.com/Ashwinib26">
-                    <img src="https://avatars.githubusercontent.com/u/149402720?v=4" width="100;" alt="Ashwinib26"/>
+                <a href="https://github.com/Shirisha-16">
+                    <img src="https://avatars.githubusercontent.com/u/148051550?v=4" width="100;" alt="Shirisha-16"/>
                     <br />
-                    <sub><b>Ashwini_ab</b></sub>
+                    <sub><b>Tyarla Shirisha</b></sub>
                 </a>
             </td>
             <td align="center">
@@ -161,8 +177,6 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Haseeb Zaki</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Suhas-Koheda">
                     <img src="https://avatars.githubusercontent.com/u/72063139?v=4" width="100;" alt="Suhas-Koheda"/>
@@ -191,22 +205,15 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Aman Yadav</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/AbhijitMotekar99">
                     <img src="https://avatars.githubusercontent.com/u/109235675?v=4" width="100;" alt="AbhijitMotekar99"/>
                     <br />
                     <sub><b>Abhijit Motekar</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/itznayan">
-                    <img src="https://avatars.githubusercontent.com/u/136584376?v=4" width="100;" alt="itznayan"/>
-                    <br />
-                    <sub><b>Mahera Nayan</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Navneetdadhich">
                     <img src="https://avatars.githubusercontent.com/u/156535853?v=4" width="100;" alt="Navneetdadhich"/>
@@ -242,15 +249,15 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>MANI </b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Ayush215mb">
                     <img src="https://avatars.githubusercontent.com/u/154300084?v=4" width="100;" alt="Ayush215mb"/>
                     <br />
                     <sub><b>Ayush Yadav</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/AliGates915">
                     <img src="https://avatars.githubusercontent.com/u/128673394?v=4" width="100;" alt="AliGates915"/>
@@ -286,15 +293,15 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Mohit Rana </b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/MutiatBash">
                     <img src="https://avatars.githubusercontent.com/u/108807732?v=4" width="100;" alt="MutiatBash"/>
                     <br />
                     <sub><b>Bashua Mutiat</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/NilanchalaPanda">
                     <img src="https://avatars.githubusercontent.com/u/110488337?v=4" width="100;" alt="NilanchalaPanda"/>

frontend/src/App.jsx

@@ -4,10 +4,12 @@ import Navbar from '../src/components/Shared/Navbar';
 import Footer from '../src/components/Shared/Footer';
 import { Outlet } from 'react-router-dom';
 import BackToTopButton from './components/Shared/BackToTopButton';
+import Preloader from './components/Preloader';
 
 function App() {
   return (
     <>
+      <Preloader />
       <BackToTopButton />
       <Navbar />
       <Outlet />

frontend/src/components/MainHOC.jsx

@@ -0,0 +1,20 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
+
+const MainHOC = (WrappedComponent) => {
+  return (props) => (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key="animated-component"
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.8, opacity: 0 }}
+        transition={{ duration: 0.4 }}
+      >
+        <WrappedComponent {...props} />
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default MainHOC;

frontend/src/components/Pages/Boardgame.jsx

@@ -13,11 +13,11 @@ import board7 from '../../assets/Boardgames/board7.png';
 import board8 from '../../assets/Boardgames/board8.png';
 import board10 from '../../assets/Boardgames/board10.png';
 import bg from '../../assets/Boardgames/bg.jpg';
-
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import 'react-lazy-load-image-component/src/effects/blur.css';
-
-export default function Boardgame() {
+import MainHOC from '../MainHOC';
+export default MainHOC(Boardgame);
+function Boardgame() {
   const [selectedBoard, setSelectedBoard] = useState(null);
   const [email, setEmail] = useState('');
 

frontend/src/components/Pages/Event.jsx

@@ -12,7 +12,7 @@ import img5 from '../../assets/img/event6.jpg';
 import band from '../../assets/landing/band.gif';
 import game from '../../assets/Boardgames/carrom.gif';
 import spin from '../../assets/Boardgames/spin.gif';
-
+import MainHOC from '../MainHOC';
 const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const months = [
   'January',
@@ -28,7 +28,7 @@ const months = [
   'November',
   'December',
 ];
-export default function Event() {
+function Event() {
   const [events, setEvents] = useState([]);
   const [error, setError] = useState(null);
   useEffect(() => {
@@ -131,8 +131,18 @@ export default function Event() {
                 Upcoming Events and much more....
               </h1>
               <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 justify-between shadow-md">
-                <img src={game} alt="game" loading="lazy" className="w-28 h-28" />
-                <img src={spin} alt="game" loading="lazy" className="w-28 h-28" />
+                <img
+                  src={game}
+                  alt="game"
+                  loading="lazy"
+                  className="w-28 h-28"
+                />
+                <img
+                  src={spin}
+                  alt="game"
+                  loading="lazy"
+                  className="w-28 h-28"
+                />
               </div>
             </div>
           </div>
@@ -190,19 +200,44 @@ export default function Event() {
                 <div className="splide__track w-full ">
                   <ul className="splide__list">
                     <li className="splide__slide ">
-                      <img src={img1} alt="Event 1" loading="lazy" className="w-full h-full" />
+                      <img
+                        src={img1}
+                        alt="Event 1"
+                        loading="lazy"
+                        className="w-full h-full"
+                      />
                     </li>
                     <li className="splide__slide">
-                      <img src={img2} alt="Event 2" loading="lazy" className="w-full h-full" />
+                      <img
+                        src={img2}
+                        alt="Event 2"
+                        loading="lazy"
+                        className="w-full h-full"
+                      />
                     </li>
                     <li className="splide__slide">
-                      <img src={img3} alt="Event 3" loading="lazy" className="w-full h-full" />
+                      <img
+                        src={img3}
+                        alt="Event 3"
+                        loading="lazy"
+                        className="w-full h-full"
+                      />
                     </li>
                     <li className="splide__slide">
-                      <img src={img4} alt="Event 4" loading="lazy" className="w-full h-full" />
+                      <img
+                        src={img4}
+                        alt="Event 4"
+                        loading="lazy"
+                        className="w-full h-full"
+                      />
                     </li>
                     <li className="splide__slide">
-                      <img src={img5} alt="Event 6" loading="lazy" className="w-full h-full" />
+                      <img
+                        src={img5}
+                        alt="Event 6"
+                        loading="lazy"
+                        className="w-full h-full"
+                      />
                     </li>
                     {/* Add more images here */}
                   </ul>
@@ -254,3 +289,4 @@ export default function Event() {
     </>
   );
 }
+export default MainHOC(Event);

frontend/src/components/Pages/Home.jsx

@@ -1,20 +1,22 @@
-
-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';
+import MainHOC from '../MainHOC';
+
+function Home() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+  return (
+    <div id="home" className="bg-[#FDF3C7]">
+      <Landing />
+      <About />
+      <ReviewCarousel />
+      <FeedbackForm />
+    </div>
+  );
+}
 
-export default function Home() {
-    useEffect(() => {
-        window.scrollTo(0, 0);
-      }, []);
-    return (
-        <div id="home" className="bg-[#FDF3C7]">
-            <Landing />
-            <About/>
-            <ReviewCarousel/>
-            <FeedbackForm />
-        </div>
-    )
-}
+export default MainHOC(Home);

frontend/src/components/Pages/Menu.jsx

@@ -1,11 +1,11 @@
-
-import  { useState , useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { motion } from 'framer-motion';
 import Mybook from './MyBook';
 import TodaysSpecial from './TodaysSpecial';
 import { GiArrowDunk } from 'react-icons/gi';
 import Cafe3dImg from '../../assets/Menu_assets/mega-creator.png';
+import MainHOC from '../MainHOC';
 const parallaxVariants = {
   initial: { scale: 1 },
   animate: { scale: 1.05 },
@@ -71,15 +71,22 @@ function ParallaxImage() {
           <Mybook />
         </div>
         <TodaysSpecial /> */}
-        <div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
+        <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 */}
+        <div
+          className="w-full md:flex md:items-center md:justify-center"
+          style={{ paddingBottom: '80px' }}
+        >
+          {' '}
+          {/* Add bottom padding here */}
           <TodaysSpecial />
-</div>
+        </div>
       </div>
     </>
   );
 }
 
-export default ParallaxImage;
+export default MainHOC(ParallaxImage);

frontend/src/components/Pages/Register.jsx

@@ -1,13 +1,12 @@
+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';
+import MainHOC from '../MainHOC';
 
-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() {
+function Register() {
   const [date, setDate] = useState('');
   const [time, setTime] = useState('');
   const [guests, setGuests] = useState();
@@ -184,3 +183,4 @@ export default function Register() {
     </>
   );
 }
+export default MainHOC(Register);