From 643cf868d1c2c24e62dd2fbd1623980e036b5bd2 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Thu, 3 Aug 2023 18:33:26 -0500
Subject: [PATCH 1/2] Adds more home page carousel products for wide screens

---
 components/carousel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/carousel.tsx b/components/carousel.tsx
index a4c58bd5dc..811ca5f672 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -11,7 +11,9 @@ export async function Carousel() {
   return (
     <div className=" w-full overflow-x-auto pb-6 pt-1">
       <ul className="flex animate-carousel gap-4">
-        {[...products, ...products].map((product, i) => (
+        // Purposefully duplicating products to make the carousel loop and not run // out of
+        products on wide screens.
+        {[...products, ...products, ...products].map((product, i) => (
           <li
             key={`${product.handle}${i}`}
             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"

From d98b1d7cce56cb48f631ee2b27600faf3caa82eb Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Thu, 3 Aug 2023 18:35:01 -0500
Subject: [PATCH 2/2] Variable

---
 components/carousel.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/carousel.tsx b/components/carousel.tsx
index 811ca5f672..286d4dfea4 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -8,12 +8,13 @@ export async function Carousel() {
 
   if (!products?.length) return null;
 
+  // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
+  const carouselProducts = [...products, ...products, ...products];
+
   return (
     <div className=" w-full overflow-x-auto pb-6 pt-1">
       <ul className="flex animate-carousel gap-4">
-        // Purposefully duplicating products to make the carousel loop and not run // out of
-        products on wide screens.
-        {[...products, ...products, ...products].map((product, i) => (
+        {carouselProducts.map((product, i) => (
           <li
             key={`${product.handle}${i}`}
             className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"