From 70914ddefa6d49000a56f1a1da3af8508062f5d7 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:47:36 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/PricingSection.tsx b/src/components/sections/PricingSection.tsx
new file mode 100644
index 0000000..f413e92
--- /dev/null
+++ b/src/components/sections/PricingSection.tsx
@@ -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>
+  )
+}
\ No newline at end of file