add styles to Layout Component and changing starting page

components/common/Layout/Layout.module.css

@@ -1,4 +1,4 @@
 .root {
   @apply h-full bg-primary mx-auto transition-colors duration-150;
-  max-width: 2460px;
+  max-width: 1920px;
 }

components/product/ProductCard/ProductCard.tsx

@@ -53,7 +53,7 @@ const ProductCard: FC<Props> = ({
                 alt={product.name || 'Product Image'}
                 height={320}
                 width={320}
-                layout="fixed"
+                layout="responsive"
                 objectFit="cover"
                 {...imgProps}
               />

next.config.js

@@ -38,15 +38,15 @@ module.exports = withCommerceConfig({
         },
     ].filter(Boolean)
   },
-  async redirects () {
+  // async redirects() {
-    return [
+  //   return [
-      {
+  //     {
-        source: '/',
+  //       source: '/',
-        destination: '/search',
+  //       destination: '/search',
-        permanent: true,
+  //       permanent: true,
-      }
+  //     },
-    ]
+  //   ]
-  }
+  // },
 })
 
 // Don't delete this console log, useful to see the commerce config in Vercel deployments

pages/_index.tsx

@@ -0,0 +1,103 @@
+import commerce from '@lib/api/commerce'
+import { Layout } from '@components/common'
+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 Image from 'next/image'
+import Link from 'next/link'
+
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  const productsPromise = commerce.getAllProducts({
+    variables: { first: 6 },
+    config,
+    preview,
+    // Saleor provider only
+    ...({ featured: true } as any),
+  })
+  const pagesPromise = commerce.getAllPages({ config, preview })
+  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
+  const { products } = await productsPromise
+  const { pages } = await pagesPromise
+  const { categories, brands } = await siteInfoPromise
+
+  return {
+    props: {
+      products,
+      categories,
+      brands,
+      pages,
+    },
+    revalidate: 60,
+  }
+}
+
+export default function Home({
+  products,
+  categories,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {categories.slice(0, 3).map((category: any, i: number) => (
+          <Link href={`/search/${category.slug}`}>
+            <a style={{ flex: 1 }}>
+              <Image
+                quality="100"
+                src={category.assets[0].source}
+                height={category.assets[0].height}
+                width={category.assets[0].width}
+                layout="responsive"
+                objectFit="cover"
+              />
+            </a>
+          </Link>
+        ))}
+      </div>
+      <Marquee variant="primary">
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard key={product.id} product={product} variant="slim" />
+        ))}
+      </Marquee>
+      <Hero
+        headline=" Dessert dragée halvah croissant."
+        description="Cupcake ipsum dolor sit amet lemon drops pastry cotton candy. Sweet carrot cake macaroon bonbon croissant fruitcake jujubes macaroon oat cake. Soufflé bonbon caramels jelly beans. Tiramisu sweet roll cheesecake pie carrot cake. "
+      />
+      {/* <Grid layout="B" variant="filled">
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
+      <Marquee>
+        {products.slice(3).map((product: any, i: number) => (
+          <ProductCard key={product.id} product={product} variant="slim" />
+        ))}
+      </Marquee> */}
+      {/* <HomeAllProductsGrid
+        newestProducts={products}
+        categories={categories}
+        brands={brands}
+      /> */}
+    </>
+  )
+}
+
+Home.Layout = Layout

pages/index.tsx

@@ -1,104 +1,9 @@
-import commerce from '@lib/api/commerce'
+import { getSearchStaticProps } from '@lib/search-props'
-import { Layout } from '@components/common'
+import type { GetStaticPropsContext } from 'next'
-import { ProductCard } from '@components/product'
+import Search from '@theme/search'
-import { Grid, Marquee, Hero } from '@components/ui'
-// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
-import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import Image from 'next/image'
-import Link from 'next/link'
 
-export async function getStaticProps({
+export async function getStaticProps(context: GetStaticPropsContext) {
-  preview,
+  return getSearchStaticProps(context)
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
-    variables: { first: 6 },
-    config,
-    preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const { products } = await productsPromise
-  const { pages } = await pagesPromise
-  const { categories, brands } = await siteInfoPromise
-
-  return {
-    props: {
-      products,
-      categories,
-      brands,
-      pages,
-    },
-    revalidate: 60,
-  }
 }
 
-export default function Home({
+export default Search
-  products,
-  categories,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  return (
-    <>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          overflowX: 'hidden',
-          height: '30%',
-        }}
-      >
-        {categories.slice(0, 3).map((category: any, i: number) => (
-          <Link href={`/search/${category.slug}`}>
-            <a style={{ width: '33.33%' }}>
-              <Image
-                quality="100"
-                src={category.assets[0].source}
-                height={category.assets[0].height}
-                width={category.assets[0].height}
-                layout="responsive"
-                objectFit="cover"
-              />
-            </a>
-          </Link>
-        ))}
-      </div>
-      <Marquee variant="primary">
-        {products.slice(0, 3).map((product: any, i: number) => (
-          <ProductCard key={product.id} product={product} variant="slim" />
-        ))}
-      </Marquee>
-      <Hero
-        headline=" Dessert dragée halvah croissant."
-        description="Cupcake ipsum dolor sit amet lemon drops pastry cotton candy. Sweet carrot cake macaroon bonbon croissant fruitcake jujubes macaroon oat cake. Soufflé bonbon caramels jelly beans. Tiramisu sweet roll cheesecake pie carrot cake. "
-      />
-      {/* <Grid layout="B" variant="filled">
-        {products.slice(0, 3).map((product: any, i: number) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            imgProps={{
-              width: i === 0 ? 1080 : 540,
-              height: i === 0 ? 1080 : 540,
-            }}
-          />
-        ))}
-      </Grid>
-      <Marquee>
-        {products.slice(3).map((product: any, i: number) => (
-          <ProductCard key={product.id} product={product} variant="slim" />
-        ))}
-      </Marquee> */}
-      {/* <HomeAllProductsGrid
-        newestProducts={products}
-        categories={categories}
-        brands={brands}
-      /> */}
-    </>
-  )
-}
-
-Home.Layout = Layout