feat: complete initial project setup with i18n and standalone config
This commit is contained in:
147
app/[locale]/villas/[slug]/page.tsx
Normal file
147
app/[locale]/villas/[slug]/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { villas } from '@/data/villas';
|
||||
import { notFound } from 'next/navigation';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Bed, Users, Droplets, Wind, Wifi, Utensils, MapPin, Calendar, MessageCircle, Mail, Phone } from 'lucide-react';
|
||||
import VillaGallery from '@/components/VillaGallery';
|
||||
|
||||
export default async function VillaDetailPage({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{ locale: string, slug: string }>
|
||||
}) {
|
||||
const { slug, locale } = await params;
|
||||
const villa = villas.find((v) => v.slug === slug);
|
||||
|
||||
if (!villa) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const l = locale as 'tr' | 'en';
|
||||
|
||||
return (
|
||||
<main className="bg-bone min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero / Header */}
|
||||
<section className="pt-32 pb-12 px-6 max-w-7xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-8">
|
||||
<div>
|
||||
<div className="flex items-center text-salmakis-blue font-bold tracking-widest text-xs mb-2 uppercase">
|
||||
<MapPin className="w-3 h-3 mr-1" />
|
||||
{villa.location}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-serif text-aegean-dark">{villa.name}</h1>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-[10px] uppercase font-bold text-aegean-dark/40 block mb-1">Gecelik Başlangıç</span>
|
||||
<span className="text-3xl font-serif font-bold text-salmakis-blue">€{villa.priceLow}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dynamic Gallery with Lightbox */}
|
||||
<VillaGallery images={villa.images} name={villa.name} />
|
||||
</section>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<section className="py-12 px-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
{/* Description & Specs */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="prose prose-lg max-w-none text-aegean-dark/80 mb-16 font-sans">
|
||||
<h2 className="text-3xl font-serif text-aegean-dark mb-6">Villa Hakkında</h2>
|
||||
<p className="leading-relaxed whitespace-pre-line">
|
||||
{villa.description[l]}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-serif text-aegean-dark mb-8">Özellikler & Olanaklar</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{villa.amenities[l].map((amenity, idx) => (
|
||||
<div key={idx} className="flex items-center space-x-3 text-aegean-dark/70">
|
||||
<div className="w-8 h-8 rounded-lg bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
|
||||
<Droplets className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">{amenity}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Table */}
|
||||
<div className="bg-white rounded-3xl p-8 border border-aegean-dark/5 shadow-sm">
|
||||
<h2 className="text-2xl font-serif text-aegean-dark mb-6 flex items-center">
|
||||
<Calendar className="w-5 h-5 mr-3 text-salmakis-blue" />
|
||||
Sezonluk Fiyatlandırma
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b border-aegean-dark/5">
|
||||
<th className="py-4 text-xs font-bold uppercase tracking-[0.2em] text-aegean-dark/40">Dönem</th>
|
||||
<th className="py-4 text-xs font-bold uppercase tracking-[0.2em] text-aegean-dark/40 text-right">Gecelik</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm">
|
||||
<tr className="border-b border-aegean-dark/5">
|
||||
<td className="py-4 font-medium text-aegean-dark/70">Nisan - Mayıs (Düşük Sezon)</td>
|
||||
<td className="py-4 text-right font-bold text-aegean-dark">€{villa.priceLow}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-aegean-dark/5">
|
||||
<td className="py-4 font-medium text-aegean-dark/70">Haziran - Eylül (Yüksek Sezon)</td>
|
||||
<td className="py-4 text-right font-bold text-aegean-dark">€{villa.priceHigh}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-4 font-medium text-aegean-dark/70">Ekim - Kasım (Orta Sezon)</td>
|
||||
<td className="py-4 text-right font-bold text-aegean-dark">€{Math.round((villa.priceLow + villa.priceHigh) / 1.5 / 50) * 50}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar / Booking */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-32 space-y-6">
|
||||
<div className="bg-aegean-dark text-bone p-8 rounded-3xl shadow-xl overflow-hidden relative">
|
||||
<div className="relative z-10 text-center">
|
||||
<h3 className="text-2xl font-serif mb-4 text-sand">Rezervasyon Talebi</h3>
|
||||
<p className="text-bone/70 text-sm mb-8 leading-relaxed">Bu villa için uygunluk durumunu sorgulamak ve detaylı bilgi almak için bizimle iletişime geçin.</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<a
|
||||
href={`https://wa.me/905000000000?text=${encodeURIComponent(`${villa.name} hakkında bilgi almak istiyorum.`)}`}
|
||||
className="flex items-center justify-center space-x-3 w-full py-4 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-2xl font-bold transition-all shadow-lg shadow-green-900/20"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
<span>WhatsApp'tan Sorun</span>
|
||||
</a>
|
||||
<a
|
||||
href="tel:+902523162877"
|
||||
className="flex items-center justify-center space-x-3 w-full py-4 bg-white/10 hover:bg-white/20 text-white rounded-2xl font-bold border border-white/10 transition-all"
|
||||
>
|
||||
<Phone className="w-5 h-5" />
|
||||
<span>Hemen Arayın</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative background circle */}
|
||||
<div className="absolute -bottom-10 -right-10 w-40 h-40 bg-salmakis-blue opacity-10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="bg-sand/10 p-6 rounded-3xl border border-sand/20">
|
||||
<h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-aegean-dark/60 mb-4">Minimum Konaklama</h4>
|
||||
<p className="text-sm font-medium text-aegean-dark/80 leading-relaxed">
|
||||
Yüksek sezonda <span className="text-aegean-dark font-bold underline decoration-sand/50 decoration-2 underline-offset-4">7 gece</span>, diğer dönemlerde <span className="text-aegean-dark font-bold underline decoration-sand/50 decoration-2 underline-offset-4">3 gecedir</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user