Bob AI: Add service detail pages (dynamic route /services/:slug)

Merge version_6_1783075595252 into main

src/App.tsx

@@ -2,12 +2,16 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import BlogPage from "@/pages/BlogPage";
+import ServiceDetailPage from './pages/ServiceDetailPage';
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/blog" element={<BlogPage />} />
       </Route>
+          <Route path="/services/:slug" element={<ServiceDetailPage />} />
     </Routes>
   );
 }

src/components/Layout.tsx

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

src/data/services.ts

@@ -0,0 +1,17 @@
+export interface Service {
+  slug: string;
+  question: string;
+  answer: string;
+  body: string;
+  specs: Array<{ label: string; value: string }>;
+}
+
+export const services: Service[] = [
+  {"slug":"item-9f9u9","question":"Where is your primary service area?","answer":"We specialize in the Northern Cape mining and industrial regions, ensuring rapid local deployment.","body":"Our Item 1 service is designed to provide comprehensive strategic oversight for your most complex business challenges. We embed our senior consultants directly into your daily operations, ensuring a seamless integration of industry best practices with your unique company culture. This hands-on approach allows us to identify hidden bottlenecks and unlock new avenues for sustainable growth.\n\nBy leveraging proprietary analytics and decades of market experience, we transform raw data into actionable roadmaps. You will receive dedicated support throughout the entire implementation phase, minimizing downtime and maximizing your return on investment. Our team remains on call to refine these strategies as your market landscape evolves.","specs":[{"label":"Duration","value":"3-6 Months"},{"label":"Delivery Method","value":"Hybrid"},{"label":"Dedicated Experts","value":"2 Senior Consultants"},{"label":"Reporting","value":"Weekly Dashboards"}]},
+  {"slug":"item-f6ct8","question":"Do you provide OEM maintenance?","answer":"Yes, we adhere strictly to OEM standards for all mechanical maintenance and repairs.","body":"Item 2 delivers robust, scalable technical solutions tailored to modern enterprise environments. We focus on building resilient infrastructure that grows alongside your business, utilizing the latest frameworks to guarantee optimal performance and security. Every deployment is rigorously tested against industry standards to ensure flawless operation from day one.\n\nOur development lifecycle prioritizes transparency and continuous feedback. You will have full visibility into our progress through regular milestone reviews and open communication channels. Once the initial build is complete, we provide comprehensive training sessions to empower your internal teams and facilitate a smooth handover.\n\nBeyond the initial launch, this service includes proactive monitoring and maintenance. We preemptively address potential vulnerabilities and apply critical updates, giving you total peace of mind and allowing your staff to focus on core business objectives.","specs":[{"label":"Tech Stack","value":"React & Node.js"},{"label":"Uptime Guarantee","value":"99.9%"},{"label":"Support SLA","value":"24/7 Priority"},{"label":"Training Included","value":"10 Hours"}]},
+  {"slug":"item-tqcwk","question":"How do we request a project consultation?","answer":"Simply fill out our contact form below or call our office during business hours.","body":"Maximize your market penetration with Item 3, our fully managed growth and outreach service. We take a holistic view of your target audience, crafting highly personalized campaigns that resonate across multiple digital touchpoints. By aligning our creative assets with your core brand identity, we drive measurable engagement and foster long-term customer loyalty.\n\nContinuous optimization is at the heart of our methodology. We employ advanced split testing and real-time behavioral tracking to refine our messaging on the fly. This data-driven agility ensures that your budget is always allocated to the highest-performing channels, dramatically reducing acquisition costs over time.","specs":[{"label":"Campaign Types","value":"Omnichannel"},{"label":"Optimization","value":"Daily"},{"label":"Asset Creation","value":"Included"},{"label":"Contract Length","value":"Annual Minimum"},{"label":"Account Manager","value":"Dedicated"}]},
+];
+
+export function findService(slug: string): Service | undefined {
+  return services.find((x) => x.slug === slug);
+}

src/pages/BlogPage.tsx

@@ -0,0 +1,19 @@
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+import { ArrowUpRight, Loader2 } from "lucide-react";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import useBlogPosts from "@/hooks/useBlogPosts";
+
+export default function BlogPage() {
+  return (
+    <>
+      <div data-webild-section="HeroBillboard"><section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30"><HeroBackgroundSlot /><div className="flex flex-col gap-12 md:gap-15 w-content-width mx-auto"><div className="flex flex-col items-center gap-3 text-center"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/portrait-successful-man-having-stubble-posing-with-broad-smile-keeping-arms-folded_171337-1267.jpg","https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg","https://img.freepik.com/free-photo/handsome-corporate-man-real-estate-agent-assistant-smiling-holding-hands-together-how-can-i-help-smiling-camera-standing-white-background_176420-45257.jpg"]} label="Written by our experts" className="mb-1" /><TextAnimation text="Insights & Best Practices" variant="fade-blur" gradientText={true} tag="h1" className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Stay updated with the latest industry trends, technical updates, and expert insights from the team at Record Engineering." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Read Latest" href="#latest-posts" variant="primary" /><Button text="Subscribe" href="#subscribe" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="slide-up" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/close-up-engineer-working-blueprints_1098-18833.jpg" className="aspect-4/5 md:aspect-video" /></ScrollReveal></div></section></div>
+      <div data-webild-section="BlogMediaCards"><section aria-label="Blog section" className="py-20"><div className="w-content-width mx-auto flex justify-center"><Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} /></div></section></div>
+    </>
+  );
+}

