`components/FeaturedSection.tsx`

40 lines
import WineCard from './WineCard'

interface FeaturedSectionProps {
  title: string
  subtitle: string
  wines: any[]
  gradient: string
}

export default function FeaturedSection({ title, subtitle, wines, gradient }: FeaturedSectionProps) {
  if (!wines || wines.length === 0) {
    return null
  }

  return (
    <section className="mb-16">
      <div className="mb-8">
        <h2 className={`text-4xl font-bold mb-2 bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
          {title}
        </h2>
        <p className="text-gray-600 text-lg">{subtitle}</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {wines.slice(0, 8).map((wine, index) => (
          <WineCard key={index} wine={wine} />
        ))}
      </div>
      
      {wines.length > 8 && (
        <div className="text-center mt-8">
          <button className="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-full hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:shadow-lg">
            View All ({wines.length} wines) →
          </button>
        </div>
      )}
    </section>
  )
}