use actual grids

concrete-utopia · Oct 8, 2024 · 93839b2 · 93839b2
1 parent b464dfb
commit 93839b2
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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>
   )