Update src/app/gallery/page.tsx

Merge version_34 into main

src/app/gallery/page.tsx

@@ -4,19 +4,25 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 export default function GalleryPage() {
-  const [galleryItems, setGalleryItems] = useState([
+  const [galleryItems] = useState([
-    { title: "Secure Loading", description: "High-tech container loading processes", imageSrc: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=800&_wi=1" },
+    { id: "1", title: "Secure Loading", content: "High-tech container loading processes" },
-    { title: "Vehicle Transit", description: "Specialized vehicle securement techniques", imageSrc: "https://images.unsplash.com/photo-1553440150-13753a7b6832?q=80&w=800&_wi=1" },
+    { id: "2", title: "Vehicle Transit", content: "Specialized vehicle securement techniques" },
-    { title: "Industrial Handling", description: "Expert industrial gear management", imageSrc: "https://images.unsplash.com/photo-1621905251189-08b45d6a268e?q=80&w=800&_wi=1" },
+    { id: "3", title: "Industrial Handling", content: "Expert industrial gear management" },
-    { title: "Bulk Logistics", description: "Streamlined commercial bulk transit", imageSrc: "https://images.unsplash.com/photo-1566585775320-f62266858276?q=80&w=800&_wi=1" },
+    { id: "4", title: "Bulk Logistics", content: "Streamlined commercial bulk transit" },
-    { title: "Dubai Hub", description: "Centralized receiving operations", imageSrc: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=800&_wi=1" },
+    { id: "5", title: "Dubai Hub", content: "Centralized receiving operations" },
-    { title: "Precision Sorting", description: "Careful inventory management", imageSrc: "https://images.unsplash.com/photo-1581092160607-ee22621dd758?q=80&w=800&_wi=1" },
+    { id: "6", title: "Precision Sorting", content: "Careful inventory management" },
-    { title: "Ghana Warehouse", description: "Secure facility arrival process", imageSrc: "https://images.unsplash.com/photo-1587293852726-70b35612f843?q=80&w=800&_wi=1" },
+    { id: "7", title: "Ghana Warehouse", content: "Secure facility arrival process" },
-    { title: "Global Tracking", description: "Constant logistics surveillance", imageSrc: "https://images.unsplash.com/photo-1578575437130-527eed3abbec?q=80&w=800&_wi=1" }
+    { id: "8", title: "Global Tracking", content: "Constant logistics surveillance" },
+    { id: "9", title: "Automotive Strapping", content: "Detailed vehicle securement" },
+    { id: "10", title: "Heavy Gear Tie-down", content: "Heavy industrial machinery protocols" },
+    { id: "11", title: "Temperature Control", content: "Climate controlled shipping units" },
+    { id: "12", title: "Customs Processing", content: "Rapid port clearance documentation" },
+    { id: "13", title: "Inventory Scanning", content: "Barcode-based intake tracking" },
+    { id: "14", title: "Load Optimization", content: "Maximized container volumetric efficiency" }
   ]);
 
   const navItems = [
@@ -50,12 +56,14 @@ export default function GalleryPage() {
         </div>
 
         <div id="gallery" data-section="gallery" className="py-24">
-            <FeatureCardSix
+            <FeatureCardTwentyOne
               title="Our Logistics Gallery"
-              description="A look at our professional cargo handling and storage services."
+              description="A detailed look at each stage of our professional cargo handling process, presented individually for maximum visual impact."
-              textboxLayout="split"
+              accordionItems={galleryItems}
+              videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dyzp7sGs874KHVqcZpKRlG0BRH/uploaded-1779531628605-p8zpmh2n.mp4"
+              mediaAnimation="blur-reveal"
               useInvertedBackground={false}
-              features={galleryItems}
+              containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
             />
         </div>
 
@@ -72,4 +80,4 @@ export default function GalleryPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}