Style error page for wrong urls

src/components/App/App.js

@@ -7,13 +7,14 @@ import About from '../About/About';
 import Contact from '../Contact/Contact';
 import Portfolio from '../Portfolio/Portfolio';
 import Footer from '../Footer/Footer';
+import Error from '../Error/Error';
 
 const App = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div className='app'>
-        {isOpen ?
+      {isOpen ?
         <Menu isOpen={isOpen} setIsOpen={setIsOpen} />
         :
         <>
@@ -25,7 +26,7 @@ const App = () => {
                 <Route path='/about' element={<About />} />
                 <Route path='/contact' element={<Contact />} />
                 <Route path='/portfolio' element={<Portfolio />} />
-                <Route path='/error' />
+                <Route path='/*' element={<Error />} />
               </Routes>
             </div>
           </main>

src/components/Error/Error.js

@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+
+const Error = () => {
+  return (
+    <div className='contact'>
+      <h1 className='page-header'>Sorry...</h1>
+      <p>The page you are looking for does not exist.</p>
+      <Link to='/' className='redirect'>Go Home</Link>
+    </div>
+  )
+}
+
+export default Error;

src/components/Error/_Error.scss

@@ -0,0 +1,13 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.redirect {
+  color: $primary-accent-color;
+  @include body-font;
+  margin: 3rem;
+  text-decoration: none;
+}
+
+.redirect:hover {
+  @include inline-link-hover;
+}

src/styles/input.scss

@@ -3,8 +3,8 @@
 @use '../components/Contact/Contact';
 @use '../components/Home/Home';
 @use '../components/Nav/Nav';
-@use '../components/BurgerNav/BurgerNav';
 @use '../components/TopNav/TopNav';
 @use '../components/Portfolio/Portfolio';
 @use '../components/Project/Project';
-@use '../components/Footer/Footer';
+@use '../components/Footer/Footer';
+@use '../components/Error/Error';