claude:design: center 404 page and hide Earn Yield CTA on it

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kuco23

src/assets/css/error.scss

@@ -12,6 +12,16 @@
     text-align: left;
 }
 
+.error-container--centered {
+    align-items: center;
+    text-align: center;
+    min-height: 60vh;
+    justify-content: center;
+    padding: 64px 0;
+}
+
+.error-container--centered .error-desc { margin-left: auto; margin-right: auto; }
+
 .error-status {
     font-family: var(--font-sans);
     font-variant-numeric: tabular-nums;

src/layout/root.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useLocation, useNavigation } from 'react-router-dom'
+import { Outlet, useLocation, useMatches, useNavigation } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import { useGlobalStore } from '~/utils/store/global'
 import { useShallow } from 'zustand/react/shallow'
@@ -48,6 +48,8 @@ const NavigationPreloader = () => {
 
 const RootLayout = () => {
   const { pathname } = useLocation()
+  const matches = useMatches()
+  const hideCallToAction = matches.some(m => (m.handle as { hideCallToAction?: boolean } | undefined)?.hideCallToAction)
   const chain = chainFromRoute(pathname)
   const chainId = chainToChainId(chain)
   const image = chainToBackgroundImage(chain)
@@ -80,7 +82,7 @@ const RootLayout = () => {
         {image && <div className='background-image' style={{ backgroundImage: `url("${image}")` }} />}
         <CookiesProvider>
           <Outlet />
-          <CallToAction />
+          {!hideCallToAction && <CallToAction />}
           <Footer />
         </CookiesProvider>
       </div>

src/pages/notFound.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 const NotFound = () => (
     <section className="innerpage-single-area">
         <div className="container">
-            <div className="error-container">
+            <div className="error-container error-container--centered">
                 <div className="error-status">404</div>
                 <div className="error-label">Page not found</div>
                 <p className="error-desc">

src/route/router.jsx

@@ -22,7 +22,7 @@ export const router = createHashRouter([
             lazyRoute("/flare/validator", () => import("../pages/protocols/flare-validator/page")),
             lazyRoute("/flare/fsp", () => import("../pages/protocols/flare-fsp/page")),
             lazyRoute("/songbird/fsp", () => import("../pages/protocols/songbird-fsp/page")),
-            { path: "*", element: <NotFound /> }
+            { path: "*", element: <NotFound />, handle: { hideCallToAction: true } }
         ]
     }
 ])