Bob AI: Populate src/pages/ServicesPage.tsx (snippet builder, 3 sections)

Merge version_3_1780443569169 into main

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 ServicesPage from "@/pages/ServicesPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/services" element={<ServicesPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "#metrics"
-  }
+  },
+  { name: "Services", href: "/services" },
+
 ];
 
   return (

src/pages/HomePage/sections/Faq.tsx

@@ -7,18 +7,18 @@ import ScrollReveal from '@/components/ui/ScrollReveal';
 export default function FaqSection(): React.JSX.Element {
   return (
     <div data-webild-section="faq" className="py-24 bg-background">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
         <div className="text-center mb-16">
           <Tag text="FAQ" className="mb-4" />
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
             Frequently Asked Questions
           </h2>
-          <p className="text-lg text-muted-foreground">
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             Find answers to common questions about our HVAC services, maintenance, and more.
           </p>
         </div>
     
-        <div className="space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {[
             {
               question: "How often should I have my HVAC system serviced?",
@@ -45,14 +45,14 @@ export default function FaqSection(): React.JSX.Element {
               answer: "Absolutely. All of our technicians are fully licensed, insured, and undergo regular training to stay up-to-date with the latest HVAC technologies and safety standards."
             }
           ].map((faq, index) => (
-            <ScrollReveal key={index} variant="slide-up" className="bg-card p-6 rounded-2xl shadow-sm border border-border">
-              <h3 className="text-xl font-semibold text-foreground mb-3">
+            <div key={index} className="bg-card p-8 rounded-2xl shadow-sm border border-border flex flex-col h-full hover:shadow-md transition-shadow duration-300">
+              <h3 className="text-xl font-semibold text-foreground mb-4">
                 {faq.question}
               </h3>
-              <p className="text-muted-foreground leading-relaxed">
+              <p className="text-muted-foreground leading-relaxed mt-auto">
                 {faq.answer}
               </p>
-            </ScrollReveal>
+            </div>
           ))}
         </div>
       </div>

src/pages/ServicesPage.tsx

@@ -0,0 +1,35 @@
+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 { cls } from "@/lib/utils";
+import { Check } from "lucide-react";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+
+export default function ServicesPage() {
+  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>Our Services</p></div><TextAnimation text="Comprehensive Solutions for Your Business Needs" 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 our range of professional services designed to elevate your brand and streamline operations. We partner with you to deliver tailored strategies and measurable results. Explore how our expertise can help you achieve your business objectives." 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="Explore Services" href="/services#all-services" variant="primary" /><Button text="Contact Us" href="/contact" 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/premium-photo/business-team-working-together-modern-office-setting-showcasing-collaboration-innovation_965042-108703.jpg" /></ScrollReveal></div></section></div>
+      <div data-webild-section="FeaturesAlternatingSplit"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Services</p></div><TextAnimation text="Tailored Services to Drive Your Success" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="We offer expert services designed to help your business thrive. Our solutions are crafted to meet your unique challenges, from strategic planning to implementation." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Explore All Services" href="/services#all-services" variant="primary" /><Button text="Contact Us" href="/contact" variant="secondary" animationDelay={0.1} /></div></div><div className="flex flex-col gap-5 w-content-width mx-auto"><ScrollReveal variant="slide-up" key="Strategic Business Consulting" className="flex flex-col gap-6 md:gap-10 p-6 md:p-10 card rounded md:flex-row-reverse"><div className="flex flex-col justify-center w-full md:w-1/2 gap-2"><div className="flex items-center justify-center size-9 mb-1 text-sm rounded primary-button text-primary-cta-text"><p>1</p></div><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Strategic Business Consulting</h3><p className="text-base md:text-lg leading-snug text-balance">Gain clarity and direction with our expert strategic consulting. We help define goals and develop actionable plans for sustainable growth.</p><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Learn More" href="/services#consulting" variant="primary" /></div></div><div className="w-full md:w-1/2 aspect-square rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/business-strategy-planning-concept-with-businessman-pointing-chart_1000574-12345.jpg" /></div></ScrollReveal>
+<ScrollReveal variant="slide-up" key="Digital Transformation Solutions" className="flex flex-col gap-6 md:gap-10 p-6 md:p-10 card rounded md:flex-row-reverse"><div className="flex flex-col justify-center w-full md:w-1/2 gap-2"><div className="flex items-center justify-center size-9 mb-1 text-sm rounded primary-button text-primary-cta-text"><p>2</p></div><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Digital Transformation Solutions</h3><p className="text-base md:text-lg leading-snug text-balance">Modernize operations and enhance efficiency with our digital transformation services. Embrace new technologies to stay competitive.</p><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Discover How" href="/services#digital" variant="primary" /></div></div><div className="w-full md:w-1/2 aspect-square rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/digital-transformation-concept-with-abstract-data-flow_1000574-12346.jpg" /></div></ScrollReveal>
+<ScrollReveal variant="slide-up" key="Integrated Marketing & Branding" className="flex flex-col gap-6 md:gap-10 p-6 md:p-10 card rounded md:flex-row-reverse"><div className="flex flex-col justify-center w-full md:w-1/2 gap-2"><div className="flex items-center justify-center size-9 mb-1 text-sm rounded primary-button text-primary-cta-text"><p>3</p></div><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Integrated Marketing & Branding</h3><p className="text-base md:text-lg leading-snug text-balance">Build a powerful brand presence and reach your target audience effectively. Our strategies drive engagement and deliver measurable results.</p><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="View Case Studies" href="/services#marketing" variant="primary" /></div></div><div className="w-full md:w-1/2 aspect-square rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/marketing-strategy-and-branding-concept-with-creative-elements_1000574-12347.jpg" /></div></ScrollReveal>
+<ScrollReveal variant="slide-up" key="Operational Efficiency & Optimization" className="flex flex-col gap-6 md:gap-10 p-6 md:p-10 card rounded md:flex-row-reverse"><div className="flex flex-col justify-center w-full md:w-1/2 gap-2"><div className="flex items-center justify-center size-9 mb-1 text-sm rounded primary-button text-primary-cta-text"><p>4</p></div><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Operational Efficiency & Optimization</h3><p className="text-base md:text-lg leading-snug text-balance">Streamline processes and boost productivity. We analyze operations to identify bottlenecks and implement best practices.</p><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Improve Operations" href="/services#operations" variant="primary" /></div></div><div className="w-full md:w-1/2 aspect-square rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/premium-photo/business-process-optimization-concept-with-gears-and-data_1000574-12348.jpg" /></div></ScrollReveal></div></div></section></div>
+      <div data-webild-section="PricingSimpleCards"><section aria-label="Pricing section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Services</p></div><TextAnimation text="Flexible Service Plans for Your Business" variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Explore our tailored service plans designed to meet diverse business needs. Each plan offers a unique set of features to help you achieve your goals efficiently and effectively. For comprehensive projects, custom quotes are available." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Get Started" href="/contact" variant="primary" /><Button variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Foundational Strategy" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Foundational Strategy</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">$199/mo</span><span className="text-base font-medium">Ideal for businesses seeking initial strategic direction and foundational support across our service areas.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Initial strategic assessment & roadmap" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Initial strategic assessment & roadmap</span></div>
+<div key="1-hour monthly consultation (virtual)" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">1-hour monthly consultation (virtual)</span></div>
+<div key="Basic performance insights & recommendations" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Basic performance insights & recommendations</span></div>
+<div key="Email support for strategic queries" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Email support for strategic queries</span></div></div></div>
+<div key="Growth Accelerator" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Growth Accelerator</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">$499/mo</span><span className="text-base font-medium">Designed for growing businesses ready to implement advanced strategies and optimize key initiatives.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Dedicated strategic advisor" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Dedicated strategic advisor</span></div>
+<div key="Comprehensive strategic planning & quarterly reviews" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Comprehensive strategic planning & quarterly reviews</span></div>
+<div key="Support for 1-2 key service initiatives (e.g., marketing campaign planning, process review)" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Support for 1-2 key service initiatives (e.g., marketing campaign planning, process review)</span></div>
+<div key="Bi-weekly progress meetings & priority support" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Bi-weekly progress meetings & priority support</span></div>
+<div key="Custom analytics dashboard access" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Custom analytics dashboard access</span></div></div></div>
+<div key="Enterprise Partnership" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Enterprise Partnership</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">Custom</span><span className="text-base font-medium">Tailored, integrated solutions for large organizations requiring extensive, scalable, and ongoing strategic and implementation support.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Fully customized service package across all offerings" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Fully customized service package across all offerings</span></div>
+<div key="Dedicated on-site/remote expert team" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Dedicated on-site/remote expert team</span></div>
+<div key="Continuous strategic partnership & implementation" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Continuous strategic partnership & implementation</span></div>
+<div key="Advanced security, compliance & risk management" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Advanced security, compliance & risk management</span></div>
+<div key="Exclusive access to new methodologies & tools" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Exclusive access to new methodologies & tools</span></div>
+<div key="Regular executive reviews & strategic workshops" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Regular executive reviews & strategic workshops</span></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

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