Shop integration

Pottery-website/App.tsx

@@ -2,31 +2,51 @@ import React, { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
+import Cart from './components/Cart';
 import ScrollToTop from './components/ScrollToTop';
 import RouteTransition from './components/RouteTransition';
+import { StoreProvider } from './src/context/StoreContext';
 
 // Lazy load pages for better performance
 const Home = lazy(() => import('./pages/Home'));
 const Collections = lazy(() => import('./pages/Collections'));
 const Atelier = lazy(() => import('./pages/Atelier'));
 const Editorial = lazy(() => import('./pages/Editorial'));
+const ProductPhotography = lazy(() => import('./pages/Journal/ProductPhotography'));
+const PackagingGuide = lazy(() => import('./pages/Journal/PackagingGuide'));
+const MotivationInClay = lazy(() => import('./pages/Journal/MotivationInClay'));
+const ProductDetail = lazy(() => import('./pages/ProductDetail'));
+const ArticleDetail = lazy(() => import('./pages/ArticleDetail'));
+const Checkout = lazy(() => import('./pages/Checkout'));
+const MockPayment = lazy(() => import('./pages/MockPayment'));
+const Success = lazy(() => import('./pages/Success'));
+const Admin = lazy(() => import('./pages/Admin'));
 
 function App() {
   return (
     <Router>
-      <ScrollToTop />
-      <Header />
-      <RouteTransition>
-        <Suspense fallback={<div className="h-screen w-full bg-stone-100 dark:bg-stone-900" />}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/collections" element={<Collections />} />
-            <Route path="/atelier" element={<Atelier />} />
-            <Route path="/editorial" element={<Editorial />} />
-          </Routes>
-        </Suspense>
-      </RouteTransition>
-      <Footer />
+      <StoreProvider>
+        <ScrollToTop />
+        <Header />
+        <Cart />
+        <RouteTransition>
+          <Suspense fallback={null}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/collections" element={<Collections />} />
+              <Route path="/collections/:slug" element={<ProductDetail />} />
+              <Route path="/atelier" element={<Atelier />} />
+              <Route path="/editorial" element={<Editorial />} />
+              <Route path="/editorial/:slug" element={<ArticleDetail />} />
+              <Route path="/checkout" element={<Checkout />} />
+              <Route path="/mock-payment" element={<MockPayment />} />
+              <Route path="/success" element={<Success />} />
+              <Route path="/admin" element={<Admin />} />
+            </Routes>
+          </Suspense>
+        </RouteTransition>
+        <Footer />
+      </StoreProvider>
     </Router>
   );
 }