Add src/app/categories/page.tsx

src/app/categories/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function CategoriesPage() {
+  const [selectedCategory, setSelectedCategory] = useState("All");
+  const categories = ["All", "Men's", "Women's", "Accessories"];
+
+  const products = [
+    { id: "1", brand: "GreenScape", name: "Garden Toolkit", price: "$49", rating: 5, reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-2.jpg" },
+    { id: "2", brand: "GreenScape", name: "Pruning Shears", price: "$29", rating: 4, reviewCount: "8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-3.jpg" },
+  ];
+
+  return (
+    <ThemeProvider>
+      <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            brandName="GreenScape"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/#services" },
+              { name: "Categories", id: "/categories" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            button={{ text: "Call Now", href: "/#contact" }}
+          />
+      </div>
+      <main className="pt-24">
+        <div className="flex justify-center gap-4 py-8">
+            {categories.map(cat => (
+                <button 
+                    key={cat} 
+                    onClick={() => setSelectedCategory(cat)}
+                    className={`px-4 py-2 rounded-full ${selectedCategory === cat ? 'bg-primary text-white' : 'bg-secondary'}`}>
+                    {cat}
+                </button>
+            ))}
+        </div>
+        <ProductCardTwo 
+            title="Product Categories"
+            description="Browse our curated selection of gardening essentials."
+            products={products}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+        />
+      </main>
+      <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Contact", href: "/#contact" }] }
+            ]}
+            bottomLeftText="© 2026 GreenScape"
+      />
+    </ThemeProvider>
+  );
+}