working through the hp hero module rendering

app/routes/($locale)._index.jsx

@@ -4,15 +4,30 @@ import {Await, useLoaderData, useFetcher, Link} from '@remix-run/react';
 import { AnalyticsPageType } from '@shopify/hydrogen';
 import { flattenConnection } from '@shopify/hydrogen-react'
 
+import BlockContent from '@sanity/block-content-to-react'
+import Serializer from '~/serializers/richText'
+
 export async function loader({context}) {
   const collections = await context.storefront.query(COLLECTIONS_QUERY)
   const pages = await context.storefront.query(PAGES_QUERY)
   const products = await context.storefront.query(PRODUCT_QUERY)
   const articles = await context.storefront.query(ARTICLES_QUERY)
 
   const sanityPage = await context.sanity.fetch(`
-  *[_type == "home"] {
-    ...
+  *[_type == 'home'] {
+    ...,
+    modules[] {
+      _type,
+      _key,
+      (_type == 'module.hero') => {
+        'bgColor': bgColor.hex,
+        'image': image.asset-> {
+          metadata,
+          url
+        },
+        text
+      }
+    }
   }[0]`)
 
   // We're not covering accounts/auth in this class
@@ -55,24 +70,30 @@ export default function Homepage() {
         <div className='min-h-screen flex justify-center items-center'>
           <h2 className='text-mono-64'>{sanityPage.title}</h2>
         </div>
+        <div>
+          {sanityPage.modules?.map((module) => {
+            return (
+              <section style={{
+                backgroundColor: module.bgColor
+              }} key={module._key} className='h-[calc(100vh-80px)] min-h-[600px]'> 
+                <div className='grid h-full grid-cols-2 w-full'>
+                  <div className='col-span-1 flex items-end'>
+                    <div className='p-4 800:p-8 pb-6'>
+                      <BlockContent blocks={module.text} serializers={Serializer} />
+                    </div>
+                  </div>
+                  <div className='col-span-1 bg-white relative'>
+                    <img className='absolute top-0 left-0 w-full h-full object-cover' src={module.image?.url} />
+                  </div>
+                </div>
+              </section>
+            )
+          })}
+        </div>
         {/* Let's make sure to remove the 80px from the sticky top */}
         <div className='min-h-[calc(100vh-120px)] w-screen'>
           {/* 2UP Module */}
-          <section className='h-[calc(100vh-80px)] min-h-[600px]'> 
-            <div className='grid h-full grid-cols-2 w-full'>
-              <div className='col-span-1 bg-primary-green flex items-end'>
-                <div className='p-4 800:p-8 pb-6'>
-                  <h1 className='text-mono-64'>Welcome to Modular Commerce</h1>
-                  <div className='flex mt-4'>
-                    <Link to='/products/40l-bag' className='button primary big'>
-                      <span>Product Page</span>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-              <div className='col-span-1 bg-primary-green/60' />
-            </div>
-          </section>
+
           {/* VALUE PROPS */}
           <section className='p-4 text-center 800:py-20'>
             <div className='grid grid-cols-3 gap-4 max-w-[900px] mx-auto'>

app/serializers/richText.js

@@ -40,17 +40,17 @@ const InternalLink = props => {
 const BlockRender = props => {
 	const {style = 'normal'} = props.node;
 	if (style === 'h1') {
-		return <h1 className='text-sans-82 font-sans py-1 my-2 800:my-4'>{props.children}</h1>;
+		return <h1 className='text-mono-82 font-mono py-1 my-2 800:my-4'>{props.children}</h1>;
 	} else if (style === 'h2') {
-		return <h2 className='text-sans-64 font-sans py-1 my-2 800:my-4'>{props.children}</h2>;
+		return <h2 className='text-mono-64 font-mono py-1 my-2 800:my-4'>{props.children}</h2>;
 	} else if (style === 'h2-serif') {
 		return <h2 className='text-serif-42 font-serif py-1 my-2 800:my-4'>{props.children}</h2>;
 	} else if (style === 'h3') {
-		return <h3 className='text-sans-36 font-sans'>{props.children}</h3>;
+		return <h3 className='text-mono-36 font-mono'>{props.children}</h3>;
 	} else if (style === 'h4') {
-		return <h4 className='text-24 leading-29 font-sans'>{props.children}</h4>;
+		return <h4 className='text-24 leading-29 font-mono'>{props.children}</h4>;
 	} else if (style === 'h5') {
-		return <h5 className='text-sans-14 uppercase my-2  font-sans'>{props.children}</h5>;
+		return <h5 className='text-mono-14 uppercase my-2  font-mono'>{props.children}</h5>;
 	} else if (style === 'normal') {
 		return <p className="text-15 leading-21 my-2 font-plaid">{props.children}</p>;
 	} else if (style === 'script') {

app/styles/app.css

@@ -1782,6 +1782,10 @@ select {
   font-size: 64px;
   line-height: 80px;
 }
+.text-mono-82 {
+  font-size: 82px;
+  line-height: 100px;
+}
 .font-400 {
   font-weight: 400;
 }

cms/schemas/documents/home.js

@@ -33,10 +33,11 @@ export default defineField({
       title: 'Modules',
       type: 'array',
       of: [
-        {type: 'module.callout'},
-        {type: 'module.callToAction'},
-        {type: 'module.image'},
-        {type: 'module.product'},
+        {type: 'module.hero'},
+        // {type: 'module.callout'},
+        // {type: 'module.callToAction'},
+        // {type: 'module.image'},
+        // {type: 'module.product'},
       ],
       group: 'editorial',
     }),

cms/schemas/index.js

@@ -73,6 +73,7 @@ import moduleImage from './objects/module/image'
 import moduleImages from './objects/module/images'
 import moduleProduct from './objects/module/product'
 import moduleProducts from './objects/module/products'
+import moduleHero from './objects/module/hero'
 import moduleStandardText from './objects/module/standardText'
 import placeholderString from './objects/placeholderString'
 import productHotspots from './objects/productHotspots'
@@ -98,6 +99,7 @@ const objects = [
   moduleCallToAction,
   moduleImage,
   moduleImages,
+  moduleHero,
 
   moduleProduct,
   moduleProducts,

cms/schemas/objects/module/hero.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import {defineField, defineType} from 'sanity'
+import {PackageIcon} from '@sanity/icons'
+
+import {COLORS} from '../../../constants'
+
+const GROUPS = [
+  {
+    name: 'theme',
+    title: 'Theme',
+  },
+  {
+    default: true,
+    name: 'editorial',
+    title: 'Editorial',
+  },
+]
+
+export default defineType({
+  name: 'module.hero',
+  title: 'Hero',
+  type: 'object',
+  icon: PackageIcon,
+  groups: GROUPS,
+  fields: [
+
+    defineField({
+      name: 'text',
+      title: 'Text',
+      type: 'richText',
+      group: 'editorial'
+    }),
+    defineField({
+      name: 'image',
+      title: 'Image',
+      type: 'image',
+      group: 'editorial'
+    }),
+    defineField({
+      name: 'bgColor',
+      title: 'Background Color',
+      type: 'color',
+      group: 'theme',
+      options: {
+        colorList: COLORS,
+      },
+    }),
+  ],
+  preview: {
+    select: {},
+    prepare(selection) {
+      return {
+        title: 'Hero',
+      }
+    },
+  },
+})

tailwind.config.js

@@ -16,6 +16,7 @@ const FONT_SIZES = {
   'mono-200': ['200px', '184px'],
   'mono-120': ['120px', '136px'],
   'mono-100': ['100px', '126px'],
+  'mono-82': ['82px', '100px'],
   'mono-64': ['64px', '80px'],
   'mono-48': ['48px', '64px'],
   'mono-36': ['36px', '52px'],