From 58385dc491da2621dab917551ecba89c8f69f1b6 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 18:28:09 -0300
Subject: [PATCH 1/2] improve the grid on mobile a bit

---
 components/product/ProductSlider/ProductSlider.module.css | 3 ++-
 pages/index.tsx                                           | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index c07228d0b..5ad48cc3d 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -48,7 +48,8 @@
   @apply hidden;
 
   @screen sm {
-    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
+    @apply block absolute bottom-6 left-1/2;
+    transform: translateX(-50%);
   }
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 44a93c1d7..9f374253b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -129,9 +129,9 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-6">
-        <div className="pr-3 w-48 relative">
-          <div className="sticky top-32">
+      <div className="py-12 flex flex-col md:flex-row w-full px-6">
+        <div className="pr-3 w-full md:w-48 relative">
+          <div className="flex flex-row w-full justify-around mb-12 md:mb-0 md:block md:sticky md:top-32">
             <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 <Link href={getCategoryPath('')}>

From 411c6b8d230ad2a0f09da0e2682011b79a5b601a Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 20:02:29 -0300
Subject: [PATCH 2/2] componentize the homepage grid

---
 .../HomeAllProductsGrid.module.css            | 23 +++++++
 .../HomeAllProductsGrid.tsx                   | 66 +++++++++++++++++++
 components/core/HomeAllProductsGrid/index.ts  |  1 +
 pages/index.tsx                               | 55 ++--------------
 4 files changed, 96 insertions(+), 49 deletions(-)
 create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
 create mode 100644 components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx
 create mode 100644 components/core/HomeAllProductsGrid/index.ts

diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
new file mode 100644
index 000000000..464087ebc
--- /dev/null
+++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
@@ -0,0 +1,23 @@
+.root {
+  @apply py-12 flex flex-col w-full px-6;
+
+  @screen md {
+    @apply flex-row;
+  }
+}
+
+.asideWrapper {
+  @apply pr-3 w-full relative;
+
+  @screen md {
+    @apply w-48;
+  }
+}
+
+.aside {
+  @apply flex flex-row w-full justify-around mb-12;
+
+  @screen md {
+    @apply mb-0 block sticky top-32;
+  }
+}
diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx
new file mode 100644
index 000000000..fc58486cd
--- /dev/null
+++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx
@@ -0,0 +1,66 @@
+import { FC } from 'react'
+import Link from 'next/link'
+import { getCategoryPath, getDesignerPath } from '@utils/search'
+import { Grid } from '@components/ui'
+import { ProductCard } from '@components/product'
+import s from './HomeAllProductsGrid.module.css'
+
+interface Props {
+  categories?: any
+  brands?: any
+  newestProducts?: any
+}
+
+const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
+  return (
+    <div className={s.root}>
+      <div className={s.asideWrapper}>
+        <div className={s.aside}>
+          <ul className="mb-10">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getCategoryPath('')}>
+                <a>All Categories</a>
+              </Link>
+            </li>
+            {categories.map((cat: any) => (
+              <li key={cat.path} className="py-1 text-accents-8">
+                <Link href={getCategoryPath(cat.path)}>
+                  <a>{cat.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <ul className="">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getDesignerPath('')}>
+                <a>All Designers</a>
+              </Link>
+            </li>
+            {brands.flatMap(({ node }: any) => (
+              <li key={node.path} className="py-1 text-accents-8">
+                <Link href={getDesignerPath(node.path)}>
+                  <a>{node.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="flex-1">
+        <Grid layout="normal">
+          {newestProducts.map(({ node }: any) => (
+            <ProductCard
+              key={node.path}
+              product={node}
+              variant="simple"
+              imgWidth={480}
+              imgHeight={480}
+            />
+          ))}
+        </Grid>
+      </div>
+    </div>
+  )
+}
+
+export default Head
diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts
new file mode 100644
index 000000000..31d313d16
--- /dev/null
+++ b/components/core/HomeAllProductsGrid/index.ts
@@ -0,0 +1 @@
+export { default } from './HomeAllProductsGrid'
diff --git a/pages/index.tsx b/pages/index.tsx
index 64443f536..48777bea5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import rangeMap from '@lib/range-map'
-import { getCategoryPath, getDesignerPath } from '@utils/search'
 import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
-import Link from 'next/link'
+import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
 
 export async function getStaticProps({
   preview,
@@ -129,53 +128,11 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-col md:flex-row w-full px-6">
-        <div className="pr-3 w-full md:w-48 relative">
-          <div className="flex flex-row w-full justify-around mb-12 md:mb-0 md:block md:sticky md:top-32">
-            <ul className="mb-10">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getCategoryPath('')}>
-                  <a>All Categories</a>
-                </Link>
-              </li>
-              {categories.map((cat) => (
-                <li key={cat.path} className="py-1 text-accents-8">
-                  <Link href={getCategoryPath(cat.path)}>
-                    <a>{cat.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <ul className="">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getDesignerPath('')}>
-                  <a>All Designers</a>
-                </Link>
-              </li>
-              {brands.flatMap(({ node }) => (
-                <li key={node.path} className="py-1 text-accents-8">
-                  <Link href={getDesignerPath(node.path)}>
-                    <a>{node.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-        <div className="flex-1">
-          <Grid layout="normal">
-            {newestProducts.map(({ node }) => (
-              <ProductCard
-                key={node.path}
-                product={node}
-                variant="simple"
-                imgWidth={480}
-                imgHeight={480}
-              />
-            ))}
-          </Grid>
-        </div>
-      </div>
+      <HomeAllProductsGrid
+        categories={categories}
+        brands={brands}
+        newestProducts={newestProducts}
+      />
     </div>
   )
 }