diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index ff84c3c..90eb57b 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -2,17 +2,10 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
-import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
-import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterMedia from "@/components/sections/footer/FooterMedia";
-import {
- Package,
- Star,
- Crown,
- DollarSign,
- MessageSquare,
-} from "lucide-react";
+import { Package, Filter, Search, Zap } from "lucide-react";
+import { useState } from "react";
const navItems = [
{ name: "Home", id: "/" },
@@ -22,7 +15,46 @@ const navItems = [
{ name: "Contact", id: "/" },
];
+const productCategories = [
+ { id: "all", name: "All Products" },
+ { id: "motors", name: "Electric Motors" },
+ { id: "components", name: "Components" },
+ { id: "equipment", name: "Equipment" },
+ { id: "accessories", name: "Accessories" },
+];
+
+const allProducts = [
+ {
+ id: "1", name: "Industrial AC Motor 50HP", price: "$1,250", variant: "Three Phase 50Hz", imageSrc: "http://img.b2bpic.net/free-photo/industrial-gear_1136-285.jpg", imageAlt: "AC Motor", category: "motors"},
+ {
+ id: "2", name: "Precision Ball Bearing Set", price: "$450", variant: "Stainless Steel Multiple Sizes", imageSrc: "http://img.b2bpic.net/free-photo/mechanical-parts_1136-290.jpg", imageAlt: "Ball Bearing Set", category: "components"},
+ {
+ id: "3", name: "Heavy Duty Coupling", price: "$680", variant: "Flexible Coupling Various Diameters", imageSrc: "http://img.b2bpic.net/free-photo/industrial-coupling_1136-295.jpg", imageAlt: "Coupling", category: "components"},
+ {
+ id: "4", name: "Industrial Gearbox 100:1", price: "$2,100", variant: "Helical Gears Cast Iron", imageSrc: "http://img.b2bpic.net/free-photo/rusty-gear-assembly_1136-278.jpg", imageAlt: "Gearbox", category: "equipment"},
+ {
+ id: "5", name: "Stainless Steel Shaft", price: "$320", variant: "Precision Ground Various Lengths", imageSrc: "http://img.b2bpic.net/free-photo/metal-shaft_1136-300.jpg", imageAlt: "Stainless Shaft", category: "components"},
+ {
+ id: "6", name: "VFD Variable Speed Drive", price: "$950", variant: "Three Phase 30kW Capacity", imageSrc: "http://img.b2bpic.net/free-photo/electronic-drive_1136-305.jpg", imageAlt: "VFD Drive", category: "equipment"},
+ {
+ id: "7", name: "Polymer Conveyor Belt", price: "$580", variant: "Anti-Static Food Grade", imageSrc: "http://img.b2bpic.net/free-photo/conveyor-belt_1136-310.jpg", imageAlt: "Conveyor Belt", category: "equipment"},
+ {
+ id: "8", name: "Lubrication Pump Kit", price: "$275", variant: "Automatic 12V System", imageSrc: "http://img.b2bpic.net/free-photo/pump-assembly_1136-315.jpg", imageAlt: "Lubrication Pump", category: "accessories"},
+];
+
export default function ProductsPage() {
+ const [selectedCategory, setSelectedCategory] = useState("all");
+ const [searchTerm, setSearchTerm] = useState("");
+
+ const filteredProducts = allProducts.filter((product) => {
+ const matchesCategory =
+ selectedCategory === "all" || product.category === selectedCategory;
+ const matchesSearch = product.name
+ .toLowerCase()
+ .includes(searchTerm.toLowerCase());
+ return matchesCategory && matchesSearch;
+ });
+
return (
+ Explore our comprehensive range of industrial components and equipment +
++ Showing {filteredProducts.length} product + {filteredProducts.length !== 1 ? "s" : ""} +
++ No products found matching your criteria. +
+