Deploy

src/components/sections/OfferingsSection.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import Image from 'next/image'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import Badge from '@/components/ui/Badge'
+
+export default function OfferingsSection() {
+  const offerings = [
+    {
+      title: 'Single-Origin Beans',
+      description: 'Ethiopian Yirgacheffe, Kenyan AA, Rwandan Bourbon — each lot traceable to the cooperative.',
+      image: 'https://images.pexels.com/photos/2299028/pexels-photo-2299028.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tags: ['Ethiopia', 'Kenya', 'Rwanda']
+    },
+    {
+      title: 'Wholesale Partnerships',
+      description: 'Tailored blends for Cape Town cafes, hotels, and restaurants. Consistent quality, weekly deliveries.',
+      image: 'https://images.pexels.com/photos/4829068/pexels-photo-4829068.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tags: ['Hospitality', 'Bulk Order']
+    },
+    {
+      title: 'Brewing Workshops',
+      description: 'Monthly cupping sessions at our Woodstock roastery. Learn pour-over, aeropress, and espresso basics.',
+      image: 'https://images.pexels.com/photos/4829068/pexels-photo-4829068.jpeg?auto=compress&cs=tinysrgb&h=350',
+      tags: ['Workshop', 'Experience']
+    }
+  ]
+
+  return (
+    <section data-vula-section="offerings" id="services" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-16">
+          <span className="text-sm font-semibold tracking-widest uppercase text-[#d4af37]">What We Offer</span>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-foreground mt-4">From Bean to Brew</h2>
+          <p className="mt-4 text-lg leading-relaxed text-neutral-600 max-w-2xl mx-auto">
+            Direct trade relationships across Africa ensure fair wages and exceptional flavour.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {offerings.map((offering, i) => (
+            <Card key={i} 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={offering.image}
+                  alt={offering.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-2">
+                <CardTitle className="text-xl font-semibold text-foreground">{offering.title}</CardTitle>
+              </CardHeader>
+              <CardContent className="p-6 pt-0 space-y-4">
+                <CardDescription className="text-base leading-relaxed text-neutral-600">
+                  {offering.description}
+                </CardDescription>
+                <div className="flex flex-wrap gap-2">
+                  {offering.tags.map((tag, j) => (
+                    <Badge key={j} variant="secondary" className="bg-[#16a34a]/10 text-[#16a34a] border-0 px-3 py-1 text-sm">{tag}</Badge>
+                  ))}
+                </div>
+                <Button variant="outline" size="sm" className="w-full border-[#8b5a3c] text-[#8b5a3c] hover:bg-[#8b5a3c] hover:text-white transition-all duration-200">
+                  Learn More
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}