hey-pharmacist-ecommerce 1.1.11 → 1.1.12

package/src/screens/ShopScreen.tsx

@@ -10,6 +10,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import {
   ArrowUpDown,
   ChevronDown,
+  ChevronUp,
   Clock,
   LayoutGrid,
   LayoutList,
@@ -20,12 +21,21 @@ import {
   Sparkles,
   TrendingUp,
   X,
+  ShoppingBag,
+  Shirt,
+  Pill,
+  Box,
+  Heart,
+  Star,
+  Check,
+  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';
-import { ProductCardSkeleton } from '@/components/ui/Skeleton';
+import { ProductCardSkeleton, Skeleton } from '@/components/ui/Skeleton';
 import { EmptyState } from '@/components/EmptyState';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -57,9 +67,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     max: '',
   });
   const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({});
+  const [expandedFilterSections, setExpandedFilterSections] = useState<Record<string, boolean>>({
+    category: true, // Category section starts expanded
+  });
 
   const { products, isLoading, pagination } = useProducts(filters, page, 20);
-  const { categories } = useCategories();
+  const { categories, isLoading: isLoadingCategories } = useCategories();
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
@@ -205,8 +218,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
       items = items.filter((p) => new Date(p.createdAt).getTime() >= thirtyDaysAgo);
     }
+    if (filters.brand) {
+      items = items.filter((p) => p.brand && p.brand.trim().toLowerCase() === filters.brand!.toLowerCase());
+    }
     return items;
