Bob AI: Add machine-walkthrough page

src/App.tsx

@@ -4,6 +4,7 @@ import HomePage from './pages/HomePage';
 
 import BlogPage from "@/pages/BlogPage";
 import ServiceDetailPage from './pages/ServiceDetailPage';
+import MachineWalkthroughPage from "@/pages/MachineWalkthroughPage";
 export default function App() {
   return (
     <Routes>
@@ -12,6 +13,7 @@ export default function App() {
         <Route path="/blog" element={<BlogPage />} />
       </Route>
           <Route path="/services/:slug" element={<ServiceDetailPage />} />
+      <Route path="/machine-walkthrough" element={<MachineWalkthroughPage />} />
     </Routes>
   );
 }

src/components/Layout.tsx

@@ -24,6 +24,8 @@ export default function Layout() {
     "href": "#contact"
   },
   { name: "Blog", href: "/blog" },
+  { name: "Machine Walkthrough", href: "/machine-walkthrough" },
+
 
 ];
 

src/pages/MachineWalkthroughPage.tsx

@@ -0,0 +1,94 @@
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
+import ContactCta from "@/components/sections/contact/ContactCta";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function MachineWalkthroughPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="P&H 4200 Tour"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Request Specs", href: "/contact" }}
+      />
+
+      <main className="flex-grow" id="hero">
+        <HeroOverlay
+          tag="Virtual Experience"
+          title="P&H 4200 Electric Rope Shovel"
+          description="Experience the sheer scale and engineering mastery of the world's premier mining shovel. Step inside the machine."
+          primaryButton={{ text: "Enter the Machine", href: "#interiors" }}
+          secondaryButton={{ text: "Watch Exterior Flyby", href: "#" }}
+          imageSrc="https://images.unsplash.com/photo-1578319439584-104c94d37305?auto=format&fit=crop&q=80"
+          textAnimation="fade-blur"
+        />
+
+        <div id="interiors">
+          <FeaturesMediaCards
+            tag="Interior Compartments"
+            title="Explore the Anatomy"
+            description="Navigate through the critical zones of the P&H 4200. Select a compartment to view detailed schematics and operational data."
+            items={[
+              {
+                title: "Operator's Cab",
+                description: "Ergonomic control center with panoramic visibility, dual joystick controls, and advanced diagnostic displays.",
+                imageSrc: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80"
+              },
+              {
+                title: "Machinery House",
+                description: "The beating heart housing the massive hoist and swing motors, designed for continuous high-torque output.",
+                imageSrc: "https://images.unsplash.com/photo-1581092335397-9583eb92d232?auto=format&fit=crop&q=80"
+              },
+              {
+                title: "Electrical Room",
+                description: "Advanced AC drive systems, power distribution panels, and climate-controlled electronics bays.",
+                imageSrc: "https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&q=80"
+              },
+              {
+                title: "Boom & Dipper",
+                description: "High-strength steel structures engineered for maximum payload and optimal dig geometry.",
+                imageSrc: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&q=80"
+              }
+            ]}
+            textAnimation="slide-up"
+          />
+        </div>
+
+        <ContactCta
+          tag="End of Tour"
+          text="Ready to step back outside or discuss technical specifications?"
+          primaryButton={{ text: "Back to Exterior", href: "#hero" }}
+          secondaryButton={{ text: "Contact Engineering", href: "/contact" }}
+          textAnimation="fade-blur"
+        />
+      </main>
+
+      <FooterSimple
+        brand="Record Engineering (Pty) Ltd"
+        copyright="© 2024 Record Engineering (Pty) Ltd. All rights reserved."
+        columns={[
+          {
+            title: "Contact",
+            items: [
+              { label: "sales@recordeng.com", href: "mailto:sales@recordeng.com" },
+              { label: "+27 11 555 0198", href: "tel:+27115550198" }
+            ]
+          },
+          {
+            title: "Legal",
+            items: [
+              { label: "Privacy Policy", href: "/privacy" },
+              { label: "Terms of Service", href: "/terms" }
+            ]
+          }
+        ]}
+        links={[
+          { label: "LinkedIn", href: "#" },
+          { label: "YouTube", href: "#" }
+        ]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/blog', label: 'Blog', pageFile: 'BlogPage' },
+  { path: '/machine-walkthrough', label: 'Machine Walkthrough', pageFile: 'MachineWalkthroughPage' },
 ];