From 944d513d7026c55fef636508cd1d6ff54f5f9b3a Mon Sep 17 00:00:00 2001
From: Priya Raj <144319984+satyam969@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:19:26 +0530
Subject: [PATCH 1/4] Update App.js

added nothingpage route
---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index f0eb751..6207458 100644
--- a/src/App.js
+++ b/src/App.js
@@ -51,6 +51,7 @@ function App() {
 					<Route path="/plays" element={<PlaysPage/>}/>
 					<Route path="/sports/:id" element={<SportDetails />} />
 					<Route path="/gift-cards" element={<GiftCard />} />
+							<Route path="*" element={<NothingPage />} />
 					
 				</Routes>
 			</Router>

From ae99a7d22419bdc500a4ae7b02188e9ede827417 Mon Sep 17 00:00:00 2001
From: Priya Raj <144319984+satyam969@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:23:00 +0530
Subject: [PATCH 2/4] Create NothingPage.js

made NothingPage
---
 src/components/NothingPage.js | 49 +++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/NothingPage.js

diff --git a/src/components/NothingPage.js b/src/components/NothingPage.js
new file mode 100644
index 0000000..641fc46
--- /dev/null
+++ b/src/components/NothingPage.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';  
+import styled, { keyframes } from 'styled-components';  
+
+
+const float = keyframes`  
+  0% {  
+    transform: translateY(0);  
+  }  
+  50% {  
+    transform: translateY(-20px);  
+  }  
+  100% {  
+    transform: translateY(0);  
+  }  
+`;  
+
+
+const Container = styled.div`  
+  display: flex;  
+  flex-direction: column;  
+  align-items: center;  
+  justify-content: center;  
+  height: 100vh;  
+  background-color: #f0f0f0;  
+`;  
+
+const Astronaut = styled.img`  
+  width: 200px;  
+  animation: ${float} 3s ease-in-out infinite;  
+`;  
+
+const Message = styled.h1`  
+  font-size: 3rem;  
+  font-weight: bold;  
+  margin-top: 2rem;  
+`;  
+
+class NothingPage extends Component {  
+  render() {  
+    return (  
+      <Container>  
+        <Astronaut src="astronaut.png" alt="Astronaut" />  
+        <Message>404 - Page Not Found</Message>  
+      </Container>  
+    );  
+  }  
+}  
+
+export default NothingPage;

From 5d434b86d1bf2970306b39fc36870734e2542989 Mon Sep 17 00:00:00 2001
From: Priya Raj <144319984+satyam969@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:24:50 +0530
Subject: [PATCH 3/4] Update App.js

added the location of Nothing Page
---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index 6207458..1999638 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; // Im
 import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap CSS
 import Home from "./components/Home";
 import Template from "./components/Auth/Template";
+import NothingPage from "./components/NothingPage";
 
 import MovieDetails from './components/MovieDetails';
 import AboutUs from "./components/AboutUs";

From b58cc57fec074374b53f7c32627580f98441997a Mon Sep 17 00:00:00 2001
From: Priya Raj <144319984+satyam969@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:28:06 +0530
Subject: [PATCH 4/4] Update NothingPage.js

a better with framer motions
---
 src/components/NothingPage.js | 78 +++++++++++++++++++++--------------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/NothingPage.js b/src/components/NothingPage.js
index 641fc46..a997059 100644
--- a/src/components/NothingPage.js
+++ b/src/components/NothingPage.js
@@ -1,21 +1,8 @@
-import React, { Component } from 'react';  
-import styled, { keyframes } from 'styled-components';  
+import React from 'react';  
+import styled from '@emotion/styled';  
+import { motion } from 'framer-motion';  
 
-
-const float = keyframes`  
-  0% {  
-    transform: translateY(0);  
-  }  
-  50% {  
-    transform: translateY(-20px);  
-  }  
-  100% {  
-    transform: translateY(0);  
-  }  
-`;  
-
-
-const Container = styled.div`  
+const Container = styled(motion.div)`  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
@@ -24,26 +11,55 @@ const Container = styled.div`
   background-color: #f0f0f0;  
 `;  
 
-const Astronaut = styled.img`  
+const Astronaut = styled(motion.img)`  
   width: 200px;  
-  animation: ${float} 3s ease-in-out infinite;  
+  margin-bottom: 20px;  
 `;  
 
-const Message = styled.h1`  
+const Message = styled(motion.h1)`  
   font-size: 3rem;  
   font-weight: bold;  
-  margin-top: 2rem;  
+  color: #333;  
 `;  
 
-class NothingPage extends Component {  
-  render() {  
-    return (  
-      <Container>  
-        <Astronaut src="astronaut.png" alt="Astronaut" />  
-        <Message>404 - Page Not Found</Message>  
-      </Container>  
-    );  
-  }  
-}  
+const NothingPage = () => {  
+  const containerVariants = {  
+    hidden: { opacity: 0 },  
+    visible: { opacity: 1, transition: { duration: 0.5 } },  
+  };  
+
+  const astronautVariants = {  
+    float: {  
+      y: [0, -20, 0],  
+      transition: {  
+        duration: 3,  
+        ease: "easeInOut",  
+        loop: Infinity,  
+      }  
+    }  
+  };  
+
+  return (  
+    <Container   
+      variants={containerVariants}   
+      initial="hidden"   
+      animate="visible"  
+    >  
+      <Astronaut   
+        src="astronaut.png"   
+        alt="Astronaut"   
+        variants={astronautVariants}   
+        animate="float"  
+      />  
+      <Message   
+        initial={{ opacity: 0, y: -20 }}   
+        animate={{ opacity: 1, y: 0 }}   
+        exit={{ opacity: 0, y: -20 }}  
+      >  
+        404 - Page Not Found  
+      </Message>  
+    </Container>  
+  );  
+};  
 
 export default NothingPage;