src/pages/HomePage/sections/About.tsx

@@ -10,9 +10,9 @@ export default function AboutSection(): React.JSX.Element {
     <div id="about" data-section="about">
         <SectionErrorBoundary name="about">
               <AboutText
-          title="A proven partner in mining reliability. Record Engineering Pty Ltd combines local presence with technical precision to optimize lifecycle performance."
-          textAnimation="fade-blur"
-        />
+        title="With a track record of over 60 years as a support services company in the mining industry, we make sure our performance always exceeds expectations. We are an agile company that adapts to the changing and challenging needs of our clients. We foster a culture of discipline, detail and dynamic determination that attracts high-performing employees and results in masterful delivery. Over the years, Record Engineering has grown considerably and evolved into a key player in the mining sector, becoming a leading supplier to numerous Original Equipment Manufacturers (OEMs) and major mining operations. In Kathu and the Northern Cape we operate primarily as an engineering services provider for mining machinery and direct project management at mining plants. Our engineering service spans assembly, rebuilds and component change-outs across all mining machinery — including yellow machines and telehandlers — as well as equipment sales, maintenance and plant-design-based support. Additional support is available through our fleet and mining rental range. With a high-quality, mine-ready fleet, this is a cost-effective solution to meet our clients' fleet requirements during repair and rehabilitation."
+        textAnimation="fade-blur"
+      />
         </SectionErrorBoundary>
       </div>
   );

src/pages/HomePage/sections/Hero.tsx

@@ -10,59 +10,21 @@ export default function HeroSection(): React.JSX.Element {
     <div id="hero" data-section="hero">
         <SectionErrorBoundary name="hero">
               <HeroSplitVerticalMarquee
-          tag="Since 2012"
-          title="Engineering Excellence in the Northern Cape"
-          description="Trusted project management, OEM maintenance, and lifecycle contracts for mining and heavy industry. Providing reliable regional engineering solutions."
-          primaryButton={{
+        tag="Record Engineering (Pty) Ltd"
+        title="Engineering Excellence in the Heart of the Northern Cape"
+        description="Over 60 years of trusted support services to the mining industry. Project Management • OEM Maintenance • Life Cycle Contracts"
+        primaryButton={{
             text: "Explore Our Services",
             href: "#services",
           }}
-          secondaryButton={{
+        secondaryButton={{
             text: "Contact Us",
             href: "#contact",
           }}
-          leftItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/old-weathered-house-with-mountain-range-background_53876-47060.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/computer-display-empty-facility-used-upgrading-solar-plant-machinery_482257-118310.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-front-end-loader-moving-soil-quarry_1308-190385.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/architecture-plan-blueprint-layout-work-concept_53876-124260.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/view-city-bridge-with-train-london_23-2149437440.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-desk_23-2147653318.jpg",
-            },
-          ]}
-          rightItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914170.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/grey-concrete-building-with-multiple-windows_250224-252.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-energy-supply-solar-panel-manufacturing-plant_482257-120594.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283224.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/business-plan-corporate-development-process_53876-124514.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg",
-            },
-          ]}
-          textAnimation="slide-up"
-        />
+        leftItems={[{"imageSrc":"https://images.unsplash.com/photo-1578593172074-a669ea40f372?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1531834685032-c34bf0d84c77?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092335397-9583eb92d232?q=80&w=2070&auto=format&fit=crop"}]}
+        rightItems={[{"imageSrc":"https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092162384-8987c1d64718?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092160607-ee22621dd758?q=80&w=2070&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1581092583537-20d51b4b4f1b?q=80&w=2070&auto=format&fit=crop"}]}
+        textAnimation="slide-up"
+      />
         </SectionErrorBoundary>
       </div>
   );

src/pages/ServiceDetailPage.tsx

@@ -0,0 +1,30 @@
+import { useParams, Link, Navigate } from 'react-router-dom';
+import { findService } from '@/data/services';
+
+export default function ServiceDetailPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const service = slug ? findService(slug) : undefined;
+  if (!service) return <Navigate to="/services" replace />;
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background text-foreground">
+      <main className="flex-grow pt-24">
+        <div className="w-content-width mx-auto py-16 flex flex-col gap-8">
+          <Link to="/services" className="text-sm opacity-60 hover:opacity-100 w-fit">← Back to Services</Link>
+          <div className="flex flex-col gap-4 max-w-3xl">
+            <h1 className="text-5xl font-bold">{service.question}</h1>
+            {service.body && <div className="text-base leading-relaxed opacity-80 whitespace-pre-line">{service.body}</div>}
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {service.answer != null && (<div className="flex flex-col"><span className="text-xs uppercase tracking-wide opacity-50">Answer</span><span className="text-base">{String(service.answer)}</span></div>)}
+          </div>
+          {Array.isArray(service.specs) && service.specs.length > 0 && (
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 border-t border-foreground/10 pt-6">
+              {service.specs.map((s, i) => (<div key={i} className="flex flex-col"><span className="text-xs uppercase tracking-wide opacity-50">{s.label}</span><span className="text-base">{s.value}</span></div>))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

src/routes.ts

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