helfy-create 0.0.3 → 0.0.5

package/template/src/widgets/NotFound/NotFound.tsx

@@ -5,31 +5,25 @@ export interface Props {
 }
 
 @View
-/** Кастомная страница 404 приложения — переопределяет fallback RouterView. */
+/** Custom 404 page — overrides the fallback RouterView. */
 export class NotFound {
   constructor(private readonly props: Props = {}) {}
 
   render() {
     return (
-      <section class="flex flex-col flex-1 h-full flex-grow items-center justify-center px-8 py-16 text-center bg-slate-950">
-        <div class="text-8xl font-bold tracking-tighter text-indigo-200 dark:text-indigo-900/50 select-none">
-          404
-        </div>
-        <h1 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-100">
-          Упс! Страница не найдена
-        </h1>
-        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-md">
-          Запрошенный адрес не существует или был перемещён.
+      <section class="not-found">
+        <div class="not-found__code">404</div>
+        <h1 class="not-found__title">Oops! Page not found</h1>
+        <p class="not-found__text">
+          The requested address does not exist or has been moved.
         </p>
         {(this.props.pathname ?? "") && (
-          <p class="mt-2 text-xs text-gray-500 dark:text-gray-500 font-mono break-all max-w-full">
-            {this.props.pathname}
-          </p>
+          <p class="not-found__path">{this.props.pathname}</p>
         )}
         <Link
           to="/"
-          label="Вернуться на главную"
-          class="mt-8 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors shadow-sm"
+          label="Back to home"
+          class="btn btn--primary"
         />
       </section>
     );