From dd27179ca158b963ff7a48e79eb010d0288231e6 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 03:25:02 +0000
Subject: [PATCH] Update src/app/products/page.tsx

---
 src/app/products/page.tsx | 346 +++++++++++++++-----------------------
 1 file changed, 138 insertions(+), 208 deletions(-)

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 (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -30,7 +62,7 @@ export default function ProductsPage() {
       borderRadius="soft"
       contentWidth="compact"
       sizing="largeSmall"
-      background="fluid"
+      background="circleGradient"
       cardStyle="layered-gradient"
       primaryButtonStyle="diagonal-gradient"
       secondaryButtonStyle="radial-glow"
@@ -45,231 +77,129 @@ export default function ProductsPage() {
         />
       </div>
 
-      <div id="products" data-section="products">
-        <ProductCardThree
-          title="Featured Product Collection"
-          description="Explore our premium industrial components engineered for maximum performance and durability"
-          tag="In Stock"
-          tagIcon={Package}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
-          products={[
-            {
-              id: "motor-blue",
-              name: "High-Performance DC Motor - Premium Series",
-              price: "$1,299.99",
-              imageSrc: "http://img.b2bpic.net/free-photo/dumbbell_1203-6627.jpg",
-              imageAlt: "Blue industrial DC motor",
-              initialQuantity: 1,
-            },
-            {
-              id: "motor-gold",
-              name: "Industrial Servo Motor - Precision Grade",
-              price: "$2,149.00",
-              imageSrc: "http://img.b2bpic.net/free-photo/rusty-gear-assembly_1136-278.jpg?_wi=3",
-              imageAlt: "Golden brass servo motor",
-              initialQuantity: 1,
-            },
-            {
-              id: "motor-silver",
-              name: "Stainless Steel Motor - Corrosion Resistant",
-              price: "$1,799.50",
-              imageSrc: "http://img.b2bpic.net/free-photo/objects-with-reflective-effect_23-2150141924.jpg",
-              imageAlt: "Silver stainless steel motor",
-              initialQuantity: 1,
-            },
-          ]}
-          buttons={[
-            {
-              text: "View All Products",
-              href: "/products",
-            },
-          ]}
-        />
-      </div>
+      <div id="products" data-section="products" className="w-full">
+        <div className="w-full px-4 md:px-8 py-16 md:py-24">
+          <div className="max-w-7xl mx-auto">
+            {/* Header */}
+            <div className="mb-12">
+              <h1 className="text-4xl md:text-5xl font-bold mb-4">Our Products</h1>
+              <p className="text-lg text-foreground/70">
+                Explore our comprehensive range of industrial components and equipment
+              </p>
+            </div>
 
-      <div id="pricing" data-section="pricing">
-        <PricingCardOne
-          title="Flexible Pricing Plans"
-          description="Choose the service tier that best fits your industrial needs and scale"
-          tag="Transparent Pricing"
-          tagIcon={DollarSign}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          plans={[
-            {
-              id: "starter",
-              badge: "Starter",
-              badgeIcon: Star,
-              price: "Custom",
-              subtitle: "Small volume purchases and evaluations",
-              features: [
-                "Standard components access",
-                "Direct online ordering",
-                "Basic technical support",
-                "Standard shipping rates",
-                "Product documentation",
-              ],
-            },
-            {
-              id: "professional",
-              badge: "Most Popular",
-              badgeIcon: Star,
-              price: "Custom",
-              subtitle: "Growing businesses with regular demand",
-              features: [
-                "Full product catalog access",
-                "Bulk discount pricing",
-                "Priority technical support",
-                "Free shipping on orders",
-                "Custom delivery schedules",
-                "Dedicated account manager",
-              ],
-            },
-            {
-              id: "enterprise",
-              badge: "Enterprise",
-              badgeIcon: Crown,
-              price: "Custom",
-              subtitle: "Large-scale operations and partnerships",
-              features: [
-                "Unlimited product access",
-                "Volume discounts (10-40%)",
-                "24/7 VIP support",
-                "White-glove delivery service",
-                "Custom solutions engineering",
-                "Direct factory relationships",
-              ],
-            },
-          ]}
-          buttons={[
-            {
-              text: "Get Detailed Quote",
-              href: "/contact",
-            },
-          ]}
-        />
-      </div>
+            {/* Search Bar */}
+            <div className="mb-8 flex items-center gap-2 bg-card rounded-lg px-4 py-2 border border-foreground/10">
+              <Search className="w-5 h-5 text-foreground/50" />
+              <input
+                type="text"
+                placeholder="Search products..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="flex-1 bg-transparent outline-none text-foreground placeholder-foreground/50"
+              />
+            </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTen
-          title="Client Success Stories"
-          description="Hear from industry leaders about their experience with Fatisoft Global solutions"
-          tag="Client Testimonials"
-          tagIcon={MessageSquare}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          testimonials={[
-            {
-              id: "1",
-              title: "Transformed Manufacturing Efficiency",
-              quote: "Since partnering with Fatisoft Global, our production output increased by 35% while reducing maintenance costs significantly. Their industrial motors are built to last and perform flawlessly under demanding conditions.",
-              name: "Ahmed Hassan",
-              role: "Procurement Manager, TechCorp Manufacturing",
-              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg?_wi=2",
-            },
-            {
-              id: "2",
-              title: "Unmatched Technical Excellence",
-              quote: "The precision and reliability of Fatisoft's components exceeded our expectations. Their technical support team went above and beyond to ensure seamless integration into our operations.",
-              name: "Maria Rodriguez",
-              role: "Operations Director, Industrial Solutions Inc",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg?_wi=2",
-            },
-            {
-              id: "3",
-              title: "Quality Meets Performance",
-              quote: "We've tested many suppliers, but Fatisoft Global consistently delivers the highest quality industrial equipment. Their commitment to excellence is evident in every product.",
-              name: "James Mitchell",
-              role: "Engineering Lead, Precision Manufacturing",
-              imageSrc: "http://img.b2bpic.net/free-photo/furious-mature-business-man-conference-room_1262-3010.jpg?_wi=2",
-            },
-            {
-              id: "4",
-              title: "Reliable Global Partner",
-              quote: "Working with Fatisoft Global has streamlined our supply chain dramatically. Their worldwide distribution network and responsive customer service make them an invaluable business partner.",
-              name: "Sarah Chen",
-              role: "Supply Chain Manager, Global Industries",
-              imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-working-together-side-view_23-2149871311.jpg?_wi=2",
-            },
-          ]}
-        />
+            {/* Category Filter */}
+            <div className="mb-12">
+              <div className="flex gap-2 mb-4 items-center">
+                <Filter className="w-5 h-5" />
+                <span className="text-sm font-semibold">Filter by Category:</span>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                {productCategories.map((category) => (
+                  <button
+                    key={category.id}
+                    onClick={() => setSelectedCategory(category.id)}
+                    className={`px-4 py-2 rounded-lg font-medium transition-all ${
+                      selectedCategory === category.id
+                        ? "bg-primary-cta text-background"
+                        : "bg-card border border-foreground/10 text-foreground hover:border-primary-cta"
+                    }`}
+                  >
+                    {category.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Product Grid */}
+            <div className="mb-12">
+              {filteredProducts.length > 0 ? (
+                <div>
+                  <p className="text-sm text-foreground/60 mb-6">
+                    Showing {filteredProducts.length} product
+                    {filteredProducts.length !== 1 ? "s" : ""}
+                  </p>
+                  <ProductCardFour
+                    products={filteredProducts.map((product) => ({
+                      ...product,
+                      onFavorite: () => console.log(`Favorited: ${product.id}`),
+                      onProductClick: () => console.log(`Clicked: ${product.id}`),
+                      isFavorited: false,
+                    }))}
+                    title=""
+                    description=""
+                    textboxLayout="default"
+                    gridVariant="uniform-all-items-equal"
+                    animationType="slide-up"
+                    useInvertedBackground={false}
+                  />
+                </div>
+              ) : (
+                <div className="text-center py-12">
+                  <Package className="w-12 h-12 mx-auto text-foreground/30 mb-4" />
+                  <p className="text-foreground/60 text-lg">
+                    No products found matching your criteria.
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/rusty-gear-assembly_1136-278.jpg?_wi=4"
+          imageSrc="http://img.b2bpic.net/free-photo/rusty-gear-assembly_1136-278.jpg?_wi=2"
           imageAlt="Fatisoft Global industrial excellence"
           logoText="Fatisoft Global"
           copyrightText="© 2025 Fatisoft Global Ltd. All rights reserved."
           columns={[
             {
-              title: "Products",
-              items: [
+              title: "Products",              items: [
                 {
-                  label: "Electric Motors",
-                  href: "/products",
-                },
+                  label: "Electric Motors",                  href: "/products"},
                 {
-                  label: "Components",
-                  href: "/products",
-                },
+                  label: "Components",                  href: "/products"},
                 {
-                  label: "Equipment",
-                  href: "/products",
-                },
+                  label: "Equipment",                  href: "/products"},
                 {
-                  label: "Specifications",
-                  href: "/products",
-                },
+                  label: "Specifications",                  href: "/products"},
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 {
-                  label: "About Us",
-                  href: "/",
-                },
+                  label: "About Us",                  href: "/"},
                 {
-                  label: "Our Team",
-                  href: "/",
-                },
+                  label: "Our Team",                  href: "/"},
                 {
-                  label: "Careers",
-                  href: "/",
-                },
+                  label: "Careers",                  href: "/"},
                 {
-                  label: "Blog",
-                  href: "/",
-                },
+                  label: "Blog",                  href: "/"},
               ],
             },
             {
-              title: "Support",
-              items: [
+              title: "Support",              items: [
                 {
-                  label: "Contact Us",
-                  href: "/contact",
-                },
+                  label: "Contact Us",                  href: "/contact"},
                 {
-                  label: "Technical Support",
-                  href: "/",
-                },
+                  label: "Technical Support",                  href: "/"},
                 {
-                  label: "Documentation",
-                  href: "/",
-                },
+                  label: "Documentation",                  href: "/"},
                 {
-                  label: "FAQ",
-                  href: "/",
-                },
+                  label: "FAQ",                  href: "/"},
               ],
             },
           ]}
@@ -277,4 +207,4 @@ export default function ProductsPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}