Update UI colors and styling for product pages

Switch primary accent to a warmer brown (#3D1A12) and refine component styling across the products UI. Changes include: header typography and subtitle color in ProductsPage; pagination button/indicator colors and hover states; ProductFilters text, active state and availability checkbox styling; ProductCard background, badges, placeholders, hover overlay and CTA button styles (no behavioral changes); ProductGrid empty-state border/text; ProductToolbar border, view-button states and responsive filter button; SearchBar icon/input colors and placeholder color; SortSelect text and chevron color. These are visual polish updates only—no data or business logic changes.

Co-Authored-By: Lucas <149438171+luksfp@users.noreply.github.com>

Author: naheel0

src/features/products/components/Page/ProductsPage.tsx

@@ -32,11 +32,14 @@ const ProductsPage: React.FC = () => {
   return (
     <div className="min-h-screen bg-[#F6F4F1] px-6 py-12 md:py-24">
       <div className="max-w-7xl mx-auto">
+        {/* Header Section */}
         <div className="mb-20 text-center md:text-left">
-          <h1 className="text-6xl md:text-8xl font-black text-[#111111] tracking-tight">
-            ZAYQ<span className="text-[#8F8F8F]">CASE</span>
+          <h1 className="text-6xl md:text-8xl font-black text-[#3D1A12] tracking-tight">
+            ZAYQ<span className="text-[#3D1A12]/30">CASE</span>
           </h1>
-          <p className="mt-4 text-[#8F8F8F] font-bold uppercase tracking-[0.4em] text-xs">Essential Protection Series</p>
+          <p className="mt-4 text-[#3D1A12]/50 font-bold uppercase tracking-[0.4em] text-xs">
+            Essential Protection Series
+          </p>
         </div>
 
         <ProductToolbar />
@@ -48,8 +51,8 @@ const ProductsPage: React.FC = () => {
           <div className="flex-1">
             {filteredData.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-20 text-center">
-                    <p className="text-xl font-bold text-[#111111]">No cases found</p>
-                    <p className="text-[#8F8F8F]">Try adjusting your filters or search.</p>
+                    <p className="text-xl font-bold text-[#3D1A12]">No cases found</p>
+                    <p className="text-[#3D1A12]/40">Try adjusting your filters or search.</p>
                 </div>
             ) : (
                 <>

src/features/products/components/Pagination/Pagination.tsx

@@ -17,7 +17,7 @@ const Pagination: React.FC = () => {
                     setCurrentPage(Math.max(1, currentPage - 1));
                     window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
-                className="w-14 h-14 flex items-center justify-center rounded-full bg-white border border-[#E6E3DF] text-[#111111] transition-all hover:bg-[#111111] hover:text-white disabled:opacity-20"
+                className="w-14 h-14 flex items-center justify-center rounded-full bg-white border border-[#3D1A12]/10 text-[#3D1A12] transition-all hover:bg-[#3D1A12] hover:text-white disabled:opacity-20"
                 disabled={currentPage === 1}
                 aria-label="left"
             >
@@ -32,7 +32,7 @@ const Pagination: React.FC = () => {
                             setCurrentPage(n);
                             window.scrollTo({ top: 0, behavior: 'smooth' });
                         }}
-                        className={`transition-all duration-500 rounded-full ${n === currentPage ? 'bg-[#111111] w-8 h-2.5' : 'bg-[#E6E3DF] w-2.5 h-2.5'
+                        className={`transition-all duration-500 rounded-full ${n === currentPage ? 'bg-[#3D1A12] w-8 h-2.5' : 'bg-[#3D1A12]/20 w-2.5 h-2.5'
                             }`}
                         aria-label="button"
                     />
@@ -44,7 +44,7 @@ const Pagination: React.FC = () => {
                     setCurrentPage(Math.min(totalPages, currentPage + 1));
                     window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
-                className="w-14 h-14 flex items-center justify-center rounded-full bg-white border border-[#E6E3DF] text-[#111111] transition-all hover:bg-[#111111] hover:text-white disabled:opacity-20"
+                className="w-14 h-14 flex items-center justify-center rounded-full bg-white border border-[#3D1A12]/10 text-[#3D1A12] transition-all hover:bg-[#3D1A12] hover:text-white disabled:opacity-20"
                 disabled={currentPage === totalPages}
                 aria-label="rigth"
             >

src/features/products/components/ProductFilters/ProductFilters.tsx

@@ -1,20 +1,21 @@
 import React from "react";
 import { useProductStore } from "../../../../store/product.store";
+
 const ProductFilters: React.FC = () => {
   const { selectedCategory, setSelectedCategory } = useProductStore();
   const categories = ['All', 'iPhone 15 Pro', 'iPhone 15', 'iPhone 14'];
 
   return (
     <div className="hidden lg:flex flex-col gap-10 w-64 shrink-0 sticky top-12 h-fit">
       <div>
-        <h4 className="text-[10px] font-black uppercase tracking-[0.25em] text-[#8F8F8F] mb-6">Device Model</h4>
+        <h4 className="text-[10px] font-black uppercase tracking-[0.25em] text-[#3D1A12]/50 mb-6">Device Model</h4>
         <div className="flex flex-col gap-3">
           {categories.map(cat => (
             <button
               key={cat}
               onClick={() => setSelectedCategory(cat)}
               className={`text-left text-sm font-bold transition-all ${
-                selectedCategory === cat ? 'text-[#111111] translate-x-2' : 'text-[#8F8F8F] hover:text-[#111111]'
+                selectedCategory === cat ? 'text-[#3D1A12] translate-x-2' : 'text-[#3D1A12]/40 hover:text-[#3D1A12]'
               }`}
             >
               {cat}
@@ -24,13 +25,18 @@ const ProductFilters: React.FC = () => {
       </div>
 
       <div>
-        <h4 className="text-[10px] font-black uppercase tracking-[0.25em] text-[#8F8F8F] mb-6">Availability</h4>
-        <label className="flex items-center gap-3 text-sm font-bold text-[#111111] cursor-pointer">
-          <input type="checkbox" className="w-4 h-4 accent-[#111111] rounded border-[#E6E3DF]" defaultChecked />
+        <h4 className="text-[10px] font-black uppercase tracking-[0.25em] text-[#3D1A12]/50 mb-6">Availability</h4>
+        <label className="flex items-center gap-3 text-sm font-bold text-[#3D1A12] cursor-pointer">
+          <input 
+            type="checkbox" 
+            className="w-4 h-4 accent-[#3D1A12] rounded border-[#3D1A12]/20" 
+            defaultChecked 
+          />
           In Stock Only
         </label>
       </div>
     </div>
   );
 };
+
 export default ProductFilters;

src/features/products/components/ProductGrid/ProductCard.tsx

@@ -8,18 +8,18 @@ const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
     const handleBuyNow = () => {
         if (isComingSoon || isOutOfStock) return;
         const message = encodeURIComponent(`Hi ZAYQ! I'm interested in the ${product.name} (₹${product.price}). Is it in stock?`);
-        window.open(`https://wa.me/917306912910?text=${message}`, '_blank'); // Replace with your WhatsApp number
+        window.open(`https://wa.me/917306912910?text=${message}`, '_blank');
     };
 
     return (
         <div className="flex flex-col group">
-            {/* Image Wrapper */}
-            <div className="relative aspect-4/5 rounded-2xl bg-[#E6E3DF] overflow-hidden transition-all duration-500 group-hover:bg-[#EFECE8]">
+            {/* Image Wrapper - Using a warmer brand-compatible gray */}
+            <div className="relative aspect-4/5 rounded-2xl bg-[#EFEBE9] overflow-hidden transition-all duration-500 group-hover:bg-[#EAE4E1]">
 
                 {/* Status Badge */}
                 {(isComingSoon || isOutOfStock) && (
                     <div className="absolute top-4 left-4 z-20 px-3 py-1 bg-white/90 backdrop-blur-md rounded-full shadow-sm">
-                        <p className="text-[9px] font-black uppercase tracking-widest text-black">
+                        <p className="text-[9px] font-black uppercase tracking-widest text-[#3D1A12]">
                             {isComingSoon ? 'Coming Soon' : 'Sold Out'}
                         </p>
                     </div>
@@ -34,31 +34,31 @@ const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
                             className="w-full h-full object-cover"
                         />
                     ) : (
-                        <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+                        <div className="w-full h-full flex items-center justify-center text-[#3D1A12]/30 text-xs font-medium">
                             No Image Available
                         </div>
                     )}
                 </div>
 
-                {/* Hover Overlay for In-Stock items */}
+                {/* Hover Overlay */}
                 {!isComingSoon && !isOutOfStock && (
-                    <div className="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div className="absolute inset-0 bg-[#3D1A12]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                 )}
             </div>
 
             {/* Details Section */}
             <div className="mt-5 flex flex-col items-center text-center">
-                <h3 className="text-base font-bold text-[#111111] tracking-tight">{product.name}</h3>
-                <p className="text-[#8F8F8F] text-xs font-medium uppercase tracking-wider mt-1">{product.category}</p>
-                <p className="text-[#111111] font-semibold mt-2">₹{product.price.toLocaleString()}</p>
+                <h3 className="text-base font-bold text-[#3D1A12] tracking-tight">{product.name}</h3>
+                <p className="text-[#3D1A12]/50 text-xs font-medium uppercase tracking-wider mt-1">{product.category}</p>
+                <p className="text-[#3D1A12] font-semibold mt-2">₹{product.price.toLocaleString()}</p>
 
                 <button 
                     onClick={handleBuyNow}
                     disabled={isComingSoon || isOutOfStock}
                     className={`mt-4 w-full py-3 text-[10px] font-bold uppercase tracking-[0.2em] rounded-xl transition-all duration-300 
                         ${isComingSoon || isOutOfStock 
-                            ? 'bg-gray-200 text-gray-400 cursor-not-allowed' 
-                            : 'bg-[#111111] text-white hover:bg-black active:scale-95'}`}
+                            ? 'bg-[#3D1A12]/10 text-[#3D1A12]/40 cursor-not-allowed' 
+                            : 'bg-[#3D1A12] text-white hover:opacity-90 active:scale-95 shadow-sm'}`}
                 >
                     {isComingSoon ? 'Coming Soon' : isOutOfStock ? 'Sold Out' : 'Order via WhatsApp'}
                 </button>
@@ -67,4 +67,4 @@ const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
     );
 };
 
-export default ProductCard;
+export default ProductCard;

src/features/products/components/ProductGrid/ProductGrid.tsx

@@ -1,18 +1,21 @@
 import React from "react";
 import type { Product } from "../../../../store/product.store";
 import ProductCard from "./ProductCard";
+
 const ProductGrid: React.FC<{ products: Product[] }> = ({ products }) => {
     if (products.length === 0) {
         return (
-            <div className="flex flex-col items-center justify-center py-40 bg-white/50 rounded-3xl border-2 border-dashed border-[#E6E3DF]">
-                <p className="text-[#8F8F8F] font-medium italic">No cases match your filter.</p>
+            <div className="flex flex-col items-center justify-center py-40 bg-white/50 rounded-3xl border-2 border-dashed border-[#3D1A12]/10">
+                <p className="text-[#3D1A12]/40 font-medium italic">No cases match your filter.</p>
             </div>
         );
     }
+
     return (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-24">
             {products.map(p => <ProductCard key={p.id} product={p} />)}
         </div>
     );
 };
+
 export default ProductGrid;

src/features/products/components/ProductToolbar/ProductToolbar.tsx

@@ -6,23 +6,31 @@ import {
     Menu,
     SlidersHorizontal
 } from "lucide-react";
+
 const ProductToolbar: React.FC = () => {
     return (
-        <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-20 pb-8 border-b border-[#E6E3DF]">
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-20 pb-8 border-b border-[#3D1A12]/10">
             <div className="flex items-center gap-4 w-full md:w-auto">
                 <SearchBar />
-                <button className="p-4 bg-white rounded-2xl text-[#111111] hover:bg-[#EFECE8] transition-colors md:hidden" aria-label="Filter products">
+                <button className="p-4 bg-white rounded-2xl text-[#3D1A12] hover:bg-[#EFEBE9] transition-colors md:hidden" aria-label="Filter products">
                     <SlidersHorizontal size={18} />
                 </button>
             </div>
             <div className="flex items-center gap-4 w-full md:w-auto">
                 <div className="hidden md:flex bg-white p-1 rounded-xl gap-1">
-                    <button className="p-2 bg-[#F6F4F1] rounded-lg text-[#111111]" aria-label="Grid view"><LayoutGrid size={16} /></button>
-                    <button className="p-2 text-[#8F8F8F] hover:text-[#111111]" aria-label="List view"><Menu size={16} /></button>
+                    {/* Active state using a light brown tint */}
+                    <button className="p-2 bg-[#EFEBE9] rounded-lg text-[#3D1A12]" aria-label="Grid view">
+                        <LayoutGrid size={16} />
+                    </button>
+                    {/* Inactive state using muted brown */}
+                    <button className="p-2 text-[#3D1A12]/40 hover:text-[#3D1A12]" aria-label="List view">
+                        <Menu size={16} />
+                    </button>
                 </div>
                 <SortSelect />
             </div>
         </div>
     );
 };
+
 export default ProductToolbar;

src/features/products/components/ProductToolbar/SearchBar.tsx

@@ -1,19 +1,24 @@
 import React from "react";
 import { Search } from "lucide-react";
 import { useProductStore } from "../../../../store/product.store";
+
 const SearchBar: React.FC = () => {
     const { searchQuery, setSearchQuery } = useProductStore();
     return (
         <div className="relative w-full md:w-80 group">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-[#8F8F8F] group-focus-within:text-[#111111] transition-colors" size={16} />
+            <Search 
+                className="absolute left-4 top-1/2 -translate-y-1/2 text-[#3D1A12]/40 group-focus-within:text-[#3D1A12] transition-colors" 
+                size={16} 
+            />
             <input
                 type="text"
                 placeholder="Find your model..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full bg-[#FFFFFF] border-none rounded-2xl py-4 pl-12 pr-6 text-sm focus:ring-1 focus:ring-[#E6E3DF] outline-none transition-all placeholder:text-[#8F8F8F]"
+                className="w-full bg-[#FFFFFF] border-none rounded-2xl py-4 pl-12 pr-6 text-sm focus:ring-1 focus:ring-[#3D1A12]/20 outline-none transition-all placeholder:text-[#3D1A12]/40 text-[#3D1A12]"
             />
         </div>
     );
 };
+
 export default SearchBar;

src/features/products/components/ProductToolbar/SortSelect.tsx

@@ -12,15 +12,15 @@ const SortSelect: React.FC = () => {
                 id="sortSelect"
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value as 'featured' | 'price-asc' | 'price-desc')}
-                className="appearance-none bg-[#FFFFFF] border-none rounded-2xl py-4 pl-6 pr-12 text-xs font-bold uppercase tracking-widest focus:ring-1 focus:ring-[#E6E3DF] outline-none cursor-pointer"
+                className="appearance-none bg-[#FFFFFF] border-none rounded-2xl py-4 pl-6 pr-12 text-xs font-bold uppercase tracking-widest text-[#3D1A12] focus:ring-1 focus:ring-[#3D1A12]/20 outline-none cursor-pointer"
             >
                 <option value="featured">Featured</option>
                 <option value="price-asc">Price: Low</option>
                 <option value="price-desc">Price: High</option>
             </select>
-            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 text-[#8F8F8F] pointer-events-none" size={14} />
+            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 text-[#3D1A12]/40 pointer-events-none" size={14} />
         </div>
     )
 }
 
-export default SortSelect
+export default SortSelect