diff --git a/src/app/page.tsx b/src/app/page.tsx
index 546c4c6..43337b7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 
 export default function LandingPage() {
   return (
@@ -213,6 +214,10 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll title="Explore the Latest iPhone Models" description="Discover the latest features and designs in our iPhone collection. From photography to performance, we've got you covered." background={{ variant: "downward-rays-animated" }} tag="New Arrivals" tagIcon="Calendar" buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[