Bob AI: Update hero section spacing to match the rest of the site

Merge version_9_1780498852595 into main

src/pages/HomePage.tsx

@@ -14,6 +14,9 @@ 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. */}

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",
@@ -37,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>
@@ -49,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}