Deploy

2026-06-03 16:38:52 +00:00
parent 1bc0a693c5
commit f20e7503eb
1 changed files with 67 additions and 0 deletions
@@ -0,0 +1,67 @@
 'use client'
 import Image from 'next/image'
 import { Soup, UtensilsCrossed, Wine } from 'lucide-react'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
 export default function ServicesSection() {
  const services = [
    {
      icon: UtensilsCrossed,
      title: 'Tapas Bar',
      description: 'Over 20 varieties of traditional Spanish tapas — from patatas bravas to jamón ibérico, each prepared with time-honoured techniques.',
      image: 'https://images.pexels.com/photos/37328675/pexels-photo-37328675.jpeg?auto=compress&cs=tinysrgb&h=350'
    },
    {
      icon: Soup,
      title: 'Signature Paella',
      description: 'Our Valencian paella, cooked over open fire with saffron-infused bomba rice, fresh seafood, and locally sourced vegetables.',
      image: 'https://images.pexels.com/photos/37328676/pexels-photo-37328676.jpeg?auto=compress&cs=tinysrgb&h=350'
    },
    {
      icon: Wine,
      title: 'Curated Wine Pairing',
      description: 'An extensive selection of Riojas, Riberas, and Albariños personally selected by our sommelier trained in La Rioja.',
      image: 'https://images.pexels.com/photos/37328677/pexels-photo-37328677.jpeg?auto=compress&cs=tinysrgb&h=350'
    }
  ]
  return (
    <section data-vula-section="services" id="services" className="py-20 lg:py-28 bg-neutral-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <p className="text-sm font-semibold tracking-widest uppercase text-[#6b8e23] mb-2">La Carta</p>
          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900">Our Signature Offerings</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {services.map((service, index) => {
            const Icon = service.icon
            return (
              <Card key={index} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
                <div className="aspect-video overflow-hidden rounded-t-xl">
                  <Image
                    src={service.image}
                    alt={service.title}
                    width={400}
                    height={300}
                    className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
                  />
                </div>
                <CardHeader className="p-6 pb-0">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-full bg-[#d4af37]/10 text-[#d4af37]">
                      <Icon className="w-6 h-6" />
                    </div>
                    <CardTitle className="text-xl font-semibold tracking-tight text-gray-900">{service.title}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent className="p-6 pt-2">
                  <p className="text-base text-neutral-600 leading-relaxed">{service.description}</p>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
 }