src/app/page.tsx

@@ -10,12 +10,14 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import { Sparkles, TrendingUp, Zap, Shield, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Twitter, Linkedin, Globe, Check } from 'lucide-react';
 
 const page = () => {
   const navItems = [
     { name: 'Home', id: '/' },
     { name: 'Services', id: '#services' },
+    { name: 'Gallery', id: '#gallery' },
     { name: 'Process', id: '#process' },
     { name: 'Testimonials', id: '#testimonials' },
     { name: 'Pricing', id: '#pricing' },
@@ -66,6 +68,33 @@ const page = () => {
     }
   ];
 
+  const galleryItems = [
+    {
+      id: '1',
+      title: 'Website Redesign',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop',
+      imageAlt: 'Website redesign showcase'
+    },
+    {
+      id: '2',
+      title: 'Brand Identity',
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+      imageAlt: 'Brand identity project'
+    },
+    {
+      id: '3',
+      title: 'Marketing Campaign',
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop',
+      imageAlt: 'Marketing campaign results'
+    },
+    {
+      id: '4',
+      title: 'Social Media Strategy',
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop',
+      imageAlt: 'Social media strategy implementation'
+    }
+  ];
+
   const testimonials = [
     {
       id: '1',
@@ -314,6 +343,18 @@ const page = () => {
         />
       </div>
 
+      <div id="gallery" data-section="gallery">
+        <HeroBillboardGallery
+          title="Our Work"
+          description="Showcase of our latest projects and creative solutions."
+          tag="Gallery"
+          tagIcon={Sparkles}
+          items={galleryItems}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="process" data-section="process">
         <TimelineHorizontalCardStack
           title="Our Process"