Bob AI (stub): Increase the spacing from the side of each element on the he

Merge version_8_1780498632449 into main

src/pages/HomePage.tsx

@@ -13,6 +13,12 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import ContactSection from './HomePage/sections/Contact';
 
 
+
+
+{/* 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 {

src/pages/HomePage/sections/About.tsx

@@ -4,19 +4,47 @@
 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">
+      <SectionErrorBoundary name="about">
-              <AboutTestimonial
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          tag="About Us"
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          quote="Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth."
+            <div>
-          author="Jane Doe"
+              <Tag text="About Us" className="mb-6" />
-          role="Founder & CEO, Innovate Marketing"
+              <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6">
-          imageSrc="http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg"
+                We are a team of passionate marketers.
-        />
+              </h2>
-        </SectionErrorBoundary>
+              <p className="text-lg text-muted-foreground mb-8">
-      </div>
+                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."
+            author="Jane Doe"
+            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/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",
@@ -49,12 +50,8 @@ 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">
+              <Button href="#services" text="Our Services" variant="primary" />
-                Our Services
+              <Button href="#contact" text="Contact Us" variant="secondary" />
-              </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>
             </div>
           </div>
         </div>