Update src/app/page.tsx

Merge version_16 into main

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' },
@@ -26,7 +28,7 @@ const page = () => {
       id: '01',
       title: 'Website & Branding',
       description: 'Build a stunning online presence with custom website design and cohesive branding that represents your business.',
-      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop',
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=1',
       imageAlt: 'Website and branding design'
     },
     {
@@ -40,14 +42,14 @@ const page = () => {
       id: '03',
       title: 'Advertising Services',
       description: 'Targeted advertising campaigns that reach your audience and drive measurable results across multiple channels.',
-      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop',
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop&_wi=1',
       imageAlt: 'Advertising services dashboard'
     },
     {
       id: '04',
       title: 'Social Media Management',
       description: 'Engage your audience with compelling content, community management, and strategic social media presence.',
-      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop',
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop&_wi=1',
       imageAlt: 'Social media management tools'
     },
     {
@@ -66,6 +68,25 @@ const page = () => {
     }
   ];
 
+  const galleryItems = [
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Website redesign showcase'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop',
+      imageAlt: 'Brand identity project'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Marketing campaign results'
+    },
+    {
+      imageSrc: 'https://images.unsplash.com/photo-1611532736540-6dabab387e13?w=800&h=600&fit=crop&_wi=2',
+      imageAlt: 'Social media strategy implementation'
+    }
+  ];
+
   const testimonials = [
     {
       id: '1',
@@ -314,6 +335,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}
+          mediaItems={galleryItems}
+          background={{ variant: 'plain' }}
+          mediaAnimation="none"
+        />
+      </div>
+
       <div id="process" data-section="process">
         <TimelineHorizontalCardStack
           title="Our Process"