feat: update routing and navigation for system pages, enhance back to home button styles

apps/web/src/apps/index.tsx

@@ -16,7 +16,8 @@ export default function App() {
           <Route path="/403" element={<Forbidden />} />
           <Route path="/maintenance" element={<Maintenance />} />
           <Route path="/coming-soon" element={<ComingSoon />} />
-          <Route path="*" element={<Navigate to="/app" />} />
+          <Route path="/" element={<Navigate to="/app" />} />
+          <Route path="*" element={<Navigate to="/404" />} />
         </Routes>
       </Suspense>
     </BrowserRouter>

apps/web/src/apps/modules/index.tsx

@@ -1,5 +1,8 @@
 import { DateServiceExample, StyleGuideOne, StyleGuideTree, StyleGuideTwo } from '@repo/ui';
-import { Route, Routes } from 'react-router-dom';
+import { lazy } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+const ExamplePage = lazy(() => import('./example/example.page'));
 
 export default function AppModule() {
   return (
@@ -8,6 +11,8 @@ export default function AppModule() {
       <Route path="/guide-1/*" element={<StyleGuideOne />} />
       <Route path="/guide-2/*" element={<StyleGuideTwo />} />
       <Route path="/guide-3/*" element={<StyleGuideTree />} />
+      <Route path="/" element={<ExamplePage />} />
+      <Route path="*" element={<Navigate to={'/404'} replace={true} />} />
     </Routes>
   );
 }

packages/ui/src/components/system-pages/coming-soon.tsx

@@ -24,7 +24,7 @@ export function ComingSoon(props: ComingSoonProps) {
           <div className="mt-8 flex justify-center gap-3">
             <a
               href="/"
-              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
             >
               Back to Home
             </a>

packages/ui/src/components/system-pages/forbidden.tsx

@@ -36,7 +36,7 @@ export function Forbidden(props: ForbiddenProps) {
             {showActionsHome && (
               <a
                 href="/"
-                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+                className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
               >
                 Back to Home
               </a>

packages/ui/src/components/system-pages/maintenance.tsx

@@ -25,7 +25,7 @@ export function Maintenance(props: MaintenanceProps) {
           <div className="mt-8 flex justify-center gap-3">
             <a
               href="/"
-              className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+              className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
             >
               Back to Home
             </a>

packages/ui/src/components/system-pages/not-found.tsx

@@ -31,7 +31,7 @@ export function NotFound(props: NotFoundProps) {
             {showActionsHome && (
               <a
                 href="/"
-                className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
+                className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
               >
                 Back to Home
               </a>