How to Display Multiple Products on the Homepage

const Home = ({product}) => {
  console.log(product)
  return (
    <div className={styles.card}>
      <h1>{product.name}</h1>
      <h1>{product.sku}</h1>
      <h1>{product.finish}</h1>
      <img src={urlFor(product.image).width(200)}/>
      <PortableText value={product.info} />
      <a href={product.installatiesheet}>Installatiesheet</a>
    </div>
  )
}

export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
      "installatiesheet":installatiesheet.asset->url,
    }[0]`)

  return {
      props: {
        product,
      },
    }
}

export default Home

<h1>{product[1].name}</h1>

 }[0...100]`)