Adds fonts, real data to homepage, additional UI tweaks

concrete-utopia · Jun 4, 2024 · 8329f05 · 8329f05
1 parent be5b6dd
commit 8329f05
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 24 deletions.
diff --git a/app/components/hydrogen/ProductCard.jsx b/app/components/hydrogen/ProductCard.jsx
@@ -62,18 +62,20 @@ export function ProductCard({product, className, loading, onClick, quickAdd}) {
               />
             )}
           </div>
-          <Grid gap={1} justify="start">
-            <Heading font="text" truncate size={3} weight="medium" as="h3">
+          <Grid gap={0} justify="start">
+            <Heading font="text" truncate size="m" as="h3" leading="none">
               {product.title}
             </Heading>
             <Flex gap={3} justify="start" align="baseline">
               <Price
+                withoutTrailingZeros
                 color="black"
                 className="opacity-60"
                 as={Text}
                 variant={firstVariant}
               />
               <PriceCompareAt
+                withoutTrailingZeros
                 as={Text}
                 color="black"
                 className="opacity-60"

diff --git a/app/components/hydrogen/new/Text.jsx b/app/components/hydrogen/new/Text.jsx
@@ -97,7 +97,7 @@ const text = cva({
     },
   },
   defaultVariants: {
-    size: 3,
+    size: 'm',
   },
 });
 
