Home Component

Home component displays a slider at the top and a collection of products in a responsive grid layout. The products are dynamically generated from the 'products' prop and passed to ProductItem component for display".

home.js

const Home = ({ products }) => {
  return (
    <>
      <Slider />
      <h1 className=' className="flex min-h-screen flex-col items-center justify-between p-24"'>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4">
          {products.map((product) => (
            <ProductItem product={product} key={product.slug}></ProductItem>
          ))}
        </div>
      </h1>
    </>
  );
};

Layout Product Item