mirror of
https://github.com/vercel/commerce.git
synced 2025-06-18 21:21:21 +00:00
added BagelCard module
This commit is contained in:
Tororoi
parent
a4307e7356
commit
8d64e22df8
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
141
components/product/BagelCard/BagelCard.module.scss
Normal file
141
components/product/BagelCard/BagelCard.module.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
|
||||
>
|
||||
<div className={s.imageContainer}>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.square}>
|
||||
{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}
|
||||
/>
|
||||
<img src={product.images[0].url} alt="" />
|
||||
// <Image
|
||||
// alt={product.name || 'Product Image'}
|
||||
// className={styles.productImage}
|
||||
// src={product.images[0].url || placeholderImg}
|
||||
// height={540}
|
||||
// width={540}
|
||||
// quality="85"
|
||||
// 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>
|
||||
</>
|
||||
|
||||
@ -46,18 +46,50 @@ export default function Home({
|
||||
<>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.main}>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.square}>
|
||||
<img src={products[0].images[0].url} alt="" />
|
||||
{/* BagelCard Component */}
|
||||
{products.slice(0, 1).map((product, i) => (
|
||||
<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}>
|
||||
<h1>
|
||||
Featuring <i>Grain</i>changing Technology
|
||||
</h1>
|
||||
<button>
|
||||
<h5>Try The Better Bagel</h5>
|
||||
{/* Nutrition Component */}
|
||||
<div className={styles.nutrition}>
|
||||
<h2>
|
||||
Featuring Less Carbs. More Protein. Chef-Crafted Flavor.
|
||||
Plant-Based Ingredients. Proprietary Food Technology.
|
||||
</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>
|
||||
|
||||
@ -63,8 +63,7 @@ export default function Slug({
|
||||
return router.isFallback ? (
|
||||
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
|
||||
) : (
|
||||
// <ProductView product={product as any} />
|
||||
<h2>Product View</h2>
|
||||
<ProductView product={product as any} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
margin: 4em;
|
||||
width: 100%;
|
||||
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);
|
||||
margin: 4em;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
h2 {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.table {
|
||||
margin: 4em 1em;
|
||||
width: calc(100% - 2em);
|
||||
margin: 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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
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);
|
||||
line-height: 14px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user