From 93839b26b814c8eb4b805e90b5f55ab03be73e47 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <federico.ruggi@shopify.com>
Date: Tue, 8 Oct 2024 17:48:47 +0200
Subject: [PATCH 1/3] use actual grids

---
 .../_index/sections/featured-products.jsx     | 210 +++++++++---------
 app/routes/_index/sections/hero.jsx           |   9 +-
 app/routes/_index/sections/our-promise.jsx    |  57 ++---
 3 files changed, 140 insertions(+), 136 deletions(-)

diff --git a/app/routes/_index/sections/featured-products.jsx b/app/routes/_index/sections/featured-products.jsx
index 7d97ca6..583b9a3 100644
--- a/app/routes/_index/sections/featured-products.jsx
+++ b/app/routes/_index/sections/featured-products.jsx
@@ -1,12 +1,6 @@
 import { AddToCartButton } from '@h2/new/Button'
 import { Heading, Text } from '@h2/new/Text'
-import {
-  Background,
-  Column,
-  Grid,
-  Section,
-  HalfAndHalf,
-} from '@h2/new/Layout'
+import { Background, Column, Section } from '@h2/new/Layout'
 import { Image } from '@shopify/hydrogen'
 import { Price, PriceCompareAt } from '@h2/Price'
 import { cx } from '@h2/new/utils'
@@ -71,109 +65,105 @@ export function SaleBadge({ price, compareAtPrice }) {
 export default function FeaturedProducts() {
   return (
     <Section>
-      <HalfAndHalf
-        left={
-          <SaleCard className='bg-lightGray'>
-            <div className='relative'>
-              <SaleBadge
-                price={{
-                  amount: '39.00',
-                  currencyCode: 'CAD',
-                }}
-                compareAtPrice={{
-                  amount: '42.00',
-                  currencyCode: 'CAD',
-                }}
-              />
-              <Image
-                crop='center'
-                width={450}
-                height={380}
-                src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-DevMode-Buildertote_PDP_3_fa8b6520-484a-47e7-818d-b217b04d31e6.png'
-              />
-            </div>
-            <Column gap={4} align='center' justify='center'>
-              <Heading font='text' weight='medium' size='l'>
-                Builders Tote
-              </Heading>
-              <Text
-                width='narrow'
-                color='black'
-                className='opacity-60'
-              >
-                Sofie Pavitt Face is an intentional edit of
-                skincare essentials designed for acne-prone
-                skin.
-              </Text>
-            </Column>
-            <Column style={{ height: 120 }}>
-              <AddToCartButton color='accent'>
-                Add to cart
-              </AddToCartButton>
-            </Column>
-          </SaleCard>
-        }
-        right={
-          <Image
-            className='object-cover w-full h-full'
-            width={633}
-            height={555}
-            src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-1.jpg?v=1716832099'
-          />
-        }
-      />
-      <HalfAndHalf
-        left={
-          <Image
-            className='object-cover w-full h-full'
-            width={633}
-            height={555}
-            src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-2.jpg?v=1716832296'
-          />
-        }
-        right={
-          <SaleCard className='bg-accent'>
-            <div className='relative'>
-              <SaleBadge
-                price={{
-                  amount: '39.00',
-                  currencyCode: 'CAD',
-                }}
-                compareAtPrice={{
-                  amount: '42.00',
-                  currencyCode: 'CAD',
-                }}
-              />
-              <Image
-                crop='center'
-                width={450}
-                height={380}
-                className='translate-y-12'
-                src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-GSD-Hat-PDP.webp'
-              />
-            </div>
-            <Column gap={4} align='center' justify='center'>
-              <Heading font='text' weight='medium' size='l'>
-                Get Ship Done Hat 2.0
-              </Heading>
-              <Text
-                width='narrow'
-                color='black'
-                className='opacity-60'
-              >
-                Sofie Pavitt Face is an intentional edit of
-                skincare essentials designed for acne-prone
-                skin.
-              </Text>
-            </Column>
-            <Column style={{ height: 120 }}>
-              <AddToCartButton color='white'>
-                Add to cart
-              </AddToCartButton>
-            </Column>
-          </SaleCard>
-        }
-      />
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 1fr)',
+          gridTemplateRows: 'repeat(2, 1fr)',
+        }}
+      >
+        <SaleCard className='bg-lightGray'>
+          <div className='relative'>
+            <SaleBadge
+              price={{
+                amount: '39.00',
+                currencyCode: 'CAD',
+              }}
+              compareAtPrice={{
+                amount: '42.00',
+                currencyCode: 'CAD',
+              }}
+            />
+            <Image
+              crop='center'
+              width={450}
+              height={380}
+              src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-DevMode-Buildertote_PDP_3_fa8b6520-484a-47e7-818d-b217b04d31e6.png'
+            />
+          </div>
+          <Column gap={4} align='center' justify='center'>
+            <Heading font='text' weight='medium' size='l'>
+              Builders Tote
+            </Heading>
+            <Text
+              width='narrow'
+              color='black'
+              className='opacity-60'
+            >
+              Sofie Pavitt Face is an intentional edit of
+              skincare essentials designed for acne-prone
+              skin.
+            </Text>
+          </Column>
+          <Column style={{ height: 120 }}>
+            <AddToCartButton color='accent'>
+              Add to cart
+            </AddToCartButton>
+          </Column>
+        </SaleCard>
+        <Image
+          className='object-cover w-full h-full'
+          width={633}
+          height={555}
+          src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-1.jpg?v=1716832099'
+        />
+        <Image
+          className='object-cover w-full h-full'
+          width={633}
+          height={555}
+          src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/spotlight-image-home-2.jpg?v=1716832296'
+        />
+        <SaleCard className='bg-accent'>
+          <div className='relative'>
+            <SaleBadge
+              price={{
+                amount: '39.00',
+                currencyCode: 'CAD',
+              }}
+              compareAtPrice={{
+                amount: '42.00',
+                currencyCode: 'CAD',
+              }}
+            />
+            <Image
+              crop='center'
+              width={450}
+              height={380}
+              className='translate-y-12'
+              src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-GSD-Hat-PDP.webp'
+            />
+          </div>
+          <Column gap={4} align='center' justify='center'>
+            <Heading font='text' weight='medium' size='l'>
+              Get Ship Done Hat 2.0
+            </Heading>
+            <Text
+              width='narrow'
+              color='black'
+              className='opacity-60'
+            >
+              Sofie Pavitt Face is an intentional edit of
+              skincare essentials designed for acne-prone
+              skin.
+            </Text>
+          </Column>
+          <Column style={{ height: 120 }}>
+            <AddToCartButton color='white'>
+              Add to cart
+            </AddToCartButton>
+          </Column>
+        </SaleCard>
+      </div>
     </Section>
   )
 }