-  }, [isLoading, products, filters.tags, filters.newArrivals]);
+  }, [isLoading, products, filters.tags, filters.newArrivals, filters.brand]);
 
   const sortedProducts = useMemo(() => {
     if (isLoading) {
@@ -231,6 +247,17 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
   const displayedProducts = sortedProducts;
 
+  // Extract unique brands from products
+  const availableBrands = useMemo(() => {
+    const brandSet = new Set<string>();
+    products.forEach((product) => {
+      if (product.brand && product.brand.trim()) {
+        brandSet.add(product.brand.trim());
+      }
+    });
+    return Array.from(brandSet).sort();
+  }, [products]);
+
   const quickSearches = useMemo(() => {
     const counts = new Map<string, number>();
     products.forEach((p) => {
@@ -304,6 +331,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     setPage(1);
   }, []);
 
+  const handleClearCategory = useCallback(() => {
+    setFilters((current) => {
+      const { category, subCategory, ...rest } = current as any;
+      return rest;
+    });
+    setPage(1);
+  }, []);
+
   const handleClearFilters = useCallback(() => {
     setFilters({});
     setSearchQuery('');
@@ -373,6 +408,25 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     setPage(1);
   }, []);
 
+  const handleBrandChange = useCallback((brand: string) => {
+    setFilters((current) => {
+      if (current.brand === brand) {
+        const { brand: _, ...rest } = current;
+        return rest;
+      }
+      return { ...current, brand };
+    });
+    setPage(1);
+  }, []);
+
+  const handleRemoveBrand = useCallback(() => {
+    setFilters((current) => {
+      const { brand, ...rest } = current;
+      return rest;
+    });
+    setPage(1);
+  }, []);
+
   const handlePriceRangeSelect = useCallback(
     (value: string) => {
       const range = priceRanges.find((item) => item.value === value);
@@ -466,6 +520,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     maxPrice,
     tags,
     newArrivals,
+    brand: brandFilter,
   } = filters;
 
   const activeFilterChips = useMemo(() => {
@@ -547,6 +602,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       });
     }
 
+    if (brandFilter) {
+      chips.push({
+        key: 'brand',
+        label: `Brand: ${brandFilter}`,
+        onRemove: handleRemoveBrand,
+      });
+    }
+
     return chips;
   }, [
     categories,
@@ -558,12 +621,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     handleRemovePrice,
     handleRemoveSearch,
     handleRemoveTag,
+    handleRemoveBrand,
     inStockOnly,
     maxPrice,
     minPrice,
     searchFilter,
     tags,
     newArrivals,
+    brandFilter,
   ]);
 
   const hasActiveFilters = activeFilterChips.length > 0;
@@ -571,327 +636,443 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
   const isCustomPriceDirty =
     customPrice.min.trim() !== '' || customPrice.max.trim() !== '';
 
+  const toggleFilterSection = useCallback((section: string) => {
+    setExpandedFilterSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  }, []);
+
+  const getCategoryIconForFilter = (categoryName: string) => {
+    const name = categoryName.toLowerCase();
+    if (name.includes('scrub') || name.includes('uniform')) return Shirt;
+    if (name.includes('vitamin') || name.includes('supplement')) return Pill;
+    if (name.includes('medicine') || name.includes('medication')) return Box;
+    if (name.includes('care') || name.includes('personal')) return Heart;
+    return Package;
+  };
+
   const renderFiltersPanel = () => (
     <>
-      <div className="space-y-8">
-        <div className="space-y-8">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900">Refine results</h3>
-              <p className="mt-1 text-sm text-gray-500">
-                Filter by category, price, and availability to find the perfect fit faster.
-              </p>
-            </div>
-            {hasActiveFilters && (
+      <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 */}
               <button
                 type="button"
-                onClick={handleClearFilters}
-                className="text-sm font-semibold text-primary-600 hover:text-primary-700"
+                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'
+                }`}
               >
-                Clear all
+                <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>
               </button>
-            )}
-          </div>
 
-          <div className="space-y-6">
-            <div className="space-y-3">
-              <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">Categories</h4>
-              <div className="space-y-2">
-                {sortedCategories.length === 0 && (
-                  <span className="text-sm text-gray-500">No categories available yet.</span>
-                )}
-                {sortedCategories.map((category) => {
-                  const isCategoryActive = categoryFilter === category.id;
-                  const isExpanded = !!expandedCategories[category.id as string];
-                  return (
-                    <div key={category.id} className="rounded-xl  border-gray-100 bg-white/50">
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => {
-                          // Selecting a category also expands it for quick access to subcategories
-                          if (!isExpanded) toggleCategoryExpand(category.id ?? '');
-                          handleCategoryChange(category.id ?? '');
-                        }}
-                        className={`flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${isCategoryActive
-                            ? 'text-primary-700 bg-primary-50'
-                            : 'text-gray-700 hover:text-primary-700 hover:bg-primary-50/50'
-                          }`}
-                      >
-                        <span className="flex items-center gap-2">
-                          <span className='font-medium'>{category.name}</span>
-                          {category.productCount > 0 && (
-                            <span className={`ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs ${isCategoryActive ? 'text-primary-700' : 'text-gray-500'}`}>
-                              {category.productCount}
-                            </span>
-                          )}
-                        </span>
+              {/* 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.preventDefault();
                             e.stopPropagation();
                             toggleCategoryExpand(category.id ?? '');
                           }}
-                          className="rounded-md p-1 hover:bg-gray-100"
-                          aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                          className="p-1"
                         >
-                          <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180 text-primary-600' : 'rotate-0 text-gray-400'}`} />
+                          <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''} ${isCategoryActive ? 'text-white' : 'text-slate-400'}`} />
                         </button>
-                      </div>
-                      {isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && (
-                        <div className="mt-1  border-gray-100 px-2 pb-2 pl-4">
-                          <div className="divide-y divide-gray-100">
-                            {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 px-2 py-2 text-sm text-start transition ${isSubActive
-                                      ? 'text-primary-700'
-                                      : 'text-gray-600 hover:text-primary-700 '
-                                    }`}
-                                >
-                                  {sub.name}
-                                </button>
-                              );
-                            })}
-                          </div>
-                        </div>
                       )}
-                    </div>
-                  );
-                })}
-              </div>
+                    </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>
+                );
+              })}
             </div>
