feat: homepage and integrate with shopify page

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -1,32 +1,35 @@
-import { Carousel } from 'components/carousel';
-import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
-import { ThreeItemGrid } from 'components/grid/three-items';
+import Hero from 'components/hero';
+import HomePageContent from 'components/home-page-content';
 import Footer from 'components/layout/footer';
+import { getPage } from 'lib/shopify';
+import { Metadata } from 'next';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
 
-export const metadata = {
-  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
-  openGraph: {
-    type: 'website'
-  }
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const page = await getPage('home-page');
+
+  return {
+    title: page?.seo?.title || page?.title,
+    description: page?.seo?.description || page?.bodySummary,
+    openGraph: {
+      type: 'website'
+    }
+  };
+}
 
 export default async function HomePage() {
   return (
     <>
-      <section className="mx-auto max-w-screen-2xl px-4 pb-4">
-        <Suspense fallback={<YMMFiltersPlaceholder />}>
-          <YMMFilters />
-        </Suspense>
-      </section>
-      <ThreeItemGrid />
-      <Suspense>
-        <Carousel />
+      <Hero />
+      <div className="mt-3">
         <Suspense>
-          <Footer />
+          <HomePageContent />
         </Suspense>
+      </div>
+      <Suspense>
+        <Footer />
       </Suspense>
     </>
   );

app/product/[handle]/page.tsx

@@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="mx-auto max-w-screen-2xl px-4">
+      <div className="mx-auto mt-4 max-w-screen-2xl px-4">
         <div className="hidden lg:block">
           <BreadcrumbComponent type="product" handle={product.handle} />
         </div>

app/search/[collection]/opengraph-image.tsx

@@ -4,7 +4,7 @@ import { getCollection } from 'lib/shopify';
 export const runtime = 'edge';
 
 export default async function Image({ params }: { params: { collection: string } }) {
-  const collection = await getCollection(params.collection);
+  const collection = await getCollection({ handle: params.collection });
   const title = collection?.seo?.title || collection?.title;
 
   return await OpengraphImage({ title });

app/search/[collection]/page.tsx

@@ -23,7 +23,7 @@ export async function generateMetadata({
 }: {
   params: { collection: string };
 }): Promise<Metadata> {
-  const collection = await getCollection(params.collection);
+  const collection = await getCollection({ handle: params.collection });
 
   if (!collection) return notFound();
 
@@ -86,11 +86,11 @@ export default function CategorySearchPage(props: {
   return (
     <>
       <div className="mb-2">
-        <Suspense fallback={<BreadcrumbHome />} key={props.params.collection}>
+        <Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
           <Breadcrumb type="collection" handle={props.params.collection} />
         </Suspense>
       </div>
-      <Suspense fallback={<HeaderPlaceholder />} key={props.params.collection}>
+      <Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
         <Header collection={props.params.collection} />
       </Suspense>
       <div className="my-3">
@@ -98,7 +98,7 @@ export default function CategorySearchPage(props: {
           <YMMFilters />
         </Suspense>
       </div>
-      <Suspense fallback={<ProductsGridPlaceholder />} key={props.params.collection}>
+      <Suspense fallback={<ProductsGridPlaceholder />} key={`products-${props.params.collection}`}>
         <CategoryPage {...props} />
       </Suspense>
     </>

app/search/layout.tsx

@@ -3,7 +3,7 @@ import Footer from 'components/layout/footer';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="mx-auto min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
+      <div className="mx-auto mt-4 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
         {children}
       </div>
       <Footer />