Update src/app/shop/page.tsx

Merge version_4 into main

src/app/blog/page.tsx

@@ -5,8 +5,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 // New imports based on requirements
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
 export default function BlogPage() {
@@ -27,17 +27,17 @@ export default function BlogPage() {
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
                         brandName="MyCo"
                         navItems={[
                             {name: "Home", id: "/"},
                             {name: "About", id: "/#about"},
-                            {name: "Features", id: "/#features"},
                             {name: "Products", id: "/#products"},
-                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "Blog", id: "/blog"},
-                            {name: "FAQ", id: "/#faq"},
                             {name: "Contact", id: "/#contact"}
                         ]}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
 
@@ -59,25 +59,20 @@ export default function BlogPage() {
                     )}
 
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
                             logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Solutions",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Products", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Features", href: "/#features" }
+                                ]},
-                                    ]
+                                {items: [
-                                },
+                                    {label: "About Us", href: "/#about"},
-                                {
+                                    {label: "Blog", href: "/blog"},
-                                    title: "Company",                                    items: [
+                                    {label: "Shop", href: "/shop"},
-                                        { label: "About Us", href: "/#about" },
+                                    {label: "Contact", href: "/#contact"}
-                                        { label: "Blog", href: "/blog" },
+                                ]}
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" }
-                                    ]
-                                }
                             ]}
-                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
             </ReactLenis>

