+ NotFoundPage

src/components/App.jsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 import { lazy } from "react";
 import { Layout } from "./Layout/Layout";
-import css from './App.module.css';
+//import css from './App.module.css';
 //import Home from "pages/Home/Home";
 //import MovieDetails from "pages/MovieDetails/MovieDetails";
 //import Movies from "pages/Movies/Movies";
@@ -18,6 +18,7 @@ const Cast = lazy(() =>
     ...module,
     default: module.Cast,
   })));
+const NotFoundPage = lazy(()=> import("../pages/NotFound/NotFound"));
 
 
 export const App = () => {
@@ -35,7 +36,8 @@ export const App = () => {
             <Route path="reviews" element={<Reviews />} />
           </Route>
         </Route>
-        <Route path="*" element={<div><h1 className={css.not__found}>Ooooops, page not found</h1></div>} />
+        {/* <Route path="*" element={<div><h1 className={css.not__found}>Ooooops, page not found</h1></div>} /> */}
+        <Route path="*" element={<NotFoundPage/>} />
       </Routes>
     </div>  
   )

src/pages/Home/Home.jsx

@@ -10,10 +10,10 @@ const Home = () => {
     fetchTrendingMovies().then(response => setMovies(response))
   }, []);
 
-  return <main className={css.container}>
+  return <div className={css.container}>
     <h1 className={css.trending__title}>Trending today</h1>
     <MoviesList movies={movies} />
-  </main>
+  </div>
 };
 
 export default Home;

src/pages/MovieDetails/MovieDetails.jsx

@@ -27,7 +27,7 @@ const MovieDetails = () => {
   }, [movieId]);
 
   return (
-    <main className={css.movie__container}>
+    <div className={css.movie__container}>
       <Link to={backLinkLocationRef.current}>
         {' '}
         <button type="button" aria-label="Go back to the previous page">Go back</button>
@@ -80,7 +80,7 @@ const MovieDetails = () => {
       <Suspense fallback={<Loader/>}>
         <Outlet />
       </Suspense>
-    </main>
+    </div>
   );
 };
 

src/pages/Movies/Movies.jsx

@@ -42,10 +42,10 @@ import css from './Movies.module.css';
   }, [query]);
 
   return (
-    <main className={css.container__search}>
+    <div className={css.container__search}>
       <SearchForm location={location} onSubmit={handleSubmit} />
       {movies.length > 0 && <MoviesList movies={movies} />}
-    </main>
+    </div>
   );
 };
 

src/pages/NotFound/NotFound.jsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import css from './NotFound.module.css';
+import { Link, useLocation } from 'react-router-dom';
+
+const NotFoundPage = () => {
+  const location = useLocation();
+  const backLinkLocationRef = useRef(location.state?.from ?? './movies');
+
+  return (
+    <div className={css.page}>
+      <div className={css.container}>
+        <h1 className={css.not__title}>404 Not Found</h1>
+        <p className={css.not__text}>
+          Oops! The page you are looking for might be in another castle.
+        </p>
+        <Link to={backLinkLocationRef.current}>
+        {' '}
+        <button type="button" aria-label="Go back to the previous page">Go to search</button>
+      </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/pages/NotFound/NotFound.module.css

@@ -0,0 +1,26 @@
+.page {
+    background-color: #f4f4f4;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+    text-align: center;
+}
+
+.not__title {
+    font-size: 3em;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.not__text {
+    font-size: 1.5em;
+    color: #555;
+    margin-bottom: 30px;
+}
+
+