src/App.tsx

@@ -3,6 +3,7 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import NutritionPage from "@/pages/NutritionPage";
+import ServiceDetailPage from './pages/ServiceDetailPage';
 export default function App() {
   return (
     <Routes>
@@ -10,6 +11,7 @@ export default function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/nutrition" element={<NutritionPage />} />
       </Route>
+          <Route path="/services/:slug" element={<ServiceDetailPage />} />
     </Routes>
   );
 }

src/data/services.ts

@@ -0,0 +1,19 @@
+export interface Service {
+  slug: string;
+  question: string;
+  answer: string;
+  body: string;
+  specs: Array<{ label: string; value: string }>;
+}
+
+export const services: Service[] = [
+  {"slug":"item-sc0cq","question":"Do I need to count calories to lose weight?","answer":"Not necessarily. While a caloric deficit is required for weight loss, focusing on nutrient-dense foods and portion control can be just as effective without the stress of tracking.","body":"Transform your outdoor space into a breathtaking extension of your home with our bespoke landscape design services. Our team of expert horticulturists and spatial designers works closely with you to understand your aesthetic preferences, lifestyle needs, and the unique microclimate of your property. We believe every garden should tell a story, blending natural beauty with functional elegance.\n\nFrom the initial conceptual sketches to the final 3D renderings, we ensure every detail is meticulously planned. We carefully select native plantings, drought-resistant flora, and mature trees that will thrive in your specific soil conditions while providing year-round visual interest. The result is a cohesive, sustainable, and stunning outdoor sanctuary.","specs":[{"label":"Consultation","value":"Free 1-hour site visit"},{"label":"Deliverables","value":"2D plans and 3D renderings"},{"label":"Timeline","value":"2-4 weeks"},{"label":"Revisions","value":"Up to 3 rounds"}]},
+  {"slug":"item-49l50","question":"What should I eat before a workout?","answer":"Aim for a mix of easily digestible carbohydrates and a moderate amount of protein about 1-2 hours before exercising to fuel your session and prevent fatigue.","body":"Anchor your outdoor living area with durable, beautifully crafted hardscape elements. Whether you envision a sprawling natural stone patio for summer entertaining, a cozy fire pit for crisp autumn evenings, or elegant retaining walls to tame a sloping yard, our master masons bring your vision to life. We use only premium materials sourced from trusted quarries to ensure longevity and timeless appeal.\n\nOur construction process prioritizes structural integrity and proper drainage, ensuring your new hardscape withstands the test of time and weather. We handle all necessary permits and site preparation, minimizing disruption to your daily life. Every paver is laid with precision, creating seamless transitions between your home's interior and your new outdoor oasis.","specs":[{"label":"Materials","value":"Natural stone, brick, concrete pavers"},{"label":"Warranty","value":"10-year structural guarantee"},{"label":"Permitting","value":"Handled by our team"},{"label":"Project Duration","value":"1-3 weeks"}]},
+  {"slug":"item-ggn6m","question":"Are carbohydrates bad for me?","answer":"Absolutely not. Carbohydrates are your body's primary energy source. Focus on complex carbs like whole grains, fruits, and vegetables rather than refined sugars.","body":"Protect your landscaping investment and conserve water with our state-of-the-art irrigation solutions. We design and install smart sprinkler and drip systems tailored to the specific hydration needs of your lawn, garden beds, and potted plants. By delivering the exact amount of water directly to the root zones, we promote deeper root growth and healthier, more resilient plants.\n\nModern irrigation is all about efficiency and convenience. We integrate smart controllers that automatically adjust watering schedules based on real-time local weather data and soil moisture sensors. You can easily monitor and control your entire system from your smartphone, ensuring your landscape remains lush and vibrant even when you are miles away from home.","specs":[{"label":"System Type","value":"Smart drip and sprinkler hybrid"},{"label":"Control","value":"Wi-Fi enabled mobile app"},{"label":"Water Savings","value":"Up to 40% annually"},{"label":"Maintenance","value":"Bi-annual seasonal checkups"}]},
+  {"slug":"item-wsnb3","question":"How much water should I drink daily?","answer":"A general rule is to drink at least 8 glasses a day, but your needs increase with physical activity and heat. Listen to your body and drink when thirsty.","body":"Extend the usability of your outdoor spaces well into the night with our custom architectural and landscape lighting. Proper illumination enhances the safety and security of your property while dramatically highlighting the architectural features of your home and the most beautiful elements of your garden. We use low-voltage, energy-efficient LED fixtures that cast a warm, inviting glow.\n\nOur lighting designers carefully map out focal points, pathways, and gathering areas to create a layered lighting effect. From subtle moonlighting cascading down from mature trees to precise uplighting on textured stone walls, we craft an enchanting nighttime atmosphere. All wiring is discreetly buried, leaving nothing but the stunning visual impact of the light itself.","specs":[{"label":"Bulb Type","value":"Low-voltage LED"},{"label":"Lifespan","value":"50,000+ hours"},{"label":"Automation","value":"Dusk-to-dawn timers"},{"label":"Style Options","value":"Brass, copper, and matte black"}]},
+  {"slug":"item-2cbar","question":"Can I build muscle on a plant-based diet?","answer":"Yes! Plant-based diets can provide ample protein through sources like lentils, beans, tofu, and quinoa. Proper planning ensures you get all essential amino acids.","body":"Keep your property looking immaculate year-round with our comprehensive seasonal maintenance packages. We go far beyond basic mowing, offering a holistic approach to turf and plant health. Our experienced crews provide precise edging, seasonal pruning, core aeration, and organic fertilization to ensure your landscape remains healthy, vibrant, and weed-free through every changing season.\n\nWe understand that a truly beautiful lawn requires proactive care. Our specialists conduct regular soil testing to adjust nutrient applications and monitor for early signs of pests or disease. By tailoring our maintenance schedule to the specific needs of your property and the local climate, we take the guesswork and labor out of yard work, leaving you with nothing to do but enjoy the view.","specs":[{"label":"Frequency","value":"Weekly or bi-weekly"},{"label":"Services","value":"Mowing, edging, pruning, cleanup"},{"label":"Fertilization","value":"100% organic options available"},{"label":"Contract Length","value":"6 or 12-month plans"}]},
+];
+
+export function findService(slug: string): Service | undefined {
+  return services.find((x) => x.slug === slug);
+}

