Update components/services.tsx

2026-01-18 18:27:12 +00:00 · 2026-01-18 18:27:12 +00:00 · dc4ef91a41
parent d7bace1bc9
commit dc4ef91a41
1 changed files with 67 additions and 0 deletions
--- a/components/services.tsx
+++ b/components/services.tsx
@ -0,0 +1,67 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Sparkles, Scissors, Heart, Star, Zap, Smile } from "lucide-react";
+
+const services = [
+  {
+    title: "Advanced Facials",
+    description: "Customized skin treatments including hydrafacials, anti-aging, and deep cleansing for a radiant Miami glow.",
+    icon: <Sparkles className="w-8 h-8 text-pink-500" />,
+  },
+  {
+    title: "Expert Waxing",
+    description: "Professional hair removal services for smooth, long-lasting results using premium, gentle waxes.",
+    icon: <Zap className="w-8 h-8 text-pink-500" />,
+  },
+  {
+    title: "Body Treatments",
+    description: "Rejuvenating body scrubs and wraps designed to detoxify and hydrate your skin.",
+    icon: <Heart className="w-8 h-8 text-pink-500" />,
+  },
+  {
+    title: "Manicure & Pedicure",
+    description: "Luxury nail care with high-quality polishes and relaxing spa techniques for perfect hands and feet.",
+    icon: <Star className="w-8 h-8 text-pink-500" />,
+  },
+  {
+    title: "Skin Care Consultation",
+    description: "Personalized analysis and product recommendations from our licensed estheticians.",
+    icon: <Smile className="w-8 h-8 text-pink-500" />,
+  },
+  {
+    title: "Lash & Brow",
+    description: "Enhance your natural beauty with professional lash lifts, tints, and brow shaping.",
+    icon: <Scissors className="w-8 h-8 text-pink-500" />,
+  },
+];
+
+export function Services() {
+  return (
+    <section id="services" className="py-24 bg-neutral-50">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <Heading>Our Signature Services</Heading>
+          <Subheading className="mt-4">
+            Tailored beauty solutions designed to make you look and feel your absolute best.
+          </Subheading>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {services.map((service, index) => (
+            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow bg-white">
+              <CardHeader>
+                <div className="mb-4">{service.icon}</div>
+                <CardTitle className="text-xl font-semibold">{service.title}</CardTitle>
+                <CardDescription className="text-neutral-600 leading-relaxed">
+                  {service.description}
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}