diff --git a/src/App.js b/src/App.js index f0eb751..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"; @@ -51,6 +52,7 @@ function App() { }/> } /> } /> + } /> diff --git a/src/components/NothingPage.js b/src/components/NothingPage.js new file mode 100644 index 0000000..a997059 --- /dev/null +++ b/src/components/NothingPage.js @@ -0,0 +1,65 @@ +import React from 'react'; +import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; + +const Container = styled(motion.div)` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #f0f0f0; +`; + +const Astronaut = styled(motion.img)` + width: 200px; + margin-bottom: 20px; +`; + +const Message = styled(motion.h1)` + font-size: 3rem; + font-weight: bold; + color: #333; +`; + +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 ( + + + + 404 - Page Not Found + + + ); +}; + +export default NothingPage;