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>
  )
 }