@@ -139,6 +139,7 @@ export const Text = forwardRef(
 );
 
 const heading = cva({
+  base: ['tracking-tight'],
   variants: {
     size: {
       1: ['text-base', 'leading-normal'], // 16 - 1rem
@@ -163,7 +164,7 @@ const heading = cva({
     },
   },
   defaultVariants: {
-    size: 5,
+    size: '2xl',
   },
 });
 
@@ -295,7 +296,7 @@ export const Strong = forwardRef(
   (
     {
       as: Component = 'strong',
-      weight = 'semibold',
+      weight = 'bold',
       children,
       truncate = false,
       uppercase = false,

diff --git a/app/routes/_index/route.jsx b/app/routes/_index/route.jsx
@@ -1,7 +1,4 @@
-import {defer} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, Link} from '@remix-run/react';
-import {Suspense} from 'react';
-import {Image, Money} from '@shopify/hydrogen';
+import {json} from '@shopify/remix-oxygen';
 import Hero from './sections/hero';
 import BestSellers from './sections/best-sellers';
 import Collections from './sections/collections';
@@ -19,12 +16,13 @@ export const meta = () => {
  * @param {LoaderFunctionArgs}
  */
 export async function loader({context: {storefront}}) {
-  return null;
+  const {bestSellers} = await storefront.query(BEST_SELLERS_QUERY);
+
+  return json({bestSellers});
 }
 
 export default function Homepage() {
   /** @type {LoaderReturnData} */
-  // const data = useLoaderData();
   return (
     <>
       <Hero />
@@ -36,6 +34,77 @@ export default function Homepage() {
   );
 }
 
+/*
+{
+    handle: 'builder-tote',
+    title: 'Builders Tote',
+    variants: {
+      nodes: [
+        {
+          availableForSale: true,
+          price: {
+            amount: '38.00',
+            currencyCode: 'CAD',
+          },
+          compareAtPrice: {
+            amount: '42.00',
+            currencyCode: 'CAD',
+          },
+          image: {
+            id: 'gid://Shopify/placeholder/1234',
+            altText: 'Placeholder',
+            height: '600',
+            width: '400',
+            url: 'https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-DevMode-Buildertote_PDP_3_fa8b6520-484a-47e7-818d-b217b04d31e6.png',
+          },
+        },
+      ],
+    },
+*/
+
+const BEST_SELLERS_QUERY = `#graphql
+query BestSellers(
+  $country: CountryCode
+  $language: LanguageCode
+) @inContext(country: $country, language: $language) {
+  bestSellers: collection(handle: "best-sellers") {
+    id
+    handle
+    title
+    description
+    products(
+      first: 6
+    ) {
+      nodes {
+        id
+        title
+        handle
+        variants (first: 1) {
+          nodes {
+            availableForSale
+            price {
+              amount
+              currencyCode
+            }
+            compareAtPrice {
+              amount
+              currencyCode
+            }
+            image {
+              id
+              altText
+              height
+              width
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
 /** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
 /** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
 /** @typedef {import('storefrontapi.generated').FeaturedCollectionFragment} FeaturedCollectionFragment */

diff --git a/app/routes/_index/sections/best-sellers.jsx b/app/routes/_index/sections/best-sellers.jsx
@@ -1,8 +1,14 @@
 import {ProductCard} from '@h2/ProductCard';
 import {Heading, Span} from '@h2/new/Text';
 import {Container, Flex, Grid, Section} from '@h2/new/Layout';
+import {useLoaderData} from '@remix-run/react';
+import {flattenConnection} from '@shopify/hydrogen';
 
 export default function BestSellers() {
+  const {bestSellers} = useLoaderData();
+
+  const products = flattenConnection(bestSellers.products);
+
   return (
     <Section className="pt-32">
       <Container as="header" className="z-20 pointer-events-none">
@@ -22,12 +28,12 @@ export default function BestSellers() {
       </Container>
       <Container>
         <Grid columns={12} rows={10} gapY="xl" gap="l" className="aspect-[5/7]">
-          <ProductCard className="col-span-5 col-start-1 row-start-1 pr-12" />
-          <ProductCard className="col-span-3 col-start-7 row-start-2" />
-          <ProductCard className="col-span-3 col-start-10 row-start-1" />
-          <ProductCard className="col-span-3 col-start-1 row-start-6" />
-          <ProductCard className="col-span-3 col-start-4 row-start-5" />
-          <ProductCard className="col-span-4 col-start-9 row-start-5 mt-8" />
+          <ProductCard product={products[0]} className="col-span-5 col-start-1 row-start-1 pr-12" />
+          <ProductCard product={products[1]} className="col-span-3 col-start-7 row-start-2" />
+          <ProductCard product={products[2]} className="col-span-3 col-start-10 row-start-1" />
+          <ProductCard product={products[3]} className="col-span-3 col-start-1 row-start-6" />
+          <ProductCard product={products[4]} className="col-span-3 col-start-4 row-start-5" />
+          <ProductCard product={products[5]} className="col-span-4 col-start-9 row-start-5 mt-8" />
         </Grid>
       </Container>
     </Section>

diff --git a/app/routes/_index/sections/collections.jsx b/app/routes/_index/sections/collections.jsx
@@ -35,7 +35,7 @@ export default function Collections() {
           >
             <Link className="col-span-2 col-start-3 row-start-4">
               <Grid
-                className="items-center justify-center"
+                className="relative items-center justify-center"
                 columns={1}
                 rows={1}
               >
@@ -44,7 +44,7 @@ export default function Collections() {
                   align="center"
                   size={6}
                   weight="regular"
-                  className="z-20 col-span-1 col-start-1 row-span-1 row-start-1 text-center"
+                  className="absolute z-20 col-span-1 col-start-1 row-span-1 row-start-1 text-center -translate-x-1/2 left-1/2"
                 >
                   Apparel
                 </Heading>

diff --git a/app/routes/products.$handle/sections/highlight-details.jsx b/app/routes/products.$handle/sections/highlight-details.jsx
@@ -6,6 +6,8 @@ import {Image} from '@shopify/hydrogen';
 export default function HighlightDetails() {
   const {details} = useLoaderData();
 
+  if (!details) return null;
+
   const {highlights} = JSON.parse(details.features.reference.content.value);
 
   return (
@@ -15,7 +17,7 @@ export default function HighlightDetails() {
           <Flex resizeY="fill" justify="center" direction="down" gap={9}>
             {highlights.map((highlight) => (
               <Flex direction="down" gap={5} key={highlight.title}>
-                <Heading font="text" size={4} color="white">
+                <Heading font="text" size={4} weight="bold" color="white">
                   {highlight.title}
                 </Heading>
                 <Flex as="ul" gap={2} direction="down">

diff --git a/app/routes/products.$handle/sections/highlight-solution.jsx b/app/routes/products.$handle/sections/highlight-solution.jsx
@@ -33,7 +33,7 @@ export default function HighlightSolution({data}) {
               <Heading uppercase wrap="balance">
                 <HighlightText text={title.value} />
               </Heading>
-              <Text wrap="balance" size="xl" className="opacity-70">
+              <Text wrap="balance" size="xl">
                 {description.value}
               </Text>
               <Button color="white">Learn more</Button>

diff --git a/app/routes/products.$handle/sections/reviews.jsx b/app/routes/products.$handle/sections/reviews.jsx
@@ -16,7 +16,7 @@ export default function Reviews({data}) {
             Don’t take our word for it
           </Heading>
           <Flex direction="down" gap={6}>
-            <Text size="2xl" weight="medium">
+            <Text size="2xl">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="19"

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -6,6 +6,38 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: 'Sequel';
+  src: url('/sequel-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Sequel';
+  src: url('/sequel-medium.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Sequel';
+  src: url('/sequel-itals.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Sequel';
+  src: url('/sequel-mediumitalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: block;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -46,7 +78,7 @@
   }
 
   body {
-    @apply antialiased text-primary/90 bg-contrast border-primary/10;
+    @apply text-primary/90 bg-contrast border-primary/10;
   }
 }
 

diff --git a/public/sequel-italic.woff2 b/public/sequel-italic.woff2
diff --git a/public/sequel-medium.woff2 b/public/sequel-medium.woff2
diff --git a/public/sequel-mediumitalic.woff2 b/public/sequel-mediumitalic.woff2
diff --git a/public/sequel-regular.woff2 b/public/sequel-regular.woff2
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -58,7 +58,13 @@ export default {
       },
       fontFamily: {
         display: 'Synchro',
-        sans: ['Helvetica Neue', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+        sans: [
+          'Sequel',
+          'Helvetica Neue',
+          'ui-sans-serif',
+          'system-ui',
+          'sans-serif',
+        ],
         serif: ['"IBMPlexSerif"', 'Palatino', 'ui-serif'],
       },
       fontSize: {