218 lines
9.3 KiB
TypeScript
218 lines
9.3 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Check, Wifi, Wind, Coffee, Eye, Trees } from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
|
||
const roomsTr = [
|
||
{
|
||
img: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop",
|
||
tag: "Standart",
|
||
name: "Standart Oda",
|
||
desc: "Konforlu ve modern tasarımlı standart odalarımızda rahatlığın tadını çıkarın. Çift kişilik yatak ve şık dekorasyon ile dinlendirici bir atmosfer.",
|
||
sqm: "20 m²",
|
||
price: "₺4.500",
|
||
features: [
|
||
{ icon: Wifi, label: "Ücretsiz Wi-Fi" },
|
||
{ icon: Wind, label: "Klima" },
|
||
{ icon: Coffee, label: "Minibar" },
|
||
{ icon: Eye, label: "Bahçe Manzarası" },
|
||
],
|
||
reversed: false,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
|
||
tag: "Popüler",
|
||
name: "Nehir Manzaralı Oda",
|
||
desc: "Güne Azmak nehrinin eşsiz manzarası eşliğinde uyanacağınız ferah odalar. Balkonunuzda sabah kahvenizi yudumlarken doğanın sesini dinleyin.",
|
||
sqm: "25 m²",
|
||
price: "₺5.500",
|
||
features: [
|
||
{ icon: Eye, label: "Nehir Manzarası" },
|
||
{ icon: Trees, label: "Özel Balkon" },
|
||
{ icon: Coffee, label: "Nespresso Makinesi" },
|
||
{ icon: Wifi, label: "Ücretsiz Wi-Fi" },
|
||
],
|
||
reversed: true,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
|
||
tag: "Premium",
|
||
name: "Ahşap Bungalow",
|
||
desc: "Doğayla tamamen iç içe, bağımsız girişli ve teraslı ahşap tasarımlı yaşam alanı. Gizlilik ve huzur arayan çiftler için ideal.",
|
||
sqm: "35 m²",
|
||
price: "₺7.000",
|
||
features: [
|
||
{ icon: Trees, label: "Özel Teras" },
|
||
{ icon: Eye, label: "Doğa Manzarası" },
|
||
{ icon: Coffee, label: "Premium İkramlar" },
|
||
{ icon: Wind, label: "Klima" },
|
||
],
|
||
reversed: false,
|
||
},
|
||
];
|
||
|
||
const roomsEn = [
|
||
{
|
||
img: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop",
|
||
tag: "Standard",
|
||
name: "Standard Room",
|
||
desc: "Enjoy comfort in our modern standard rooms. Relaxing atmosphere with a double bed and stylish decoration.",
|
||
sqm: "20 m²",
|
||
price: "₺4.500",
|
||
features: [
|
||
{ icon: Wifi, label: "Free Wi-Fi" },
|
||
{ icon: Wind, label: "Air Conditioning" },
|
||
{ icon: Coffee, label: "Minibar" },
|
||
{ icon: Eye, label: "Garden View" },
|
||
],
|
||
reversed: false,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
|
||
tag: "Popular",
|
||
name: "River View Room",
|
||
desc: "Spacious rooms where you wake up to the unique view of the Azmak river. Listen to the sound of nature while sipping morning coffee on your private balcony.",
|
||
sqm: "25 m²",
|
||
price: "₺5.500",
|
||
features: [
|
||
{ icon: Eye, label: "River View" },
|
||
{ icon: Trees, label: "Private Balcony" },
|
||
{ icon: Coffee, label: "Nespresso Machine" },
|
||
{ icon: Wifi, label: "Free Wi-Fi" },
|
||
],
|
||
reversed: true,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
|
||
tag: "Premium",
|
||
name: "Wooden Bungalow",
|
||
desc: "Wooden living area with private entrance and terrace, fully integrated with nature. Ideal for couples seeking privacy and serenity.",
|
||
sqm: "35 m²",
|
||
price: "₺7.000",
|
||
features: [
|
||
{ icon: Trees, label: "Private Terrace" },
|
||
{ icon: Eye, label: "Nature View" },
|
||
{ icon: Coffee, label: "Premium Amenities" },
|
||
{ icon: Wind, label: "Air Conditioning" },
|
||
],
|
||
reversed: false,
|
||
},
|
||
];
|
||
|
||
export default async function OdalarPage({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = await params;
|
||
const isEn = lang === "en";
|
||
const displayRooms = isEn ? roomsEn : roomsTr;
|
||
const displayAmenities = isEn
|
||
? ["Organic Breakfast Spread", "Free Parking", "Beach & River Access", "Sunbed & Towel", "Wi-Fi", "24/7 Reception"]
|
||
: ["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon"];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
|
||
{/* Page Header */}
|
||
<section className="relative h-[55vh] w-full flex items-end overflow-hidden">
|
||
<div className="absolute inset-0">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop"
|
||
alt={isEn ? "Our Rooms" : "Odalarımız"}
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
|
||
</div>
|
||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
|
||
<span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
|
||
{isEn ? "Accommodation" : "Konaklama"}
|
||
</span>
|
||
<h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
|
||
{isEn ? "Our Rooms" : "Odalarımız"}
|
||
</h1>
|
||
<p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
|
||
{isEn ? "A comfortable break in the heart of nature." : "Doğanın içinde, konforlu bir mola."}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Room Listings */}
|
||
<section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="space-y-16">
|
||
{displayRooms.map((room, i) => (
|
||
<ScrollReveal key={i}>
|
||
<div
|
||
className="grid grid-cols-1 md:grid-cols-2 gap-0 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand"
|
||
>
|
||
{/* Image */}
|
||
<div className={`relative h-80 md:h-auto ${room.reversed ? "md:order-2" : ""}`}>
|
||
<Image
|
||
src={room.img}
|
||
alt={room.name}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
className="object-cover"
|
||
/>
|
||
{/* Tag */}
|
||
<span className="absolute top-5 left-5 bg-dark/80 backdrop-blur-sm text-white text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase">
|
||
{room.tag}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className={`p-10 md:p-14 flex flex-col justify-center ${room.reversed ? "md:order-1" : ""}`}>
|
||
<span className="text-muted text-xs tracking-[0.2em] uppercase mb-3 block">{room.sqm}</span>
|
||
<h2 className="font-serif text-3xl font-bold text-dark mb-4">{room.name}</h2>
|
||
<p className="text-gray-500 mb-8 leading-relaxed text-[15px]">{room.desc}</p>
|
||
|
||
<div className="grid grid-cols-2 gap-3 mb-10">
|
||
{room.features.map(({ icon: Icon, label }, j) => (
|
||
<div key={j} className="flex items-center gap-2.5">
|
||
<div className="w-7 h-7 rounded-full bg-primary/8 flex items-center justify-center flex-shrink-0">
|
||
<Icon size={13} className="text-primary" />
|
||
</div>
|
||
<span className="text-[13px] text-foreground/70">{label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex justify-between items-center pt-8 border-t border-sand">
|
||
<div>
|
||
<span className="text-muted text-xs block mb-1 uppercase tracking-wider">
|
||
{isEn ? "Per Night" : "Gecelik"}
|
||
</span>
|
||
<span className="font-serif text-3xl font-bold text-dark">{room.price}</span>
|
||
</div>
|
||
<Link
|
||
href={`/${lang}/iletisim`}
|
||
className="btn-shimmer bg-accent text-white px-7 py-3.5 rounded-full text-[11px] font-bold tracking-[0.12em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
|
||
>
|
||
{isEn ? "Contact Us" : "Bize Ulaşın"}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Info strip */}
|
||
<section className="py-16 bg-primary">
|
||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h3 className="font-serif text-3xl text-white font-bold mb-4">
|
||
{isEn ? "What's included in all rooms" : "Tüm odalarda dahil olanlar"}
|
||
</h3>
|
||
<div className="flex flex-wrap justify-center gap-4 mt-8">
|
||
{displayAmenities.map((item) => (
|
||
<span key={item} className="inline-flex items-center gap-2 bg-white/10 text-white text-[13px] px-4 py-2 rounded-full border border-white/15">
|
||
<Check size={13} className="text-accent" />
|
||
{item}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|