added BagelCard module

components/common/Footer/Footer.tsx

@@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
+        <div className="grid grid-cols-1 lg:grid-cols-6 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
           {/* <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">

components/product/BagelCard/BagelCard.module.css

@@ -1,76 +0,0 @@
-.root {
-  @apply relative max-h-full w-full box-border overflow-hidden
-  bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer;
-  height: 100% !important;
-  display: flex;
-  flex-flow: row nowrap;
-
-  &:hover {
-    & .squareBg:before {
-      transform: scale(0.98);
-    }
-
-    & .productImage {
-      /* transform: scale(1.2625); */
-    }
-
-    & .productTitle > span,
-    & .productPrice,
-    & .wishlistButton {
-      @apply bg-secondary text-secondary;
-    }
-  }
-}
-
-.button {
-  @apply bg-gray-900 hover:bg-gray-500;
-  padding: 10px 30px;
-  color: white;
-  /* background: black; */
-  font-weight: 600;
-  width: fit-content;
-  height: auto;
-  border-radius: 20px;
-  text-align: center;
-  transition: 0.3s;
-}
-
-.squareBg,
-.productTitle > span,
-.productPrice,
-.wishlistButton {
-  @apply transition-colors ease-in-out duration-500;
-}
-
-.squareBg {
-  @apply transition-colors absolute inset-0 z-0;
-  background-color: #212529;
-}
-
-.squareBg:before {
-  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  background-image: url('/bg-products.svg');
-  content: '';
-}
-
-.simple {
-  & .squareBg {
-    @apply bg-accents-0 !important;
-    background-image: url('/bg-products.svg');
-  }
-}
-
-
-.imageContainer {
-  @apply flex items-center justify-center;
-  overflow: hidden;
-
-  & > div {
-    min-width: 50%;
-  }
-}
-
-.productImage {
-  @apply transform transition-transform duration-500 object-cover scale-120;
-}

components/product/BagelCard/BagelCard.module.scss

@@ -0,0 +1,141 @@
+@mixin desktop() {
+  @media (max-width: 600px) {
+    @content;
+  }
+}
+
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+  }
+  > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.container {
+  min-height: 100vh;
+  padding: 0 0.5rem;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+}
+
+.btn {
+  padding: 10px 36px;
+  color: white;
+  background: black;
+  width: fit-content;
+  height: auto;
+  border-radius: 20px;
+  text-align: center;
+  transition: 0.3s;
+  &:hover {
+  background: rgb(78, 78, 78);
+}
+}
+
+.main {
+  margin: 2em;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  div {
+    display: flex;
+  }
+}
+
+.row {
+  flex-flow: row nowrap;
+  margin: 0 2em;
+  width: 100%;
+  div {
+    width: 50%;
+    margin: 2em;
+  }
+  .square {
+    background: #9c0000;
+    @include aspect-ratio(1, 1);
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 3em;
+  }
+}
+
+.featured {
+  flex-flow: column nowrap;
+  width: calc(100% - 4em);
+  margin: 2em;
+  h2 {
+    text-align: center;
+    margin: 1em;
+  }
+  .mags {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    margin: 1em;
+  }
+}
+
+.banana {
+  flex-flow: column nowrap;
+  width: 100%;
+  h2 {
+    margin: 1em;
+  }
+  .bananagif {
+    margin: 2em;
+    background: #ffffa7;
+    @include aspect-ratio(16, 9);
+  }
+}
+
+.nutrition {
+  flex-flow: column nowrap;
+  width: 100%;
+  align-items: flex-end;
+  h2 {
+    margin: 0 1em;
+  }
+  .table {
+    margin: 2em;
+    width: calc(100% - 4em);
+    background: #6ea145;
+    @include aspect-ratio(4, 5);
+  }
+}
+
+.mission {
+  flex-flow: column nowrap;
+  h2 {
+    margin: 1em;
+  }
+}
+
+.instagram {
+  flex-flow: row;
+  width: calc(100% - 8em);
+  margin: 4em;
+  .image {
+    margin: 0.5em;
+    background: rgb(137, 137, 255);
+    width: 30%;
+    @include aspect-ratio(1, 1);
+  }
+}

