feat: small ui changes to product-card & categories-section

starters/shopify-meilisearch/components/category-card.tsx

@@ -1,4 +1,3 @@
-import { ChevronIcon } from "components/icons/chevron-icon"
 import { PlatformCollection } from "lib/shopify/types"
 import Image from "next/image"
 import Link from "next/link"
@@ -11,11 +10,12 @@ interface CategoryCardProps extends Pick<PlatformCollection, "title" | "image" |
 
 export const CategoryCard = ({ handle, image, title, index, className }: CategoryCardProps) => {
   const href = `/category/${handle}`
+
   return (
     <Link href={href} className={cn("group relative overflow-hidden rounded-lg transition-all hover:shadow-md", className)} prefetch={false}>
       <div className="relative aspect-video">
         <Image
-          src={image?.url || `/category-placeholder-${index}.svg`}
+          src={image?.url || `/category-placeholder-${index}.png`}
           alt={image?.altText || `${title} category`}
           className="transition-transform group-hover:scale-105"
           style={{
@@ -26,10 +26,6 @@ export const CategoryCard = ({ handle, image, title, index, className }: Categor
       </div>
       <div className="absolute inset-x-4 top-0">
         <h3 className="ml-3 mt-5 text-xl font-semibold text-black group-hover:text-orange-500">{title}</h3>
-        <span className="inline-flex items-center text-sm font-medium text-white">
-          Shop now
-          <ChevronIcon className="inset-x-4 ml-1 -rotate-90 transition-transform group-hover:translate-x-1" />
-        </span>
       </div>
     </Link>
   )

starters/shopify-meilisearch/components/compact-product-card.tsx

@@ -48,6 +48,7 @@ export const CompactProductCard = ({
       <div className="absolute bottom-0 flex w-full shrink-0 grow translate-y-full flex-col overflow-hidden bg-gradient-to-t from-gray-100 to-transparent p-4 transition-transform group-hover:translate-y-0">
         {/* remove first word from the title as it includes vendor (this just needs feed update and then can be removed) */}
         <h3 className="line-clamp-2 text-lg font-semibold">{title.split(" ").slice(1).join(" ")}</h3>
+        {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
         <div className="mt-auto flex flex-col gap-1">
           {!!vendor && <p className="text-sm text-gray-500">{vendor}</p>}
 
@@ -70,7 +71,6 @@ export const CompactProductCard = ({
               </p>
             )}
           </div>
-          {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
         </div>
       </div>
     </Link>

starters/shopify-meilisearch/components/featured-product-card.tsx

@@ -44,6 +44,7 @@ export const FeaturedProductCard = ({
         <div className="flex flex-col gap-1">
           {/* remove first word from the title as it includes vendor (this just needs feed update and then can be removed) */}
           <h3 className="line-clamp-2 text-lg font-semibold">{title.split(" ").slice(1).join(" ")}</h3>
+          {!!variantPrice && <span className="block sm:hidden">From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
           <div className="mt-auto flex flex-col gap-1">
             {!!vendor && <p className="text-sm text-gray-500">{vendor}</p>}
             <div className="flex items-center gap-1">
@@ -67,7 +68,7 @@ export const FeaturedProductCard = ({
             </div>
           </div>
         </div>
-        {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
+        {!!variantPrice && <span className="hidden sm:block">From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
       </div>
     </Link>
   )

starters/shopify-meilisearch/components/product-card.tsx

@@ -31,6 +31,7 @@ export const ProductCard = ({ variants, handle, title, featuredImage, minPrice,
       <div className="flex shrink-0 grow flex-col py-4">
         {/* remove first word from the title as it includes vendor (this just needs feed update and then can be removed) */}
         <h3 className="line-clamp-2 text-lg font-semibold transition-colors">{title.split(" ").slice(1).join(" ")}</h3>
+        {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
         <div className="flex flex-col gap-1">
           {!!vendor && <p className="text-sm text-gray-500">{vendor}</p>}
           <div className="mt-1 flex flex-wrap items-center gap-1">
@@ -52,7 +53,6 @@ export const ProductCard = ({ variants, handle, title, featuredImage, minPrice,
               </p>
             )}
           </div>
-          {!!variantPrice && <span>From {mapCurrencyToSign((variantPrice.currencyCode as CurrencyType) || "USD") + minPrice.toFixed(2)}</span>}
         </div>
       </div>
     </Link>

starters/shopify-meilisearch/views/listing/hide-filters.tsx

@@ -17,7 +17,7 @@ export const HideFilters = () => {
 
         set("hidden")
       }}
-      className="hidden items-center gap-2 bg-transparent text-base font-thin text-black transition-colors lg:flex"
+      className="hidden items-center gap-2 bg-transparent text-base font-normal text-black transition-colors lg:flex"
     >
       <span>{status === "hidden" ? "Show" : "Hide"} filters</span>
       <FiltersIcon />

starters/shopify-meilisearch/views/listing/sorter.tsx

@@ -37,7 +37,7 @@ export function Sorter({ className }: SorterProps) {
     <div className={className}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <div className="flex cursor-pointer flex-wrap items-center justify-center gap-2 font-thin text-black [&[data-state=open]>svg]:rotate-180">
+          <div className="flex cursor-pointer flex-wrap items-center justify-center gap-2 font-normal text-black [&[data-state=open]>svg]:rotate-180">
             <span>Sort by</span>
             <ChevronIcon />
           </div>

starters/shopify-meilisearch/views/search/search-view.tsx

@@ -65,7 +65,7 @@ export async function SearchView({ searchParams, disabledFacets, collection }: S
 
   return (
     <div className="mx-auto w-full max-w-[1920px] p-4 md:px-12 md:pb-24 md:pt-4">
-      <div className="sticky top-[77px] z-40 flex items-center justify-between bg-white py-4 md:top-[84px] md:-mx-12 md:px-12">
+      <div className="sticky top-[77px] z-40 flex items-center justify-between bg-white py-4 md:top-[83px] md:-mx-12 md:px-12">
         <h1 className="flex items-center gap-1 text-3xl font-semibold tracking-tight lg:text-4xl">
           {makePageTitle(collection, q)}
           <span className="hidden lg:block">({totalHits})</span>