117 lines
4.8 KiB
TypeScript
117 lines
4.8 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
|
|
import Link from "next/link"
|
|
|
|
const services = [
|
|
{
|
|
title: "Black & Grey Realism",
|
|
description: "Photorealistic tattoos with incredible depth and detail using black and grey shading techniques.",
|
|
features: ["Lifelike portraits", "Detailed shading", "3D effects"],
|
|
price: "Starting at $250",
|
|
},
|
|
{
|
|
title: "Cover-ups & Blackout",
|
|
description: "Transform old tattoos into stunning new pieces with expert cover-up techniques or bold blackout designs.",
|
|
features: ["Free consultation", "Creative solutions", "Complete coverage"],
|
|
price: "Starting at $300",
|
|
},
|
|
{
|
|
title: "Fine Line & Micro Realism",
|
|
description: "Delicate, precise linework and tiny realistic designs that showcase incredible detail.",
|
|
features: ["Single needle work", "Intricate details", "Minimalist aesthetic"],
|
|
price: "Starting at $150",
|
|
},
|
|
{
|
|
title: "Traditional & Neo-Traditional",
|
|
description: "Bold American traditional and neo-traditional styles with vibrant colors and strong lines.",
|
|
features: ["Classic designs", "Bold color palettes", "Timeless appeal"],
|
|
price: "Starting at $200",
|
|
},
|
|
{
|
|
title: "Anime & Watercolor",
|
|
description: "Vibrant anime characters and painterly watercolor effects that bring art to life on skin.",
|
|
features: ["Character designs", "Soft color blends", "Artistic techniques"],
|
|
price: "Starting at $250",
|
|
},
|
|
]
|
|
|
|
export function ServicesMobileOnly() {
|
|
return (
|
|
<section className="lg:hidden bg-black text-white py-16">
|
|
{/* Header */}
|
|
<div className="px-6 mb-12 text-center">
|
|
<div className="mb-4">
|
|
<span className="text-sm font-medium tracking-widest text-white/60 uppercase">Our Services</span>
|
|
</div>
|
|
<h2 className="text-4xl font-bold tracking-tight mb-4">Choose Your Style</h2>
|
|
<p className="text-white/70 max-w-md mx-auto">
|
|
From custom designs to cover-ups, we offer comprehensive tattoo services with the highest standards.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Carousel */}
|
|
<div className="px-4">
|
|
<Carousel
|
|
opts={{
|
|
align: "start",
|
|
loop: true,
|
|
}}
|
|
className="w-full max-w-sm mx-auto"
|
|
>
|
|
<CarouselContent className="-ml-2">
|
|
{services.map((service, index) => (
|
|
<CarouselItem key={index} className="pl-2 basis-full">
|
|
<Card className="bg-black border-white/20 text-white h-full">
|
|
<CardHeader className="pb-4">
|
|
<div className="text-xs font-medium tracking-widest text-white/60 uppercase mb-2">
|
|
Service {String(index + 1).padStart(2, "0")}
|
|
</div>
|
|
<CardTitle className="text-2xl font-bold leading-tight">
|
|
{service.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-white/80 text-base leading-relaxed">
|
|
{service.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="pb-4">
|
|
<div className="space-y-2 mb-6">
|
|
{service.features.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center text-white/70">
|
|
<span className="w-1.5 h-1.5 bg-white/40 rounded-full mr-3 flex-shrink-0"></span>
|
|
<span className="text-sm">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-xl font-bold text-white mb-4">
|
|
{service.price}
|
|
</div>
|
|
</CardContent>
|
|
|
|
<CardFooter className="pt-0">
|
|
<Button
|
|
asChild
|
|
className="w-full bg-white text-black hover:bg-gray-100 !text-black font-medium"
|
|
>
|
|
<Link href="/book">BOOK NOW</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
|
|
<div className="flex justify-center mt-8 gap-4">
|
|
<CarouselPrevious className="relative translate-y-0 left-0 bg-white/10 border-white/20 text-white hover:bg-white/20" />
|
|
<CarouselNext className="relative translate-y-0 right-0 bg-white/10 border-white/20 text-white hover:bg-white/20" />
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|