Deploy

2026-06-04 11:45:22 +00:00
parent bacf7fa092
commit e409afccbe
1 changed files with 76 additions and 0 deletions
@@ -0,0 +1,76 @@
+import Image from 'next/image'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import { ChefHat, ShoppingBag, UtensilsCrossed } from 'lucide-react'
+
+export default function ServicesSection() {
+  const services = [
+    {
+      icon: UtensilsCrossed,
+      title: 'Dine-In Experience',
+      description: 'Relax in our warm, spice-scented dining room. Each table is set for conversation and flavour — from fragrant biryanis to slow-simmered daals.',
+      image: 'https://images.pexels.com/photos/37102485/pexels-photo-37102485.jpeg?auto=compress&cs=tinysrgb&h=350&w=400',
+      cta: 'View Menu'
+    },
+    {
+      icon: ShoppingBag,
+      title: 'Takeaway & Delivery',
+      description: 'Our signature curries travel as well as they taste. Order online for quick pickup or free delivery within the Berea and Morningside suburbs.',
+      image: 'https://images.pexels.com/photos/19116639/pexels-photo-19116639.jpeg?auto=compress&cs=tinysrgb&h=350&w=400',
+      cta: 'Order Now'
+    },
+    {
+      icon: ChefHat,
+      title: 'Catering & Events',
+      description: 'We bring Durban Curry to your gathering — from intimate family celebrations to corporate lunches. Custom menus with traditional and fusion dishes.',
+      image: 'https://images.pexels.com/photos/104884/pexels-photo-104884.jpeg?auto=compress&cs=tinysrgb&h=350&w=400',
+      cta: 'Get a Quote'
+    }
+  ]
+
+  return (
+    <section data-vula-section="services" id="services" className="py-20 lg:py-28 bg-background">
+      <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-[#dc2626]">Our Offerings</span>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-foreground mt-3">Serving Durban with Love & Spice</h2>
+          <p className="mt-4 text-base lg:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto">
+            Whether you dine in, take away, or celebrate with us — every meal is crafted with locally sourced ingredients and generations of family tradition.
+          </p>
+        </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 overflow-hidden">
+                <div className="aspect-video overflow-hidden">
+                  <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="pb-2">
+                  <div className="flex items-center gap-3">
+                    <Icon className="w-6 h-6 text-[#ea580c]" />
+                    <CardTitle className="text-xl font-semibold text-foreground">{service.title}</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="pb-4">
+                  <p className="text-muted-foreground leading-relaxed">{service.description}</p>
+                </CardContent>
+                <CardFooter>
+                  <Button variant="outline" className="border-[#ea580c] text-[#ea580c] hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
+                    <a href="#contact" className="text-inherit no-underline">{service.cta}</a>
+                  </Button>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}