Migrate to React Router

frontend/src/pages/app/resources/css/_404.scss

@@ -0,0 +1,84 @@
+.not-found-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 2rem;
+}
+
+.not-found-container {
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+    max-width: 800px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 3rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.not-found-content {
+    flex: 1;
+}
+
+.error-code {
+    font-size: 6rem;
+    font-weight: 900;
+    color: #667eea;
+    line-height: 1;
+    margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.not-found-content h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #2d3748;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+.not-found-content p {
+    font-size: 1.1rem;
+    color: #718096;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+}
+
+.not-found-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.not-found-illustration {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #667eea;
+    opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+    .not-found-container {
+        flex-direction: column;
+        text-align: center;
+        gap: 2rem;
+        padding: 2rem;
+    }
+    
+    .error-code {
+        font-size: 4rem;
+    }
+    
+    .not-found-content h1 {
+        font-size: 2rem;
+    }
+    
+    .not-found-actions {
+        justify-content: center;
+    }
+}

frontend/src/pages/app/resources/css/style.scss

@@ -10,6 +10,7 @@
 @use "electron";
 @use "dialogs/reply";
 @use "download-app";
+@use "404" as not-found;
 
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";