text: import Product from "../components/Product";
  
  function ProductFeed({ products }) {
    return (
      <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:-mt-44">
        {products
          .slice(0, 4)
          .map(({ id, title, price, description, category, image }) => (
            <Product
              id={id}
              key={id}
              title={title}
              price={price}
              description={description}
              category={category}
              image={image}
            />
          ))}
  
        <img
          className="md:col-span-full"
          src="/images/advertise.jpg"
          alt="advertise"
        />
  
        <div className="md:col-span-2">
          {products
            .slice(4, 5)
            .map(({ id, title, price, description, category, image }) => (
              <Product
                id={id}
                key={id}
                title={title}
                price={price}
                description={description}
                category={category}
                image={image}
              />
            ))}
        </div>
  
        {products
          .slice(5, products.length)
          .map(({ id, title, price, description, category, image }) => (
            <Product
              id={id}
              key={id}
              title={title}
              price={price}
              description={description}
              category={category}
              image={image}
            />
          ))}
      </div>
    );
  }
  
  export default ProductFeed;
  