Bob AI: Added an FAQ section

Merge version_10_1780499096077 into main

src/pages/HomePage.tsx

@@ -12,6 +12,16 @@ import TeamSection from './HomePage/sections/Team';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 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. */}
+
 export default function HomePage(): React.JSX.Element {
   return (
     <>
@@ -22,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
       <ClientsSection />
       <TeamSection />
       <TestimonialsSection />
+      <FaqSection />
       <ContactSection />
     </>
   );

src/pages/HomePage/sections/About.tsx

@@ -4,11 +4,38 @@
 import React from 'react';
 import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Tag from "@/components/ui/Tag";
+import Button from "@/components/ui/Button";
 
 export default function AboutSection(): React.JSX.Element {
   return (
-    <div id="about" data-section="about">
+    <div id="about" data-webild-section="about" className="py-24 bg-background">
       <SectionErrorBoundary name="about">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <Tag text="About Us" className="mb-6" />
+              <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6">
+                We are a team of passionate marketers.
+              </h2>
+              <p className="text-lg text-muted-foreground mb-8">
+                Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth.
+              </p>
+              <div className="flex gap-4">
+                <Button text="Learn More" variant="primary" />
+                <Button text="Meet the Team" variant="secondary" />
+              </div>
+            </div>
+            <div className="relative h-[500px] rounded-2xl overflow-hidden">
+              <img 
+                src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80" 
+                alt="Team working"
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="hidden">
           <AboutTestimonial
             tag="About Us"
             quote="Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth."
@@ -16,6 +43,7 @@ export default function AboutSection(): React.JSX.Element {
             role="Founder & CEO, Innovate Marketing"
             imageSrc="http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg"
           />
+        </div>
       </SectionErrorBoundary>
     </div>
   );

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

@@ -6,6 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import Button from "@/components/ui/Button";
 
 const IMAGES = [
   "http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952344.jpg",
@@ -16,53 +17,85 @@ const IMAGES = [
 
 export default function HeroSection(): React.JSX.Element {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
+  const [progress, setProgress] = useState(0);
-  const [currentImage, setCurrentImage] = useState(IMAGES[0]);
 
   useEffect(() => {
-    const interval = setInterval(() => {
+    const duration = 5000; // 5 seconds per image
-      setIsLoading(true);
+    const interval = 50; // update progress every 50ms
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % IMAGES.length);
+    const step = (interval / duration) * 100;
-    }, 5000); // Change image every 5 seconds
 
-    return () => clearInterval(interval);
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          setCurrentImageIndex((prevIndex) => (prevIndex + 1) % IMAGES.length);
+          return 0;
+        }
+        return prev + step;
+      });
+    }, interval);
+
+    return () => clearInterval(timer);
   }, []);
 
-  useEffect(() => {
-    const image = new Image();
-    image.src = IMAGES[currentImageIndex];
-    image.onload = () => {
-      setCurrentImage(IMAGES[currentImageIndex]);
-      setIsLoading(false);
-    };
-    image.onerror = () => {
-      console.error("Failed to load image:", IMAGES[currentImageIndex]);
-      setIsLoading(false);
-    };
-  }, [currentImageIndex]);
-
   return (
-    <div id="hero" data-section="hero" className="relative">
+    <div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-4 sm:px-6 lg:px-8">
-        {isLoading && (
+      <div className="container mx-auto mb-12">
-          <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
+        <h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8 text-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-foreground"></div>
+          Innovate Marketing
+        </h1>
+        
+        <div className="flex flex-col md:flex-row justify-end items-end gap-6">
+          <div className="max-w-md text-right">
+            <p className="text-base md:text-lg text-muted-foreground mb-6">
+              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">
+              <Button href="#services" text="Our Services" variant="primary" />
+              <Button href="#contact" text="Contact Us" variant="secondary" />
             </div>
-        )}
+          </div>
-        <SectionErrorBoundary name="hero">
+        </div>
-              <HeroBillboardBrand
+      </div>
-          brand="Innovate Marketing"
+
-          description="Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together."
+      <div className="w-full container mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
-          primaryButton={{
+        {IMAGES.map((src, index) => (
-            text: "Our Services",
+          <div
-            href: "#services",
+            key={src}
-          }}
+            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
-          secondaryButton={{
+              index === currentImageIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
-            text: "Contact Us",
+            }`}
-            href: "#contact",
+          >
-          }}
+            <img
-          imageSrc={currentImage}
+              src={src}
+              alt={`Slide ${index + 1}`}
+              className="w-full h-full object-cover"
             />
-        </SectionErrorBoundary>
+          </div>
+        ))}
+        
+        {/* Progress Bars Overlay */}
+        <div className="absolute bottom-6 left-0 right-0 z-20 flex justify-center gap-3 px-6">
+          {IMAGES.map((_, index) => (
+            <div 
+              key={index} 
+              className="h-1.5 w-16 sm:w-24 bg-white/30 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer"
+              onClick={() => {
+                setCurrentImageIndex(index);
+                setProgress(0);
+              }}
+            >
+              <div
+                className="h-full bg-white transition-all duration-75 ease-linear"
+                style={{
+                  width: index === currentImageIndex 
+                    ? `${progress}%` 
+                    : index < currentImageIndex ? '100%' : '0%'
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }