107 lines
4.7 KiB
TypeScript
107 lines
4.7 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Clock, Users } 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, "/aktiviteler", {
|
||
title: "Aktiviteler | Kite Beach Akyaka",
|
||
description: "Kitesurf, yoga, SUP ve bisiklet kiralama. Akyaka'nın doğasında profesyonel eğitmenlerle unutulmaz deneyimler.",
|
||
}, {
|
||
title: "Activities | Kite Beach Akyaka",
|
||
description: "Kitesurf, yoga, SUP and bicycle rental. Unforgettable experiences in Akyaka with professional instructors.",
|
||
});
|
||
}
|
||
|
||
export default async function AktivitelerPage({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = await params;
|
||
const isEn = lang === "en";
|
||
const activities = await prisma.activity.findMany({ where: { lang }, orderBy: { order: "asc" } });
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background pt-40 pb-10">
|
||
{/* Page Header */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
|
||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4 animate-fade-up">
|
||
{isEn ? "Experiences" : "Deneyimler"}
|
||
</span>
|
||
<h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
|
||
{isEn ? "Activities" : "Aktiviteler"}
|
||
</h1>
|
||
<p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
|
||
{isEn ? "Feel the wind, be one with nature." : "Rüzgarı hisset, doğayla bir ol."}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Activities */}
|
||
<section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{activities.length > 0 ? activities.map((act, i) => (
|
||
<ScrollReveal key={act.id} delay={i * 80}>
|
||
<div className="card-lift group bg-white rounded-3xl overflow-hidden border border-sand flex flex-col h-full">
|
||
<div className="relative h-64 overflow-hidden">
|
||
<Image
|
||
src={act.image}
|
||
alt={act.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||
/>
|
||
{act.badge && (
|
||
<span className="absolute top-4 left-4 text-[10px] font-bold px-3 py-1.5 rounded-full tracking-widest uppercase bg-accent text-white shadow">
|
||
{act.badge}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="p-8 flex-grow flex flex-col">
|
||
<h2 className="font-serif text-2xl font-bold text-dark mb-3">{act.title}</h2>
|
||
<p className="text-gray-500 text-[14px] leading-relaxed mb-6 flex-grow">{act.description}</p>
|
||
|
||
<div className="flex justify-between items-center pt-6 border-t border-sand">
|
||
<div className="flex-1"></div>
|
||
<Link
|
||
href={`/${lang}/iletisim`}
|
||
className="inline-flex items-center gap-2 text-accent font-bold text-[12px] tracking-wider uppercase hover:text-primary transition-colors group/link"
|
||
>
|
||
Bilgi Al
|
||
<ArrowRight size={14} className="group-hover/link:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ScrollReveal>
|
||
)) : (
|
||
<div className="col-span-2 text-center py-20 text-gray-500">Henüz aktivite eklenmedi.</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="py-20 bg-primary">
|
||
<div className="max-w-3xl mx-auto px-4 text-center">
|
||
<h3 className="font-serif text-4xl text-white font-bold mb-4">
|
||
Özel Paket Teklifi Al
|
||
</h3>
|
||
<p className="text-white/60 mb-8">
|
||
Kitesurf + konaklama veya yoga + SUP gibi özel aktivite paketleri için bizimle iletişime geçin.
|
||
</p>
|
||
<Link
|
||
href="/iletisim"
|
||
className="btn-shimmer inline-block bg-accent text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase"
|
||
>
|
||
İletişime Geç
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|