fix(core): show correct product card info

apps/core/app/(default)/page.tsx

@@ -15,17 +15,18 @@ export default async function Home() {
 
       <div className="my-10">
         <ProductCardCarousel
-          products={bestSellingProducts}
+          products={featuredProducts}
           showCart={false}
           showCompare={false}
-          title="Best Selling Products"
+          showReviews={false}
+          title="Featured products"
         />
-
         <ProductCardCarousel
-          products={featuredProducts}
+          products={bestSellingProducts}
           showCart={false}
           showCompare={false}
-          title="Featured Products"
+          showReviews={false}
+          title="Popular products"
         />
       </div>
     </>

apps/core/app/(default)/product/[slug]/_components/related-products.tsx

@@ -16,5 +16,13 @@ export const RelatedProducts = async ({
     imageHeight: 500,
   });
 
-  return <ProductCardCarousel products={relatedProducts} title="Related Products" />;
+  return (
+    <ProductCardCarousel
+      products={relatedProducts}
+      showCart={false}
+      showCompare={false}
+      showReviews={false}
+      title="Related products"
+    />
+  );
 };

apps/core/app/not-found.tsx

@@ -13,7 +13,11 @@ export const metadata = {
 };
 
 export default async function NotFound() {
-  const featuredProducts = await getFeaturedProducts({ imageHeight: 500, imageWidth: 500 });
+  const featuredProducts = await getFeaturedProducts({
+    imageHeight: 500,
+    imageWidth: 500,
+    first: 4,
+  });
 
   return (
     <>
@@ -36,7 +40,13 @@ export default async function NotFound() {
           <h3 className="mb-8 text-3xl font-black lg:text-4xl">Featured products</h3>
           <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:grid-cols-4">
             {featuredProducts.map((product) => (
-              <ProductCard key={product.entityId} product={product} />
+              <ProductCard
+                key={product.entityId}
+                product={product}
+                showCart={false}
+                showCompare={false}
+                showReviews={false}
+              />
             ))}
           </div>
         </section>

apps/core/components/forbidden/index.tsx

@@ -10,7 +10,7 @@ const FeaturedProducts = async () => {
   return (
     <section className="w-full">
       <h3 className="mb-10 text-center text-3xl font-black sm:text-start lg:text-4xl">
-        Featured Products
+        Featured products
       </h3>
       <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:grid-cols-4">
         {featuredProducts.map((product) => (

apps/core/components/product-card-carousel/index.tsx

@@ -16,11 +16,13 @@ export const ProductCardCarousel = ({
   products,
   showCart = true,
   showCompare = true,
+  showReviews = true,
 }: {
   title: string;
   products: Array<Partial<Product>>;
   showCart?: boolean;
   showCompare?: boolean;
+  showReviews?: boolean;
 }) => {
   const id = useId();
 
@@ -68,6 +70,7 @@ export const ProductCardCarousel = ({
                 product={product}
                 showCart={showCart}
                 showCompare={showCompare}
+                showReviews={showReviews}
               />
             ))}
           </CarouselSlide>

apps/core/components/product-card/index.tsx

@@ -73,6 +73,7 @@ interface ProductCardProps {
   imagePriority?: boolean;
   showCart?: boolean;
   showCompare?: boolean;
+  showReviews?: boolean;
 }
 
 export const ProductCard = ({
@@ -81,6 +82,7 @@ export const ProductCard = ({
   imagePriority = false,
   showCart = true,
   showCompare = true,
+  showReviews = true,
 }: ProductCardProps) => {
   const summaryId = useId();
 
@@ -126,7 +128,7 @@ export const ProductCard = ({
             product.name
           )}
         </ProductCardInfoProductName>
-        {product.reviewSummary && (
+        {product.reviewSummary && showReviews && (
           <div className="flex items-center gap-3">
             <p
               aria-describedby={summaryId}
@@ -151,7 +153,7 @@ export const ProductCard = ({
             </div>
           </div>
         )}
-        <div className="flex flex-wrap items-end justify-between pt-2">
+        <div className="flex flex-wrap items-end justify-between pt-1">
           <ProductCardInfoPrice>
             <Pricing prices={product.prices} />
           </ProductCardInfoPrice>

packages/components/src/components/product-card/product-card.tsx

@@ -85,7 +85,7 @@ ProductCardInfoProductName.displayName = 'ProductCardInfoProductName';
 const ProductCardInfoPrice = forwardRef<ElementRef<'div'>, ComponentPropsWithRef<'div'>>(
   ({ children, className, ...props }, ref) => {
     return (
-      <div className={cn('pt-2 text-base', className)} ref={ref} {...props}>
+      <div className={cn(className)} ref={ref} {...props}>
         {children}
       </div>
     );

packages/functional/tests/ui/core/components/Carousel.spec.ts

@@ -5,7 +5,7 @@ test.beforeEach(async ({ page }) => {
 
   await page
     .getByRole('region')
-    .filter({ has: page.getByRole('heading', { name: 'Best Selling Products' }) })
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
     .getByRole('tablist', { name: 'Slides' })
     .scrollIntoViewIfNeeded();
 
@@ -17,35 +17,55 @@ test.beforeEach(async ({ page }) => {
 test('Navigate to next set of products', async ({ page }) => {
   await page
     .getByRole('region')
-    .filter({ has: page.getByRole('heading', { name: 'Best Selling Products' }) })
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
     .getByRole('button', { name: 'Next products' })
     .click();
 
-  await expect(page.getByRole('link', { name: '[Sample] Orbit Terrarium - Large' })).toBeVisible();
+  await expect(
+    page.getByRole('link', { name: '[Sample] Tiered Wire Basket' }).first(),
+  ).toBeVisible();
 });
 
 test('Navigate to previous set of products', async ({ page }) => {
   await page
     .getByRole('region')
-    .filter({ has: page.getByRole('heading', { name: 'Best Selling Products' }) })
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
     .getByRole('button', { name: 'Previous products' })
     .click();
 
-  await expect(page.getByRole('link', { name: '[Sample] Orbit Terrarium - Large' })).toBeVisible();
+  await expect(
+    page.getByRole('link', { name: '[Sample] Orbit Terrarium - Large' }).first(),
+  ).toBeVisible();
 });
 
 test('Navigation on set of products is cyclic', async ({ page }) => {
+  await expect(page.getByRole('link', { name: '[Sample] Smith Journal 13' })).toBeVisible();
+
   await page
     .getByRole('region')
-    .filter({ has: page.getByRole('heading', { name: 'Best Selling Products' }) })
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
     .getByRole('button', { name: 'Next products' })
     .click();
 
+  await expect(
+    page.getByRole('link', { name: '[Sample] Tiered Wire Basket' }).first(),
+  ).toBeVisible();
+
   await page
     .getByRole('region')
-    .filter({ has: page.getByRole('heading', { name: 'Best Selling Products' }) })
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
     .getByRole('button', { name: 'Next products' })
     .click();
 
-  await expect(page.getByRole('link', { name: '[Sample] Able Brewing System' })).toBeVisible();
+  await expect(
+    page.getByRole('link', { name: '[Sample] Able Brewing System' }).first(),
+  ).toBeVisible();
+
+  await page
+    .getByRole('region')
+    .filter({ has: page.getByRole('heading', { name: 'Featured products' }) })
+    .getByRole('button', { name: 'Next products' })
+    .click();
+
+  await expect(page.getByRole('link', { name: '[Sample] Smith Journal 13' }).first()).toBeVisible();
 });