hey-pharmacist-ecommerce 1.1.42 → 1.1.44

package/src/screens/ProductDetailScreen.tsx

@@ -361,7 +361,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
         <div className="max-w-[1400px] mx-auto px-8 md:px-12">
           <button
             onClick={() => router.push(buildPath('/shop'))}
-            className="flex items-center gap-2 font-['Poppins',sans-serif] text-[13px] text-hmuted hover:text-hprimary transition-colors"
+            className="flex items-center gap-2 text-[13px] text-hmuted hover:text-hprimary transition-colors"
           >
             <ChevronLeft className="size-4" />
             Back to Shop
@@ -405,22 +405,22 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                       <div className="absolute top-6 left-6 flex flex-col gap-3">
                         {discount > 0 && (
-                          <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
+                          <div className="bg-hsecondary text-white rounded-full px-4 py-2">
+                            <span className="font-bold text-[12px] uppercase tracking-wide">
                               Save {discount}%
                             </span>
                           </div>
                         )}
                         {/* {product.bestseller && (
                           <div className="bg-hsecondary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               Bestseller
                             </span>
                           </div>
                         )}
                         {product.newArrival && (
                           <div className="bg-hprimary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               New Arrival
                             </span>
                           </div>
@@ -461,10 +461,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <aside className="space-y-6 lg:sticky lg:top-24">
                 {/* Category Path */}
                 <div className="mb-4">
-                  <p className="font-['Poppins',sans-serif] text-[12px] text-hprimary uppercase tracking-wide font-medium mb-2">
+                  <p className="text-[12px] text-hprimary uppercase tracking-wide font-medium mb-2">
                     {product.brand} • {product.categoryIds?.[0]?.name || 'Uncategorized'}
                   </p>
-                  <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-1.5px] mb-3">
+                  <h1 className="text-3xl font-semibold text-hsecondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
                   </h1>
                   {/* Rating */}
@@ -474,28 +474,28 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         <Star
                           key={i}
                           className={`size-4 ${i < Math.floor(reviewStats.averageRating)
-                            ? 'text-[#E67E50] fill-[#E67E50]'
+                            ? 'text-haccent-500 fill-haccent-500'
                             : 'text-gray-300'
                             }`}
                         />
                       ))}
                     </div>
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                    <span className="text-[14px] text-hmuted">
                       {reviewStats.averageRating} ({reviewStats.reviewCount} {reviewStats.reviewCount === 1 ? 'review' : 'reviews'})
                     </span>
                   </div>
                   {selectedVariant && (
                     <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
-                      <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
+                      <span className="font-bold text-[40px] text-hsecondary">
                         ${variantPrice.toFixed(2)}
                       </span>
                       {variantComparePrice && variantComparePrice > variantPrice && (
                         <>
-                          <span className="font-['Poppins',sans-serif] text-[24px] text-hmuted line-through">
+                          <span className="text-[24px] text-hmuted line-through">
                             ${variantComparePrice.toFixed(2)}
                           </span>
-                          <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
+                          <div className="px-3 py-1 rounded-full bg-hsecondary/10">
+                            <span className="font-semibold text-[13px] text-hsecondary">
                               Save ${formatPrice(variantComparePrice - variantPrice)}
                             </span>
                           </div>
@@ -510,28 +510,28 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ? (
                           <>
                             <div className="size-3 rounded-full bg-red-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium">
+                            <span className="text-[13px] text-red-600 font-medium">
                               Out of Stock
                             </span>
                           </>
                         ) : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK || selectedVariant.inventoryCount <= 10 ? (
                           <>
                             <div className="size-3 rounded-full bg-hprimary animate-pulse" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-hprimary font-medium">
+                            <span className="text-[13px] text-hprimary font-medium">
                               Only {selectedVariant.inventoryCount} left in stock - Order soon!
                             </span>
                           </>
                         ) : (
                           <>
                             <div className="size-3 rounded-full bg-green-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
+                            <span className="text-[13px] text-green-600 font-medium">
                               In Stock
                             </span>
                           </>
                         )}
 
                       </div>
-                      <p className="font-['Poppins',sans-serif] text-[12px] text-hmuted">
+                      <p className="text-[12px] text-hmuted">
                         SKU: {selectedVariant?.sku || product?.sku}
                       </p>
                     </div>
@@ -540,7 +540,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Description */}
                   {product.description && (
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
                   )}
@@ -548,7 +548,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Variant Selector with Images */}
                   {product?.variants && product.variants.length > 0 && (
                     <div className="mb-6">
-                      <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary mb-3">
+                      <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                         Select Variant
                       </h3>
                       <div className="flex flex-wrap gap-3">
@@ -598,7 +598,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   {/* Quantity Selector */}
                   <div className="mb-8">
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary mb-3">
+                    <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                       Quantity
                     </h3>
                     <div className="flex items-center gap-3">
@@ -608,18 +608,18 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           type="button"
                           onClick={() => setQuantity((current) => Math.max(1, current - 1))}
 
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors"
                           aria-label="Increase quantity"
                         >
                           -
                         </button>
-                        <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-hsecondary min-w-[30px] text-center">
+                        <span className="font-semibold text-[16px] text-hsecondary min-w-[30px] text-center">
                           {quantity}
                         </span>
                         <button
                           onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
                           disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)}
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
                         >
                           +
                         </button>
@@ -635,7 +635,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Action Buttons */}
                   <div className="flex flex-col sm:flex-row gap-3 mb-8">
                     <button
