ayrisdev/kitebeachakyaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update gallery to bento grid, add real reviews, update phone numbers and locations

Browse Source
This commit is contained in:
Ayris Dev
2026-07-15 13:51:22 +03:00
parent d4bcbb0cc3
commit 7a874ab11d
43 changed files with 1234 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/odalar/page.tsx
+59 -163
View File
@@ -1,111 +1,25 @@
import Image from "next/image";
import Link from "next/link";
import { Check, Wifi, Wind, Coffee, Eye, Trees } from "lucide-react";
import { Check, Info } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
import BentoGallery from "@/components/BentoGallery";
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,
},
const galleryImages = [
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.15.jpeg",
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.18.jpeg",
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.19.jpeg",
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20%20(1).jpeg",
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.20.jpeg",
"https://media.ayris.tech/t/kitebeachakyaka/rooms/WhatsApp%20Image%202026-07-13%20at%2017.02.21.jpeg",
];
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"];
? ["Organic Breakfast Spread", "Free Parking", "Beach & River Access", "Sunbed & Towel", "Wi-Fi", "24/7 Reception", "Air Conditioning", "Minibar"]
: ["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon", "Klima", "Minibar"];
return (
<div className="min-h-screen bg-background">
@@ -135,83 +49,65 @@ export default async function OdalarPage({ params }: { params: Promise<{ lang: s
</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>
{/* Intro & Price */}
<section className="py-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal className="text-center mb-12">
<h2 className="font-serif text-4xl font-bold text-dark mb-6">
{isEn ? "Comfort & Serenity" : "Konfor & Huzur"}
</h2>
<p className="text-muted text-[15px] leading-relaxed mb-10 max-w-2xl mx-auto">
{isEn
? "All our rooms are carefully designed to offer you the ultimate relaxation, harmonizing with the natural beauty surrounding Akyaka. Enjoy modern amenities with a touch of Aegean warmth."
: "Tüm odalarımız, Akyaka'yı çevreleyen doğal güzelliklerle uyum içinde, size en üst düzeyde rahatlama sunmak için özenle tasarlandı. Ege sıcaklığının dokunuşuyla modern olanakların keyfini çıkarın."}
</p>
<div className="inline-flex items-center justify-center gap-4 bg-primary/10 border-2 border-primary/20 text-primary px-8 py-5 rounded-3xl shadow-sm">
<Info size={24} className="text-accent" />
<div className="text-left">
<span className="block text-xs uppercase tracking-widest text-primary/70 mb-1">
{isEn ? "Standard Rate" : "Standart Fiyat"}
</span>
<span className="block font-bold text-xl md:text-2xl tracking-wide">
{isEn ? "8000 TL / Night (Breakfast Included)" : "8000 TL / Gecelik (Kahvaltı Dahil)"}
</span>
</div>
</div>
</ScrollReveal>
</section>
{/* 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>
))}
{/* Bento Grid Gallery */}
<section className="pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal>
<BentoGallery images={galleryImages} />
</ScrollReveal>
<div className="text-center mt-16">
<Link
href={`/${lang}/iletisim`}
className="btn-shimmer bg-accent text-white px-10 py-4 rounded-full text-sm font-bold tracking-[0.15em] uppercase hover:bg-accent/90 transition-colors shadow-xl"
>
{isEn ? "Contact For Reservation" : "Rezervasyon İçin İletişime Geçin"}
</Link>
</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"}
{/* Info strip (Disabled)
<section className="py-20 bg-primary">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h3 className="font-serif text-3xl text-white font-bold mb-6">
{isEn ? "Included in your stay" : "Konaklamanıza dahil olanlar"}
</h3>
<div className="flex flex-wrap justify-center gap-4 mt-8">
<div className="flex flex-wrap justify-center gap-5 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" />
<span key={item} className="inline-flex items-center gap-2.5 bg-white/10 text-white text-[14px] px-5 py-3 rounded-full border border-white/15 backdrop-blur-sm">
<Check size={16} className="text-accent" />
{item}
</span>
))}
</div>
</div>
</section>
*/}
</div>
);
}