91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { resortData } from "@/src/data/resort";
|
||
import { useState } from "react";
|
||
import AccommodationCard from "../components/AccommodationCard";
|
||
|
||
export default function AccommodationPage() {
|
||
const lang = "tr";
|
||
const [filter, setFilter] = useState<"all" | "rooms" | "residence">("all");
|
||
|
||
const filteredRooms = resortData.rooms.filter(room => {
|
||
if (filter === "all") return true;
|
||
if (filter === "rooms") return !room.slug.includes("rezidans");
|
||
if (filter === "residence") return room.slug.includes("rezidans");
|
||
return true;
|
||
});
|
||
|
||
return (
|
||
<div className="bg-[#ECE7E1] min-h-screen pt-72 md:pt-96 pb-48 flex flex-col items-center">
|
||
<div className="max-w-[1600px] mx-auto px-6 ">
|
||
|
||
{/* Header Section */}
|
||
<div className="space-y-12 mb-32 mt-40">
|
||
<div className="space-y-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
className="flex items-center gap-4"
|
||
>
|
||
<div className="w-12 h-px bg-gold" />
|
||
<span className="text-gold text-[10px] tracking-[0.5em] font-bold uppercase block">
|
||
KONAKLAMA DENEYİMİ
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.1, duration: 0.8 }}
|
||
className="text-6xl md:text-8xl font-serif text-gray-900 leading-[0.85] tracking-tight"
|
||
>
|
||
Zarafet & <br /><span className="italic font-light">Ege Serüveni</span>
|
||
</motion.h1>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.3 }}
|
||
className="pt-10 border-t border-black/5"
|
||
>
|
||
<p className="text-gray-500 font-light text-2xl leading-relaxed italic border-l-4 border-gold/20 pl-8 max-w-2xl">
|
||
“Bardakçı Koyu'nun büyüleyici manzarasında, lüksün ve huzurun buluştuğu noktada sizi ağırlıyoruz.”
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="flex bg-white p-2 rounded-full shadow-sm border border-black/5 w-fit">
|
||
{["all", "rooms", "residence"].map((id) => (
|
||
<button
|
||
key={id}
|
||
onClick={() => setFilter(id as any)}
|
||
className={`px-10 py-3 rounded-full text-[10px] font-bold tracking-[0.2em] transition-all duration-500 ${filter === id ? "bg-[#5C6353] text-white shadow-lg" : "text-gray-400 hover:text-gray-900"
|
||
}`}
|
||
>
|
||
{id === "all" ? "HEPSİ" : id === "rooms" ? "ODALAR" : "REZİDANS"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Accommodation Grid - Single Column for Wide Mode */}
|
||
<div className="flex flex-col gap-y-16">
|
||
{filteredRooms.map((room) => (
|
||
<motion.div
|
||
key={room.slug}
|
||
layout
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<AccommodationCard room={room} lang={lang} />
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|