-          </div>
+          )}
         </div>
 
-        <div className="space-y-4">
-          <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
-            Price
-          </h4>
-          <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-full border px-3 py-1.5 text-sm font-medium transition ${isActive
-                      ? 'border-secondary-600 bg-secondary-600 text-white shadow-lg shadow-secondary-500/30'
-                      : 'border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600'
-                    }`}
-                >
-                  {range.label}
-                </button>
-              );
-            })}
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <Input
-              type="number"
-              min="0"
-              placeholder="Custom min"
-              value={customPrice.min}
-              onChange={(event) =>
-                setCustomPrice((current) => ({ ...current, min: event.target.value }))
-              }
-            />
-            <Input
-              type="number"
-              min="0"
-              placeholder="Custom max"
-              value={customPrice.max}
-              onChange={(event) =>
-                setCustomPrice((current) => ({ ...current, max: event.target.value }))
-              }
-            />
-          </div>
+        {/* Brand Section */}
+        <div className="space-y-3">
           <button
             type="button"
-            onClick={applyCustomPrice}
-            disabled={!isCustomPriceDirty}
-            className="w-full rounded-xl border border-primary-500 bg-primary-500/10 px-4 py-2.5 text-sm font-semibold text-primary-700 transition hover:bg-primary-500/20 disabled:cursor-not-allowed disabled:border-gray-200 disabled:text-gray-400"
+            onClick={() => toggleFilterSection('brand')}
+            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
           >
-            Apply price range
+            <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>
+                  );
+                })
+              )}
+            </div>
+          )}
         </div>
 
+        {/* Availability Section */}
         <div className="space-y-3">
-          <h4 className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
-            Availability
-          </h4>
           <button
             type="button"
-            onClick={handleToggleStock}
-            className={`flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${inStockOnly
-                ? 'border-primary-500 bg-primary-50 text-primary-700'
-                : 'border-gray-200 bg-white text-gray-600 hover:border-primary-300 hover:text-primary-600'
-              }`}
+            onClick={() => toggleFilterSection('availability')}
+            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
           >
-            <span>In stock only</span>
-            <Sparkles className="h-4 w-4 text-primary-500" />
+            <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">
+              <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'
+                }`}
+              >
+                <span>In stock only</span>
+                {inStockOnly && <Check className="h-4 w-4 text-primary-600" />}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Price Range Section */}
+        <div className="space-y-3">
           <button
             type="button"
-            onClick={handleToggleNewArrivals}
-            className={`mt-2 flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${newArrivals
-                ? 'border-secondary-500 bg-secondary-50 text-secondary-700'
-                : 'border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600'
-              }`}
+            onClick={() => toggleFilterSection('price')}
+            className="flex w-full items-center justify-between text-sm font-medium text-slate-600"
           >
-            <span>New arrivals (last 30 days)</span>
-            <Sparkles className="h-4 w-4 text-secondary-500" />
+            <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>
+              <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"
+              >
+                Apply
+              </button>
+            </div>
+          )}
         </div>
+
       </div>
     </>
   );
 
+  // Get first 5 categories for the category section (6 total with "All Products")
+  const displayCategories = useMemo(() => {
+    return topCategories.slice(0, 5);
+  }, [topCategories]);
+
+  // Map category names to icons
+  const getCategoryIcon = (categoryName: string) => {
+    const name = categoryName.toLowerCase();
+    if (name.includes('scrub') || name.includes('uniform')) return Shirt;
+    if (name.includes('vitamin') || name.includes('supplement')) return Pill;
+    if (name.includes('medicine') || name.includes('medication')) return Box;
+    if (name.includes('care') || name.includes('personal')) return Heart;
+    return Package;
+  };
+
   return (
-    <div className="min-h-screen bg-slate-50">
-      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
-        <div
-          className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]"
-          aria-hidden="true"
-        />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_rgba(94,234,212,0.35),_transparent_55%)] opacity-60" />
-        <div className="relative container mx-auto px-4 py-24">
+    <div className="min-h-screen bg-[#F9FAFB]">
+      {/* Header Section */}
+      <section className="relative overflow-hidden bg-[#E6EBF0] py-16 md:py-24">
+        <div className="container mx-auto px-4">
           <motion.div
             initial={{ opacity: 0, y: 24 }}
             animate={{ opacity: 1, y: 0 }}
