Update src/app/products/page.tsx

src/app/page.tsx

@@ -30,27 +30,19 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "/"},
-          id: "hero",
-        },
         {
-          name: "Services",
+          name: "Services",          id: "services"},
-          id: "services",
-        },
         {
-          name: "Team",
+          name: "Products",          id: "/products"},
-          id: "team",
-        },
         {
-          name: "FAQ",
+          name: "Team",          id: "team"},
-          id: "faq",
+        {
-        },
+          name: "FAQ",          id: "faq"},
       ]}
       brandName="Jomotech"
       button={{
-        text: "Get Support",
+        text: "Get Support",        href: "#contact"}}
-        href: "#contact",
-      }}
     />
   </div>
 
@@ -60,36 +52,22 @@ export default function LandingPage() {
       description="Jomotech brings professional hardware repair, software support, and cyber security services to your doorstep. We keep your technology running flawlessly."
       buttons={[
         {
-          text: "Explore Services",
+          text: "Explore Services",          href: "#services"},
-          href: "#services",
-        },
         {
-          text: "Contact Us",
+          text: "Contact Us",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-components_23-2149174325.jpg"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg",
+          src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg",          alt: "Satisfied Client"},
-          alt: "Satisfied Client",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149371206.jpg",
+          src: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149371206.jpg",          alt: "Satisfied Client"},
-          alt: "Satisfied Client",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg",
+          src: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg",          alt: "Satisfied Client"},
-          alt: "Satisfied Client",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-14028.jpg",
+          src: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-14028.jpg",          alt: "Satisfied Client"},
-          alt: "Satisfied Client",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/young-lady-red-blouse-showing-thumbs-up-looking-glad_176474-24988.jpg",
+          src: "http://img.b2bpic.net/free-photo/young-lady-red-blouse-showing-thumbs-up-looking-glad_176474-24988.jpg",          alt: "Satisfied Client"},
-          alt: "Satisfied Client",
-        },
       ]}
       avatarText="Trusted by 500+ local clients"
     />
@@ -103,20 +81,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "Hardware Repair",
+          title: "Hardware Repair",          description: "Expert repairs for laptops, desktops, and mobile devices.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-morph-man-builder-with-wrench_1048-10368.jpg"},
-          description: "Expert repairs for laptops, desktops, and mobile devices.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-morph-man-builder-with-wrench_1048-10368.jpg",
-        },
         {
-          title: "Software Setup",
+          title: "Software Setup",          description: "Professional installation and troubleshooting for your OS and apps.",          imageSrc: "http://img.b2bpic.net/free-vector/creative-computer-logo-template_23-2149212784.jpg"},
-          description: "Professional installation and troubleshooting for your OS and apps.",
-          imageSrc: "http://img.b2bpic.net/free-vector/creative-computer-logo-template_23-2149212784.jpg",
-        },
         {
-          title: "Cyber Security",
+          title: "Cyber Security",          description: "Advanced protection for your digital assets and online privacy.",          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2151998485.jpg"},
-          description: "Advanced protection for your digital assets and online privacy.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concept_23-2151998485.jpg",
-        },
       ]}
       title="Our Professional Services"
       description="Comprehensive technical solutions tailored for individuals and businesses."
@@ -130,23 +99,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       team={[
         {
-          id: "1",
+          id: "1",          name: "John Doe",          role: "Senior Technician",          imageSrc: "http://img.b2bpic.net/free-photo/call-center-worker-arriving-work-using-artificial-intelligence-laptop_482257-126041.jpg"},
-          name: "John Doe",
-          role: "Senior Technician",
-          imageSrc: "http://img.b2bpic.net/free-photo/call-center-worker-arriving-work-using-artificial-intelligence-laptop_482257-126041.jpg",
-        },
         {
-          id: "2",
+          id: "2",          name: "Jane Smith",          role: "Cyber Security Lead",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg"},
-          name: "Jane Smith",
-          role: "Cyber Security Lead",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Alex Rivet",          role: "Hardware Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/workers-it-company-working-computer_1303-19431.jpg"},
-          name: "Alex Rivet",
-          role: "Hardware Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/workers-it-company-working-computer_1303-19431.jpg",
-        },
       ]}
       title="Meet Our Tech Experts"
       description="Our dedicated technicians ensure your devices are in the best hands."
@@ -161,25 +118,15 @@ export default function LandingPage() {
       author="Sarah Miller"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg",
+          src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg",          alt: "Sarah M"},
-          alt: "Sarah M",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149371206.jpg",
+          src: "http://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149371206.jpg",          alt: "John D"},
-          alt: "John D",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg",
+          src: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg",          alt: "Alice B"},
-          alt: "Alice B",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-14028.jpg",
+          src: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-14028.jpg",          alt: "Bob C"},
-          alt: "Bob C",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/young-lady-red-blouse-showing-thumbs-up-looking-glad_176474-24988.jpg",
+          src: "http://img.b2bpic.net/free-photo/young-lady-red-blouse-showing-thumbs-up-looking-glad_176474-24988.jpg",          alt: "Eve S"},
-          alt: "Eve S",
-        },
       ]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="slide-up"
@@ -192,20 +139,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
+          id: "1",          title: "Do you provide on-site repair?",          content: "Yes, we offer both on-site and remote support services depending on your needs."},
-          title: "Do you provide on-site repair?",
-          content: "Yes, we offer both on-site and remote support services depending on your needs.",
-        },
         {
-          id: "2",
+          id: "2",          title: "How long is the turnaround?",          content: "Most hardware repairs are completed within 24-48 hours depending on parts availability."},
-          title: "How long is the turnaround?",
-          content: "Most hardware repairs are completed within 24-48 hours depending on parts availability.",
-        },
         {
-          id: "3",
+          id: "3",          title: "Are your repairs guaranteed?",          content: "Absolutely, all hardware repairs come with a standard 90-day service warranty."},
-          title: "Are your repairs guaranteed?",
-          content: "Absolutely, all hardware repairs come with a standard 90-day service warranty.",
-        },
       ]}
       title="Frequently Asked Questions"
       description="Answers to your most common technical and cyber service inquiries."
@@ -217,8 +155,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Need Technical Assistance?"
       description="Drop us a message and our support team will get in touch shortly."
       tag="Get In Touch"
@@ -229,33 +166,21 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Services",
+              label: "Services",              href: "#services"},
-              href: "#services",
-            },
             {
-              label: "Careers",
+              label: "Careers",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}

src/app/products/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/#services" },
+              { name: "Products", id: "/products" },
+              { name: "Team", id: "/#team" },
+              { name: "FAQ", id: "/#faq" },
+            ]}
+            brandName="Jomotech"
+            button={{ text: "Contact", href: "/#contact" }}
+          />
+        </div>
+
+        <div id="catalog" data-section="catalog">
+          <ProductCatalog 
+            layout="page"
+            products={[]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Services", href: "/#services" }, { label: "Careers", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+            ]}
+            logoText="Jomotech"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}