103 lines
5.1 KiB
TypeScript
103 lines
5.1 KiB
TypeScript
import { resortData } from "@/src/data/resort";
|
||
import { getCloudinaryUrl } from "@/src/lib/cloudinary";
|
||
import Image from "next/image";
|
||
|
||
export default function Spa() {
|
||
const lang = "tr"; // Mocked locale
|
||
|
||
return (
|
||
<div className="bg-white">
|
||
{/* Immersive Hero Header */}
|
||
<section className="relative h-[60vh] w-full flex items-center justify-center overflow-hidden">
|
||
<Image
|
||
src={getCloudinaryUrl("salmakis/spa/spa_hero", { width: 1920, height: 1080, crop: "fill", quality: 90 })}
|
||
alt="SPA Center"
|
||
fill
|
||
className="object-cover brightness-90 animate-fade-in-up"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-black/30 to-transparent" />
|
||
<div className="relative z-10 text-center text-white px-6">
|
||
<span className="text-turquoise uppercase tracking-[1em] text-xs font-bold mb-4 block">
|
||
REJUVENATE
|
||
</span>
|
||
<h1 className="text-5xl md:text-7xl font-serif font-bold tracking-tight mb-4">
|
||
{resortData.nav.spa[lang]}
|
||
</h1>
|
||
<div className="w-24 h-px bg-white mx-auto" />
|
||
</div>
|
||
</section>
|
||
|
||
{/* Intro Section - White Marble Aesthetic */}
|
||
<section className="py-24 section-padding bg-gradient-to-b from-zinc-50 to-white">
|
||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||
<div className="inline-block p-4 border border-turquoise/20 rounded-full">
|
||
<div className="w-12 h-12 flex items-center justify-center bg-turquoise/10 rounded-full text-turquoise text-2xl">✨</div>
|
||
</div>
|
||
<h2 className="text-3xl md:text-5xl font-serif text-bodrum-blue font-medium leading-tight">
|
||
{lang === "tr"
|
||
? "Saf beyaz mermerin huzuru ve asırlık şifa gelenekleriyle ruhunuzu arındırın."
|
||
: "Purify your soul with the peace of pure white marble and centuries-old healing traditions."}
|
||
</h2>
|
||
<p className="text-gray-500 text-lg font-light leading-relaxed max-w-2xl mx-auto">
|
||
{lang === "tr"
|
||
? "Salmakis SPA & Wellness, modern terapileri geleneksel Türk hamamı ritüelleriyle birleştirerek size eşsiz bir yenilenme deneyimi sunuyor."
|
||
: "Salmakis SPA & Wellness offers you a unique rejuvenation experience by combining modern therapies with traditional Turkish bath rituals."}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Masonry-Style Treatments Gallery */}
|
||
<section className="pb-32 section-padding bg-white">
|
||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||
{resortData.spaTreatments.map((item, idx) => (
|
||
<div
|
||
key={item.slug}
|
||
className={`flex flex-col group ${idx % 2 === 1 ? 'md:mt-24' : ''} animate-fade-in-up`}
|
||
style={{ animationDelay: `${idx * 150}ms` }}
|
||
>
|
||
<div className="relative aspect-video rounded-3xl overflow-hidden mb-8 shadow-2xl shadow-black/5">
|
||
<Image
|
||
src={getCloudinaryUrl(item.imageId, { width: 1200, height: 800, crop: "fill" })}
|
||
alt={item.name[lang]}
|
||
fill
|
||
className="object-cover grayscale-[20%] group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105"
|
||
/>
|
||
<div className="absolute top-6 right-6 bg-white/90 backdrop-blur-md px-4 py-2 rounded-full text-[10px] font-bold tracking-widest text-turquoise">
|
||
{item.duration}
|
||
</div>
|
||
</div>
|
||
<div className="px-4">
|
||
<h3 className="text-3xl font-serif font-bold text-gray-900 mb-4">{item.name[lang]}</h3>
|
||
<p className="text-gray-500 leading-relaxed font-light mb-6">
|
||
{item.description[lang]}
|
||
</p>
|
||
<button className="text-xs font-black tracking-[0.2em] text-turquoise border-b-2 border-turquoise pb-1 hover:text-bodrum-blue hover:border-bodrum-blue transition-colors uppercase">
|
||
{lang === "tr" ? "DETAYLARI İNCELE" : "VIEW DETAILS"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Marble Callout */}
|
||
<section className="h-screen relative flex items-center justify-center">
|
||
<Image
|
||
src={getCloudinaryUrl("salmakis/spa/marble_texture", { width: 1920, height: 1080, crop: "fill" })}
|
||
alt="White Marble"
|
||
fill
|
||
className="object-cover opacity-20"
|
||
/>
|
||
<div className="relative z-10 max-w-2xl text-center px-6">
|
||
<h4 className="text-turquoise uppercase tracking-[0.4em] text-sm font-bold mb-8">Bodrum Tradition</h4>
|
||
<p className="text-4xl font-serif italic text-bodrum-blue leading-normal">
|
||
{lang === "tr"
|
||
? "“Güneşin sıcaklığı ve suyun huzuru burada birleşiyor.”"
|
||
: "“Where the warmth of the sun and the peace of the water unite.”"}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|