Finish basic layout of homepage

app/components/hydrogen/ProductCard.jsx

@@ -1,10 +1,10 @@
-import clsx from 'clsx';
 import {flattenConnection, Image} from '@shopify/hydrogen';
 
 import {Text} from '@h2/Text';
 import Link from '@h2/Link';
 import {Button, AddToCartButton} from '@h2/Button';
 import {Price, PriceCompareAt} from './Price';
+import {cx} from './new/cva.config';
 
 export function ProductCard({product, className, loading, onClick, quickAdd}) {
   product = {
@@ -42,13 +42,13 @@ export function ProductCard({product, className, loading, onClick, quickAdd}) {
   const {image} = firstVariant;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className={cx('flex flex-col gap-2', className)}>
       <Link
         onClick={onClick}
         to={`/products/${product.handle}`}
         prefetch="viewport"
       >
-        <div className={clsx('grid gap-4', className)}>
+        <div className={'grid gap-4'}>
           <div className="card-image aspect-[4/5] bg-primary/5">
             {image && (
               <Image

app/components/hydrogen/new/Layout.tsx

@@ -60,6 +60,7 @@ interface FlexProps {
   px?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
   py?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
   p?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  wrap?: boolean;
 }
 
 /**
@@ -68,10 +69,6 @@ interface FlexProps {
 const flex = cva({
   base: 'flex',
   variants: {
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
     p: {
       0: 'p-0',
       1: 'p-1',
@@ -176,7 +173,11 @@ const flex = cva({
  */
 export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
   ({as: Component = 'div', children, className = '', ...props}, ref) => {
-    const classes = cx(flex(props), className);
+    const classes = cx(
+      flex(props),
+      props.wrap ? 'flex-wrap' : 'flex-nowrap',
+      className,
+    );
 
     return (
       <Component ref={ref} className={classes} {...props}>
@@ -206,13 +207,27 @@ const grid = cva({
       3: 'grid-cols-3',
       4: 'grid-cols-4',
       5: 'grid-cols-5',
+      6: 'grid-cols-6',
+      7: 'grid-cols-7',
+      8: 'grid-cols-8',
+      9: 'grid-cols-9',
+      10: 'grid-cols-10',
+      11: 'grid-cols-11',
+      12: 'grid-cols-12',
     },
     rows: {
       1: 'grid-rows-1',
       2: 'grid-rows-2',
       3: 'grid-rows-3',
       4: 'grid-rows-4',
       5: 'grid-rows-5',
+      6: 'grid-rows-6',
+      7: 'grid-rows-7',
+      8: 'grid-rows-8',
+      9: 'grid-rows-9',
+      10: 'grid-rows-10',
+      11: 'grid-rows-11',
+      12: 'grid-rows-12',
     },
     gap: {
       1: 'gap-1',
@@ -321,10 +336,6 @@ const container = cva({
     'z-10',
   ],
   variants: {
-    fluid: {
-      true: 'max-w-none',
-      false: 'max-w-7xl',
-    },
     resizeX: {
       hug: 'w-auto',
       fill: 'w-full',
@@ -337,16 +348,18 @@ const container = cva({
     },
   },
   defaultVariants: {
-    fluid: false,
     resizeX: 'hug',
     resizeY: 'hug',
   },
 });
 
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   ({as: Component = 'div', children, className, ...props}, ref) => {
-    const classes = cx(container(props), className);
-
+    const classes = cx(
+      container(props),
+      props.fluid ? 'max-w-none' : 'max-w-7xl',
+      className,
+    );
     return (
       <Component ref={ref} className={classes} {...props}>
         {children}
@@ -359,25 +372,17 @@ interface SectionProps {
   as?: React.ElementType;
   children?: React.ReactNode;
   className?: string;
-  padded?: boolean; // Controls whether the section has padding
+  padded?: boolean;
 }
 
 const section = cva({
   base: ['w-full', 'relative', 'min-h-8'],
-  variants: {
-    padded: {
-      true: 'py-8', // Tailwind classes for padding (you can change as needed)
-      false: '',
-    },
-  },
-  defaultVariants: {
-    padded: true,
-  },
+  variants: {},
 });
 
 export const Section = React.forwardRef<HTMLDivElement, SectionProps>(
-  ({as: Component = 'section', children, className, ...props}, ref) => {
-    const classes = cx(section(props), className);
+  ({as: Component = 'section', padded, children, className, ...props}, ref) => {
+    const classes = cx(section(props), padded && 'py-8', className);
 
     return (
       <Component ref={ref} className={classes} {...props}>

app/routes/_index/route.jsx

@@ -0,0 +1,43 @@
+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 Hero from './sections/hero';
+import BestSellers from './sections/best-sellers';
+import Collections from './sections/collections';
+import FeaturedProducts from './sections/featured-products';
+import OurPromise from './sections/our-promise';
+
+/**
+ * @type {MetaFunction}
+ */
+export const meta = () => {
+  return [{title: 'Hydrogen | Home'}];
+};
+
+/**
+ * @param {LoaderFunctionArgs}
+ */
+export async function loader({context: {storefront}}) {
+  return null;
+}
+
+export default function Homepage() {
+  /** @type {LoaderReturnData} */
+  const data = useLoaderData();
+  return (
+    <>
+      <Hero />
+      <BestSellers />
+      <Collections />
+      <FeaturedProducts />
+      <OurPromise />
+    </>
+  );
+}
+
+/** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
+/** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
+/** @typedef {import('storefrontapi.generated').FeaturedCollectionFragment} FeaturedCollectionFragment */
+/** @typedef {import('storefrontapi.generated').RecommendedProductsQuery} RecommendedProductsQuery */
+/** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof loader>} LoaderReturnData */

app/routes/_index/sections/best-sellers.jsx

@@ -0,0 +1,26 @@
+import {ProductCard} from '@h2/ProductCard';
+import {Heading} from '@h2/Text';
+import {Container, Grid, Section} from '@h2/new/Layout';
+
+export default function BestSellers() {
+  return (
+    <Section className="py-32">
+      <Container as="header">
+        <Heading className="flex justify-between w-full -mb-6 uppercase max-w-none text-7xl">
+          <span>Best</span>
+          <span>Sellers</span>
+        </Heading>
+      </Container>
+      <Container>
+        <Grid columns={12} rows={12} className="aspect-[4/6]">
+          <ProductCard className="col-span-5 col-start-1 row-start-1" />
+          <ProductCard className="col-span-3 col-start-7 row-start-3" />
+          <ProductCard className="col-span-3 col-start-10 row-start-1" />
+          <ProductCard className="col-span-3 col-start-1 row-start-9" />
+          <ProductCard className="col-span-3 col-start-5 row-start-7" />
+          <ProductCard className="col-span-4 col-start-9 row-start-8" />
+        </Grid>
+      </Container>
+    </Section>
+  );
+}