export default function Component() {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32 bg-green-700 dark:bg-green-900">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 md:gap-8 lg:gap-12">
          <div className="flex flex-col items-center justify-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-lg bg-green-700 px-3 py-1 text-3xl font-bold dark:bg-green-900">
                HOYO UNO
              </div>
              <h1 className="text-4xl font-bold tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl text-black dark:text-black">
                Tienda de Golf Hoyo Uno
              </h1>
            </div>
            <p className="mx-auto max-w-2xl text-gray-500 dark:text-gray-400">
              Eleva tu juego con los últimos equipos y ropa elegante. Desde el tee hasta el green, te tenemos cubierto.
            </p>
          </div>
          <div className="grid max-w-5xl mx-auto items-start gap-6 lg:grid-cols-3 lg:gap-12">
            <div className="grid gap-2">
              <h2 className="text-2xl font-semibold text-black dark:text-black">Palos de Golf</h2>
              <p className="text-gray-500 dark:text-gray-400">Encuentra tu palo perfecto</p>
              <img
                alt="Golf Club"
                className="object-cover rounded-lg"
                height={400}
                src="/placeholder.svg"
                style={{
                  aspectRatio: "500/400",
                  objectFit: "cover",
                }}
                width={500}
              />
            </div>
            <div className="grid gap-2">
              <h2 className="text-2xl font-semibold text-black dark:text-black">Pelotas de Golf</h2>
              <p className="text-gray-500 dark:text-gray-400">Libera tu juego</p>
              <img
                alt="Golf Balls"
                className="object-cover rounded-lg"
                height={400}
                src="/placeholder.svg"
                style={{
                  aspectRatio: "500/400",
                  objectFit: "cover",
                }}
                width={500}
              />
            </div>
            <div className="grid gap-2">
              <h2 className="text-2xl font-semibold text-black dark:text-black">Ropa de Golf</h2>
              <p className="text-gray-500 dark:text-gray-400">Estilo en el campo</p>
              <img
                alt="Golf Clothing"
                className="object-cover rounded-lg"
                height={400}
                src="/placeholder.svg"
                style={{
                  aspectRatio: "500/400",
                  objectFit: "cover",
                }}
                width={500}
              />
            </div>
            <div className="grid gap-2">
              <h2 className="text-2xl font-semibold text-black dark:text-black">Zapatos de Golf</h2>
              <p className="text-gray-500 dark:text-gray-400">Comodidad y rendimiento</p>
              <img
                alt="Golf Shoes"
                className="object-cover rounded-lg"
                height={400}
                src="/placeholder.svg"
                style={{
                  aspectRatio: "500/400",
                  objectFit: "cover",
                }}
                width={500}
              />
            </div>
            <div className="grid gap-2">
              <h2 className="text-2xl font-semibold text-black dark:text-black">Bolsas de Golf</h2>
              <p className="text-gray-500 dark:text-gray-400">Lleva con confianza</p>
              <img
                alt="Golf Bags"
                className="object-cover rounded-lg"
                height={400}
                src="/placeholder.svg"
                style={{
                  aspectRatio: "500/400",
                  objectFit: "cover",
                }}
                width={500}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}