152 lines
7.1 KiB
TypeScript
152 lines
7.1 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Calendar, Clock, MapPin, Music } from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
|
||
import prisma from "@/lib/prisma";
|
||
import { buildMeta } from "@/lib/metadata";
|
||
import type { Metadata } from "next";
|
||
|
||
export const revalidate = 3600;
|
||
|
||
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
|
||
const { lang } = await params;
|
||
return buildMeta(lang, "/etkinlikler", {
|
||
title: "Etkinlikler | Kite Beach Akyaka",
|
||
description: "Mahmut Orhan konserinden Kitesurf festivallerine, Akyaka'daki en özel etkinlikler ve gün batımı partileri.",
|
||
}, {
|
||
title: "Events | Kite Beach Akyaka",
|
||
description: "From Mahmut Orhan concerts to Kitesurf festivals, the most special events and sunset parties in Akyaka.",
|
||
});
|
||
}
|
||
|
||
export default async function EventsPage({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = await params;
|
||
const events = await prisma.event.findMany({ where: { lang }, orderBy: { date: "asc" } });
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen bg-background">
|
||
|
||
{/* ──────────────────────────────────────────
|
||
HERO
|
||
────────────────────────────────────────── */}
|
||
<section className="relative h-[60vh] min-h-[500px] w-full flex items-center justify-center overflow-hidden">
|
||
<div className="absolute inset-0 z-0">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=2874&auto=format&fit=crop"
|
||
alt="Kite Beach Akyaka Etkinlikler"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 bg-dark/60" />
|
||
</div>
|
||
|
||
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
|
||
<ScrollReveal>
|
||
<span className="inline-block text-accent text-xs tracking-[0.35em] uppercase mb-4 font-bold">
|
||
Kite Beach Akyaka
|
||
</span>
|
||
<h1 className="font-serif text-5xl md:text-7xl font-bold text-white mb-6">
|
||
Etkinlikler
|
||
</h1>
|
||
<p className="text-white/80 text-lg md:text-xl font-light max-w-2xl mx-auto leading-relaxed">
|
||
Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler.
|
||
</p>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ──────────────────────────────────────────
|
||
EVENTS LIST
|
||
────────────────────────────────────────── */}
|
||
<section className="py-24">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
||
<div className="space-y-16">
|
||
{events.length > 0 ? events.map((event, index) => (
|
||
<ScrollReveal key={event.id} delay={index * 100}>
|
||
<div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 lg:gap-12 bg-white rounded-3xl overflow-hidden shadow-sm border border-sand transition-all hover:shadow-xl`}>
|
||
|
||
{/* Image Container */}
|
||
<div className="w-full md:w-1/2 lg:w-[55%] relative h-[300px] md:h-auto min-h-[400px]">
|
||
<Image
|
||
src={event.image}
|
||
alt={event.title}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
{event.badge && (
|
||
<div className="absolute top-4 left-4 bg-accent text-white px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase flex items-center gap-2 shadow-lg backdrop-blur-md">
|
||
<Music className="w-3.5 h-3.5" />
|
||
{event.badge}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Content Container */}
|
||
<div className="w-full md:w-1/2 lg:w-[45%] p-8 md:p-10 flex flex-col justify-center">
|
||
<h2 className="font-serif text-3xl md:text-4xl font-bold text-dark mb-6 leading-tight mt-4">
|
||
{event.title}
|
||
</h2>
|
||
|
||
<div className="space-y-3 mb-6">
|
||
<div className="flex items-center gap-3 text-sm text-gray-600">
|
||
<Calendar className="w-4 h-4 text-accent" />
|
||
<span>{event.date}</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-sm text-gray-600">
|
||
<Clock className="w-4 h-4 text-accent" />
|
||
<span>{event.time}</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-sm text-gray-600">
|
||
<MapPin className="w-4 h-4 text-accent" />
|
||
<span>{event.location}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-muted text-sm leading-relaxed mb-8">
|
||
{event.description}
|
||
</p>
|
||
|
||
<div className="flex items-center justify-between mt-auto pt-6 border-t border-sand">
|
||
<Link
|
||
href={`/${lang}/iletisim`}
|
||
className="inline-flex items-center gap-2 text-xs font-bold tracking-widest uppercase transition-colors bg-accent text-white px-6 py-3 rounded-full hover:bg-accent/90"
|
||
>
|
||
Bize Ulaşın <ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</ScrollReveal>
|
||
)) : (
|
||
<div className="text-center py-20 text-gray-500">Henüz etkinlik eklenmedi.</div>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA BAND */}
|
||
<section className="bg-dark text-white py-24 text-center px-4">
|
||
<ScrollReveal>
|
||
<span className="block text-accent text-xs font-bold tracking-[0.25em] uppercase mb-4">Organizasyon</span>
|
||
<h2 className="font-serif text-4xl md:text-5xl font-bold mb-6">Kendi Etkinliğinizi Planlayın</h2>
|
||
<p className="text-white/60 max-w-xl mx-auto mb-10 leading-relaxed text-sm">
|
||
Özel partiler, düğünler veya kurumsal etkinlikler için Kite Beach Akyaka'nın eşsiz atmosferini kiralayabilirsiniz. Detaylar için bizimle iletişime geçin.
|
||
</p>
|
||
<Link
|
||
href="/iletisim"
|
||
className="inline-block border-2 border-white/20 hover:border-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase transition-all"
|
||
>
|
||
Bize Ulaşın
|
||
</Link>
|
||
</ScrollReveal>
|
||
</section>
|
||
|
||
</div>
|
||
);
|
||
}
|