Update src/app/page.tsx

Merge version_37 into main

src/app/gallery/page.tsx

@@ -4,35 +4,27 @@ 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 { useState, useEffect } from 'react';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import { useState } from 'react';
 
 export default function GalleryPage() {
-  const [galleryItems, setGalleryItems] = useState([
-    { title: "Heavy Duty Loading", description: "Secure Logistics", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-foundation-containers-arrangement_23-2149705544.jpg?_wi=2" },
-    { title: "Vehicle Securement", description: "Verified Standards", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dyzp7sGs874KHVqcZpKRlG0BRH/uploaded-1779315072666-rnat9as3.jpg?_wi=2" },
-    { title: "Industrial Machinery", description: "Handled Safely", imageSrc: "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg?_wi=2" },
-    { title: "Bulk Inventory", description: "Real-time Tracking", imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662913.jpg" }
+  const [galleryItems] = useState([
+    { id: "1", title: "Secure Loading", content: "High-tech container loading processes" },
+    { id: "2", title: "Vehicle Transit", content: "Specialized vehicle securement techniques" },
+    { id: "3", title: "Industrial Handling", content: "Expert industrial gear management" },
+    { id: "4", title: "Bulk Logistics", content: "Streamlined commercial bulk transit" },
+    { id: "5", title: "Dubai Hub", content: "Centralized receiving operations" },
+    { id: "6", title: "Precision Sorting", content: "Careful inventory management" },
+    { id: "7", title: "Ghana Warehouse", content: "Secure facility arrival process" },
+    { 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" }
   ]);
 
-  useEffect(() => {
-    const saved = localStorage.getItem('sir-james-gallery-items');
-    if (saved) {
-      try {
-        setGalleryItems(JSON.parse(saved));
-      } catch (e) {
-        console.error("Error loading gallery items", e);
-      }
-    }
-  }, []);
-
-  const handleFileUpload = (index: number, newImageUrl: string) => {
-    const updatedItems = [...galleryItems];
-    updatedItems[index].imageSrc = newImageUrl;
-    setGalleryItems(updatedItems);
-    localStorage.setItem('sir-james-gallery-items', JSON.stringify(updatedItems));
-  };
-
   const navItems = [
     { name: "Services", id: "/services" },
     { name: "How It Works", id: "/how-it-works" },
@@ -64,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 services."
-              textboxLayout="split"
+              description="A detailed look at each stage of our professional cargo handling process, presented individually for maximum visual impact."
+              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>
 

src/app/page.tsx

@@ -8,15 +8,17 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import { useState } from 'react';
 
 export default function LandingPage() {
   const [galleryItems] = useState([
-    { title: "Heavy Duty Loading", description: "Securing goods for transit", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-foundation-containers-arrangement_23-2149705544.jpg?_wi=2" },
-    { title: "Vehicle Securement", description: "Professional loading standards", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dyzp7sGs874KHVqcZpKRlG0BRH/uploaded-1779315072666-rnat9as3.jpg?_wi=2" },
-    { title: "Industrial Machinery", description: "Handled with precision", imageSrc: "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg?_wi=2" },
-    { title: "Bulk Inventory", description: "Tracking every step", imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662913.jpg?_wi=1" }
+    { id: "1", title: "Secure Loading", description: "High-tech container loading processes", tag: "Loading", imageSrc: "https://images.unsplash.com/photo-1594993875739-1661d92f22ad?q=80&w=800&_wi=2" },
+    { id: "2", title: "Vehicle Transit", description: "Specialized vehicle securement techniques", tag: "Transit", imageSrc: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=800&_wi=2" },
+    { id: "3", title: "Industrial Handling", description: "Expert industrial gear management", tag: "Handling", imageSrc: "https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?q=80&w=800&_wi=2" },
+    { id: "4", title: "Bulk Logistics", description: "Streamlined commercial bulk transit", tag: "Logistics", imageSrc: "https://images.unsplash.com/photo-1578575437130-527eed3abbec?q=80&w=800&_wi=2" },
+    { id: "5", title: "Dubai Hub", description: "Centralized receiving operations", tag: "Facility", imageSrc: "https://images.unsplash.com/photo-1587293852726-70b35612f843?q=80&w=800&_wi=2" },
+    { id: "6", title: "Precision Sorting", description: "Careful inventory management", tag: "Operations", imageSrc: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=800&_wi=2" }
   ]);
 
   const navItems = [
@@ -54,34 +56,13 @@ export default function LandingPage() {
             background={{ variant: "gradient-bars" }}
             title="From Dubai to Ghana: Your Cargo, Delivered Safely and Fast."
             description="Whether it’s luxury watches, vehicles, or heavy industrial gym machinery, Sir James Delivery Company safely transports your goods from the heart of Dubai straight to our secure warehouse in Ghana. No delays. No hidden fees."
-      testimonials={[
-        { name: "Kwame O.", handle: "", testimonial: "Excellent service. My heavy equipment arrived in perfect condition.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662913.jpg?_wi=2" },
-        { name: "Amina B.", handle: "", testimonial: "The best shipping partner for my perfume wholesale business.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662916.jpg" },
-        { name: "John S.", handle: "", testimonial: "Vehicle transport from Dubai was seamless and fast.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662944.jpg" },
-        { name: "Sarah L.", handle: "", testimonial: "Great handling of industrial gym machines. Very professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-empty-perfume-bottle_23-2149234340.jpg" },
-        { name: "Michael D.", handle: "", testimonial: "Customs clearance was handled perfectly every time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/single-glass-bottle-filled-with-clear-liquid-generated-by-ai_188544-19684.jpg" },
-      ]}
+            testimonials={[]}
             tag="Daily Shipments • Fully Insured • 100% Customs Cleared"
             buttons={[
               { text: "Read Transit Guarantee", href: "/the-sir-james-transit-guarantee" },
               { text: "Contact", href: "/contact" },
             ]}
             imageSrc="http://img.b2bpic.net/free-photo/technological-futuristic-holograms-logistics-means-transport_23-2151663056.jpg"
-      imageAlt="Global cargo shipping container ship ocean"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/beautiful-black-white-minimal-design_23-2149253105.jpg", alt: "Avatar 1" },
-        { src: "http://img.b2bpic.net/free-photo/top-view-men-cologne-box-flowers-beige_140725-145205.jpg", alt: "Avatar 2" },
-        { src: "http://img.b2bpic.net/free-photo/middle-aged-trucker-front-truck-trailer-with-cars_342744-1283.jpg", alt: "Avatar 3" },
-        { src: "http://img.b2bpic.net/free-photo/truck-electric-car-highway-symbol-transport-evolution_169016-70036.jpg", alt: "Avatar 4" },
-        { src: "http://img.b2bpic.net/free-photo/portrait-professional-smiling-truck-driver-with-crossed-arms-transporting-cars-market_342744-1333.jpg", alt: "Avatar 5" },
-      ]}
-      marqueeItems={[
-        { type: "text", text: "Dubai" },
-        { type: "text", text: "Accra" },
-        { type: "text", text: "Insurance" },
-        { type: "text", text: "Customs" },
-        { type: "text", text: "Logistics" },
-      ]}
           />
         </div>
 
@@ -96,8 +77,8 @@ export default function LandingPage() {
               { value: "3", title: "Ghana Arrival" }
             ]}
             mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
             imageSrc="http://img.b2bpic.net/free-photo/aerial-view-bridge-creek-powerlines-with-cars-road_181624-24539.jpg?_wi=1"
-      imageAlt="Streamlined shipping process overview"
           />
         </div>
 
@@ -106,12 +87,7 @@ export default function LandingPage() {
             animationType="slide-up"
             textboxLayout="split"
             useInvertedBackground={false}
-      features={[
-        { id: "luxury", title: "Luxury & Essentials", author: "Fragile items", description: "Luxury goods are packed in reinforced, climate-controlled security crates.", tags: ["Watch", "Perfume"], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-foundation-containers-arrangement_23-2149705544.jpg?_wi=2" },
-        { id: "auto", title: "Automotive Shipping", author: "Vehicle safety", description: "Vehicles are shipped via specialized container loading with strapping.", tags: ["SUV", "Sedan"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dyzp7sGs874KHVqcZpKRlG0BRH/uploaded-1779315072666-rnat9as3.jpg" },
-        { id: "heavy", title: "Heavy Machinery", author: "Industrial gear", description: "Heavy machinery is handled with industrial forklifts and steel ties.", tags: ["Gym Gear", "Tools"], imageSrc: "http://img.b2bpic.net/free-photo/forklift-operator-loading-cargo-while-working-warehouse-his-colleagues-are-background_637285-4210.jpg?_wi=2" },
-        { id: "general", title: "General Cargo", author: "Commercial bulk", description: "Commercial stock utilizes streamlined bulk palletizing options.", tags: ["Wholesale", "Stock"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dyzp7sGs874KHVqcZpKRlG0BRH/tmp/hyper-realistic-picture-of-a-cargo-conta-1779315244636-c2b3304a.png" },
-      ]}
+            features={[]}
             title="We Ship the Spectrum."
             description="Large or Small, We Handle It All. Click for details."
           />
@@ -121,26 +97,23 @@ export default function LandingPage() {
           <FaqSplitMedia
             textboxLayout="split"
             useInvertedBackground={false}
-      faqs={[
-        { id: "1", title: "Guaranteed Safety", content: "From delicate perfumes to multi-ton gym equipment, we treat every piece of cargo with absolute care." },
-        { id: "2", title: "Zero Customs Stress", content: "Our team manages the complex clearing paperwork in-house for regulatory ease." },
-        { id: "3", title: "Direct Destination", content: "Cargo goes directly to our private warehouse facility in Ghana, reducing extra handling." },
-      ]}
+            faqs={[]}
             title="Operational Standards"
             description="Why choose Sir James Delivery?"
             faqsAnimation="slide-up"
             imageSrc="http://img.b2bpic.net/free-photo/man-driving-warehouse-loading-machine_23-2148923134.jpg"
-      imageAlt="Man driving warehouse loading machine"
           />
         </div>
 
         <div id="gallery" data-section="gallery" className="py-20">
-      <FeatureCardSix
+          <FeatureCardMedia
             title="Professional Cargo Logistics"
             description="A free-flowing, spacious view of our premium packing and logistics standards."
-        textboxLayout="split"
+            textboxLayout="default"
             useInvertedBackground={false}
             features={galleryItems}
+            animationType="blur-reveal"
+            gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"
             containerClassName="max-w-7xl mx-auto px-8"
           />
         </div>
@@ -148,8 +121,8 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterSimple
             columns={[
-        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Services", href: "/services" }] },
-        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "/terms" }] },
+              { title: "Services", items: [{ label: "Shipping", href: "/services" }, { label: "Gallery", href: "/gallery" }] },
+              { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "Guarantee", href: "/the-sir-james-transit-guarantee" }] }
             ]}
             bottomLeftText="© 2026 Sir James Delivery Company."
             bottomRightText="Safe. Swift. Secure."