added psuedoindex

.gitignore

@@ -31,5 +31,7 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
+.env.futurefoundry
+
 # vercel
 .vercel

components/product/BagelCard/BagelCard.module.css

@@ -0,0 +1,136 @@
+.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;
+
+  &:hover {
+    & .squareBg:before {
+      transform: scale(0.98);
+    }
+
+    & .productImage {
+      /* transform: scale(1.2625); */
+    }
+
+    & .productTitle > span,
+    & .productPrice,
+    & .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 {
+    @apply bg-violet;
+  }
+
+  &:nth-child(6n + 5) .squareBg {
+    @apply bg-blue;
+  }
+
+  &:nth-child(6n + 3) .squareBg {
+    @apply bg-pink;
+  }
+
+  &:nth-child(6n + 6) .squareBg {
+    @apply bg-cyan;
+  }
+}
+
+.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');
+  }
+
+  & .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%;
+  }
+}
+
+.productImage {
+  @apply transform transition-transform duration-500 object-cover scale-120;
+}

components/product/BagelCard/BagelCard.tsx

@@ -0,0 +1,80 @@
+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 Image, { ImageProps } from 'next/image'
+
+interface Props {
+  className?: string
+  product: Product
+  variant?: 'slim' | 'simple'
+  imgProps?: Omit<ImageProps, 'src'>
+}
+
+const placeholderImg = '/product-img-placeholder.svg'
+
+const BagelCard: FC<Props> = ({
+  className,
+  product,
+  variant,
+  imgProps,
+  ...props
+}) => (
+  <Link href={`/product/${product.slug}`} {...props}>
+    <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
+      {variant === 'slim' ? (
+        <div className="relative overflow-hidden box-border">
+          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+              {product.name}
+            </span>
+          </div>
+          {product?.images && (
+            <Image
+              quality="85"
+              src={product.images[0].url || placeholderImg}
+              alt={product.name || 'Product Image'}
+              height={320}
+              width={320}
+              layout="fixed"
+              {...imgProps}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          <div className={s.squareBg} />
+          <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+            <div className="absolute top-0 left-0 pr-16 max-w-full">
+              <h3 className={s.productTitle}>
+                <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

components/product/BagelCard/index.ts

@@ -0,0 +1 @@
+export { default } from './BagelCard'

components/product/ProductCard/ProductCard.module.css

@@ -10,7 +10,7 @@
     }
 
     & .productImage {
-      transform: scale(1.2625);
+      /* transform: scale(1.2625); */
     }
 
     & .productTitle > span,

components/product/index.ts

@@ -2,3 +2,4 @@ export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
 export { default as ProductSlider } from './ProductSlider'
+export { default as BagelCard } from './BagelCard'

pages/index.tsx

@@ -1,7 +1,6 @@
 import { Layout } from '@components/common'
 import { Grid, Marquee, Hero } from '@components/ui'
-import { ProductCard } from '@components/product'
-// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+import { BagelCard } from '@components/product'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import { getConfig } from '@framework/api'
@@ -45,7 +44,7 @@ export default function Home({
       <Grid>
         {/* main product */}
         {products.slice(0, 3).map((product, i) => (
-          <ProductCard
+          <BagelCard
             key={product.id}
             product={product}
             imgProps={{
@@ -62,7 +61,7 @@ export default function Home({
       <Marquee variant="secondary">
         {/* instagram */}
         {products.slice(0, 3).map((product, i) => (
-          <ProductCard
+          <BagelCard
             key={product.id}
             product={product}
             variant="slim"

pages/product/[slug].tsx

@@ -63,7 +63,8 @@ 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>
   )
 }
 

pages/psuedoindex.jsx

@@ -0,0 +1,62 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.scss'
+
+//-----Homepage-----//
+
+const Home = () => (
+  <div className={styles.container}>
+    <main className={styles.main}>
+      <div className={styles.grid}>
+        <div className={styles.square}></div>
+        <div className={styles.info}>
+          <h1>
+            Featuring <i>Grain</i>changing Technology
+          </h1>
+          <btn>
+            <h6>Try The Better Bagel</h6>
+          </btn>
+        </div>
+      </div>
+      <div className={styles.featured}>
+        <h2>Featured In</h2>
+        <div className={styles.mags}>
+          <span>Forbes</span>
+          <span>BuzzFeed</span>
+          <span>Food</span>
+        </div>
+      </div>
+      <div className={styles.banana}>
+        <h2>
+          The Better Bagel features the same net carb content as two banana
+          slices.
+        </h2>
+        <div className={styles.bananagif}></div>
+      </div>
+      <div className={styles.nutrition}>
+        <h2>
+          Featuring Less Carbs. More Protein. Chef-Crafted Flavor. Plant-Based
+          Ingredients. Proprietary Food Technology.
+        </h2>
+        <btn>
+          <h6>Nutrition</h6>
+        </btn>
+        <div className={styles.table}></div>
+      </div>
+      <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>
+      <div className={styles.instagram}>
+        <div className={styles.image}></div>
+        <div className={styles.image}></div>
+        <div className={styles.image}></div>
+      </div>
+    </main>
+  </div>
+)
+
+export default Home

styles/Home.module.scss

@@ -0,0 +1,103 @@
+@import "mixins";
+@import "variables";
+
+.container {
+  min-height: 100vh;
+  padding: 0 0.5rem;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.main {
+  padding: 5rem 0;
+  margin: 2em;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  div {
+    display: flex;
+  }
+}
+
+.grid {
+  flex-flow: row nowrap;
+  margin: 2em;
+  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: calc(100% - 8em);
+  margin: 4em;
+  h2 {
+    margin: 1em;
+  }
+  .bananagif {
+    margin: 1em;
+    background: #ffffa7;
+    @include aspect-ratio(16, 9);
+  }
+}
+
+.nutrition {
+  flex-flow: column nowrap;
+  width: calc(100% - 8em);
+  margin: 4em;
+  align-items: flex-end;
+  .table {
+    margin: 4em 1em;
+    width: calc(100% - 2em);
+    background: #6ea145;
+    @include aspect-ratio(4, 5);
+  }
+}
+
+.mission {
+  flex-flow: column nowrap;
+}
+
+.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);
+  }
+}

styles/_mixins.scss

@@ -0,0 +1,22 @@
+@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;
+  }
+}

styles/_variables.scss

@@ -0,0 +1 @@
+$color-primary: #c20d00;

styles/globals.css

@@ -0,0 +1,58 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  margin: 0;
+  font-weight: 400;
+}
+
+h2 {
+  margin: 0;
+  font-weight: 400;
+}
+
+h3 {
+  margin: 0;
+  font-weight: 400;
+}
+
+h4 {
+  margin: 0;
+}
+
+h5 {
+  margin: 0;
+}
+
+h6 {
+  margin: 0;
+}
+
+btn {
+  padding: 10px 30px;
+  color: white;
+  background: black;
+  width: fit-content;
+  height: auto;
+  border-radius: 20px;
+  text-align: center;
+  transition: 0.3s;
+}
+
+btn:hover {
+  background: rgb(78, 78, 78);
+}