b
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
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";
|
||||
|
||||
export const metadata = {
|
||||
title: "Etkinlikler | Kite Beach Akyaka",
|
||||
description: "Mahmut Orhan konserinden Kitesurf festivallerine, Akyaka'daki en özel etkinlikler ve gün batımı partileri.",
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user