Deploy

2026-06-23 08:47:36 +00:00
parent b2c0a3d611
commit 70914ddefa
1 changed files with 84 additions and 0 deletions
@@ -0,0 +1,84 @@
 import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
 import Button from '@/components/ui/Button'
 import Image from 'next/image'
 export default function PricingSection() {
  const services = [
    {
      title: "Precision Haircuts",
      description: "Expert cuts tailored to your face shape and hair texture. Includes consultation and styling.",
      price: "R250",
      image: "https://images.pexels.com/photos/3356211/pexels-photo-3356211.jpeg?auto=compress&cs=tinysrgb&h=350&w=400",
      features: ["Consultation", "Wash & condition", "Blow-dry finish"]
    },
    {
      title: "Professional Colouring",
      description: "Full colour, highlights, balayage, and root touch-ups using premium Schwarzkopf products.",
      price: "R550 – R1,200",
      image: "https://images.pexels.com/photos/8468142/pexels-photo-8468142.jpeg?auto=compress&cs=tinysrgb&h=350&w=400",
      features: ["Colour consultation", "Application", "Toner & gloss"]
    },
    {
      title: "Keratin Smoothing",
      description: "Brazilian keratin treatment that eliminates frizz, adds shine, and lasts up to 3 months.",
      price: "R890",
      image: "https://images.pexels.com/photos/7447150/pexels-photo-7447150.jpeg?auto=compress&cs=tinysrgb&h=350&w=400",
      features: ["Deep cleanse", "Keratin infusion", "Flat-iron sealing"]
    },
    {
      title: "Nail Art & Manicure",
      description: "Gel, acrylic, and natural nail services with intricate designs — from classic French to modern art.",
      price: "R180 – R650",
      image: "https://images.pexels.com/photos/12275462/pexels-photo-12275462.jpeg?auto=compress&cs=tinysrgb&h=350&w=400",
      features: ["Shaping & cuticle care", "Polish or gel", "Design & top coat"]
    }
  ]
  return (
    <section id="pricing" data-vula-section="pricing" className="py-20 lg:py-28 bg-white">
      <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 text-[#7c3aed]">
          Premium Services — Transparent Pricing
        </h2>
        <p className="text-center text-base lg:text-lg leading-relaxed text-neutral-600 max-w-2xl mx-auto mb-12">
          Every treatment uses salon-grade products and is performed by certified stylists. We believe in honest pricing — no hidden fees, no surprises.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service, index) => (
            <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={225}
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
                />
              </div>
              <CardHeader className="p-6 pb-2">
                <CardTitle className="text-xl font-semibold text-[#111827]">{service.title}</CardTitle>
              </CardHeader>
              <CardContent className="px-6 pb-2">
                <p className="text-sm text-neutral-600 mb-3">{service.description}</p>
                <ul className="space-y-1">
                  {service.features.map((feat, i) => (
                    <li key={i} className="text-sm text-neutral-500 flex items-center gap-2">
                      <span className="w-1.5 h-1.5 rounded-full bg-[#d4af37]"></span>
                      {feat}
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter className="p-6 pt-4 flex items-center justify-between">
                <span className="text-lg font-bold text-[#ff7f50]">{service.price}</span>
                <Button size="sm" variant="default" className="bg-[#7c3aed] text-white px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition-all duration-200">
                  Book Now
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
 }