index uses product image

components/product/BagelCard/BagelCard.module.css

@@ -3,6 +3,8 @@
   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 {
@@ -18,47 +20,20 @@
     & .wishlistButton {
       @apply bg-secondary text-secondary;
     }
-
-    &:nth-child(6n + 1) .productTitle > span,
-    &:nth-child(6n + 1) .productPrice,
-    &:nth-child(6n + 1) .wishlistButton {
-      @apply bg-violet text-white;
-    }
-
-    &:nth-child(6n + 5) .productTitle > span,
-    &:nth-child(6n + 5) .productPrice,
-    &:nth-child(6n + 5) .wishlistButton {
-      @apply bg-blue text-white;
-    }
-
-    &:nth-child(6n + 3) .productTitle > span,
-    &:nth-child(6n + 3) .productPrice,
-    &:nth-child(6n + 3) .wishlistButton {
-      @apply bg-pink text-white;
-    }
-
-    &:nth-child(6n + 6) .productTitle > span,
-    &:nth-child(6n + 6) .productPrice,
-    &:nth-child(6n + 6) .wishlistButton {
-      @apply bg-cyan text-white;
-    }
   }
+}
 
-  &:nth-child(6n + 1) .squareBg {
+.button {
-    @apply bg-violet;
+  @apply bg-gray-900 hover:bg-gray-500;
-  }
+  padding: 10px 30px;
-
+  color: white;
-  &:nth-child(6n + 5) .squareBg {
+  /* background: black; */
-    @apply bg-blue;
+  font-weight: 600;
-  }
+  width: fit-content;
-
+  height: auto;
-  &:nth-child(6n + 3) .squareBg {
+  border-radius: 20px;
-    @apply bg-pink;
+  text-align: center;
-  }
+  transition: 0.3s;
-
-  &:nth-child(6n + 6) .squareBg {
-    @apply bg-cyan;
-  }
 }
 
 .squareBg,
@@ -84,50 +59,15 @@
     @apply bg-accents-0 !important;
     background-image: url('/bg-products.svg');
   }
-
-  & .productTitle {
-    @apply pt-2;
-    font-size: 1rem;
-
-    & span {
-      @apply leading-extra-loose;
-    }
-  }
-
-  & .productPrice {
-    @apply text-sm;
-  }
 }
 
-.productTitle {
-  @apply pt-0 max-w-full w-full leading-extra-loose;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-
-  & span {
-    @apply py-4 px-6 bg-primary text-primary font-bold;
-    font-size: inherit;
-    letter-spacing: inherit;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-  }
-}
-
-.productPrice {
-  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
-  letter-spacing: 0.4px;
-}
-
-.wishlistButton {
-  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
-}
 
 .imageContainer {
   @apply flex items-center justify-center;
   overflow: hidden;
 
   & > div {
-    min-width: 100%;
+    min-width: 50%;
   }
 }
 

components/product/BagelCard/BagelCard.tsx

@@ -21,60 +21,34 @@ const BagelCard: FC<Props> = ({
   imgProps,
   ...props
 }) => (
-  <Link href={`/product/${product.slug}`} {...props}>
+  <>
-    <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
+    <div
-      {variant === 'slim' ? (
+      className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
-        <div className="relative overflow-hidden box-border">
+    >
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+      <div className={s.imageContainer}>
-            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+        {product?.images && (
-              {product.name}
+          <Image
-            </span>
+            alt={product.name || 'Product Image'}
-          </div>
+            className={s.productImage}
-          {product?.images && (
+            src={product.images[0].url || placeholderImg}
-            <Image
+            height={540}
-              quality="85"
+            width={540}
-              src={product.images[0].url || placeholderImg}
+            quality="85"
-              alt={product.name || 'Product Image'}
+            layout="responsive"
-              height={320}
+            {...imgProps}
-              width={320}
+          />
-              layout="fixed"
+        )}
-              {...imgProps}
+      </div>
-            />
+      <div className={s.textContainer}>
-          )}
+        <h1>
-        </div>
+          Featuring <i>Grain</i>changing Technology
-      ) : (
+        </h1>
-        <>
+        <Link href={`/product/${product.slug}`} {...props}>
-          <div className={s.squareBg} />
+          <a className={s.button}>Try The Better Bagel</a>
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+        </Link>
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
+      </div>
-              <h3 className={s.productTitle}>
+    </div>
-                <span>{product.name}</span>
+  </>
-              </h3>
-              <span className={s.productPrice}>
-                {product.price.value}
-                &nbsp;
-                {product.price.currencyCode}
-              </span>
-            </div>
-          </div>
-          <div className={s.imageContainer}>
-            {product?.images && (
-              <Image
-                alt={product.name || 'Product Image'}
-                className={s.productImage}
-                src={product.images[0].url || placeholderImg}
-                height={540}
-                width={540}
-                quality="85"
-                layout="responsive"
-                {...imgProps}
-              />
-            )}
-          </div>
-        </>
-      )}
-    </a>
-  </Link>
 )
 
 export default BagelCard