src/app/page.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Phone } from 'lucide-react';
+import { Sparkles, Quote, CheckCircle, Mail } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -28,60 +28,67 @@ export default function LandingPage() {
     >
       <main>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple 
+          <NavbarStyleFullscreen
             brandName="MyCo"
             navItems={[
               {name: "Home", id: "/"},
-              {name: "About", id: "about"},
+              {name: "About", id: "/#about"},
-              {name: "Features", id: "features"},
+              {name: "Products", id: "/#products"},
-              {name: "Products", id: "products"},
+              {name: "Blog", id: "/blog"},
-              {name: "Testimonials", id: "testimonials"},
+              {name: "Contact", id: "/#contact"}
-              {name: "FAQ", id: "faq"},
-              {name: "Contact", id: "contact"}
             ]}
+            bottomLeftText="Innovation Hub"
+            bottomRightText="info@myco.com"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroLogo
+          <HeroBillboardRotatedCarousel
-            logoText="MyCo"
+            title="Innovate. Create. Elevate Your Business."
-            description="Innovative solutions for a brighter future."
+            description="Experience cutting-edge solutions designed to transform your operations and drive unparalleled success."
+            background={{ variant: "sparkles-gradient" }}
+            tag="Next Gen Solutions"
+            tagIcon={Sparkles}
             buttons={[
-              { text: "Get Started", href: "#contact" },
+              { text: "Discover More", href: "/#products" },
-              { text: "Learn More", href: "#about" }
+              { text: "Get Started", href: "/#contact" }
             ]}
-            imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
+            carouselItems={[
-            imageAlt="Modern business cityscape"
+              { id: '1', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+1', imageAlt: 'Product showcase 1' },
-            showDimOverlay={true}
+              { id: '2', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+2', imageAlt: 'Product showcase 2' },
+              { id: '3', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+3', imageAlt: 'Product showcase 3' },
+              { id: '4', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+4', imageAlt: 'Product showcase 4' },
+              { id: '5', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+5', imageAlt: 'Product showcase 5' },
+              { id: '6', imageSrc: 'https://via.placeholder.com/800x450.png?text=Carousel+Item+6', imageAlt: 'Product showcase 6' }
+            ]}
+            autoPlay={true}
+            autoPlayInterval={4000}
           />
         </div>
 
         <div id="about" data-section="about">
-          <MediaSplitTabsAbout
+          <TestimonialAboutCard
-            title="Our Story & Vision"
+            tag="Our Philosophy"
-            description="We are dedicated to building innovative solutions that empower businesses and individuals."
+            tagIcon={Quote}
-            tabs={[
+            title="We believe in empowering futures through technology and innovation."
-              { id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
+            description="MyCo Team"
-              { id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
+            subdescription="Visionaries in Tech"
-              { id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
+            icon={Sparkles}
-            ]}
+            imageSrc="https://via.placeholder.com/800x600.png?text=Our+Vision"
-            imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
-            imageAlt="Team collaborating in an office"
-            imagePosition="right"
             mediaAnimation="slide-up"
             useInvertedBackground={false}
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardTwo
+          <ProductCardThree
-            title="Our Featured Products"
+            title="Our Featured Offerings"
-            description="Explore a selection of our most popular and innovative products designed to meet your needs."
+            description="Explore our innovative products, crafted to enhance your productivity and lifestyle."
             products={[
-              { id: "1", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
+              { id: "1", name: "AI Assistant Pro", price: "$199.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+A" },
-              { id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
+              { id: "2", name: "Smart Home Hub", price: "$249.00", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+B" },
-              { id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
+              { id: "3", name: "Cloud Storage Plus", price: "$49.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+C" },
-              { id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
+              { id: "4", name: "Eco-Friendly Charger", price: "$29.99", imageSrc: "https://via.placeholder.com/400x400.png?text=Product+D" }
             ]}
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
@@ -91,90 +98,86 @@ export default function LandingPage() {
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardThree
+          <FeatureCardTwentyOne
-            title="Key Features That Set Us Apart"
+            title="Unlock Limitless Possibilities"
-            description="Discover the core functionalities and benefits that make our solutions stand out."
+            description="Our platform brings powerful features designed to streamline your operations."
-            features={[
+            accordionItems={[
-              { id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
+              { id: "1", title: "Intuitive Interface", content: "Navigate our platform with ease thanks to our user-friendly design." },
-              { id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
+              { id: "2", title: "Robust Security", content: "Your data is protected with industry-leading security protocols." },
-              { id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
+              { id: "3", title: "Scalable Infrastructure", content: "Grow your business without limits on our adaptable cloud infrastructure." }
             ]}
-            gridVariant="three-columns-all-equal-width"
+            imageSrc="https://via.placeholder.com/800x600.png?text=Feature+Overview"
-            animationType="slide-up"
+            imageAlt="Feature showcase"
+            mediaAnimation="slide-up"
             useInvertedBackground={false}
-            textboxLayout="default"
+            mediaPosition="left"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardOne
+          <TestimonialCardTwelve
-            title="What Our Clients Say"
-            description="Hear directly from our satisfied customers about their experience with our services."
             testimonials={[
-              { id: "1", name: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
+              { id: '1', name: 'Emily White', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+1' },
-              { id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
+              { id: '2', name: 'David Lee', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+2' },
-              { id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
+              { id: '3', name: 'Sophia Miller', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+3' },
+              { id: '4', name: 'James Brown', imageSrc: 'https://via.placeholder.com/100x100.png?text=Avatar+4' }
             ]}
-            gridVariant="three-columns-all-equal-width"
+            cardTitle="Trusted by industry leaders and satisfied customers worldwide."
-            animationType="slide-up"
+            cardTag="Join our growing community"
+            cardAnimation="blur-reveal"
             useInvertedBackground={true}
-            textboxLayout="default"
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqSplitMedia
+          <FaqBase
-            title="Frequently Asked Questions"
+            title="Common Questions, Clear Answers"
-            description="Find quick answers to the most common questions about our products and services."
+            description="Browse our FAQ to quickly find solutions and understand our services better."
             faqs={[
-              { id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
+              { id: "1", title: "What is your onboarding process?", content: "Our onboarding is streamlined, guided by a dedicated success manager." },
-              { id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
+              { id: "2", title: "Do you offer custom solutions?", content: "Yes, we tailor our solutions to fit your unique business requirements." },
-              { id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
+              { id: "3", title: "How is customer support handled?", content: "We provide 24/7 support through multiple channels for your convenience." },
-              { id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
+              { id: "4", title: "What are your security measures?", content: "We implement robust security protocols and regular audits to protect your data." }
             ]}
-            imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
-            imageAlt="Customer support representatives"
-            mediaAnimation="slide-up"
-            mediaPosition="left"
-            faqsAnimation="slide-up"
-            useInvertedBackground={false}
-            animationType="smooth"
             textboxLayout="default"
+            useInvertedBackground={false}
+            faqsAnimation="slide-up"
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactFaq
+          <ContactSplit
-            ctaTitle="Ready to Start?"
+            tag="Connect With Us"
-            ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
+            title="Let's Build Something Amazing Together"
-            ctaButton={{ text: "Contact Us Now", href: "#contact" }}
+            description="Reach out to our team to discuss your next big idea or sign up for our newsletter."
-            ctaIcon={Phone}
+            tagIcon={Mail}
-            faqs={[
+            background={{ variant: "radial-gradient" }}
-              { id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
-              { id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
-              { id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
-            ]}
             useInvertedBackground={true}
-            animationType="slide-up"
+            imageSrc="https://via.placeholder.com/800x600.png?text=Contact+Us"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            inputPlaceholder="Your email address"
+            buttonText="Subscribe"
+            termsText="By subscribing, you agree to our privacy policy."
+            onSubmit={(email) => console.log("Subscribed with: ", email)}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterBaseCard 
+          <FooterLogoEmphasis
             logoText="MyCo"
             columns={[
-              {title: "Solutions", items: [
+              {items: [
-                {label: "Products", href: "#products"},
+                {label: "Products", href: "/#products"},
-                {label: "Features", href: "#features"}
+                {label: "Features", href: "/#features"}
               ]},
-              {title: "Company", items: [
+              {items: [
-                {label: "About Us", href: "#about"},
+                {label: "About Us", href: "/#about"},
                 {label: "Blog", href: "/blog"},
-                {label: "FAQ", href: "#faq"},
+                {label: "Shop", href: "/shop"},
-                {label: "Contact", href: "#contact"}
+                {label: "Contact", href: "/#contact"}
               ]}
             ]}
-            copyrightText="© 2024 MyCo. All rights reserved."
           />
         </div>
       </main>

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

@@ -4,8 +4,8 @@ import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
@@ -90,18 +90,17 @@ function ProductPageContent({ params }: ProductPageProps) {
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
                             brandName="MyCo"
                             navItems={[
                                 {name: "Home", id: "/"},
                                 {name: "About", id: "/#about"},
-                                {name: "Features", id: "/#features"},
                                 {name: "Products", id: "/#products"},
-                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "Blog", id: "/blog"},
-                                {name: "FAQ", id: "/#faq"},
                                 {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -110,25 +109,20 @@ function ProductPageContent({ params }: ProductPageProps) {
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
                             logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Solutions",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Products", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Features", href: "/#features" }
+                                ]},
-                                    ]
+                                {items: [
-                                },
+                                    {label: "About Us", href: "/#about"},
-                                {
+                                    {label: "Blog", href: "/blog"},
-                                    title: "Company",                                    items: [
+                                    {label: "Shop", href: "/shop"},
-                                        { label: "About Us", href: "/#about" },
+                                    {label: "Contact", href: "/#contact"}
-                                        { label: "Blog", href: "/blog" },
+                                ]}
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" }
-                                    ]
-                                }
                             ]}
-                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -152,18 +146,17 @@ function ProductPageContent({ params }: ProductPageProps) {
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
                             brandName="MyCo"
                             navItems={[
                                 {name: "Home", id: "/"},
                                 {name: "About", id: "/#about"},
-                                {name: "Features", id: "/#features"},
                                 {name: "Products", id: "/#products"},
-                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "Blog", id: "/blog"},
-                                {name: "FAQ", id: "/#faq"},
                                 {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -178,25 +171,20 @@ function ProductPageContent({ params }: ProductPageProps) {
                         </div>
                     </main>
                     <div id="footer" data-section="footer">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
                             logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Solutions",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Products", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Features", href: "/#features" }
+                                ]},
-                                    ]
+                                {items: [
-                                },
+                                    {label: "About Us", href: "/#about"},
-                                {
+                                    {label: "Blog", href: "/blog"},
-                                    title: "Company",                                    items: [
+                                    {label: "Shop", href: "/shop"},
-                                        { label: "About Us", href: "/#about" },
+                                    {label: "Contact", href: "/#contact"}
-                                        { label: "Blog", href: "/blog" },
+                                ]}
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" }
-                                    ]
-                                }
                             ]}
-                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -219,18 +207,17 @@ function ProductPageContent({ params }: ProductPageProps) {
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
                         brandName="MyCo"
                         navItems={[
                             {name: "Home", id: "/"},
                             {name: "About", id: "/#about"},
-                            {name: "Features", id: "/#features"},
                             {name: "Products", id: "/#products"},
-                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "Blog", id: "/blog"},
-                            {name: "FAQ", id: "/#faq"},
                             {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
@@ -270,25 +257,20 @@ function ProductPageContent({ params }: ProductPageProps) {
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
+                    <FooterLogoEmphasis
                         logoText="MyCo"
                         columns={[
-                            {
+                            {items: [
-                                title: "Solutions",                                items: [
+                                {label: "Products", href: "/#products"},
-                                    { label: "Products", href: "/#products" },
+                                {label: "Features", href: "/#features"}
-                                    { label: "Features", href: "/#features" }
+                                ]},
-                                ]
+                            {items: [
-                            },
+                                {label: "About Us", href: "/#about"},
-                            {
+                                {label: "Blog", href: "/blog"},
-                                title: "Company",                                items: [
+                                {label: "Shop", href: "/shop"},
-                                    { label: "About Us", href: "/#about" },
+                                {label: "Contact", href: "/#contact"}
-                                    { label: "Blog", href: "/blog" },
+                            ]}
-                                    { label: "FAQ", href: "/#faq" },
-                                    { label: "Contact", href: "/#contact" }
-                                ]
-                            }
                         ]}
-                        copyrightText="© 2024 MyCo. All rights reserved."
                     />
                 </div>
             </ReactLenis>

src/app/shop/page.tsx

@@ -3,8 +3,8 @@
 import { Suspense, useCallback } from "react";
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
@@ -57,43 +57,37 @@ function ShopPageContent() {
             >
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
+                        <NavbarStyleFullscreen
                             brandName="MyCo"
                             navItems={[
                                 {name: "Home", id: "/"},
                                 {name: "About", id: "/#about"},
-                                {name: "Features", id: "/#features"},
                                 {name: "Products", id: "/#products"},
-                                {name: "Testimonials", id: "/#testimonials"},
+                                {name: "Blog", id: "/blog"},
-                                {name: "FAQ", id: "/#faq"},
                                 {name: "Contact", id: "/#contact"}
                             ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            bottomLeftText="Innovation Hub"
+                            bottomRightText="info@myco.com"
                         />
                     </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">
-                        <FooterBaseCard
+                        <FooterLogoEmphasis
                             logoText="MyCo"
                             columns={[
-                                {
+                                {items: [
-                                    title: "Solutions",                                    items: [
+                                    {label: "Products", href: "/#products"},
-                                        { label: "Products", href: "/#products" },
+                                    {label: "Features", href: "/#features"}
-                                        { label: "Features", href: "/#features" }
+                                ]},
-                                    ]
+                                {items: [
-                                },
+                                    {label: "About Us", href: "/#about"},
-                                {
+                                    {label: "Blog", href: "/blog"},
-                                    title: "Company",                                    items: [
+                                    {label: "Shop", href: "/shop"},
-                                        { label: "About Us", href: "/#about" },
+                                    {label: "Contact", href: "/#contact"}
-                                        { label: "Blog", href: "/blog" },
+                                ]}
-                                        { label: "FAQ", href: "/#faq" },
-                                        { label: "Contact", href: "/#contact" }
-                                    ]
-                                }
                             ]}
-                            copyrightText="© 2024 MyCo. All rights reserved."
                         />
                     </div>
                 </ReactLenis>
@@ -116,18 +110,17 @@ function ShopPageContent() {
         >
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
-                    <NavbarStyleApple
+                    <NavbarStyleFullscreen
                         brandName="MyCo"
                         navItems={[
                             {name: "Home", id: "/"},
                             {name: "About", id: "/#about"},
-                            {name: "Features", id: "/#features"},
                             {name: "Products", id: "/#products"},
-                            {name: "Testimonials", id: "/#testimonials"},
+                            {name: "Blog", id: "/blog"},
-                            {name: "FAQ", id: "/#faq"},
                             {name: "Contact", id: "/#contact"}
                         ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        bottomLeftText="Innovation Hub"
+                        bottomRightText="info@myco.com"
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
@@ -157,25 +150,20 @@ function ShopPageContent() {
                     />
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterBaseCard
+                    <FooterLogoEmphasis
                         logoText="MyCo"
                         columns={[
-                            {
+                            {items: [
-                                title: "Solutions",                                items: [
+                                {label: "Products", href: "/#products"},
-                                    { label: "Products", href: "/#products" },
+                                {label: "Features", href: "/#features"}
-                                    { label: "Features", href: "/#features" }
+                            ]},
-                                ]
+                            {items: [
-                            },
+                                {label: "About Us", href: "/#about"},
-                            {
+                                {label: "Blog", href: "/blog"},
-                                title: "Company",                                items: [
+                                {label: "Shop", href: "/shop"},
-                                    { label: "About Us", href: "/#about" },
+                                {label: "Contact", href: "/#contact"}
-                                    { label: "Blog", href: "/blog" },
+                            ]}
-                                    { label: "FAQ", href: "/#faq" },
-                                    { label: "Contact", href: "/#contact" }
-                                ]
-                            }
                         ]}
-                        copyrightText="© 2024 MyCo. All rights reserved."
                     />
                 </div>
             </ReactLenis>