68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|