src/pages/NutritionPage.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
@@ -5,8 +6,11 @@ import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import ScrollReveal from "@/components/ui/ScrollReveal";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
 import FaqSimple from "@/components/sections/faq/FaqSimple";
+import { services } from '@/data/services';
 
 export default function NutritionPage() {
+  const navigate = useNavigate();
+
   return (
     <>
       <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Personalized Nutrition</p></div><TextAnimation text="Fuel Your Body for Peak Performance" variant="fade-blur" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Discover science-backed nutrition plans tailored to your unique goals. Learn how to nourish your mind and body to achieve your true potential every single day." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Get Your Plan" href="#nutrition-plans" variant="primary" /><Button text="Explore Recipes" href="#recipes" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="slide-up" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/fresh-healthy-food-assortment-dark-background_23-2148974582.jpg" /></ScrollReveal></div></section></div>
@@ -20,7 +24,7 @@ export default function NutritionPage() {
         description="Find answers to the most frequently asked questions about personalized nutrition, meal planning, and fueling your body."
         primaryButton={{"text":"Get a Custom Plan","href":"#nutrition-plans"}}
         secondaryButton={{"text":"Contact a Coach","href":"/contact"}}
-        items={[{"question":"Do I need to count calories to lose weight?","answer":"Not necessarily. While a caloric deficit is required for weight loss, focusing on nutrient-dense foods and portion control can be just as effective without the stress of tracking."},{"question":"What should I eat before a workout?","answer":"Aim for a mix of easily digestible carbohydrates and a moderate amount of protein about 1-2 hours before exercising to fuel your session and prevent fatigue."},{"question":"Are carbohydrates bad for me?","answer":"Absolutely not. Carbohydrates are your body's primary energy source. Focus on complex carbs like whole grains, fruits, and vegetables rather than refined sugars."},{"question":"How much water should I drink daily?","answer":"A general rule is to drink at least 8 glasses a day, but your needs increase with physical activity and heat. Listen to your body and drink when thirsty."},{"question":"Can I build muscle on a plant-based diet?","answer":"Yes! Plant-based diets can provide ample protein through sources like lentils, beans, tofu, and quinoa. Proper planning ensures you get all essential amino acids."}]}
+        items={services.map((p) => ({ ...p, onClick: () => navigate(`/services/${p.slug}`) }))}
       /></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>
+  );
+}