704 lines
34 KiB
TypeScript
704 lines
34 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import {
|
||
ArrowRight, Star, Wind, Anchor, Utensils, BedDouble, Sun,
|
||
Waves, Bike, Coffee, Music, MapPin, Camera, Heart, Compass,
|
||
Fish, Mountain, Dumbbell, Leaf, Shield, Umbrella, Flame,
|
||
type LucideIcon,
|
||
} from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
|
||
export const revalidate = 3600;
|
||
|
||
const ICON_MAP: Record<string, LucideIcon> = {
|
||
Wind, Anchor, Utensils, BedDouble, Sun, Star, Waves, Bike,
|
||
Coffee, Music, MapPin, Camera, Heart, Compass, Fish, Mountain,
|
||
Dumbbell, Leaf, Shield, Umbrella, Flame,
|
||
};
|
||
|
||
import HeroVideo from "@/components/HeroVideo";
|
||
|
||
const defaultFeatures = [
|
||
{ icon: "Wind", label: "Kitesurf Okulu", sub: "IKO Sertifikalı" },
|
||
{ icon: "Anchor", label: "Yoga Platformu", sub: "Nehir Kenarı" },
|
||
{ icon: "Utensils", label: "Restoran & Bar", sub: "Ege Mutfağı" },
|
||
// { icon: "BedDouble", label: "Butik Odalar", sub: "3 Tip Konaklama" },
|
||
{ icon: "Sun", label: "Gün Batımı Terası", sub: "Gökova Manzarası" },
|
||
];
|
||
|
||
const rooms = [
|
||
{
|
||
img: "https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop",
|
||
badge: "Standart",
|
||
badgeStyle: "bg-white/90 text-dark",
|
||
name: "Standart Oda",
|
||
desc: "Konforlu ve modern tasarımlı odamızda huzurlu bir konaklama.",
|
||
price: "₺4.500",
|
||
cta: "primary" as const,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1566665797739-1674de7a421a?q=80&w=2874&auto=format&fit=crop",
|
||
badge: "Popüler",
|
||
badgeStyle: "bg-accent text-white",
|
||
name: "Nehir Manzaralı Oda",
|
||
desc: "Azmak nehrinin eşsiz manzarası eşliğinde güne uyanın.",
|
||
price: "₺5.500",
|
||
cta: "accent" as const,
|
||
},
|
||
{
|
||
img: "https://images.unsplash.com/photo-1499955085172-a104c9463ece?q=80&w=2940&auto=format&fit=crop",
|
||
badge: "Premium",
|
||
badgeStyle: "bg-white/90 text-dark",
|
||
name: "Ahşap Bungalow",
|
||
desc: "Doğayla tamamen iç içe, teraslı ve bağımsız girişli.",
|
||
price: "₺7.000",
|
||
cta: "primary" as const,
|
||
},
|
||
];
|
||
|
||
const testimonials = [
|
||
{
|
||
text: "Akyaka'da pek çok yerde kaldım ama Kite Beach bambaşka bir deneyimdi. Nehrin sesi, kitesurf dersleri ve muhteşem kahvaltı — her şey mükemmeldi.",
|
||
name: "Ayşe K.",
|
||
from: "İstanbul",
|
||
},
|
||
{
|
||
text: "Yoga seansları ahşap platformda, sabah erken saatte, nehir manzarası eşliğinde. Kelimelerle anlatmak zor — mutlaka yaşanmalı.",
|
||
name: "Marco B.",
|
||
from: "İtalya",
|
||
},
|
||
{
|
||
text: "Eğitmenler son derece ilgili. Kitesurf derslerimden sonra bağımlısı oldum. Önümüzdeki yaz mutlaka döneceğim.",
|
||
name: "Mehmet Ö.",
|
||
from: "Ankara",
|
||
},
|
||
];
|
||
|
||
const testimonialsEn = [
|
||
{
|
||
text: "I've stayed in many places in Akyaka, but Kite Beach was a completely different experience. The sound of the river, kitesurf lessons, and the amazing breakfast — everything was perfect.",
|
||
name: "Ayse K.",
|
||
from: "Istanbul",
|
||
},
|
||
{
|
||
text: "Yoga sessions on the wooden platform, early in the morning with a river view. Hard to put into words — a must-try.",
|
||
name: "Marco B.",
|
||
from: "Italy",
|
||
},
|
||
{
|
||
text: "The instructors are very caring. After my kitesurf lessons, I became addicted. I will definitely return next summer.",
|
||
name: "Mehmet O.",
|
||
from: "Ankara",
|
||
},
|
||
];
|
||
|
||
import { getDictionary, Locale } from "./dictionaries";
|
||
import prisma from "@/lib/prisma";
|
||
import { buildMeta } from "@/lib/metadata";
|
||
import type { Metadata } from "next";
|
||
|
||
export async function generateMetadata(
|
||
{ params }: { params: Promise<{ lang: string }> }
|
||
): Promise<Metadata> {
|
||
const { lang } = await params;
|
||
return buildMeta(lang, "", {
|
||
title: "Kite Beach Akyaka | Kitesurf & Butik Otel",
|
||
description: "Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde kitesurf ve butik otel deneyimi.",
|
||
}, {
|
||
title: "Kite Beach Akyaka | Kitesurf & Boutique Hotel",
|
||
description: "Tranquility of the river, energy of the sea — in one spot. Kitesurf and boutique hotel experience in the heart of Akyaka.",
|
||
});
|
||
}
|
||
|
||
async function getInstagramData() {
|
||
if (!process.env.RAPIDAPI_KEY) {
|
||
return [];
|
||
}
|
||
|
||
const url = 'https://instagram120.p.rapidapi.com/api/instagram/posts';
|
||
const options = {
|
||
method: 'POST',
|
||
headers: {
|
||
'x-rapidapi-key': process.env.RAPIDAPI_KEY,
|
||
'x-rapidapi-host': 'instagram120.p.rapidapi.com',
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
username: 'kitebeachakyaka',
|
||
maxId: ''
|
||
}),
|
||
next: { revalidate: 86400 }
|
||
};
|
||
|
||
try {
|
||
const res = await fetch(url, options);
|
||
if (!res.ok) {
|
||
console.warn('Instagram API error or missing limits. Status:', res.status);
|
||
return [];
|
||
}
|
||
const data = await res.json();
|
||
return data.result?.edges?.slice(0, 4).map((edge: any) => edge.node) || [];
|
||
} catch (err) {
|
||
console.warn("Instagram fetch error:", err);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = await params;
|
||
const dict = await getDictionary(lang as Locale);
|
||
|
||
const [heroDb, activities, events, dbFeatures, aboutDb, instagramPosts] = await Promise.all([
|
||
prisma.heroSection.findUnique({ where: { lang } }),
|
||
prisma.activity.findMany({ where: { lang }, orderBy: { order: "asc" } }),
|
||
prisma.event.findMany({ where: { lang }, orderBy: { date: "asc" } }),
|
||
prisma.feature.findMany({ where: { lang }, orderBy: { order: "asc" } }),
|
||
prisma.aboutSection.findUnique({ where: { lang } }),
|
||
getInstagramData(),
|
||
]);
|
||
|
||
const displayTestimonials = lang === "en" ? testimonialsEn : testimonials;
|
||
|
||
const heroData = heroDb || {
|
||
location: dict.home.location,
|
||
welcome: dict.home.welcome,
|
||
title: dict.home.title,
|
||
subtitle: dict.home.subtitle,
|
||
bookNow: dict.home.bookNow,
|
||
exploreActivities: dict.home.exploreActivities,
|
||
scroll: dict.home.scroll,
|
||
};
|
||
|
||
const aboutData = aboutDb || {
|
||
badge: lang === "en" ? "Our Story" : "Hikayemiz",
|
||
titleLine1: lang === "en" ? "In the" : "Doğanın",
|
||
titleLine2: lang === "en" ? "Heart of Nature" : "Kalbinde",
|
||
titleHighlight: lang === "en" ? "A Special Escape" : "Özel Bir Kaçış",
|
||
description1: lang === "en"
|
||
? "Located right on the banks of the Azmak River flowing into the crystal waters of the Gulf of Gokova, we are in a unique location where the wind never ceases."
|
||
: "Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin hemen kıyısında, rüzgarın hiç eksik olmadığı eşsiz bir konumda yer alıyoruz.",
|
||
description2: lang === "en"
|
||
? "Kite Beach Akyaka offers a unique living space that integrates the passion for kitesurfing with nature, comfort, and local flavors."
|
||
: "Kite Beach Akyaka; kitesurf tutkusunu doğayla, konforla ve yerel lezzetlerle bütünleştiren benzersiz bir yaşam alanı sunar.",
|
||
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop",
|
||
statsGuestCount: "500+",
|
||
statsGuestLabel: lang === "en" ? "Happy Guests" : "Mutlu Misafir",
|
||
statsYearCount: "10+",
|
||
statsYearLabel: lang === "en" ? "Years Experience" : "Yıl Deneyim",
|
||
badgeIkoTitle: "IKO",
|
||
badgeIkoLabel: lang === "en" ? "Certified" : "Sertifikalı"
|
||
};
|
||
|
||
const displayFeatures = dbFeatures.length > 0 ? dbFeatures : defaultFeatures;
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
|
||
{/* ──────────────────────────────────────────
|
||
HERO
|
||
────────────────────────────────────────── */}
|
||
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||
<HeroVideo />
|
||
|
||
{/* Floating season badge
|
||
<div className="absolute top-32 right-6 md:right-16 z-20 animate-float hidden sm:block">
|
||
<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl px-5 py-4 text-white">
|
||
<span className="block text-accent font-bold text-[10px] tracking-[0.25em] uppercase mb-1">Sezon</span>
|
||
<span className="font-serif text-xl font-medium">Nisan — Ekim</span>
|
||
</div>
|
||
</div>
|
||
*/}
|
||
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
||
<div className="animate-fade-up delay-100">
|
||
<span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
|
||
{heroData.location}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
|
||
<span
|
||
className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
|
||
style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
|
||
>
|
||
{heroData.welcome}
|
||
</span>
|
||
<h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
|
||
{heroData.title}
|
||
</h1>
|
||
</div>
|
||
|
||
<p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
|
||
{heroData.subtitle}
|
||
</p>
|
||
|
||
<div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
|
||
<Link
|
||
href={`/${lang}/aktiviteler`}
|
||
className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
|
||
>
|
||
{heroData.exploreActivities}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
|
||
<span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">{heroData.scroll}</span>
|
||
<div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
FEATURES STRIP
|
||
────────────────────────────────────────── */}
|
||
<section className="bg-dark text-white py-8">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
|
||
{displayFeatures.map(({ icon, label, sub }, i) => {
|
||
const IconComponent = ICON_MAP[icon as string] || Star;
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
|
||
>
|
||
<IconComponent className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
|
||
<span className="text-[13px] font-semibold text-center">{label}</span>
|
||
<span className="text-[11px] text-white/40 text-center">{sub}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ABOUT
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-background overflow-hidden">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
||
|
||
<ScrollReveal className="relative">
|
||
<div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
|
||
<Image
|
||
src={aboutData.image}
|
||
alt={aboutData.badge}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
{/* Stats card */}
|
||
<div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
|
||
<div className="grid grid-cols-2 gap-6 divide-x divide-sand">
|
||
<div className="text-center">
|
||
<span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsGuestCount}</span>
|
||
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsGuestLabel}</span>
|
||
</div>
|
||
<div className="text-center pl-6">
|
||
<span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsYearCount}</span>
|
||
<span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsYearLabel}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* IKO badge */}
|
||
<div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
|
||
<Star className="w-4 h-4 mb-1" fill="white" />
|
||
<span className="block text-xs font-bold leading-none">{aboutData.badgeIkoTitle}</span>
|
||
<span className="block text-[10px] opacity-80 mt-0.5">{aboutData.badgeIkoLabel}</span>
|
||
</div>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal delay={200}>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
|
||
{aboutData.badge}
|
||
</span>
|
||
<h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
|
||
{aboutData.titleLine1}<br />{aboutData.titleLine2}<br />
|
||
<span className="text-primary italic">{aboutData.titleHighlight}</span>
|
||
</h2>
|
||
<p className="text-gray-600 leading-relaxed mb-5">
|
||
{aboutData.description1}
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed mb-10">
|
||
{aboutData.description2}
|
||
</p>
|
||
<div className="section-line mb-8" />
|
||
<Link
|
||
href={`/${lang}/hakkimizda`}
|
||
className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
|
||
>
|
||
<span className="border-b-2 border-accent pb-0.5">
|
||
{lang === "en" ? "Read Our Story" : "Hikayemizi Okuyun"}
|
||
</span>
|
||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ROOMS
|
||
────────────────────────────────────────── */}
|
||
{/*
|
||
<section className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
Konaklama
|
||
</span>
|
||
<h2 className="font-serif text-4xl md:text-5xl font-bold text-dark mb-6">Kite Beach Akyaka Otel</h2>
|
||
<p className="text-muted max-w-3xl mx-auto text-sm leading-relaxed">
|
||
Akyaka’nın en güzel köşesinde, nehrin dinginliği ile denizin sonsuz maviliğinin kucaklaştığı o özel noktadayız. Kapınızı açtığınız anda sizi karşılayan nehir kıyısının sessizliği, güne başlamak için en huzurlu davetiniz olacak. Doğanın kalbinde, nehir manzarasına karşı yaptığınız bir yoga seansıyla ruhunuzu dengelerken; hemen ardından Akyaka’nın meşhur rüzgarlarında Kite Surf ile adrenalini zirveye taşıyabilirsiniz. Günün yorgunluğunu ise, restoranımızın mutfağından çıkan lezzetlerle, Ege’nin kendine has o büyüleyici gün batımını izleyerek geride bırakın. Burada zaman, sadece sizin istediğiniz hızda akıyor.
|
||
</p>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||
{rooms.map((room, i) => (
|
||
<div
|
||
key={i}
|
||
className={`card-lift group rounded-2xl overflow-hidden bg-sand border border-sand ${i === 1 ? "md:-mt-4 md:shadow-xl" : ""
|
||
}`}
|
||
>
|
||
<div className="relative h-64 overflow-hidden">
|
||
<Image
|
||
src={room.img}
|
||
alt={room.name}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 33vw"
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<span className={`absolute top-4 left-4 text-[10px] font-bold px-3 py-1.5 rounded-full tracking-wider uppercase ${room.badgeStyle} backdrop-blur-sm`}>
|
||
{room.badge}
|
||
</span>
|
||
</div>
|
||
<div className="p-7">
|
||
<h3 className="font-serif text-xl font-bold text-dark mb-2">{room.name}</h3>
|
||
<p className="text-muted mb-6 text-[13px] leading-relaxed">{room.desc}</p>
|
||
<div className="flex justify-between items-center pt-5 border-t border-sand">
|
||
<div>
|
||
<span className="text-2xl font-bold text-dark">{room.price}</span>
|
||
<span className="text-muted text-xs ml-1">/gece</span>
|
||
</div>
|
||
<Link
|
||
href="/odalar"
|
||
className={`text-[11px] px-5 py-2.5 rounded-full font-bold tracking-wider uppercase transition-colors ${room.cta === "accent"
|
||
? "bg-accent text-white hover:bg-accent/90"
|
||
: "bg-primary text-white hover:bg-primary/90"
|
||
}`}
|
||
>
|
||
İncele
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</ScrollReveal>
|
||
|
||
<div className="text-center mt-12">
|
||
<Link
|
||
href="/odalar"
|
||
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
||
>
|
||
Tüm Odaları Gör
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
*/}
|
||
|
||
{/* ──────────────────────────────────────────
|
||
ACTIVITIES — BENTO GRID
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-background">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
|
||
<div>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
{lang === "en" ? "What Will You Do?" : "Ne Yapacaksınız?"}
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">
|
||
{lang === "en" ? "Activities" : "Aktiviteler"}
|
||
</h2>
|
||
</div>
|
||
<Link
|
||
href={`/${lang}/aktiviteler`}
|
||
className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-accent transition-colors"
|
||
>
|
||
{lang === "en" ? "See All" : "Tümünü Gör"} <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
{/* Bento rows */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{activities.length > 0 ? (
|
||
activities.map((act, i) => (
|
||
<ScrollReveal
|
||
key={act.id}
|
||
className={i === 0 || i === 3 ? "md:col-span-2" : ""}
|
||
delay={i * 50}
|
||
>
|
||
<Link href={`/${lang}/aktiviteler`} className={`group relative block rounded-3xl overflow-hidden ${activities.length === 1 ? "aspect-[4/3] md:aspect-video" : i < 2 ? "h-[400px]" : "h-[280px]"}`}>
|
||
<Image
|
||
src={act.image}
|
||
alt={act.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className={`absolute inset-0 bg-gradient-to-t ${i === 0 ? "from-dark/90 via-dark/20" : "from-dark/80"} to-transparent`} />
|
||
<div className={`absolute bottom-0 ${i === 0 || i === 3 ? "p-8" : "p-7"}`}>
|
||
{act.badge && (
|
||
<span className="block text-accent text-[10px] tracking-[0.25em] uppercase font-bold mb-2">{act.badge}</span>
|
||
)}
|
||
<h3 className={`font-serif text-white font-bold mb-1 ${i === 0 ? "text-4xl mb-2" : i === 1 || i === 3 ? "text-3xl" : "text-2xl"}`}>{act.title}</h3>
|
||
{i === 0 && (
|
||
<p className="text-white/60 text-sm mb-4 max-w-xs opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-400">
|
||
{act.description}
|
||
</p>
|
||
)}
|
||
{i === 0 && (
|
||
<span className="inline-flex items-center gap-2 text-white text-sm font-semibold hover:text-accent transition-colors">
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</span>
|
||
)}
|
||
</div>
|
||
</Link>
|
||
</ScrollReveal>
|
||
))
|
||
) : (
|
||
<div className="md:col-span-3 py-10 text-center text-gray-500">
|
||
{lang === "en" ? "No activities added yet." : "Henüz aktivite eklenmedi."}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
EVENTS (PREVIEW)
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-dark text-white relative overflow-hidden">
|
||
{/* Background glow */}
|
||
<div className="absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-[120px] pointer-events-none" />
|
||
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[150px] pointer-events-none" />
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<ScrollReveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
|
||
<div>
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
{lang === "en" ? "Calendar" : "Takvim"}
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold">
|
||
{lang === "en" ? "Events" : "Etkinlikler"}
|
||
</h2>
|
||
</div>
|
||
<Link
|
||
href={`/${lang}/etkinlikler`}
|
||
className="inline-flex items-center gap-2 text-sm font-semibold text-white/70 hover:text-white transition-colors border border-white/20 hover:border-white px-6 py-2.5 rounded-full"
|
||
>
|
||
{lang === "en" ? "All Events" : "Tüm Etkinlikler"} <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal delay={100}>
|
||
{events.length > 0 ? (
|
||
events.map((ev) => (
|
||
<div key={ev.id} className="group relative flex flex-col md:flex-row gap-8 bg-white/5 border border-white/10 rounded-3xl p-6 md:p-10 hover:bg-white/10 transition-colors backdrop-blur-sm mb-6">
|
||
<div className="relative w-full md:w-1/3 h-[250px] md:h-auto rounded-2xl overflow-hidden shrink-0">
|
||
<Image
|
||
src={ev.image}
|
||
alt={ev.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 33vw"
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col justify-center w-full md:w-2/3">
|
||
{ev.badge && (
|
||
<div className="inline-block bg-accent/20 text-accent text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase mb-4 w-max">
|
||
{ev.badge}
|
||
</div>
|
||
)}
|
||
<h3 className="font-serif text-3xl md:text-4xl font-bold mb-4">{ev.title}</h3>
|
||
<p className="text-white/60 leading-relaxed mb-6 max-w-xl">
|
||
{ev.description}
|
||
</p>
|
||
<div className="flex flex-wrap items-center gap-6 mb-8 text-sm text-white/80">
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> {ev.date}
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> {ev.time}
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-accent" /> {ev.location}
|
||
</span>
|
||
</div>
|
||
<Link
|
||
href={`/${lang}/etkinlikler`}
|
||
className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase text-accent hover:text-white transition-colors w-max"
|
||
>
|
||
{lang === "en" ? "View Details" : "Detayları İncele"} <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="py-10 text-center text-white/50">
|
||
{lang === "en" ? "No events added yet." : "Henüz etkinlik eklenmedi."}
|
||
</div>
|
||
)}
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
INSTAGRAM FEED
|
||
────────────────────────────────────────── */}
|
||
{instagramPosts.length > 0 && (
|
||
<section className="py-28 bg-background">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
@kitebeachakyaka
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
||
{instagramPosts.map((post: any) => (
|
||
<a
|
||
key={post.id}
|
||
href={`https://instagram.com/p/${post.code}`}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
|
||
>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={post.image_versions2?.candidates[0]?.url}
|
||
alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
<div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
|
||
<Camera className="w-8 h-8 mb-3" />
|
||
<p className="text-xs line-clamp-3">
|
||
{post.caption?.text}
|
||
</p>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</ScrollReveal>
|
||
|
||
<div className="text-center mt-12">
|
||
<a
|
||
href="https://instagram.com/kitebeachakyaka"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
||
>
|
||
{lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ──────────────────────────────────────────
|
||
TESTIMONIALS
|
||
────────────────────────────────────────── */}
|
||
<section className="py-28 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<ScrollReveal className="text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||
{lang === "en" ? "Guest Reviews" : "Misafir Yorumları"}
|
||
</span>
|
||
<h2 className="font-serif text-5xl font-bold text-dark">
|
||
{lang === "en" ? "Experiences" : "Deneyimler"}
|
||
</h2>
|
||
</ScrollReveal>
|
||
|
||
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{displayTestimonials.map((t, i) => (
|
||
<div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
|
||
{/* Large decorative quote */}
|
||
<span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
|
||
"
|
||
</span>
|
||
{/* Stars */}
|
||
<div className="flex gap-1 mb-5 relative z-10">
|
||
{Array.from({ length: 5 }).map((_, j) => (
|
||
<Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
|
||
))}
|
||
</div>
|
||
<p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
|
||
"{t.text}"
|
||
</p>
|
||
<div className="flex items-center gap-3 relative z-10">
|
||
<div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<span className="text-primary font-bold text-sm">{t.name[0]}</span>
|
||
</div>
|
||
<div>
|
||
<span className="block font-semibold text-dark text-sm">{t.name}</span>
|
||
<span className="text-muted text-xs">{t.from}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
CTA BAND
|
||
────────────────────────────────────────── */}
|
||
<section className="relative py-28 overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 animate-gradient-pan"
|
||
style={{
|
||
background:
|
||
"linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 opacity-[0.04]">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
|
||
alt=""
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
|
||
<div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
|
||
<ScrollReveal>
|
||
<span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
|
||
{lang === "en" ? "Get Started" : "Hemen Başlayın"}
|
||
</span>
|
||
<h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
|
||
{lang === "en" ? (
|
||
<>Are you ready to plan<br />your dream vacation?</>
|
||
) : (
|
||
<>Hayalindeki tatili<br />planlamaya hazır mısın?</>
|
||
)}
|
||
</h2>
|
||
<p className="text-white/50 mb-10 text-base leading-relaxed">
|
||
{lang === "en"
|
||
? "The wind is calling you. Book your spot now and become a part of this unique experience."
|
||
: "Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol."}
|
||
</p>
|
||
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
);
|
||
}
|