all pages updated

components/Brands/InnerDetailsBrands.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { Col, Row } from "react-bootstrap";
 import { useRouter } from "next/router";
+import FilterButton from "../Common/FilterButton";
 
 const InnerDetailsBrands = ({ subCategories }) => {
   const router = useRouter();
@@ -17,12 +18,24 @@ const InnerDetailsBrands = ({ subCategories }) => {
 
   // Safety check
   if (!subCategories || !category) return null;
+  // Optional sorting
+ const sortedProducts = [...subCategories].sort((a, b) => {
+  if (sort === "name-asc") {
+    return a.subCategoryName.localeCompare(b.subCategoryName);
+  }
+
+  if (sort === "name-desc") {
+    return b.subCategoryName.localeCompare(a.subCategoryName);
+  }
+
+  return 0;
+});
 
   return (
     <section className="collection-m-section sec_padd">
       <div className="custom_container">
         {/* Header Row */}
-        <Row>
+        <Row className="align-content-center">
           <Col xs={6}>
             <h3>
               {category
@@ -33,24 +46,36 @@ const InnerDetailsBrands = ({ subCategories }) => {
           </Col>
 
           <Col xs={6} className="d-flex justify-content-end">
-            <div className="sortby-wrapper">
+           <>
+                <FilterButton 
+                // onClick={() => setShowFilter(true)} 
+                />
+
+                {/* {showFilter && (
+                  <div className="filter-panel">
+                    Filter Content Here
+                    <button 
+                    onClick={() => setShowFilter(false)}
+                    >
+                      Close</button>
+                  </div>
+                )} */}
+              </>
              <select
               className="sortby-select"
               value={sort}
               onChange={handleChange}
             >
               <option value="">Sort By</option>
-                <option value="latest">Latest</option>
               <option value="name-asc">Name: A–Z</option>
               <option value="name-desc">Name: Z–A</option>
             </select>
-            </div>
           </Col>
         </Row>
 
         {/* Sub-category cards */}
         <Row>
-          {subCategories.map((sub) => (
+          {sortedProducts.map((sub) => (
             <Col md={6} key={sub.subCategorySlug}>
               <div className="collections-item">
                 <Link

components/Collection/InnerDetailsSubCategory.js

@@ -3,11 +3,12 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { Col, Row } from "react-bootstrap";
 import { useRouter } from "next/router";
+import FilterButton from "../Common/FilterButton";
 
 const InnerDetailsSubCategory = ({ products }) => {
   const router = useRouter();
   const { category, subCategory } = router.query;
-
+const [showFilter, setShowFilter] = useState(false);
   const [sort, setSort] = useState("");
 
   if (!products || !category || !subCategory) return null;
@@ -28,7 +29,7 @@ const InnerDetailsSubCategory = ({ products }) => {
       <div className="custom_container">
 
         {/* Header */}
-        <Row>
+        <Row className="align-content-center">
           <Col xs={6}>
             <h3>
               {subCategory
@@ -39,6 +40,22 @@ const InnerDetailsSubCategory = ({ products }) => {
           </Col>
 
           <Col xs={6} className="d-flex justify-content-end">
+             <>
+                <FilterButton 
+                // onClick={() => setShowFilter(true)} 
+                />
+
+                {/* {showFilter && (
+                  <div className="filter-panel">
+                    Filter Content Here
+                    <button 
+                    onClick={() => setShowFilter(false)}
+                    >
+                      Close</button>
+                  </div>
+                )} */}
+              </>
+
             <select
               className="sortby-select"
               value={sort}

components/Common/FilterButton.js

+const FilterButton = ({ onClick }) => {
+  return (
+    <button className="filter-btn" onClick={onClick}>
+      <span className="filter-text">Filter</span>
+
+      {/* <span className="filter-divider" /> */}
+
+      <span className="filter-icon">
+        <svg
+          width="22"
+          height="22"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="4" y1="21" x2="4" y2="14" />
+          <line x1="4" y1="10" x2="4" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12" y2="3" />
+          <line x1="20" y1="21" x2="20" y2="16" />
+          <line x1="20" y1="12" x2="20" y2="3" />
+          <line x1="1" y1="14" x2="7" y2="14" />
+          <line x1="9" y1="8" x2="15" y2="8" />
+          <line x1="17" y1="16" x2="23" y2="16" />
+        </svg>
+      </span>
+    </button>
+  );
+};
+
+export default FilterButton;

components/services/imageHandling.js

 export const cleanImage = (originalImage) => {
-    let imageUrl = "/images/default.svg";
+    let imageUrl = "/image/default.svg";
     if (originalImage) {
       // /** When the AWS S3 plugin is activated, images are uploaded to S3 rather than local file system. */
       // if (originalImage.url.startsWith("http")) {

public/image/default.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="752pt" height="752pt" version="1.1" viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <path d="m267.97 589.11c3.0977 0 6.2305-0.26953 9.3828-0.82422l245.5-43.289c26.055-4.6133 44.391-27.234 44.391-52.836 0-3.0977-0.26953-6.2383-0.82422-9.3828l-29.547-167.56c-4.6094-26.055-27.234-44.391-52.836-44.391-3.0977 0-6.2383 0.26953-9.3828 0.82422l-47.48 8.3711-60.965-73.074c1.1758-3.4102 1.8242-7.0312 1.8242-10.77 0-1.918-0.16406-3.8594-0.51172-5.8047-2.8555-16.137-16.855-27.488-32.715-27.488-1.918 0-3.8594 0.16406-5.8047 0.51172-16.137 2.8594-27.48 16.855-27.48 32.719 0 1.918 0.16406 3.8594 0.51172 5.8047 0.86328 4.8477 2.7422 9.2578 5.3594 13.066l-33.188 92.016-45.043 7.9414c-26.055 4.6094-44.391 27.234-44.391 52.836 0 3.0977 0.26953 6.2383 0.82422 9.3828l29.547 167.56c4.6016 26.051 27.227 44.383 52.828 44.383zm63.418-412.17c1.1562-0.20312 2.2969-0.30469 3.418-0.30469 9.2617 0 17.527 6.6602 19.18 16.125 0.20312 1.1562 0.29688 2.293 0.29688 3.418 0 9.2578-6.6602 17.527-16.125 19.18-1.1523 0.20312-2.293 0.29688-3.418 0.29688-9.2617 0-17.527-6.6641-19.18-16.125-0.20312-1.1562-0.29688-2.2969-0.29688-3.418 0-9.2539 6.6602-17.52 16.125-19.172zm-13.02 48.125c4.8906 2.7812 10.504 4.3438 16.375 4.3438 1.9141 0 3.8594-0.16406 5.8047-0.50781 7.1602-1.2695 13.371-4.7422 18.07-9.5859l52.945 63.465-121.76 21.469zm-119.86 142.71c0-19 13.645-35.895 33.027-39.297l47.93-8.4531c0.64453-0.019531 1.2734-0.13672 1.8789-0.33203l143.45-25.293c0.63281-0.023438 1.2656-0.12891 1.8789-0.33203l50.371-8.8789c2.3594-0.41797 4.6914-0.61719 6.9961-0.61719 19 0 35.895 13.641 39.297 33.027l29.547 167.56c0.41797 2.3555 0.61719 4.6914 0.61719 6.9961 0 19-13.645 35.895-33.027 39.297l-245.5 43.289c-2.3555 0.41797-4.6914 0.61719-6.9961 0.61719-19 0-35.895-13.645-39.297-33.027l-29.547-167.56c-0.42578-2.3555-0.625-4.6914-0.625-6.9961z"/>
+  <path d="m304.12 441.68c5.8359 35.73 36.703 61.125 71.801 61.125 3.8945 0 7.832-0.3125 11.789-0.95703h0.003906c35.738-5.8359 61.129-36.707 61.129-71.801 0-3.8945-0.3125-7.832-0.95703-11.789-5.8359-35.738-36.703-61.129-71.801-61.129-3.8945 0-7.832 0.3125-11.793 0.95703-35.73 5.8359-61.125 36.703-61.125 71.801-0.003907 3.8906 0.30859 7.832 0.95312 11.793zm81.379 46.598c-3.2266 0.52734-6.4258 0.77734-9.582 0.77734-28.418 0-53.523-20.602-58.227-49.59-0.52734-3.2266-0.77734-6.4258-0.77734-9.582 0-10.23 2.7031-20.012 7.4727-28.586l95.168 68.504c-8.6562 9.4844-20.406 16.262-34.055 18.477zm-19-116.62c3.2266-0.52734 6.4219-0.78125 9.582-0.78125 28.418 0 53.523 20.605 58.227 49.594 0.52734 3.2266 0.77734 6.4219 0.77734 9.5742 0 10.238-2.707 20.031-7.4883 28.609l-95.164-68.504c8.6562-9.4883 20.41-16.273 34.066-18.492z"/>
+ </g>
+</svg>

styles/globals.css

@@ -370,6 +370,7 @@ input:focus-visible {
   outline: none;
   color: #000;
   width: auto;
+  padding: 0;
 }
 .collections-item {
   margin-bottom: 2rem;
@@ -590,6 +591,34 @@ input:focus-visible {
 .homeBannerSwiper{
   margin-top: 3.7rem;
 }
+.filter-btn {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: #fff;
+  padding: 10px 14px;
+  cursor: pointer;
+  gap: 12px;
+}
+
+.filter-text {
+  /* font-size: 28px;
+  font-weight: 500;
+  color: #0a2540; */
+}
+
+.filter-divider {
+  width: 1px;
+  height: 32px;
+  background-color: #dcdcdc;
+}
+
+.filter-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @media only screen and (max-width: 1023px) {
 }
 /* ===== Mobile ===== */