hey-pharmacist-ecommerce 1.1.12 → 1.1.14

package/src/screens/ShopScreen.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, {
+import {
   useCallback,
   useEffect,
   useMemo,
@@ -31,7 +31,6 @@ import {
   Tag,
   DollarSign,
 } from 'lucide-react';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useBasePath } from '@/providers/BasePathProvider';
 import { ProductCard } from '@/components/ProductCard';
@@ -42,6 +41,8 @@ import { Input } from '@/components/ui/Input';
 import { useProducts, useCategories } from '@/hooks/useProducts';
 import { ProductFilters } from '@/lib/types';
 import { formatPrice } from '@/lib/utils/format';
+import Image from 'next/image';
+import React from 'react';
 
 type SortOption = 'featured' | 'price-low-high' | 'price-high-low' | 'newest';
 type ViewMode = 'grid' | 'list';
@@ -655,268 +656,200 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
   const renderFiltersPanel = () => (
     <>
       <div className="space-y-6">
-        {/* Filters Title */}
-        <h3 className="text-lg font-bold text-slate-900">Filters</h3>
-
-        {/* Search Products */}
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-slate-600">Search Products</label>
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchQuery}
-              onChange={handleInputChange}
-              className="w-full rounded-lg border border-slate-200 bg-white pl-10 pr-4 py-2 text-sm text-slate-900 placeholder-slate-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
-            />
-          </div>
-        </div>
 
-        {/* Category Section */}
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={() => toggleFilterSection('category')}
-            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
-          >
-            <span>Category</span>
-            {expandedFilterSections.category ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-          </button>
-
-          {expandedFilterSections.category && (
-            <div className="space-y-2">
-              {/* All Products Option */}
+        <div className={`lg:w-72 ${showFilters ? 'block rounded-full' : 'hidden lg:block'}`}>
+          <div className="bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24">
+            <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary">
+              Filters
+            </h3>
+            {/* Search */}
+            <div className="mb-6">
+              <label className="font-['Poppins',sans-serif] text-[12px] text-muted mb-2 block font-medium">
+                Search Products
+              </label>
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={handleInputChange}
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                />
+              </div>
+            </div>
+
+            {/* Category Filter */}
+            <div className="mb-6">
               <button
-                type="button"
-                onClick={handleClearCategory}
-                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${
-                  !categoryFilter
-                    ? 'bg-primary-600 text-white'
-                    : 'bg-white text-slate-700 border border-slate-200 hover:border-primary-300'
-                }`}
+                onClick={() => toggleFilterSection('category')}
+                className="w-full flex items-center justify-between mb-3"
               >
-                <div className={`flex h-6 w-6 items-center justify-center rounded ${!categoryFilter ? 'bg-white/20' : 'bg-slate-100'}`}>
-                  {!categoryFilter ? (
-                    <Check className="h-4 w-4 text-white" />
-                  ) : (
-                    <ShoppingBag className="h-4 w-4 text-slate-600" />
-                  )}
-                </div>
-                <span>All Products</span>
+                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                  Category
+                </label>
+                {expandedFilterSections.category ? (
+                  <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
+                ) : (
+                  <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
+                )}
               </button>
-
-              {/* Category Options */}
-              {sortedCategories.map((category) => {
-                const isCategoryActive = categoryFilter === category.id;
-                const isExpanded = !!expandedCategories[category.id as string];
-                const Icon = getCategoryIconForFilter(category.name ?? '');
-                return (
-                  <div key={category.id} className="space-y-1">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (!isExpanded) toggleCategoryExpand(category.id ?? '');
-                        handleCategoryChange(category.id ?? '');
-                      }}
-                      className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${
-                        isCategoryActive
-                          ? 'bg-primary-600 text-white'
-                          : 'bg-white text-slate-700 border border-slate-200 hover:border-primary-300'
-                      }`}
-                    >
-                      <div className={`flex h-6 w-6 items-center justify-center rounded ${isCategoryActive ? 'bg-white/20' : 'bg-slate-100'}`}>
-                        <Icon className={`h-4 w-4 ${isCategoryActive ? 'text-white' : 'text-slate-600'}`} />
-                      </div>
-                      <span className="flex-1 text-left">{category.name}</span>
-                      {Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && (
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            toggleCategoryExpand(category.id ?? '');
-                          }}
-                          className="p-1"
-                        >
-                          <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''} ${isCategoryActive ? 'text-white' : 'text-slate-400'}`} />
-                        </button>
-                      )}
-                    </button>
-                    {isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && (
-                      <div className="ml-9 space-y-1">
-                        {category.categorySubCategories.map((sub) => {
-                          const isSubActive = subCategoryFilter === sub.id;
-                          return (
-                            <button
-                              key={sub.id}
-                              type="button"
-                              onClick={() => handleSubCategoryChange(category.id ?? '', sub.id)}
-                              className={`block w-full rounded-lg px-3 py-2 text-sm text-left transition ${
-                                isSubActive
-                                  ? 'bg-primary-50 text-primary-700 font-medium'
-                                  : 'text-slate-600 hover:bg-slate-50'
-                              }`}
-                            >
-                              {sub.name}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
+              {expandedFilterSections.category && (
+                <div className="space-y-2">
+                  {sortedCategories.map((category) => {
+                    const isCategoryActive = categoryFilter === category.id;
+                    const isExpanded = !!expandedCategories[category.id as string];
+                    const Icon = getCategoryIconForFilter(category.name ?? '');
+                    return (
+                      <button
+                        key={category.id}
+                        onClick={() => {
+                          if (!isExpanded) toggleCategoryExpand(category.id ?? '');
+                          handleCategoryChange(category.id ?? '');
+                        }}
+                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
+                          ? 'bg-primary text-white shadow-lg'
+                          : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                          }`}
+                      >
+                        <Icon className="size-4" />
+                        {category.name}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {/* Brand Section */}
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={() => toggleFilterSection('brand')}
-            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
-          >
-            <span>Brand</span>
-            {expandedFilterSections.brand ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-          </button>
-          {expandedFilterSections.brand && (
-            <div className="space-y-1.5 max-h-64 overflow-y-auto">
-              {availableBrands.length === 0 ? (
-                <div className="text-xs text-slate-500">No brands available</div>
-              ) : (
-                availableBrands.map((brand) => {
-                  const isSelected = brandFilter === brand;
-                  return (
-                    <button
-                      key={brand}
-                      type="button"
-                      onClick={() => handleBrandChange(brand)}
-                      className={`flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-xs font-medium transition ${
-                        isSelected
-                          ? 'border-primary-500 bg-primary-50 text-primary-700'
-                          : 'border-slate-200 bg-white text-slate-600 hover:border-primary-300'
-                      }`}
-                    >
-                      <span className="truncate">{brand}</span>
-                      {isSelected && <Check className="h-3 w-3 text-primary-600 flex-shrink-0 ml-2" />}
-                    </button>
-                  );
-                })
+            {/* Brand Filter */}
+            <div className="mb-6">
+              <button
+                onClick={() => toggleFilterSection('brand')}
+                className="w-full flex items-center justify-between mb-3"
+              >
+                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                  Brand
+                </label>
+                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
+              </button>
+              {expandedFilterSections.brand && (
+                <div className="space-y-2">
+                  {availableBrands.length === 0 ? (
+                    <div className="text-xs text-slate-500">No brands available</div>
+                  ) : (availableBrands.map((brand) => {
+                    const isSelected = brandFilter === brand;
+                    return (
+                      <button
+                        key={brand}
+                        onClick={() => handleBrandChange(brand)}
+                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all ${isSelected
+                          ? 'bg-primary text-white shadow-lg'
+                          : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                          }`}
+                      >
+                        {brand}
+                      </button>
+                    )
+                  })
+                  )}
+                </div>
               )}
+
             </div>
-          )}
-        </div>
 
-        {/* Availability Section */}
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={() => toggleFilterSection('availability')}
-            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
-          >
-            <span>Availability</span>
-            {expandedFilterSections.availability ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-          </button>
-          {expandedFilterSections.availability && (
-            <div className="space-y-2">
+            {/* In Stock Filter */}
+            <div className="mb-6">
               <button
-                type="button"
-                onClick={handleToggleStock}
-                className={`flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-sm font-medium transition ${
-                  inStockOnly
-                    ? 'border-primary-500 bg-primary-50 text-primary-700'
-                    : 'border-slate-200 bg-white text-slate-600 hover:border-primary-300'
-                }`}
+                onClick={() => toggleFilterSection('availability')}
+                className="w-full flex items-center justify-between mb-3"
               >
-                <span>In stock only</span>
-                {inStockOnly && <Check className="h-4 w-4 text-primary-600" />}
+                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                  Availability
+                </label>
+                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
               </button>
+              {expandedFilterSections.availability && (
+                <div className="space-y-2">
+                  <button
+                    onClick={handleToggleStock}
+                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${inStockOnly
+                      ? 'bg-primary text-white shadow-lg'
+                      : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                      }`}
+                  >
+                    In Stock Only
+                  </button>
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {/* Price Range Section */}
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={() => toggleFilterSection('price')}
-            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
-          >
-            <span>Price Range</span>
-            {expandedFilterSections.price ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-          </button>
-          {expandedFilterSections.price && (
-            <div className="space-y-3">
-              <div className="flex flex-wrap gap-2">
-                {priceRanges.map((range) => {
-                  const isActive = selectedPriceRange === range.value;
-                  return (
-                    <button
-                      type="button"
-                      key={range.value}
-                      onClick={() => handlePriceRangeSelect(range.value)}
-                      className={`rounded-lg border px-3 py-1.5 text-sm font-medium transition ${
-                        isActive
-                          ? 'border-primary-600 bg-primary-600 text-white'
-                          : 'border-slate-200 bg-white text-slate-600 hover:border-primary-300'
-                      }`}
-                    >
-                      {range.label}
-                    </button>
-                  );
-                })}
-              </div>
-              <div className="grid grid-cols-2 gap-2">
-                <Input
-                  type="number"
-                  min="0"
-                  placeholder="Min"
-                  value={customPrice.min}
-                  onChange={(event) =>
-                    setCustomPrice((current) => ({ ...current, min: event.target.value }))
-                  }
-                  className="text-sm"
-                />
-                <Input
-                  type="number"
-                  min="0"
-                  placeholder="Max"
-                  value={customPrice.max}
-                  onChange={(event) =>
-                    setCustomPrice((current) => ({ ...current, max: event.target.value }))
-                  }
-                  className="text-sm"
-                />
-              </div>
+            <div className="mb-6">
               <button
-                type="button"
-                onClick={applyCustomPrice}
-                disabled={!isCustomPriceDirty}
-                className="w-full rounded-lg border border-primary-500 bg-primary-500/10 px-4 py-2 text-sm font-medium text-primary-700 transition hover:bg-primary-500/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
+                onClick={() => toggleFilterSection('price')}
+                className="w-full flex items-center justify-between mb-3"
               >
-                Apply
+                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                  Price Range
+                </label>
+                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
               </button>
+              {expandedFilterSections.price && (
+                <div className="space-y-2">
+                  <div className="flex flex-wrap gap-2">
+                    {priceRanges.map((range) => {
+                      const isActive = selectedPriceRange === range.value;
+                      return (
+                        <button
+                          type="button"
+                          key={range.value}
+                          onClick={() => handlePriceRangeSelect(range.value)}
+                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${isActive
+                            ? 'bg-primary text-white shadow-lg'
+                            : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                            }`}
+                        >
+                          {range.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <Input
+                      type="number"
+                      min="0"
+                      placeholder="Min"
+                      value={customPrice.min}
+                      onChange={(event) =>
+                        setCustomPrice((current) => ({ ...current, min: event.target.value }))
+                      }
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                    />
+                    <Input
+                      type="number"
+                      min="0"
+                      placeholder="Max"
+                      value={customPrice.max}
+                      onChange={(event) =>
+                        setCustomPrice((current) => ({ ...current, max: event.target.value }))
+                      }
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none font-['Poppins',sans-serif] text-[13px] text-secondary"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={applyCustomPrice}
+                    disabled={!isCustomPriceDirty}
+                    className="w-full rounded-lg border border-primary bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
+                  >
+                    Apply
+                  </button>
+                </div>
+              )}
             </div>
-          )}
+          </div>
         </div>
 
+
       </div>
     </>
   );
@@ -939,7 +872,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
   return (
     <div className="min-h-screen bg-[#F9FAFB]">
       {/* Header Section */}
-      <section className="relative overflow-hidden bg-[#E6EBF0] py-16 md:py-24">
+      <section className="relative overflow-hidden bg-primary-bg py-16 md:py-24">
         <div className="container mx-auto px-4">
           <motion.div
             initial={{ opacity: 0, y: 24 }}
@@ -987,92 +920,88 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       </section>
 
       {/* Shop by Category Section */}
-      <section className="bg-white py-8 ">
-        <div className="container mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-8">
+      <section className="py-8 bg-white">
+        <div className="max-w-[1400px] mx-auto px-8 md:px-12">
+          <h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-secondary mb-6">
             Shop by Category
           </h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
-            {isLoadingCategories ? (
-              // Skeleton loaders
-              <>
-                {Array.from({ length: 6 }).map((_, index) => (
-                  <div
-                    key={index}
-                    className="rounded-xl border border-slate-200 bg-white p-8"
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+            {displayCategories.map((category, index) => {
+              const Icon = getCategoryIcon(category.name ?? '');
+              const isSelected = categoryFilter === category.id;
+
+              return (
+                <>
+
+                  <motion.button
+                    onClick={handleClearCategory}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${!categoryFilter ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                      }`}
                   >
-                    <Skeleton className="h-10 w-10 mb-4 rounded-lg" />
-                    <Skeleton className="h-6 w-3/4 mb-2 rounded" />
-                    <Skeleton className="h-4 w-1/2 rounded" />
-                  </div>
-                ))}
-              </>
-            ) : (
-              <>
-                {/* All Products Card */}
-                <motion.button
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  onClick={handleClearCategory}
-                  className={`group relative overflow-hidden rounded-xl p-8 text-left transition ${
-                    !categoryFilter
-                      ? 'bg-gradient-to-b from-primary-500 to-primary-300 text-white shadow-lg scale-105'
-                      : 'border border-slate-200 bg-white hover:border-primary-300 hover:shadow-md'
-                  }`}
-                >
-                  <ShoppingBag className={`h-10 w-10 mb-4 ${!categoryFilter ? 'text-white' : 'text-primary-500'}`} />
-                  <h3 className={`text-xl font-bold mb-2 ${!categoryFilter ? 'text-white' : 'text-slate-900 group-hover:text-primary-600'}`}>
-                    All Products
-                  </h3>
-                  <p className={`text-sm ${!categoryFilter ? 'text-white/90' : 'text-slate-500'}`}>
-                    Browse everything
-                  </p>
-                </motion.button>
-
-                {/* Category Cards */}
-                {displayCategories.map((category, index) => {
-                  const Icon = getCategoryIcon(category.name ?? '');
-                  const isSelected = categoryFilter === category.id;
-                  return (
-                    <motion.button
-                      key={category.id}
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ delay: index * 0.1 }}
-                      onClick={() => handleCategoryChange(category.id ?? '')}
-                      className={`group rounded-xl p-8 text-left transition ${
-                        isSelected
-                          ? 'bg-gradient-to-b from-primary-500 to-primary-300 text-white shadow-lg'
-                          : 'border border-slate-200 bg-white hover:border-primary-300 hover:shadow-md'
+                    <div className="relative">
+                      <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
+                        ? 'bg-white/20'
+                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        }`}>
+                        <Icon className={`size-6 ${!categoryFilter ? 'text-white' : 'text-primary'
+                          }`} />
+                      </div>
+                      <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-secondary'
+                        }`}>
+                        All Products
+                      </h3>
+                      <p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-muted'
+                        }`}>
+                        Browse Everything
+                      </p>
+                    </div>
+                  </motion.button>
+
+
+                  <motion.button
+                    key={category.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    onClick={() => handleCategoryChange(category.id ?? '')}
+                    className={`group relative overflow-hidden rounded-[24px] p-6 transition-all duration-300 ${isSelected ? 'bg-gradient-to-br from-primary to-secondary text-white shadow-xl scale-105'
+                      : 'bg-gradient-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
                       }`}
-                    >
-                      <Icon className={`h-10 w-10 mb-4 ${isSelected ? 'text-white' : 'text-primary-500'}`} />
-                      <h3 className={`text-xl font-bold mb-2 transition-colors ${
-                        isSelected ? 'text-white' : 'text-slate-900 group-hover:text-primary-600'
-                      }`}>
+                  >
+                    <div className="relative">
+                      <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
+                        ? 'bg-white/20'
+                        : 'bg-gradient-to-br from-primary/10 to-secondary/10 group-hover:scale-110'
+                        }`}>
+                        <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-primary'
+                          }`} />
+                      </div>
+                      <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-secondary'
+                        }`}>
                         {category.name}
                       </h3>
-                      <p className={`text-sm ${isSelected ? 'text-white/90' : 'text-slate-500'}`}>
-                        {category.name?.toLowerCase().includes('scrub') ? 'Professional uniforms' :
-                         category.name?.toLowerCase().includes('vitamin') ? 'Health supplements' :
-                         category.name?.toLowerCase().includes('medicine') ? 'OTC medications' :
-                         category.name?.toLowerCase().includes('care') ? 'Daily essentials' :
-                         'Shop now'}
+                      <p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-muted'
+                        }`}>
+                        {category.description}
                       </p>
-                    </motion.button>
-                  );
-                })}
-              </>
-            )}
+                    </div>
+                  </motion.button>
+                </>
+              );
+            })}
           </div>
         </div>
       </section>
 
-      <div className="relative z-10  pb-16 mt-8">
+      <div className="relative pb-16 mt-8">
         <div className="container mx-auto px-4">
           <div className="flex flex-col gap-8 lg:flex-row">
             <aside className="hidden w-72 flex-shrink-0 lg:block">
-              <div className="sticky top-24 rounded-lg bg-white p-6">
+              <div className="sticky top-24 rounded-lg bg-white">
                 {renderFiltersPanel()}
               </div>
             </aside>
@@ -1084,7 +1013,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                     <h2 className="text-base font-medium text-gray-700">
                       {isLoading
                         ? 'Loading products...'
-                        : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`}
+                        : `${displayedProducts.length} products found`}
+
                     </h2>
                   </div>
                   <div className="flex flex-col gap-3 md:flex-row md:items-center">
@@ -1095,7 +1025,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         onChange={(event) => {
                           setSortOption(event.target.value as SortOption);
                         }}
-                        className="appearance-none rounded-xl border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30"
+                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-sm transition focus:outline-none focus:ring-1 focus:ring-secondary focus:border-primary"
                       >
                         <option value="featured">Featured products</option>
                         <option value="price-low-high">Price: low to high</option>
@@ -1104,51 +1034,33 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       </select>
                       <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                     </div>
-                    <div className="flex items-center rounded-xl border border-gray-200 bg-white shadow-sm">
+                    <div className="flex items-center rounded-full border border-gray-200 bg-gray-100 shadow-sm p-1">
                       <button
                         type="button"
                         onClick={() => setViewMode('grid')}
-                        className={`flex items-center gap-2 rounded-l-xl px-4 py-2 text-sm font-medium transition ${viewMode === 'grid'
-                            ? 'bg-primary-50 text-primary-600'
-                            : 'text-gray-500 hover:text-gray-700'
+                        className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'grid'
+                          ? 'bg-white text-primary shadow-md'
+                          : 'text-gray-500 hover:text-gray-700'
                           }`}
                         aria-pressed={viewMode === 'grid'}
                       >
                         <LayoutGrid className="h-4 w-4" />
-                        Grid
                       </button>
                       <button
                         type="button"
                         onClick={() => setViewMode('list')}
-                        className={`flex items-center gap-2 rounded-r-xl px-4 py-2 text-sm font-medium transition ${viewMode === 'list'
-                            ? 'bg-primary-50 text-primary-600'
-                            : 'text-gray-500 hover:text-gray-700'
+                        className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'list'
+                          ? 'bg-white text-primary shadow-md'
+                          : 'text-gray-500 hover:text-gray-700'
                           }`}
                         aria-pressed={viewMode === 'list'}
                       >
                         <LayoutList className="h-4 w-4" />
-                        List
                       </button>
                     </div>
                   </div>
                 </div>
 
-                <div className="mt-4 md:hidden">
-                  <Button
-                    variant="outline"
-                    className="w-full"
-                    onClick={() => setShowFilters(true)}
-                  >
-                    <SlidersHorizontal className="h-5 w-5" />
-                    Filters
-                    {hasActiveFilters && (
-                      <span className="ml-2 rounded-full bg-primary-600 px-2 py-0.5 text-xs font-semibold text-white">
-                        {activeFilterChips.length}
-                      </span>
-                    )}
-                  </Button>
-                </div>
-
                 {hasActiveFilters && (
                   <div className="mt-6 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-4">
                     {activeFilterChips.map((chip) => (
@@ -1243,11 +1155,6 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                 <h3 className="text-xl font-semibold text-gray-900">
                                   {product.name}
                                 </h3>
-                                {/* {product.description && (
-                                  <p className="text-sm leading-relaxed text-gray-600 line-clamp-2">
-                                    {product.description}
-                                  </p>
-                                )} */}
                                 <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
                                   <span className="inline-flex items-center gap-2 font-medium text-primary-600">
                                     <ShieldCheck className="h-4 w-4" />
@@ -1265,21 +1172,21 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                   <p className="text-3xl font-semibold text-gray-900">
                                     {formatPrice(product.finalPrice)}
                                   </p>
-                                  {product.priceBeforeDiscount && (
+                                  {product.isDiscounted && (
                                     <p className="text-sm text-gray-400 line-through">
                                       {formatPrice(product.priceBeforeDiscount)}
                                     </p>
                                   )}
                                 </div>
-                                <Button
-                                  size="sm"
+                                <button
                                   onClick={(event) => {
                                     event.stopPropagation();
                                     router.push(buildPath(`/products/${product._id}`));
                                   }}
+                                  className="w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-secondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
                                 >
                                   View product
-                                </Button>
+                                </button>
                               </div>
                             </motion.div>
                           );
@@ -1325,37 +1232,6 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
           </div>
         </div>
       </div>
-
-      <AnimatePresence>
-        {showFilters && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm lg:hidden"
-          >
-            <motion.div
-              initial={{ y: '100%' }}
-              animate={{ y: 0 }}
-              exit={{ y: '100%' }}
-              transition={{ type: 'spring', stiffness: 260, damping: 26 }}
-              className="absolute inset-x-0 bottom-0 max-h-[85vh] overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl"
-            >
-              <div className="mb-6 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-gray-900">Filters</h3>
-                <button
-                  type="button"
-                  onClick={() => setShowFilters(false)}
-                  className="rounded-full border border-gray-200 p-2 text-gray-500 hover:text-gray-700"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              </div>
-              {renderFiltersPanel()}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 }