-            className="max-w-3xl space-y-8 text-center md:mx-auto md:text-left"
+            className="max-w-4xl mx-auto space-y-6 text-center"
           >
-            <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold tracking-wide text-white/80 backdrop-blur">
-              <Sparkles className="h-4 w-4" />
-              Wellness products, curated for you
-            </span>
-            <h1 className="text-4xl font-bold leading-tight md:text-6xl">
-              Find pharmacy favorites crafted to keep your family thriving
+            {/* Orange icon and badge */}
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <Star className="h-5 w-5 text-orange-500 fill-orange-500" />
+              <span className="text-sm font-semibold uppercase tracking-wider text-orange-500">
+                COMPLETE PHARMACY SHOP
+              </span>
+            </div>
+
+            {/* Main Title */}
+            <h1 className="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
+              Medical Supplies & Wellness Products
             </h1>
-            <p className="text-lg text-white/80 md:text-xl">
-              Explore a modern storefront with real-time inventory, smart filters, and rich
-              product details designed to make healthier choices easier.
+
+            {/* Description */}
+            <p className="text-base md:text-lg text-slate-600 max-w-2xl mx-auto">
+              From professional scrubs to vitamins, medicines to personal care - everything you need for health and wellness.
             </p>
+
+            {/* Search Bar */}
             <form
               onSubmit={handleSearch}
-              className="mx-auto max-w-2xl md:mx-0"
+              className="max-w-2xl mx-auto mt-8"
             >
               <div className="relative w-full">
+                <Search className="absolute left-5 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 pointer-events-none" />
                 <input
                   type="search"
-                  placeholder="Search for products, categories, or symptoms..."
+                  placeholder="Search for products, brands, or categories..."
                   value={searchQuery}
                   onChange={handleInputChange}
                   onKeyDown={handleKeyDown}
-                  className="flex h-12 w-full rounded-xl border border-white/20 bg-white/10 px-4 py-2 pr-14 text-lg text-white placeholder-white/60 shadow-2xl shadow-primary-900/20 backdrop-blur focus:border-white/30 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:opacity-50"
+                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
                   disabled={isSearching}
                 />
-                <button
-                  type="submit"
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-xl bg-white/20 p-3 text-white transition hover:bg-white/30 disabled:opacity-50"
-                  disabled={!searchQuery.trim() || isSearching}
-                >
-                  {isSearching ? (
-                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
-                  ) : (
-                    <Search className="h-5 w-5" />
-                  )}
-                </button>
               </div>
             </form>
           </motion.div>
+        </div>
+      </section>
 