components/product/BagelCard/BagelCard.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import type { Product } from '@commerce/types'
-import s from './BagelCard.module.css'
+import styles from './BagelCard.module.scss'
 import Image, { ImageProps } from 'next/image'
 
 interface Props {
@@ -22,30 +22,33 @@ const BagelCard: FC<Props> = ({
   ...props
 }) => (
   <>
-    <div
+    <div className={styles.row}>
-      className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+      <div className={styles.square}>
-    >
-      <div className={s.imageContainer}>
         {product?.images && (
-          <Image
+          <img src={product.images[0].url} alt="" />
-            alt={product.name || 'Product Image'}
+          // <Image
-            className={s.productImage}
+          //   alt={product.name || 'Product Image'}
-            src={product.images[0].url || placeholderImg}
+          //   className={styles.productImage}
-            height={540}
+          //   src={product.images[0].url || placeholderImg}
-            width={540}
+          //   height={540}
-            quality="85"
+          //   width={540}
-            layout="responsive"
+          //   quality="85"
-            {...imgProps}
+          //   layout="responsive"
-          />
+          //   {...imgProps}
+          // />
         )}
       </div>
-      <div className={s.textContainer}>
+      <div className={styles.info}>
         <h1>
           Featuring <i>Grain</i>changing Technology
         </h1>
+        <button className={styles.btn}>
           <Link href={`/product/${product.slug}`} {...props}>
-          <a className={s.button}>Try The Better Bagel</a>
+            <a>
+              <h5>Try The Better Bagel</h5>
+            </a>
           </Link>
+        </button>
       </div>
     </div>
   </>

pages/index.tsx

@@ -46,18 +46,50 @@ export default function Home({
     <>
       <div className={styles.container}>
         <div className={styles.main}>
-          <div className={styles.row}>
+          {/* BagelCard Component */}
-            <div className={styles.square}>
+          {products.slice(0, 1).map((product, i) => (
-              <img src={products[0].images[0].url} alt="" />
+            <BagelCard
+              key={product.id}
+              product={product}
+              imgProps={{
+                width: i === 0 ? 1080 : 540,
+                height: i === 0 ? 1080 : 540,
+              }}
+            />
+          ))}
+          {/* Featured Component */}
+          {/* Banana Component */}
+          <div className={styles.banana}>
+            <h2>
+              The Better Bagel features the same net carb content as{' '}
+              <u>two banana slices</u>.
+            </h2>
+            <div className={styles.bananagif}></div>
           </div>
-            <div className={styles.info}>
+          {/* Nutrition Component */}
-              <h1>
+          <div className={styles.nutrition}>
-                Featuring <i>Grain</i>changing Technology
+            <h2>
-              </h1>
+              Featuring Less Carbs. More Protein. Chef-Crafted Flavor.
-              <button>
+              Plant-Based Ingredients. Proprietary Food Technology.
-                <h5>Try The Better Bagel</h5>
+            </h2>
+            <button className={styles.btn}>
+              <h5>Nutrition</h5>
             </button>
+            <div className={styles.table}></div>
           </div>
+          {/* Mission Hero */}
+          <div className={styles.mission}>
+            <h2>
+              We are on a mission to make the most carb-heavy foods into the
+              least and allow you to indulge, and feel good about it.
+            </h2>
+            <div className="expand"></div>
+          </div>
+          {/* Instagram Component */}
+          <div className={styles.instagram}>
+            <div className={styles.image}></div>
+            <div className={styles.image}></div>
+            <div className={styles.image}></div>
           </div>
         </div>
       </div>

pages/product/[slug].tsx

@@ -63,8 +63,7 @@ export default function Slug({
   return router.isFallback ? (
     <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
   ) : (
-    // <ProductView product={product as any} />
+    <ProductView product={product as any} />
-    <h2>Product View</h2>
   )
 }
 

styles/Home.module.scss

@@ -8,7 +8,20 @@
   flex-direction: column;
   // justify-content: center;
   align-items: center;
-  height: 100vh;
+}
+
+.btn {
+  padding: 10px 36px;
+  color: white;
+  background: black;
+  width: fit-content;
+  height: auto;
+  border-radius: 20px;
+  text-align: center;
+  transition: 0.3s;
+  &:hover {
+  background: rgb(78, 78, 78);
+}
 }
 
 .main {
@@ -62,13 +75,12 @@
 
 .banana {
   flex-flow: column nowrap;
-  width: calc(100% - 8em);
+  width: 100%;
-  margin: 4em;
   h2 {
     margin: 1em;
   }
   .bananagif {
-    margin: 1em;
+    margin: 2em;
     background: #ffffa7;
     @include aspect-ratio(16, 9);
   }
@@ -76,12 +88,14 @@
 
 .nutrition {
   flex-flow: column nowrap;
-  width: calc(100% - 8em);
+  width: 100%;
-  margin: 4em;
   align-items: flex-end;
+  h2 {
+    margin: 0 1em;
+  }
   .table {
-    margin: 4em 1em;
+    margin: 2em;
-    width: calc(100% - 2em);
+    width: calc(100% - 4em);
     background: #6ea145;
     @include aspect-ratio(4, 5);
   }
@@ -89,6 +103,9 @@
 
 .mission {
   flex-flow: column nowrap;
+  h2 {
+    margin: 1em;
+  }
 }
 
 .instagram {

styles/globals.css

@@ -24,7 +24,9 @@ h1 {
 
 h2 {
   margin: 0;
+  font-size: 32px;
   font-weight: 400;
+  line-height: 34px;
 }
 
 h3 {
@@ -48,19 +50,5 @@ h6 {
   margin: 0;
   font-size: 12px;
   font-weight: 700;
-}
+  line-height: 14px;
-
-button {
-  padding: 10px 36px;
-  color: white;
-  background: black;
-  width: fit-content;
-  height: auto;
-  border-radius: 20px;
-  text-align: center;
-  transition: 0.3s;
-}
-
-button:hover {
-  background: rgb(78, 78, 78);
 }