commerce/app/page.tsx

import Error from 'app/error';
import Footer from 'components/layout/footer';
import { Navbar } from 'components/layout/navbar';
import Search from 'components/layout/navbar/search';
import PriceBoxes from 'components/price-boxes';
import { getCollectionProducts } from 'lib/shopify';
import Image from 'next/image';

//Todo: change to proper metadata
export const metadata = {
  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
  openGraph: {
    type: 'website'
  }
};

export default async function HomePage() {
  const products = await getCollectionProducts({ collection: 'landing' });

  //Todo: change to proper error handling
  if (!products[0]) return <Error />;

  return (
    <>
      <section className="relative">
        <Navbar />
        <div className="relative w-screen">
          <Image
            src={
              products[0].featuredImage.url || '' //Todo: default image
            }
            alt={products[0].featuredImage.altText || 'Main product'}
            width={products[0].featuredImage.width}
            height={products[0].featuredImage.height}
            quality={100}
            priority
          />
        </div>
        <div className="absolute bottom-0 flex w-full flex-col items-center text-lightText">
          <h1 className="text-xl">{products[0].title}</h1>
          <span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span>
          <PriceBoxes
            products={[
              { title: 'Box of 20', price: '£2,460' },
              { title: 'Single Cigar', price: '£120' }
            ]}
            totalWidth={384}
          />
        </div>
      </section>
      <section className="flex">
        <Search />
        <div className="flex">
          Filter by
          <button>Size</button>
          <button>Strength</button>
        </div>
      </section>
      <Footer />
    </>
  );
}