diff --git a/app/routes/_index/sections/hero.jsx b/app/routes/_index/sections/hero.jsx
index c271242..f16a2ae 100644
--- a/app/routes/_index/sections/hero.jsx
+++ b/app/routes/_index/sections/hero.jsx
@@ -34,7 +34,14 @@ export default function Hero() {
           </Button>
         </div>
       </div>
-      <div className='grid absolute z-0 inset-0 pointer-events-none grid-cols-2'>
+      <div
+        style={{
+          display: 'grid',
+          position: 'absolute',
+          top: 0,
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr)',
+        }}
+      >
         <div />
         <div className='relative'>
           <div className='absolute inset-0 bg-gradient-to-r from-darkGray to-transparent to-50% z-0' />
diff --git a/app/routes/_index/sections/our-promise.jsx b/app/routes/_index/sections/our-promise.jsx
index 1a1882c..764de9e 100644
--- a/app/routes/_index/sections/our-promise.jsx
+++ b/app/routes/_index/sections/our-promise.jsx
@@ -79,31 +79,38 @@ export default function OurPromise() {
           Promise
         </Heading>
       </Container>
-      <div className='h-auto mx-auto px-4 md:px-8 lg:px-10 w-full relative z-10 max-w-7xl pb-36'>
-        <div style={{ display: 'flex', gap: 50 }}>
-          <PromiseCard
-            heading='Guaranteed For Life'
-            description='Every one of our products comes with a limited lifetime warranty.'
-            color='accent'
-            icon='guarantee'
-            borderRadius={0}
-            rotation={0}
-            offset={[0, 0]}
-            style={{ opacity: '100%' }}
-          />
-          <PromiseCard
-            heading='100 days to try'
-            description='Try it out for 100 days. If you don’t love it, send it back.'
-            color='gray'
-            icon='trial'
-          />
-          <PromiseCard
-            heading='Free shipping'
-            description='We’ll cover shipping on all orders to the contiguous US and Canada.'
-            color='black'
-            icon='shipping'
-          />
-        </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns:
+            'repeat(auto-fit, minmax(310px, 1fr)',
+          gap: 50,
+          justifyItems: 'center',
+          paddingBottom: '9rem',
+        }}
+      >
+        <PromiseCard
+          heading='Guaranteed For Life'
+          description='Every one of our products comes with a limited lifetime warranty.'
+          color='accent'
+          icon='guarantee'
+          borderRadius={0}
+          rotation={0}
+          offset={[0, 0]}
+          style={{ opacity: '100%' }}
+        />
+        <PromiseCard
+          heading='100 days to try'
+          description='Try it out for 100 days. If you don’t love it, send it back.'
+          color='gray'
+          icon='trial'
+        />
+        <PromiseCard
+          heading='Free shipping'
+          description='We’ll cover shipping on all orders to the contiguous US and Canada.'
+          color='black'
+          icon='shipping'
+        />
       </div>
     </section>
   )

