Hero Clothing Store

import Image from 'next/image'
import Link from 'next/link'

export default function HeroSection() {
  return (
    <div className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Imagen de fondo real */}
      <Image
        src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
        alt="Interior moderno con artículos de diseño"
        layout="fill"
        objectFit="cover"
        quality={100}
        className="absolute z-0"
      />
      
      {/* Overlay con gradiente para mejorar la legibilidad del texto */}
      <div className="absolute inset-0 bg-gradient-to-b sm:bg-gradient-to-r from-black to-transparent opacity-70 z-10"></div>
      
      {/* Contenido del hero */}
      <div className="relative z-20 text-center sm:text-left px-4 sm:px-6 lg:px-8 max-w-screen-xl w-full">
        <div className="sm:max-w-2xl md:max-w-3xl">
          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight mb-2 sm:mb-4 leading-tight">
            Eleva Tu Espacio con Diseño Exclusivo
          </h1>
          <p className="mt-2 sm:mt-3 text-base sm:text-lg md:text-xl lg:text-2xl text-gray-200 mb-4 sm:mb-8">
            Descubre nuestra colección de artículos únicos que transformarán tu hogar en un oasis de estilo y confort.
          </p>
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <Link href="/productos" className="inline-block bg-white text-gray-900 font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-full hover:bg-gray-100 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
              Explorar Colección
            </Link>
            <Link href="/about" className="inline-block bg-transparent border-2 border-white text-white font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-full hover:bg-white hover:text-gray-900 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
              Nuestra Historia
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}