src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import HistoryPage from "@/pages/HistoryPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/history" element={<HistoryPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -19,7 +19,9 @@ export default function Layout() {
   {
     "name": "Contact",
     "href": "#contact"
-  }
+  },
+  { name: "History", href: "/history" },
+
 ];
 
   return (

src/pages/HistoryPage.tsx

@@ -0,0 +1,71 @@
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import ChecklistTimeline from "@/components/ui/ChecklistTimeline";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+const navItems = [
+  { name: "Home", href: "/#hero" },
+  { name: "Our Story", href: "/#about" },
+  { name: "Menu", href: "/#products" },
+  { name: "Contact", href: "/#contact" },
+  { name: "History", href: "/history" },
+];
+
+export default function HistoryPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="ArtisanBakery"
+        navItems={navItems}
+        ctaButton={{ text: "Order Online", href: "/#products" }}
+      />
+
+      <main className="container mx-auto py-12 px-4 md:px-6 lg:px-8 flex-grow flex flex-col items-center justify-center mt-20">
+        <div className="max-w-3xl mx-auto text-center mb-16">
+          <h1 className="text-5xl font-bold mb-6">Our History</h1>
+          <p className="text-lg text-foreground/70">
+            From a small neighborhood oven to a beloved city staple, our journey has been fueled by a passion for traditional baking and community. Explore the milestones that shaped ArtisanBakery.
+          </p>
+        </div>
+
+        <div className="w-full max-w-md mx-auto h-[500px]">
+          <ChecklistTimeline
+            heading="Our Journey"
+            subheading="Est. 2010"
+            completedLabel="The Future Awaits"
+            items={[
+              { label: "The First Loaf (2010)", detail: "Opened our doors with just three sourdough recipes." },
+              { label: "Expanding the Menu (2015)", detail: "Introduced our now-famous artisan pastries and cakes." },
+              { label: "Community Hub (2020)", detail: "Partnered with local farms for 100% organic ingredients." }
+            ]}
+          />
+        </div>
+      </main>
+
+      <FooterSimple
+        brand="ArtisanBakery"
+        columns={[
+          {
+            title: "Company",
+            items: [
+              { label: "About Us", href: "/#about" },
+              { label: "History", href: "/history" },
+              { label: "Careers", href: "#" },
+            ],
+          },
+          {
+            title: "Support",
+            items: [
+              { label: "Contact", href: "/#contact" },
+              { label: "Shipping Info", href: "#" },
+            ],
+          },
+        ]}
+        copyright="© 2024 ArtisanBakery. All rights reserved."
+        links={[
+          { label: "Privacy Policy", href: "#" },
+          { label: "Terms of Service", href: "#" },
+        ]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/history', label: 'History', pageFile: 'HistoryPage' },
 ];