From a6731745a234251263e7d257e396577359dd211f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <federico.ruggi@shopify.com>
Date: Tue, 8 Oct 2024 18:02:13 +0200
Subject: [PATCH 2/3] adjust

---
 app/routes/_index/sections/our-promise.jsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/routes/_index/sections/our-promise.jsx b/app/routes/_index/sections/our-promise.jsx
index 764de9e..4b2bc2c 100644
--- a/app/routes/_index/sections/our-promise.jsx
+++ b/app/routes/_index/sections/our-promise.jsx
@@ -83,10 +83,14 @@ export default function OurPromise() {
         style={{
           display: 'grid',
           gridTemplateColumns:
-            'repeat(auto-fit, minmax(310px, 1fr)',
-          gap: 50,
+            'repeat(auto-fit, minmax(350px, 1fr))',
+          gap: 30,
           justifyItems: 'center',
           paddingBottom: '9rem',
+          justifyContent: 'center',
+          alignItems: 'center',
+          alignContent: 'center',
+          margin: '0 9rem',
         }}
       >
         <PromiseCard
@@ -97,19 +101,30 @@ export default function OurPromise() {
           borderRadius={0}
           rotation={0}
           offset={[0, 0]}
-          style={{ opacity: '100%' }}
+          style={{
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+          }}
         />
         <PromiseCard
           heading='100 days to try'
           description='Try it out for 100 days. If you don’t love it, send it back.'
           color='gray'
           icon='trial'
+          style={{
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+          }}
         />
         <PromiseCard
           heading='Free shipping'
           description='We’ll cover shipping on all orders to the contiguous US and Canada.'
           color='black'
           icon='shipping'
+          style={{
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+          }}
         />
       </div>
     </section>

From 725fd7f28afb0c1b73293c48dd65bd62f1302a10 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <federico.ruggi@shopify.com>
Date: Tue, 8 Oct 2024 18:11:36 +0200
Subject: [PATCH 3/3] adjust

---
 app/routes/_index/sections/hero.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/routes/_index/sections/hero.jsx b/app/routes/_index/sections/hero.jsx
index f16a2ae..a568ae4 100644
--- a/app/routes/_index/sections/hero.jsx
+++ b/app/routes/_index/sections/hero.jsx
@@ -35,11 +35,10 @@ export default function Hero() {
         </div>
       </div>
       <div
+        className='z-0 absolute inset-0 pointer-events-none'
         style={{
           display: 'grid',
-          position: 'absolute',
-          top: 0,
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr)',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
         }}
       >
         <div />