Bob AI: Added an FAQ section

Merge version_10_1780499096077 into main

src/pages/HomePage.tsx

@@ -14,6 +14,10 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+
+import FaqSection from './HomePage/sections/Faq';{/* webild-stub @2026-06-03T15:01:45.386Z: Increase the spacing from the side of each element on the hero section like the rest of the site */}
+
 {/* webild-stub @2026-06-03T14:38:48.425Z: Fix the spacing and buttons on the first section. */}
 
 {/* webild-stub @2026-06-03T14:26:17.945Z: Make the hero section smoothly switch between 4 images, with a loading animation in between each image transition. */}
@@ -28,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
       <ClientsSection />
       <TeamSection />
       <TestimonialsSection />
+      <FaqSection />
       <ContactSection />
     </>
   );

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,47 @@
+// Created by create_section tool.
+
+import React from 'react';
+import Tag from '@/components/ui/Tag';
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="faq" className="py-24 px-6 md:px-12 lg:px-24 bg-background">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-16 flex flex-col items-center">
+          <Tag text="FAQ" className="mb-6" />
+          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6 tracking-tight">
+            Frequently Asked Questions
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Find answers to common questions about our services, process, and how we can help your business grow.
+          </p>
+        </div>
+        <div className="space-y-6">
+          {[
+            {
+              q: "What services do you offer?",
+              a: "We offer a comprehensive suite of digital marketing services including SEO, PPC advertising, social media management, content marketing, and email marketing. Our strategies are tailored to meet your specific business goals."
+            },
+            {
+              q: "How do you measure success?",
+              a: "We use a data-driven approach, tracking key performance indicators (KPIs) such as website traffic, conversion rates, cost per acquisition (CPA), and return on investment (ROI). We provide regular, transparent reports so you can see exactly how your campaigns are performing."
+            },
+            {
+              q: "Do you work with businesses in my industry?",
+              a: "We have experience working with a wide range of industries, from e-commerce and technology to healthcare and professional services. Our team takes the time to understand your unique market and audience to develop effective strategies."
+            },
+            {
+              q: "How long does it take to see results?",
+              a: "The timeline for results varies depending on the specific services and your current digital presence. While some tactics like PPC can yield immediate traffic, strategies like SEO typically take 3-6 months to show significant impact. We focus on sustainable, long-term growth."
+            }
+          ].map((faq, i) => (
+            <div key={i} className="border border-border rounded-xl p-6 bg-card">
+              <h3 className="text-xl font-semibold text-foreground mb-3">{faq.q}</h3>
+              <p className="text-muted-foreground">{faq.a}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -38,8 +38,8 @@ export default function HeroSection(): React.JSX.Element {
   }, []);
 
   return (
-    <div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-6">
-      <div className="max-w-6xl mx-auto mb-12">
+    <div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto mb-12">
         <h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8 text-center">
           Innovate Marketing
         </h1>
@@ -50,18 +50,14 @@ export default function HeroSection(): React.JSX.Element {
               Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together.
             </p>
             <div className="flex items-center justify-end gap-4">
-              <a href="#services" className="inline-flex items-center justify-center h-10 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full font-medium transition-colors">
-                Our Services
-              </a>
-              <a href="#contact" className="inline-flex items-center justify-center h-10 px-4 py-2 bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-full font-medium transition-colors">
-                Contact Us
-              </a>
+              <Button href="#services" text="Our Services" variant="primary" />
+              <Button href="#contact" text="Contact Us" variant="secondary" />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="w-full max-w-6xl mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
+      <div className="w-full container mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
         {IMAGES.map((src, index) => (
           <div
             key={src}