diff --git a/src/app/page.tsx b/src/app/page.tsx
index 89454e3..399b24f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 
 export default function LandingPage() {
   return (
@@ -215,6 +216,20 @@ export default function LandingPage() {
         />
       </div>
 
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Mobile One Detailing"
+          description="Experience the ultimate in mobile detailing services. Our expert team ensures your vehicle shines like never before."
+          background={{ variant: "gradient-bars" }}
+          buttons={[
+            { label: "Get Started", href: "#services", dataWebildId: "cta_btn_1" },
+            { label: "Learn More", href: "#about", dataWebildId: "cta_btn_2" }
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+          imageAlt="Mobile detailing service"
+        />
+      </div>
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[