-          <motion.div
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.15 }}
-            className="mt-12 flex flex-col gap-6 rounded-3xl border border-white/20 bg-white/10 p-6 backdrop-blur md:flex-row md:items-center md:justify-between"
-          >
-            <div className="space-y-3">
-              <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
-                Explore popular searches
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {quickSearches.map((term) => (
-                  <button
-                    key={term}
-                    type="button"
-                    onClick={() => handleQuickSearch(term)}
-                    className="rounded-full border border-white/30 bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:border-white/50 hover:bg-white/20"
+      {/* 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">
+            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"
                   >
-                    {term}
-                  </button>
+                    <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>
                 ))}
-              </div>
-            </div>
-            {topCategories.length > 0 && (
-              <div className="space-y-3 md:text-right">
-                <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
-                  Trending categories
-                </p>
-                <div className="flex flex-wrap justify-start gap-2 md:justify-end">
-                  {topCategories.map((category) => (
-                    <button
-                      key={category.id}
-                      type="button"
-                      onClick={() => handleCategoryChange(category.id ?? '')}
-                      className="rounded-full bg-white/15 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-white/25"
-                    >
-                      {category.name}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-          </motion.div>
-
-          <div className="mt-10 grid gap-4 md:grid-cols-3">
-            {insightCards.map((card, index) => {
-              const Icon = card.icon;
-              return (
-                <motion.div
-                  key={card.id}
+              </>
+            ) : (
+              <>
+                {/* All Products Card */}
+                <motion.button
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.2 + index * 0.05 }}
-                  className={`rounded-2xl border p-5 backdrop-blur ${card.id === 'new' && newArrivals
-                      ? 'border-white/40 bg-white/25 ring-2 ring-white/30'
-                      : 'border-white/20 bg-white/15'
-                    } ${card.id === 'new' ? 'cursor-pointer hover:bg-white/20' : ''}`}
-                  onClick={card.id === 'new' ? handleToggleNewArrivals : undefined}
-                  role={card.id === 'new' ? 'button' : undefined}
-                  aria-pressed={card.id === 'new' ? (newArrivals ? 'true' : 'false') : undefined}
-                  title={card.id === 'new' ? (newArrivals ? 'Filter active: showing products from the last 30 days' : 'Click to filter products from the last 30 days') : undefined}
+                  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'
+                  }`}
                 >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/60">
-                        {card.label}
+                  <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'
+                      }`}
+                    >
+                      <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'
+                      }`}>
+                        {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>
-                      <p className="mt-2 text-3xl font-semibold text-white">{card.value}</p>
-                    </div>
-                    <span className="rounded-full bg-white/20 p-3 text-white">
-                      <Icon className="h-5 w-5" />
-                    </span>
-                  </div>
-                  <p className="mt-3 text-sm text-white/70">{card.helper}</p>
-                </motion.div>
-              );
-            })}
+                    </motion.button>
+                  );
+                })}
+              </>
+            )}
           </div>
         </div>
       </section>
 
-      <div className="relative z-10 -mt-12 pb-16">
+      <div className="relative z-10  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-3xl border border-gray-100 bg-white p-6 shadow-xl shadow-gray-200/40">
+              <div className="sticky top-24 rounded-lg bg-white p-6">
                 {renderFiltersPanel()}
               </div>
             </aside>
@@ -900,10 +1081,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
               <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
                 <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                   <div>
-                    <h2 className="text-2xl font-bold text-gray-900">All products</h2>
-                    <p className="mt-1 text-sm text-gray-500">
-                      Browse a pharmacy-grade catalogue with smart merchandising and modern UI.
-                    </p>
+                    <h2 className="text-base font-medium text-gray-700">
+                      {isLoading
+                        ? 'Loading products...'
+                        : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`}
+                    </h2>
                   </div>
                   <div className="flex flex-col gap-3 md:flex-row md:items-center">
                     <div className="relative">
@@ -991,29 +1173,18 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 )}
               </div>
 
-              <div className="rounded-3xl border border-gray-100 bg-white p-6 shadow-sm">
-                <div className="flex flex-col gap-3 text-sm text-gray-600 md:flex-row md:items-center md:justify-between">
-                  <span>
-                    {isLoading
-                      ? 'Loading products...'
-                      : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`}
-                  </span>
-                  <span className="inline-flex items-center gap-2 text-gray-400">
-                    <Clock className="h-4 w-4" />
-                    Updated a moment ago
-                  </span>
-                </div>
+              <div >
 
                 <div className="mt-6">
                   {isLoading ? (
-                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                       {Array.from({ length: 6 }).map((_, index) => (
                         <ProductCardSkeleton key={index} />
                       ))}
                     </div>
                   ) : displayedProducts.length > 0 ? (
                     viewMode === 'grid' ? (
-                      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
+                      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                         {displayedProducts.map((product) => (
                           <div key={product.id} className="h-full">
                             <ProductCard