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

ss

Browse Source
This commit is contained in:
mstfyldz
2026-06-09 13:06:58 +03:00
parent 13b77ee54f
commit f6b4acb760
19 changed files with 2633 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/aktiviteler/page.tsx
+170
View File
@@ -0,0 +1,170 @@
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Clock, Users } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
const activities = [
{
img: "https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop",
tag: "IKO Sertifikalı",
tagColor: "bg-accent text-white",
name: "Kitesurf Okulu",
desc: "Akyaka'nın meşhur termal rüzgarında kitesurf yapmayı öğrenin. IKO sertifikalı eğitmenlerimizle başlangıç, orta ve ileri seviye ders seçenekleri sunuyoruz.",
duration: "2–4 Saat",
capacity: "1–3 Kişi",
price: "₺2.000",
unit: "Saat",
levels: ["Başlangıç", "Orta", "İleri"],
},
{
img: "https://images.unsplash.com/photo-1599901860904-17e08627c271?q=80&w=2940&auto=format&fit=crop",
tag: "Açık Hava",
tagColor: "bg-primary text-white",
name: "Yoga Seansları",
desc: "Nehir kıyısındaki özel ahşap platformumuzda güne yoga ile başlayın. Hafıza seansları, sunset yoga ve özel birebir dersler mevcuttur.",
duration: "60–90 Dak",
capacity: "Grup / Özel",
price: "₺400",
unit: "Kişi",
levels: ["Tüm Seviyeler"],
},
{
img: "https://images.unsplash.com/photo-1544606771-46abcf9dbb83?q=80&w=2924&auto=format&fit=crop",
tag: "Ekipman Dahil",
tagColor: "bg-dark text-white",
name: "Stand-Up Paddle (SUP)",
desc: "Azmak nehrinin berrak ve sakin sularında kürek çekerek doğanın gizli güzelliklerini keşfedin. Ekipman kiralama ve rehberli tur seçenekleri mevcuttur.",
duration: "1–3 Saat",
capacity: "Bireysel",
price: "₺300",
unit: "Saat",
levels: ["Kolay"],
},
{
img: "https://images.unsplash.com/photo-1511994298241-608e28f14fde?q=80&w=2940&auto=format&fit=crop",
tag: "Günlük Tur",
tagColor: "bg-primary text-white",
name: "Bisiklet Kiralama",
desc: "Akyaka'nın çam ormanları arasındaki yollarını ve mimarisiyle ünlü sokaklarını bisikletle gezin. Günlük ve saatlik kiralama seçenekleri ile rotaları keşfedin.",
duration: "Tam Gün",
capacity: "Bireysel / Grup",
price: "₺250",
unit: "Gün",
levels: ["Kolay"],
},
];
export default function AktivitelerPage() {
return (
<div className="min-h-screen bg-background">
{/* Page Header */}
<section className="relative h-[55vh] w-full flex items-end overflow-hidden">
<div className="absolute inset-0">
<Image
src="https://images.unsplash.com/photo-1533000756353-909d73d2a3c7?q=80&w=2940&auto=format&fit=crop"
alt="Aktiviteler"
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-dark/85 via-dark/30 to-black/20" />
</div>
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-14 w-full">
<span className="block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-3 animate-fade-up">
Deneyimler
</span>
<h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
Aktiviteler
</h1>
<p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
Rüzgarı hisset, doğayla bir ol.
</p>
</div>
</section>
{/* 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-2 gap-8">
{activities.map((act, i) => (
<ScrollReveal key={i} 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.img}
alt={act.name}
fill
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-widest uppercase ${act.tagColor}`}>
{act.tag}
</span>
</div>
<div className="p-8 flex-grow flex flex-col">
<h2 className="font-serif text-2xl font-bold text-dark mb-3">{act.name}</h2>
<p className="text-gray-500 text-[14px] leading-relaxed mb-6 flex-grow">{act.desc}</p>
{/* Meta */}
<div className="flex gap-6 mb-6">
<div className="flex items-center gap-2 text-[12px] text-muted">
<Clock size={13} className="text-primary" />
{act.duration}
</div>
<div className="flex items-center gap-2 text-[12px] text-muted">
<Users size={13} className="text-primary" />
{act.capacity}
</div>
</div>
{/* Levels */}
<div className="flex flex-wrap gap-2 mb-7">
{act.levels.map((level) => (
<span
key={level}
className="text-[10px] font-semibold bg-background text-primary px-3 py-1 rounded-full border border-primary/20 tracking-wide"
>
{level}
</span>
))}
</div>
<div className="flex justify-between items-center pt-6 border-t border-sand">
<div>
<span className="text-2xl font-bold text-dark">{act.price}</span>
<span className="text-muted text-xs ml-1">/ {act.unit}</span>
</div>
<Link
href="/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>
</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>
);
}