From 5148661e95da3ddb4aac51f1333176517dcbcf86 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Thu, 4 Jun 2026 09:17:02 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/ServicesSection.tsx | 56 +++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/sections/ServicesSection.tsx

diff --git a/src/components/sections/ServicesSection.tsx b/src/components/sections/ServicesSection.tsx
new file mode 100644
index 0000000..29be45c
--- /dev/null
+++ b/src/components/sections/ServicesSection.tsx
@@ -0,0 +1,56 @@
+import { BookOpen, Coffee, Leaf, Users } from 'lucide-react'
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+
+export default function ServicesSection() {
+  const services = [
+    {
+      icon: Leaf,
+      title: "Single-Origin Sourcing",
+      description: "We travel directly to farms in Kenya, Ethiopia, Rwanda, and Tanzania to select beans that reflect terroir and tradition."
+    },
+    {
+      icon: Coffee,
+      title: "Small-Batch Roasting",
+      description: "Each 10 kg batch is profiled individually in our Cape Town roastery to unlock sweetness, acidity, and body."
+    },
+    {
+      icon: Users,
+      title: "Wholesale Partnerships",
+      description: "We supply cafés, restaurants, and offices across the Western Cape with consistent, traceable coffee."
+    },
+    {
+      icon: BookOpen,
+      title: "Brewing Education",
+      description: "Workshops on pour-over, espresso, and cupping — from home enthusiasts to professional baristas."
+    }
+  ]
+
+  return (
+    <section data-vula-section="services" id="services" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-center mb-4">What can we do</h2>
+        <p className="text-neutral-600 text-center max-w-2xl mx-auto mb-12">
+          Every step from farm to cup is intentional — quality, ethics, and flavour.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {services.map((service, index) => {
+            const Icon = service.icon
+            return (
+              <Card key={index} className="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">
+                <CardHeader>
+                  <div className="w-12 h-12 rounded-lg bg-[#8b5a3c]/10 flex items-center justify-center mb-4">
+                    <Icon className="w-6 h-6 text-[#8b5a3c]" />
+                  </div>
+                  <CardTitle className="text-xl font-semibold">{service.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-neutral-600 leading-relaxed">{service.description}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}