Update src/app/page.tsx

Merge version_2 into main

src/app/blog/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import ReactLenis from "lenis/react";
-import BlogCardOne from "@/components/sections/blog/BlogCardOne";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
@@ -45,20 +45,19 @@ export default function BlogPage() {
                     </div>
                 ) : (
                     <div id="blog" data-section="blog">
-                        <BlogCardOne
+                        <BlogCardThree
                             blogs={posts}
                             title="Latest Articles"
                             description="Discover insights, tips, and stories from the world of video production"
                             textboxLayout="default"
                             useInvertedBackground={false}
-                            carouselMode="buttons"
                             animationType="slide-up"
                         />
                     </div>
                 )}
 
                 <div id="footer" data-section="footer">
-                    <FooterSimple
+                    <FooterBaseCard
                         columns={[
                             {
                                 title: "Navigate",                                items: [
@@ -72,28 +71,19 @@ export default function BlogPage() {
                                 title: "Resources",                                items: [
                                     { label: "FAQ", href: "#faq" },
                                     { label: "Blog", href: "#" },
-                                    { label: "Case Studies", href: "#" },
+                                    { label: "Case Studies", href: "#" }
-                                    { label: "Portfolio", href: "#portfolio" }
                                 ]
                             },
                             {
                                 title: "Connect",                                items: [
                                     { label: "Contact Us", href: "#contact" },
                                     { label: "Instagram", href: "https://instagram.com" },
-                                    { label: "YouTube", href: "https://youtube.com" },
+                                    { label: "YouTube", href: "https://youtube.com" }
-                                    { label: "LinkedIn", href: "https://linkedin.com" }
-                                ]
-                            },
-                            {
-                                title: "Legal",                                items: [
-                                    { label: "Privacy Policy", href: "#" },
-                                    { label: "Terms of Service", href: "#" },
-                                    { label: "Cookie Policy", href: "#" }
                                 ]
                             }
                         ]}
-                        bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                        logoText="Move and Movie"
-                        bottomRightText="Crafted with passion and precision"
+                        copyrightText="© 2025 Move and Movie. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/page.tsx

@@ -1,17 +1,17 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Clapperboard, Sparkles, Film, Zap, Star, TrendingUp, HelpCircle, Mail } from "lucide-react";
+import { Clapperboard, Sparkles, Film, Zap, Star, TrendingUp, HelpCircle, Mail, ArrowRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -42,195 +42,167 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered
+        <HeroOverlay
           title="Move and Movie"
-          description="Creating cinematic stories that captivate audiences. Expert video production for brands that dare to stand out."
+          description="Professional Video Production & Cinematic Storytelling"
-          background={{ variant: "downward-rays-static" }}
+          imageSrc="https://img.b2bpic.net/free-photo/young-filmmaker-working-media-post-production-from-agency-office_482257-119708.jpg"
-          avatars={[
+          imageAlt="Professional video production setup"
-            { src: "https://img.b2bpic.net/free-photo/african-american-freelancer-editing-background-video-his-home-office_482257-116610.jpg", alt: "Video creator at work" }
-          ]}
-          avatarText="Trusted by 50+ brands worldwide"
           buttons={[
             { text: "View Portfolio", href: "portfolio" },
-            { text: "Let's Collaborate", href: "contact" }
+            { text: "Get Started", href: "contact" }
           ]}
           buttonAnimation="slide-up"
-          ariaLabel="Move and Movie hero section"
         />
       </div>
 
       <div id="about" data-section="about">
-        <TestimonialAboutCard
+        <MediaAbout
+          title="Elevate Your Brand Story"
+          description="We transform ideas into visual masterpieces that tell your brand's story with cinematic precision and creative excellence."
           tag="Who We Are"
           tagIcon={Clapperboard}
-          title="We transform ideas into visual masterpieces that tell your brand's story."
-          description="Founded in 2020"
-          subdescription="Move and Movie Studios"
-          icon={Sparkles}
           imageSrc="https://img.b2bpic.net/free-photo/young-filmmaker-working-media-post-production-from-agency-office_482257-119708.jpg"
           imageAlt="Professional video production setup"
-          mediaAnimation="blur-reveal"
+          buttons={[
+            { text: "Learn More", href: "about" }
+          ]}
           useInvertedBackground={false}
         />
       </div>
 
       <div id="portfolio" data-section="portfolio">
-        <ProductCardFour
+        <ProductCardTwo
-          title="Featured Work"
-          description="Explore our latest video productions and cinematic projects that showcase our creative vision."
-          tag="Portfolio"
-          tagIcon={Film}
-          tagAnimation="slide-up"
-          textboxLayout="default"
           products={[
             {
-              id: "1",              name: "Brand Story: Tech Startup Launch",              price: "Commercials",              variant: "60-second promotional film",              imageSrc: "https://img.b2bpic.net/free-photo/professional-agency-setup-cinematic-footage-creation-video-editing_482257-118951.jpg",              imageAlt: "Tech startup brand story video"
+              id: "1",              brand: "Commercial",              name: "Tech Startup Brand Story",              price: "Featured",              rating: 5,
+              reviewCount: "4.8k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770649940673-afnn25uf.mp4",              imageAlt: "Tech startup brand story video"
             },
             {
-              id: "2",              name: "Social Media Campaign Series",              price: "Content",              variant: "15-second short-form videos",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-videographer-works-editing-film-footage-home_482257-120281.jpg",              imageAlt: "Social media video content"
+              id: "2",              brand: "Content",              name: "Social Media Campaign",              price: "Series",              rating: 5,
+              reviewCount: "3.2k",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-videographer-works-editing-film-footage-home_482257-120281.jpg",              imageAlt: "Social media video content"
             },
             {
-              id: "3",              name: "Corporate Training Video",              price: "Educational",              variant: "5-minute instructional content",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg",              imageAlt: "Corporate training video production"
+              id: "3",              brand: "Educational",              name: "Corporate Training Video",              price: "Premium",              rating: 5,
+              reviewCount: "2.1k",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg",              imageAlt: "Corporate training video production"
             }
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
+          title="Featured Work"
+          description="Explore our latest video productions and cinematic projects that showcase our creative vision."
+          textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[
-            { text: "See All Work", href: "contact" }
-          ]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="services" data-section="services">
-        <FeatureCardSixteen
+        <FeatureCardTwentySix
+          features={[
+            {
+              title: "Commercial Production",              description: "High-impact brand commercials that drive results",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770649940673-afnn25uf.mp4",              imageAlt: "Commercial video production",              buttonIcon: ArrowRight,
+              buttonHref: "contact"
+            },
+            {
+              title: "Social Media Content",              description: "Engaging short-form content for all platforms",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-videographer-works-editing-film-footage-home_482257-120281.jpg",              imageAlt: "Social media content creation",              buttonIcon: ArrowRight,
+              buttonHref: "contact"
+            },
+            {
+              title: "Brand Storytelling",              description: "Cinematic narratives that connect with audiences",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg",              imageAlt: "Brand storytelling video",              buttonIcon: ArrowRight,
+              buttonHref: "contact"
+            },
+            {
+              title: "Event Coverage",              description: "Professional event documentation and highlights",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-freelancer-editing-background-video-his-home-office_482257-116610.jpg",              imageAlt: "Event video coverage",              buttonIcon: ArrowRight,
+              buttonHref: "contact"
+            }
+          ]}
           title="Professional Video Services"
-          description="From concept to final cut, we deliver comprehensive video production solutions tailored to your brand."
+          description="From concept to final cut, we deliver comprehensive video production solutions."
           tag="Services"
           tagIcon={Zap}
           textboxLayout="default"
-          negativeCard={{
-            items: [
-              "Generic stock footage",              "Inconsistent quality",              "Missed deadlines",              "Poor communication"
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "Custom-shot cinematic content",              "Award-winning quality standards",              "On-time, every time",              "Dedicated creative team"
-            ]
-          }}
-          animationType="slide-up"
           useInvertedBackground={false}
-          buttons={[
-            { text: "Schedule Consultation", href: "contact" }
-          ]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
+        <TestimonialCardTen
-          title="Client Testimonials"
-          description="Hear from brands and entrepreneurs who've transformed their presence with our video production."
-          tag="Reviews"
-          tagIcon={Star}
-          tagAnimation="slide-up"
-          textboxLayout="default"
           testimonials={[
             {
-              id: "1",              name: "Sarah Mitchell",              role: "CEO",              testimonial: "Move and Movie completely elevated our brand presence. Their cinematic approach turned our product launch into a viral success story.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Sarah Mitchell, CEO of TechFlow"
+              id: "1",              title: "Game-changing video production",              quote: "Move and Movie completely elevated our brand presence. Their cinematic approach turned our product launch into a viral success story.",              name: "Sarah Mitchell",              role: "CEO of TechFlow",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Sarah Mitchell, CEO of TechFlow"
             },
             {
-              id: "2",              name: "Michael Chen",              role: "Marketing Director",              testimonial: "The team's creativity and professionalism exceeded all expectations. Our video content increased engagement by 300%.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Michael Chen, Marketing Director of GrowthCo"
+              id: "2",              title: "Exceeded all expectations",              quote: "The team's creativity and professionalism exceeded all expectations. Our video content increased engagement by 300%.",              name: "Michael Chen",              role: "Marketing Director at GrowthCo",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Michael Chen, Marketing Director of GrowthCo"
-            },
-            {
-              id: "3",              name: "Emma Rodriguez",              role: "Founder",              testimonial: "Working with Move and Movie was a game-changer for our business. They understood our vision and delivered beyond our expectations.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Emma Rodriguez, Founder of Creative Studio Co"
-            },
-            {
-              id: "4",              name: "David Kim",              role: "Brand Manager",              testimonial: "Exceptional quality, exceptional service. They made the entire production process smooth and enjoyable. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "David Kim, Brand Manager of StartupXYZ"
             }
           ]}
-          carouselMode="buttons"
+          title="Client Testimonials"
-          animationType="slide-up"
+          description="Hear from brands and entrepreneurs who've transformed their presence with our video production."
+          textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardTwo
+        <MetricCardThree
-          title="Our Impact"
-          description="Numbers that speak to our commitment to excellence and creative innovation."
-          tag="Stats"
-          tagIcon={TrendingUp}
-          textboxLayout="default"
           metrics={[
             {
-              id: "1",              value: "50+",              description: "Brands Transformed"
+              id: "1",              icon: TrendingUp,
+              title: "Brands Served",              value: "50+"
             },
             {
-              id: "2",              value: "200+",              description: "Videos Produced"
+              id: "2",              icon: Film,
+              title: "Videos Produced",              value: "200+"
             },
             {
-              id: "3",              value: "10M+",              description: "Views Generated"
+              id: "3",              icon: Star,
-            },
+              title: "Views Generated",              value: "10M+"
-            {
-              id: "4",              value: "98%",              description: "Client Satisfaction"
             }
           ]}
-          gridVariant="uniform-all-items-equal"
+          title="Our Impact"
+          description="Numbers that speak to our commitment to excellence and creative innovation."
+          textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqBase
+        <FaqSplitMedia
-          title="Frequently Asked Questions"
-          description="Everything you need to know about working with Move and Movie."
-          tag="Help"
-          tagIcon={HelpCircle}
-          textboxLayout="default"
           faqs={[
             {
-              id: "1",              title: "How long does a typical video production take?",              content: "Project timelines vary based on scope and complexity. Most projects take 2-6 weeks from concept to final delivery. We'll provide a detailed timeline during our initial consultation."
+              id: "1",              title: "How long does a typical video production take?",              content: "Project timelines vary based on scope and complexity. Most projects take 2-6 weeks from concept to final delivery."
             },
             {
-              id: "2",              title: "What types of videos do you produce?",              content: "We specialize in commercials, brand stories, social media content, corporate training videos, product demos, and cinematic storytelling. If you can imagine it, we can create it."
+              id: "2",              title: "What types of videos do you produce?",              content: "We specialize in commercials, brand stories, social media content, corporate training videos, and product demos."
             },
             {
-              id: "3",              title: "What is your production process?",              content: "Our process includes: discovery and planning, creative concept development, pre-production planning, shooting, editing and post-production, and final delivery. You're involved at every stage."
+              id: "3",              title: "Do you handle post-production and editing?",              content: "Yes, we handle the complete production pipeline including color grading, sound design, and motion graphics."
-            },
-            {
-              id: "4",              title: "Do you handle post-production and editing?",              content: "Yes, we handle the complete production pipeline. From color grading to sound design to motion graphics, we deliver fully finished, broadcast-quality videos."
-            },
-            {
-              id: "5",              title: "Can you work with my existing footage?",              content: "Absolutely. We offer editing, color correction, and post-production services for existing footage. We can transform raw materials into polished, professional videos."
             }
           ]}
+          imageSrc="https://img.b2bpic.net/free-photo/young-filmmaker-working-media-post-production-from-agency-office_482257-119708.jpg"
+          imageAlt="Video production workspace"
+          mediaAnimation="slide-up"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about working with Move and Movie."
+          textboxLayout="default"
           faqsAnimation="slide-up"
-          animationType="smooth"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCTA
+        <ContactCenter
           tag="Ready to Create?"
           tagIcon={Mail}
           title="Let's Bring Your Vision to Life"
-          description="Whether you're launching a brand, promoting a product, or telling a story, we're here to make it unforgettable. Reach out today for a free consultation."
+          description="Whether you're launching a brand, promoting a product, or telling a story, we're here to make it unforgettable."
-          buttons={[
-            { text: "Start Your Project", href: "mailto:hello@moveandmovie.com" },
-            { text: "Book a Call", href: "#" }
-          ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
+          onSubmit={(email) => console.log("Email submitted:", email)}
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterSimple
+        <FooterBaseCard
           columns={[
             {
               title: "Navigate",              items: [
@@ -244,28 +216,19 @@ export default function LandingPage() {
               title: "Resources",              items: [
                 { label: "FAQ", href: "#faq" },
                 { label: "Blog", href: "#" },
-                { label: "Case Studies", href: "#" },
+                { label: "Case Studies", href: "#" }
-                { label: "Portfolio", href: "#portfolio" }
               ]
             },
             {
               title: "Connect",              items: [
                 { label: "Contact Us", href: "#contact" },
                 { label: "Instagram", href: "https://instagram.com" },
-                { label: "YouTube", href: "https://youtube.com" },
+                { label: "YouTube", href: "https://youtube.com" }
-                { label: "LinkedIn", href: "https://linkedin.com" }
-              ]
-            },
-            {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" }
               ]
             }
           ]}
-          bottomLeftText="© 2025 Move and Movie. All rights reserved."
+          logoText="Move and Movie"
-          bottomRightText="Crafted with passion and precision"
+          copyrightText="© 2025 Move and Movie. All rights reserved."
         />
       </div>
     </ThemeProvider>

src/app/shop/[id]/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
@@ -82,34 +82,33 @@ export default function ProductPage({ params }: ProductPageProps) {
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                    <NavbarStyleCentered
+                        <NavbarStyleCentered
-                        brandName="Move and Movie"
+                            brandName="Move and Movie"
-                        navItems={[
+                            navItems={[
-                            {"name":"Home","id":"/"},
+                                {"name":"Home","id":"/"},
-                            {"name":"Portfolio","id":"portfolio"},
+                                {"name":"Portfolio","id":"portfolio"},
-                            {"name":"Services","id":"services"},
+                                {"name":"Services","id":"services"},
-                            {"name":"About","id":"about"},
+                                {"name":"About","id":"about"},
-                            {"name":"Testimonials","id":"testimonials"},
+                                {"name":"Testimonials","id":"testimonials"},
-                            {"name":"Contact","id":"contact"},
+                                {"name":"Contact","id":"contact"},
-                            {"name":"Shop","id":"/shop"}
+                                {"name":"Shop","id":"/shop"}
-                        ]}
+                            ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                    />
+                        />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading product...</p>
                     </main>
                     <div id="footer" data-section="footer">
-                    <FooterSimple
+                        <FooterBaseCard
-                        columns={[
+                            columns={[
-                            {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
+                                {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
-                            {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
+                                {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
-                            {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]},
+                                {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]}
-                            {"title":"Legal","items":[{"label":"Privacy Policy","href":"#"},{"label":"Terms of Service","href":"#"},{"label":"Cookie Policy","href":"#"}]}
+                            ]}
-                        ]}
+                            logoText="Move and Movie"
-                        bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                            copyrightText="© 2025 Move and Movie. All rights reserved."
-                        bottomRightText="Crafted with passion and precision"
+                        />
-                    />
                     </div>
                 </ReactLenis>
             </ThemeProvider>
@@ -158,16 +157,15 @@ export default function ProductPage({ params }: ProductPageProps) {
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                    <FooterSimple
+                        <FooterBaseCard
-                        columns={[
+                            columns={[
-                            {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
+                                {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
-                            {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
+                                {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
-                            {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]},
+                                {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]}
-                            {"title":"Legal","items":[{"label":"Privacy Policy","href":"#"},{"label":"Terms of Service","href":"#"},{"label":"Cookie Policy","href":"#"}]}
+                            ]}
-                        ]}
+                            logoText="Move and Movie"
-                        bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                            copyrightText="© 2025 Move and Movie. All rights reserved."
-                        bottomRightText="Crafted with passion and precision"
+                        />
-                    />
                     </div>
                 </ReactLenis>
             </ThemeProvider>
@@ -189,67 +187,66 @@ export default function ProductPage({ params }: ProductPageProps) {
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                <NavbarStyleCentered
+                    <NavbarStyleCentered
-                    brandName="Move and Movie"
+                        brandName="Move and Movie"
-                    navItems={[
+                        navItems={[
-                        {"name":"Home","id":"/"},
+                            {"name":"Home","id":"/"},
-                        {"name":"Portfolio","id":"portfolio"},
+                            {"name":"Portfolio","id":"portfolio"},
-                        {"name":"Services","id":"services"},
+                            {"name":"Services","id":"services"},
-                        {"name":"About","id":"about"},
+                            {"name":"About","id":"about"},
-                        {"name":"Testimonials","id":"testimonials"},
+                            {"name":"Testimonials","id":"testimonials"},
-                        {"name":"Contact","id":"contact"},
+                            {"name":"Contact","id":"contact"},
-                        {"name":"Shop","id":"/shop"}
+                            {"name":"Shop","id":"/shop"}
-                    ]}
+                        ]}
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                />
+                    />
                 </div>
                 <div id="productDetailCard" data-section="productDetailCard">
-                <ProductDetailCard
+                    <ProductDetailCard
-                    layout="page"
+                        layout="page"
-                    name={product.name}
+                        name={product.name}
-                    price={product.price}
+                        price={product.price}
-                    salePrice={meta.salePrice}
+                        salePrice={meta.salePrice}
-                    rating={product.rating || 0}
+                        rating={product.rating || 0}
-                    description={product.description}
+                        description={product.description}
-                    images={images}
+                        images={images}
-                    variants={variants.length > 0 ? variants : undefined}
+                        variants={variants.length > 0 ? variants : undefined}
-                    quantity={quantityVariant}
+                        quantity={quantityVariant}
-                    ribbon={meta.ribbon}
+                        ribbon={meta.ribbon}
-                    inventoryStatus={meta.inventoryStatus}
+                        inventoryStatus={meta.inventoryStatus}
-                    inventoryQuantity={meta.inventoryQuantity}
+                        inventoryQuantity={meta.inventoryQuantity}
-                    sku={meta.sku}
+                        sku={meta.sku}
-                    buttons={[
+                        buttons={[
-                        { text: "Add To Cart", onClick: handleAddToCart },
+                            { text: "Add To Cart", onClick: handleAddToCart },
-                        { text: "Buy Now", onClick: handleBuyNow },
+                            { text: "Buy Now", onClick: handleBuyNow },
-                    ]}
+                        ]}
-                />
+                    />
                 </div>
                 <div id="productCart" data-section="productCart">
-                <ProductCart
+                    <ProductCart
-                    isOpen={cartOpen}
+                        isOpen={cartOpen}
-                    onClose={() => setCartOpen(false)}
+                        onClose={() => setCartOpen(false)}
-                    items={cartItems}
+                        items={cartItems}
-                    onQuantityChange={updateQuantity}
+                        onQuantityChange={updateQuantity}
-                    onRemove={removeItem}
+                        onRemove={removeItem}
-                    total={`$${cartTotal}`}
+                        total={`$${cartTotal}`}
-                    buttons={[
+                        buttons={[
-                        {
+                            {
-                            text: isCheckoutLoading ? "Processing..." : "Check Out",                            onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
-                        },
+                            },
-                    ]}
+                        ]}
-                />
+                    />
                 </div>
                 <div id="footer" data-section="footer">
-                <FooterSimple
+                    <FooterBaseCard
-                    columns={[
+                        columns={[
-                        {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
+                            {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
-                        {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
+                            {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
-                        {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]},
+                            {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]}
-                        {"title":"Legal","items":[{"label":"Privacy Policy","href":"#"},{"label":"Terms of Service","href":"#"},{"label":"Cookie Policy","href":"#"}]}
+                        ]}
-                    ]}
+                        logoText="Move and Movie"
-                    bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                        copyrightText="© 2025 Move and Movie. All rights reserved."
-                    bottomRightText="Crafted with passion and precision"
+                    />
-                />
                 </div>
             </ReactLenis>
         </ThemeProvider>

src/app/shop/page.tsx

@@ -3,7 +3,7 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
@@ -32,34 +32,33 @@ export default function ShopPage() {
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                    <NavbarStyleCentered
+                        <NavbarStyleCentered
-                        brandName="Move and Movie"
+                            brandName="Move and Movie"
-                        navItems={[
+                            navItems={[
-                            {"name":"Home","id":"/"},
+                                {"name":"Home","id":"/"},
-                            {"name":"Portfolio","id":"portfolio"},
+                                {"name":"Portfolio","id":"portfolio"},
-                            {"name":"Services","id":"services"},
+                                {"name":"Services","id":"services"},
-                            {"name":"About","id":"about"},
+                                {"name":"About","id":"about"},
-                            {"name":"Testimonials","id":"testimonials"},
+                                {"name":"Testimonials","id":"testimonials"},
-                            {"name":"Contact","id":"contact"},
+                                {"name":"Contact","id":"contact"},
-                            {"name":"Shop","id":"/shop"}
+                                {"name":"Shop","id":"/shop"}
-                        ]}
+                            ]}
-                        button={{ text: "Cart", onClick: () => console.log("cart") }}
+                            button={{ text: "Cart", onClick: () => console.log("cart") }}
-                    />
+                        />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading products...</p>
                     </main>
                     <div id="footer" data-section="footer">
-                    <FooterSimple
+                        <FooterBaseCard
-                        columns={[
+                            columns={[
-                            {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
+                                {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
-                            {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
+                                {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
-                            {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]},
+                                {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]}
-                            {"title":"Legal","items":[{"label":"Privacy Policy","href":"#"},{"label":"Terms of Service","href":"#"},{"label":"Cookie Policy","href":"#"}]}
+                            ]}
-                        ]}
+                            logoText="Move and Movie"
-                        bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                            copyrightText="© 2025 Move and Movie. All rights reserved."
-                        bottomRightText="Crafted with passion and precision"
+                        />
-                    />
                     </div>
                 </ReactLenis>
             </ThemeProvider>
@@ -81,42 +80,41 @@ export default function ShopPage() {
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                <NavbarStyleCentered
+                    <NavbarStyleCentered
-                    brandName="Move and Movie"
+                        brandName="Move and Movie"
-                    navItems={[
+                        navItems={[
-                        {"name":"Home","id":"/"},
+                            {"name":"Home","id":"/"},
-                        {"name":"Portfolio","id":"portfolio"},
+                            {"name":"Portfolio","id":"portfolio"},
-                        {"name":"Services","id":"services"},
+                            {"name":"Services","id":"services"},
-                        {"name":"About","id":"about"},
+                            {"name":"About","id":"about"},
-                        {"name":"Testimonials","id":"testimonials"},
+                            {"name":"Testimonials","id":"testimonials"},
-                        {"name":"Contact","id":"contact"},
+                            {"name":"Contact","id":"contact"},
-                        {"name":"Shop","id":"/shop"}
+                            {"name":"Shop","id":"/shop"}
-                    ]}
+                        ]}
-                    button={{ text: "Cart", onClick: () => console.log("cart") }}
+                        button={{ text: "Cart", onClick: () => console.log("cart") }}
-                />
+                    />
                 </div>
                 <div id="productCatalog" data-section="productCatalog">
-                <ProductCatalog
+                    <ProductCatalog
-                    layout="page"
+                        layout="page"
-                    products={products}
+                        products={products}
-                    searchValue={search}
+                        searchValue={search}
-                    onSearchChange={setSearch}
+                        onSearchChange={setSearch}
-                    searchPlaceholder="Search products..."
+                        searchPlaceholder="Search products..."
-                    filters={filters}
+                        filters={filters}
-                    emptyMessage="No products found"
+                        emptyMessage="No products found"
-                />
+                    />
                 </div>
                 <div id="footer" data-section="footer">
-                <FooterSimple
+                    <FooterBaseCard
-                    columns={[
+                        columns={[
-                        {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
+                            {"title":"Navigate","items":[{"label":"Home","href":"#hero"},{"label":"Portfolio","href":"#portfolio"},{"label":"Services","href":"#services"},{"label":"About","href":"#about"}]},
-                        {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
+                            {"title":"Resources","items":[{"label":"FAQ","href":"#faq"},{"label":"Blog","href":"#"},{"label":"Case Studies","href":"#"},{"label":"Portfolio","href":"#portfolio"}]},
-                        {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]},
+                            {"title":"Connect","items":[{"label":"Contact Us","href":"#contact"},{"label":"Instagram","href":"https://instagram.com"},{"label":"YouTube","href":"https://youtube.com"},{"label":"LinkedIn","href":"https://linkedin.com"}]}
-                        {"title":"Legal","items":[{"label":"Privacy Policy","href":"#"},{"label":"Terms of Service","href":"#"},{"label":"Cookie Policy","href":"#"}]}
+                        ]}
-                    ]}
+                        logoText="Move and Movie"
-                    bottomLeftText="© 2025 Move and Movie. All rights reserved."
+                        copyrightText="© 2025 Move and Movie. All rights reserved."
-                    bottomRightText="Crafted with passion and precision"
+                    />
-                />
                 </div>
             </ReactLenis>
         </ThemeProvider>