pages/_app.tsx

@@ -1,4 +1,5 @@
 import '@assets/main.scss'
+import '../styles/globals.css'
 import '@assets/chrome-bug.scss'
 // import 'keen-slider/keen-slider.min.css'
 

pages/index.tsx

@@ -1,6 +1,7 @@
 import { Layout } from '@components/common'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { BagelCard } from '@components/product'
+import { ProductCard } from '@components/product'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import { getConfig } from '@framework/api'
@@ -8,6 +9,8 @@ import getAllProducts from '@framework/product/get-all-products'
 import getSiteInfo from '@framework/common/get-site-info'
 import getAllPages from '@framework/common/get-all-pages'
 
+import styles from '../styles/Home.module.scss'
+
 export async function getStaticProps({
   preview,
   locale,
@@ -41,37 +44,23 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <Grid>
+      <div className={styles.container}>
-        {/* main product */}
+        <div className={styles.main}>
-        {products.slice(0, 3).map((product, i) => (
+          <div className={styles.row}>
-          <BagelCard
+            <div className={styles.square}>
-            key={product.id}
+              <img src={products[0].images[0].url} alt="" />
-            product={product}
+            </div>
-            imgProps={{
+            <div className={styles.info}>
-              width: i === 0 ? 1080 : 540,
+              <h1>
-              height: i === 0 ? 1080 : 540,
+                Featuring <i>Grain</i>changing Technology
-            }}
+              </h1>
-          />
+              <button>
-        ))}
+                <h5>Try The Better Bagel</h5>
-      </Grid>
+              </button>
-      {/* <FeaturedIn>Featured In</FeaturedIn> */}
+            </div>
-      {/* <Banana>Banana Comparison</Banana> */}
+          </div>
-      {/* <Nutrition></Nutrition> */}
+        </div>
-      {/* <Mission></Mission> */}
+      </div>
-      <Marquee variant="secondary">
-        {/* instagram */}
-        {products.slice(0, 3).map((product, i) => (
-          <BagelCard
-            key={product.id}
-            product={product}
-            variant="slim"
-            imgProps={{
-              width: 320,
-              height: 320,
-            }}
-          />
-        ))}
-      </Marquee>
     </>
   )
 }

styles/Home.module.scss

@@ -12,21 +12,22 @@
 }
 
 .main {
-  padding: 5rem 0;
   margin: 2em;
+  width: 100%;
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   div {
     display: flex;
   }
 }
 
-.grid {
+.row {
   flex-flow: row nowrap;
-  margin: 2em;
+  margin: 0 2em;
+  width: 100%;
   div {
     width: 50%;
     margin: 2em;

styles/globals.css

@@ -17,7 +17,9 @@ a {
 
 h1 {
   margin: 0;
+  font-size: 42px;
   font-weight: 400;
+  line-height: 44px;
 }
 
 h2 {
@@ -32,18 +34,24 @@ h3 {
 
 h4 {
   margin: 0;
+  font-size: 20px;
+  font-weight: 700;
 }
 
 h5 {
   margin: 0;
+  font-size: 16px;
+  font-weight: 700;
 }
 
 h6 {
   margin: 0;
+  font-size: 12px;
+  font-weight: 700;
 }
 
-btn {
+button {
-  padding: 10px 30px;
+  padding: 10px 36px;
   color: white;
   background: black;
   width: fit-content;
@@ -53,6 +61,6 @@ btn {
   transition: 0.3s;
 }
 
-btn:hover {
+button:hover {
   background: rgb(78, 78, 78);
 }