diff --git a/src/components/sections/ServicesSection.tsx b/src/components/sections/ServicesSection.tsx
new file mode 100644
index 0000000..8598dd9
--- /dev/null
+++ b/src/components/sections/ServicesSection.tsx
@@ -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>
+  )
+}