diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..3b4d6c7
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ProductsPage() {
+  const navItems = [
+    { name: "Features", id: "#features" },
+    { name: "Solutions", id: "#solutions" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Documentation", id: "#documentation" },
+    { name: "Products", id: "/products" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Marvixa"
+          navItems={navItems}
+          topBarButton={{ text: "Log In", href: "#" }}
+          button={{ text: "Start Free", href: "#start-free" }}
+        />
+      </div>
+
+      <div id="products-section" data-section="products-section">
+        <ProductCardThree
+          title="Explore Our Innovative Product Line."
+          description="Discover the tools designed to revolutionize your project management and boost team efficiency."
+          products={[
+            {
+              id: "product1",              name: "Marvixa Pro",              price: "$29/month",              imageSrc: "http://img.b2bpic.net/free-photo/minimal-design-digital-tablet-white-table_53876-147281.jpg",              imageAlt: "Marvixa Pro Tablet Display",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Pro'),
+              onQuantityChange: (q) => console.log('Quantity changed for Pro:', q)
+            },
+            {
+              id: "product2",              name: "Marvixa Enterprise Suite",              price: "Custom",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-group-young-business-people-meeting-modern-office_23-2147844075.jpg",              imageAlt: "Enterprise Team Collaboration",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Enterprise'),
+              onQuantityChange: (q) => console.log('Quantity changed for Enterprise:', q)
+            },
+            {
+              id: "product3",              name: "Marvixa AI Integrator",              price: "$19/month",              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technological-background-with-circuit-board-elements_23-2148152504.jpg",              imageAlt: "AI Integrator Circuit Board",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa AI Integrator'),
+              onQuantityChange: (q) => console.log('Quantity changed for AI Integrator:', q)
+            },
+            {
+              id: "product4",              name: "Marvixa Data Insights",              price: "$39/month",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-binary-code-background-digital-data-processing_23-2149591461.jpg",              imageAlt: "Data Insights Dashboard",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Data Insights'),
+              onQuantityChange: (q) => console.log('Quantity changed for Data Insights:', q)
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }, { label: "Testimonials", href: "#" }] },
+            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
+            { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Support", href: "#" }, { label: "API Reference", href: "#" }, { label: "Security", href: "#" }, { label: "Changelog", href: "#" }] },
+            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Disclaimer", href: "#" }] }
+          ]}
+          bottomLeftText="© 2024 Marvixa. All rights reserved."
+          bottomRightText="Built with Intelligence and Precision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file