Hero Section for Toys

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

export default function HeroSectionToys() {
  return (
    <div className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background image of toys */}
      <Image
        src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
        alt="Colorful collection of children's toys"
        layout="fill"
        objectFit="cover"
        quality={100}
        className="absolute z-0"
      />
      
      {/* Colorful gradient overlay to improve text readability */}
      <div className="absolute inset-0 bg-gradient-to-b sm:bg-gradient-to-r from-purple-500 via-pink-500 to-transparent opacity-70 z-10"></div>
      
      {/* Hero content */}
      <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">
            Discover a World of Fun!
          </h1>
          <p className="mt-2 sm:mt-3 text-base sm:text-lg md:text-xl lg:text-2xl text-yellow-100 mb-4 sm:mb-8">
            Explore our magical collection of toys that spark imagination and bring smiles to the little ones.
          </p>
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <Link href="/toys" className="inline-block bg-yellow-400 text-purple-900 font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-full hover:bg-yellow-300 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
              View Toys
            </Link>
            <Link href="/categories" 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-purple-700 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
              Explore Categories
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}