v4

src/App.jsx

@@ -1,7 +1,9 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
 import { lazy, Suspense } from 'react'
-import { Link } from 'react-router-dom'
 import Layout from './components/Layout'
+import Loading from './components/Loading'
+import ErrorBoundary from './components/ErrorBoundary'
+import { BRAND_PRIMARY } from './config'
 
 const Home = lazy(() => import('./pages/Home'))
 const About = lazy(() => import('./pages/About'))
@@ -15,7 +17,7 @@ function NotFound() {
     <div style={{ padding: '120px 24px', textAlign: 'center' }}>
       <h1>404 — Page Not Found</h1>
       <p>The page you're looking for doesn't exist.</p>
-      <Link to="/" style={{ color: '#FA2D39' }}>← Back to Home</Link>
+      <Link to="/" style={{ color: BRAND_PRIMARY }}>← Back to Home</Link>
     </div>
   )
 }
@@ -23,19 +25,21 @@ function NotFound() {
 export default function App() {
   return (
     <BrowserRouter>
-      <Suspense fallback={null}>
-        <Routes>
-          <Route element={<Layout />}>
-            <Route path="/" element={<Home />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/service" element={<Services />} />
-            <Route path="/service/:slug" element={<ServiceDetail />} />
-            <Route path="/project" element={<Project />} />
-            <Route path="/contact" element={<Contact />} />
-            <Route path="*" element={<NotFound />} />
-          </Route>
-        </Routes>
-      </Suspense>
+      <ErrorBoundary>
+        <Suspense fallback={<Loading />}>
+          <Routes>
+            <Route element={<Layout />}>
+              <Route path="/" element={<Home />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/service" element={<Services />} />
+              <Route path="/service/:slug" element={<ServiceDetail />} />
+              <Route path="/project" element={<Project />} />
+              <Route path="/contact" element={<Contact />} />
+              <Route path="*" element={<NotFound />} />
+            </Route>
+          </Routes>
+        </Suspense>
+      </ErrorBoundary>
     </BrowserRouter>
   )
 }