done

src/App.css

@@ -17,8 +17,22 @@ body {
   min-height: 100vh;
 }
 
+/* Главный контейнер для контента */
 main {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Стили для страницы ошибки */
+.error-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
 }
 
 /* Стили для навигации */
@@ -82,8 +96,6 @@ main {
   transform: translateY(-5px);
 }
 
-/* Добавьте в конец файла App.css */
-
 /* Стили для панели сортировки */
 .sort-panel {
     background-color: #f8f9fa;

src/App.jsx

@@ -8,6 +8,7 @@ import CatalogPage from './pages/CatalogPage.jsx';
 import ContactsPage from './pages/ContactsPage.jsx';
 import LikesPage from './pages/LikesPage.jsx';
 import BasketPage from './pages/BasketPage.jsx';
+import ErrorPage from './pages/ErrorPage.jsx';
 
 import Footer from './components/Footer.jsx';
 import Navbar from './components/Navbar.jsx';
@@ -20,13 +21,16 @@ export default function App() {
         <ToastContainer />
         <BrowserRouter>
           <Navbar />
-          <Routes>
-            <Route path="/" element={<IndexPage />} />
-            <Route path="/catalog" element={<CatalogPage />} />
-            <Route path="/contacts" element={<ContactsPage />} />
-            <Route path="/likes" element={<LikesPage />} />
-            <Route path="/basket" element={<BasketPage />} />
-          </Routes>
+          <main style={{ flex: 1 }}>
+            <Routes>
+              <Route path="/" element={<IndexPage />} />
+              <Route path="/catalog" element={<CatalogPage />} />
+              <Route path="/contacts" element={<ContactsPage />} />
+              <Route path="/likes" element={<LikesPage />} />
+              <Route path="/basket" element={<BasketPage />} />
+              <Route path="*" element={<ErrorPage/>}/>
+            </Routes>
+          </main>
           <Footer />
         </BrowserRouter>
       </LikesProvider>

src/Pages/ErrorPage.jsx

@@ -0,0 +1,28 @@
+export default function ErrorPage() {
+  return (
+    <div className="error-page" style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '60vh',
+      textAlign: 'center',
+      padding: '2rem'
+    }}>
+      <h1>404 - Страница не найдена</h1>
+      <p>Извините, запрашиваемая страница не существует.</p>
+      <video 
+        src="./img/рикрол.mp4" 
+        autoPlay 
+        loop
+        style={{
+          maxWidth: '100%',
+          height: 'auto',
+          borderRadius: '8px',
+          marginTop: '1rem'
+        }}
+      >
+      </video>
+    </div>
+  );
+}