Fix error pages with centered layout, illustrations, and action buttons

Error pages now show lady404/lady500 illustrations, large error code,
action buttons matching Angular (Buy Ticket, Home Page, Support), and
proper two-column flex layout with mobile fallback.

src/routes/error/[code]/page.scss

@@ -12,9 +12,8 @@
     display: flex;
     padding: 2rem;
 
-    & > *:not(:last-child) {
-      margin-right: 2rem;
-      margin-bottom: 2rem;
+    & > * + * {
+      margin-left: 2rem;
     }
 
     @include screen.desktop {
@@ -22,10 +21,20 @@
       max-width: 960px;
       width: 75%;
     }
+
+    @include screen.mobile {
+      flex-direction: column;
+
+      & > * + * {
+        margin-left: 0;
+        margin-top: 2rem;
+      }
+    }
   }
 
   &__illustration {
-    flex: 30%;
+    flex: 0 0 30%;
+    min-height: 300px;
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: contain;
@@ -39,6 +48,7 @@
   &__code {
     font-size: 8rem;
     color: #a3a3a3;
+    line-height: 1;
     margin: 0;
   }
 
@@ -49,10 +59,10 @@
   }
 
   &__content {
-    flex: 70%;
+    flex: 1 1 70%;
 
-    & > *:not(:last-child) {
-      margin-bottom: 1rem;
+    & > * + * {
+      margin-top: 1rem;
     }
 
     @include screen.mobile {
@@ -63,66 +73,60 @@
   &__description {
     max-width: 480px;
     color: colors.$light-gray;
+    line-height: 1.5;
   }
 
   &__actions {
     display: flex;
     padding: 2rem 0;
     flex-wrap: wrap;
-
-    @include screen.gt-mobile {
-      & > *:not(:last-child) {
-        margin-right: 1rem;
-      }
-    }
+    gap: 1rem;
 
     @include screen.mobile {
-      flex-wrap: wrap;
+      flex-direction: column;
+    }
+  }
 
-      & > *:not(:last-child) {
-        margin-bottom: 1rem;
+  &__btn {
+    height: 35px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5rem;
+    text-decoration: none;
+    border-radius: vars.$border-radius;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+
+    &--primary {
+      background-color: colors.$blue-light;
+      color: colors.$white;
+      border: none;
+
+      &:hover {
+        background-color: colors.$blue-light--hover;
       }
     }
 
-    a {
-      height: 35px;
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      color: colors.$blue-link;
+    &--secondary {
+      background-color: colors.$blue-dark;
+      color: colors.$white;
+      border: none;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+
+    &--link {
+      background: transparent;
+      color: colors.$blue-light;
+      border: none;
 
       &:hover {
         text-decoration: underline;
       }
     }
   }
-
-  &__search {
-    width: 100%;
-
-    @include screen.desktop {
-      width: 17rem;
-    }
-
-    margin-bottom: 1rem;
-
-    input {
-      font-size: 0.875rem;
-      box-sizing: border-box;
-      width: 100%;
-      height: 2.25rem;
-      padding: 0.25rem 0.5rem;
-      border: 1px solid #dfdfdf;
-      background: #fff;
-      appearance: none;
-      transition: all 0.2s;
-      outline: 0 solid transparent;
-      border-radius: 0.1875rem;
-
-      &:focus {
-        border: 1px solid #b7d3f3;
-        box-shadow: 0 0.0625rem 0.1875rem #cad6e5;
-      }
-    }
-  }
 }

src/routes/error/[code]/page.tsx

@@ -1,27 +1,31 @@
 import { useParams } from "@modern-js/runtime/router";
 import "./page.scss";
 
-const ERROR_CONFIG: Record<string, { title: string; description: string }> = {
+const ERROR_CONFIG: Record<string, { title: string; description: string; image: string }> = {
   "404": {
     title: "Page not found",
     description:
       "The page you are looking for does not exist or the link is broken.",
+    image: "/assets/img/lady404.png",
   },
   "500": {
     title: "Server error",
     description:
       "An internal error occurred while processing your request. Please try again later.",
+    image: "/assets/img/lady500.png",
   },
   "503": {
     title: "Service unavailable",
     description:
       "The service is temporarily unavailable. Please try again in a few moments.",
+    image: "/assets/img/lady500.png",
   },
 };
 
 const FALLBACK = {
   title: "Error",
   description: "An unexpected error occurred.",
+  image: "/assets/img/lady500.png",
 };
 
 /**
@@ -34,14 +38,34 @@ export default function ErrorPage(): JSX.Element {
 
   return (
     <div className="error-page">
-      <section className="error-page__section">
-        <div className="error-page__illustration" />
+      <section className="error-page__section frame">
+        <div
+          className={`error-page__illustration errorCode-${code ?? "500"}`}
+          style={{ backgroundImage: `url('${config.image}')` }}
+        />
         <div className="error-page__content">
-          <h1 className="error-page__code">{code ?? "?"}</h1>
-          <h2 className="error-page__title">{config.title}</h2>
-          <p className="error-page__description">{config.description}</p>
+          <div className="error-page__code">{code ?? "?"}</div>
+          <div className="error-page__title">{config.title}</div>
+          <div className="error-page__description">{config.description}</div>
           <div className="error-page__actions">
-            <a href="/">Go to home page</a>
+            <a
+              className="error-page__btn error-page__btn--primary"
+              href="https://www.aeroflot.ru/booking?from=404"
+            >
+              Buy Ticket
+            </a>
+            <a
+              className="error-page__btn error-page__btn--secondary"
+              href="https://www.aeroflot.ru/?from=404"
+            >
+              Home Page
+            </a>
+            <a
+              className="error-page__btn error-page__btn--link"
+              href="https://www.aeroflot.ru/help?from=404"
+            >
+              Support
+            </a>
           </div>
         </div>
       </section>