update NotFoundPage

src/components/App.jsx

@@ -36,7 +36,6 @@ 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={<NotFoundPage/>} />
       </Routes>
     </div>  

src/pages/NotFound/NotFound.jsx

@@ -9,9 +9,9 @@ const NotFoundPage = () => {
   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.
+        <h1 className={css.notFound__title}>404 Not Found</h1>
+        <p className={css.notFound__text}>
+         Oops! It looks like the page you are searching for might be located somewhere else(
         </p>
         <Link to={backLinkLocationRef.current}>
         {' '}
@@ -23,3 +23,4 @@ const NotFoundPage = () => {
 };
 
 export default NotFoundPage;
+

src/pages/NotFound/NotFound.module.css

@@ -11,13 +11,13 @@
     text-align: center;
 }
 
-.not__title {
+.notFound__title {
     font-size: 3em;
     color: #333;
     margin-bottom: 20px;
 }
 
-.not__text {
+.notFound__text {
     font-size: 1.5em;
     color: #555;
     margin-bottom: 30px;