-                      className="flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="flex-1 font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={handleAddToCart}
                       disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK || isAddingToCart}
                     >
@@ -675,10 +675,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Truck className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Free Shipping
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         On all orders
                       </p>
                     </div>
@@ -688,10 +688,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <RotateCcw className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Easy Returns
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         30-day return policy
                       </p>
                     </div>
@@ -701,10 +701,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Shield className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Secure Checkout
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         Safe & protected
                       </p>
                     </div>
@@ -714,10 +714,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Package className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Quality Guaranteed
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         Premium materials
                       </p>
                     </div>
@@ -734,7 +734,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
-                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
+                    className={`font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
                       ? 'text-hprimary border-b-2 border-hprimary -mb-0.5'
                       : 'text-hmuted hover:text-hprimary'
                       }`}
@@ -747,29 +747,29 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <div className="bg-white rounded-[24px] p-8 border-2 border-gray-100">
                 {activeTab === 'description' && (
                   <div>
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-4">
+                    <h3 className="font-semibold text-hsecondary mb-4">
                       Product Description
                     </h3>
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
 
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Last updated:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                      <p className="text-[14px] text-hmuted">
                         {lastUpdatedLabel}
                       </p>
                     </div>
 
                     {/* shipped from */}
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Shipped from:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                      <p className="text-[14px] text-hmuted">
                         Local pharmacy distribution center
                       </p>
                     </div>
@@ -786,7 +786,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
             {/* Related Products */}
             {relatedProducts.length > 0 && (
               <div>
-                <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-8 text-2xl">
+                <h2 className="font-semibold text-hsecondary mb-8 text-2xl">
                   You May Also Like
                 </h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

package/src/screens/SearchResultsScreen.tsx

@@ -112,34 +112,30 @@ export default function SearchPage() {
                 return;
             }
 
+            // Require at least 2 characters for search
+            if (sanitizedQuery.length < 2) {
+                setProducts([]);
+                setIsLoading(false);
+                setHasSearched(false);
+                return;
+            }
+
             try {
                 setIsLoading(true);
                 const api = new ProductsApi(AXIOS_CONFIG);
 
-                // Search for products using getAllProducts
-                let response = await api.getAllProducts(
-                    sanitizedQuery, // searchTerm
-                    undefined, // maxPrice
-                    undefined, // minPrice
-                    undefined, // brandFilter
-                    undefined, // availability
-                    'relevance', // sort
-                    undefined, // subCategoryId
-                    undefined, // categoryId
-                    true, // isActive
-                    20, // limit
-                    1 // page
-                );
-
-                console.log('Search API Response:', {
+                // Use AI-powered smart search for typo tolerance and semantic matching
+                const response = await api.smartSearch(sanitizedQuery, 20);
+
+                console.log('Smart Search API Response:', {
                     query: sanitizedQuery,
                     status: response.status,
-                    dataLength: response.data?.data?.length,
-                    totalItems: response.data?.totalItems
+                    productsCount: response.data?.products?.length,
+                    scores: response.data?.scores
                 });
 
-                if (response.data?.data) {
-                    const transformedProducts = response.data.data.map((item: Product) => ({
+                if (response.data?.products) {
+                    const transformedProducts = response.data.products.map((item: Product) => ({
                         ...item,
                         id: item._id || '',
                     }));
@@ -155,7 +151,7 @@ export default function SearchPage() {
                 }
                 setHasSearched(true);
             } catch (error) {
-                console.error('Error fetching search results:', error);
+                console.error('Error fetching smart search results:', error);
                 if (error instanceof Error) {
                     console.error('Error details:', error.message);
                 }

package/src/screens/ShopScreen.tsx

@@ -151,68 +151,6 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
     [categories]
   );
 
-  const productInsights = useMemo(() => {
-    if (!products.length) {
-      return { newArrivals: 0, inStockCount: 0 };
-    }
-
-    const monthAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
-    let newArrivals = 0;
-    let inStockCount = 0;
-
-    products.forEach((product) => {
-      if (product.summary?.totalInventory > 0) inStockCount += 1;
-      if (new Date(product.createdAt).getTime() >= monthAgo) newArrivals += 1;
-    });
-
-    return { newArrivals, inStockCount };
-  }, [products]);
-  const insightCards = useMemo(
-    () => [
-      {
-        id: 'new',
-        label: 'New arrivals',
-        value: productInsights.newArrivals
-          ? productInsights.newArrivals.toLocaleString()
-          : isLoading
-            ? '...'
-            : '0',
-        helper: filters.newArrivals ? 'Filter active: showing last 30 days' : 'Click to show last 30 days',
-        icon: Sparkles,
-      },
-      {
-        id: 'stock',
-        label: 'Available now',
-        value: productInsights.inStockCount
-          ? productInsights.inStockCount.toLocaleString()
-          : isLoading
-            ? '...'
-            : '0',
-        helper: 'Ready to ship today',
-        icon: ShieldCheck,
-      },
-      {
-        id: 'catalogue',
-        label: 'Total products',
-        value:
-          pagination.total || products.length
-            ? (pagination.total || products.length).toLocaleString()
-            : isLoading
-              ? '...'
-              : '0',
-        helper: 'Across all categories',
-        icon: TrendingUp,
-      },
-    ],
-    [
-      isLoading,
-      pagination.total,
-      productInsights.inStockCount,
-      productInsights.newArrivals,
-      products.length,
-      filters.newArrivals,
-    ]
-  );
 
   const filteredProducts = useMemo(() => {
     if (isLoading) return products;
@@ -664,12 +602,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
         <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-hsecondary">
+            <h3 className="font-semibold text-hsecondary">
               Filters
             </h3>
             {/* Search */}
             <div className="mb-6">
-              <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted mb-2 block font-medium">
+              <label className="text-[12px] text-hmuted mb-2 block font-medium">
                 Search Products
               </label>
               <div className="relative">
@@ -679,7 +617,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   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-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                 />
               </div>
             </div>
@@ -690,7 +628,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('category')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Category
                 </label>
                 {expandedFilterSections.category ? (
@@ -713,7 +651,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           if (!isExpanded) toggleCategoryExpand(categoryId);
                           handleCategoryChange(categoryId);
                         }}
-                        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
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
                           ? 'bg-hprimary text-white shadow-lg'
                           : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
@@ -733,7 +671,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('brand')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Brand
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
@@ -748,7 +686,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       <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
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all ${isSelected
                           ? 'bg-hprimary text-white shadow-lg'
                           : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
@@ -769,7 +707,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('availability')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Availability
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
@@ -778,7 +716,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 <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
+                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${inStockOnly
                       ? 'bg-hprimary text-white shadow-lg'
                       : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                       }`}
@@ -794,7 +732,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('price')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Price Range
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
@@ -809,7 +747,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           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
+                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${isActive
                             ? 'bg-hprimary text-white shadow-lg'
                             : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                             }`}
@@ -828,7 +766,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       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-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                     <Input
                       type="number"
@@ -838,7 +776,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       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-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                   </div>
                   <button
@@ -926,9 +864,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       </section>
 
       {/* Shop by Category Section */}
-      <section className="py-8 bg-white">
+      <section className="py-8 bg-white/50">
         <div className="container mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6">
+          <h2 className="text-2xl md:text-3xl font-semibold text-hsecondary mb-6">
             Shop by Category
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
@@ -948,11 +886,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   <Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-hprimary'
                     }`} />
                 </div>
-                <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
+                <h3 className={`font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
                   }`}>
                   All Products
                 </h3>
-                <p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
+                <p className={`text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
                   }`}>
                   Browse Everything
                 </p>
@@ -983,11 +921,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-hprimary'
                         }`} />
                     </div>
-                    <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
+                    <h3 className={`font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
                       }`}>
                       {category.name}
                     </h3>
-                    <p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
+                    <p className={`text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
                       }`}>
                       {category.description}
                     </p>
@@ -1177,7 +1115,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                     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-hsecondary 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"
+                                  className="w-full font-medium text-sm px-3 py-2 rounded-xl bg-hsecondary 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>