src/app/page.tsx

@@ -33,7 +33,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "home" },
             { name: "About", id: "about" },
-            { name: "Products", id: "products" },
+            { name: "Products", id: "/products" },
             { name: "Why Choose Us", id: "quality" },
             { name: "Contact", id: "contact" }
           ]}
@@ -55,7 +55,7 @@ export default function LandingPage() {
             { imageSrc: "http://img.b2bpic.net/free-psd/healthy-dog-food-poster-template_23-2148457500.jpg", imageAlt: "Bari-Jay premium packaging" }
           ]}
           buttons={[
-            { text: "Shop Now", href: "products" },
+            { text: "Shop Now", href: "/products" },
             { text: "Learn More", href: "about" }
           ]}
           mediaAnimation="slide-up"
@@ -203,4 +203,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Bari-Jay"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "about" },
+            { name: "Products", id: "/products" },
+            { name: "Why Choose Us", id: "quality" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Order Now", href: "contact" }}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Our Premium Product Range"
+          description="Carefully curated selection of fresh dog food and quality accessories for your pet's wellbeing. All products are sourced with premium quality standards and delivered fresh to your doorstep."
+          tag="Fresh & Quality"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={[
+            { id: "1", name: "Broken dog rice", price: "From KES 800", variant: "Fresh Ground • High Protein", imageSrc: "http://img.b2bpic.net/free-photo/raw-meat-with-spices-herbs-table_1220-7556.jpg", imageAlt: "Crushed beef dog food" },
+            { id: "2", name: "Fresh Chicken Variety", price: "From KES 750", variant: "Chicken Parts • Complete Nutrition", imageSrc: "http://img.b2bpic.net/free-photo/roast-chicken-with-sweet-pepper-berry-rice_1339-3199.jpg", imageAlt: "Fresh chicken dog food" },
+            { id: "3", name: "Premium Pork Selection", price: "From KES 850", variant: "Quality Pork • Essential Nutrients", imageSrc: "http://img.b2bpic.net/free-photo/close-up-burger-meat-veggies_23-2148517677.jpg", imageAlt: "Premium pork dog food" },
+            { id: "4", name: "Mixed Meat Blend", price: "From KES 900", variant: "Beef & Chicken • Complete Variety", imageSrc: "http://img.b2bpic.net/free-photo/raw-meat-with-spices-herbs-table_1220-7556.jpg", imageAlt: "Mixed meat dog food" }
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="blur-reveal"
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Bari-Jay"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}