diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index faf635560..039643abb 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -1,5 +1,7 @@ .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; + @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 { @@ -77,8 +79,8 @@ .squareBg:before { @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block; - content: ''; background-image: url('/bg-products.svg'); + content: ''; } .simple { @@ -125,8 +127,12 @@ } .imageContainer { - overflow: hidden; @apply flex items-center justify-center; + overflow: hidden; + + & > div { + min-width: 100%; + } } .image { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 238a2e7b2..3cd288c7c 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -13,8 +13,10 @@ interface Props { variant?: 'slim' | 'simple' imgWidth: number | string imgHeight: number | string - priority?: boolean imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined + imgPriority?: boolean + imgLoading?: 'eager' | 'lazy' + imgSizes?: string } const ProductCard: FC = ({ @@ -23,8 +25,10 @@ const ProductCard: FC = ({ variant, imgWidth, imgHeight, + imgPriority, + imgLoading, + imgSizes, imgLayout = 'responsive', - priority, }) => { const src = p.images.edges?.[0]?.node?.urlOriginal! const { price } = usePrice({ @@ -46,13 +50,15 @@ const ProductCard: FC = ({ {p.images.edges?.[0]?.node.altText ) : ( @@ -73,13 +79,16 @@ const ProductCard: FC = ({
{p.name}
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css index 8ffc1beab..d3302fc61 100644 --- a/components/ui/Grid/Grid.module.css +++ b/components/ui/Grid/Grid.module.css @@ -1,6 +1,7 @@ .root { - --row-height: calc(100vh - 80px - 56px); + --row-height: calc(100vh - 88px); @apply grid grid-cols-1 gap-0; + min-height: var(--row-height); @screen lg { @apply grid-cols-3 grid-rows-2; diff --git a/lib/browser.ts b/lib/browser.ts deleted file mode 100644 index 3e6d7bd39..000000000 --- a/lib/browser.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as Bowser from 'bowser' - -export function isDesktop(): boolean { - const browser = Bowser.getParser(window.navigator.userAgent) - return browser.getPlatform().type === 'desktop' -} - -export function isMobile(): boolean { - const browser = Bowser.getParser(window.navigator.userAgent) - return browser.getPlatform().type === 'mobile' -} - -export function isTablet(): boolean { - const browser = Bowser.getParser(window.navigator.userAgent) - return browser.getPlatform().type === 'tablet' -} diff --git a/next.config.js b/next.config.js index f4f3dc040..81e3c06ab 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,5 @@ module.exports = { images: { - imagesSizes: [320, 480, 820, 1280], domains: ['cdn11.bigcommerce.com'], }, i18n: { diff --git a/pages/index.tsx b/pages/index.tsx index d35164e56..7400f6644 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,9 @@ -import { useMemo } from 'react' -import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import rangeMap from '@lib/range-map' import { Layout } from '@components/common' -import { Grid, Marquee, Hero } from '@components/ui' import { ProductCard } from '@components/product' +import { Grid, Marquee, Hero } from '@components/ui' import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid' +import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { getConfig } from '@bigcommerce/storefront-data-hooks/api' import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products' @@ -90,10 +89,10 @@ export default function Home({ ))} @@ -124,7 +123,6 @@ export default function Home({