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

b

Browse Source
This commit is contained in:
ayrisdev
2026-06-09 15:15:40 +03:00
parent f6b4acb760
commit d908d83ca5
58 changed files with 4320 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/hakkimizda/page.tsx
+155
View File
@@ -0,0 +1,155 @@
import Image from "next/image";
import { Leaf, ChefHat, Award } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";
const values = [
{
icon: Leaf,
title: "Doğaya Saygı",
desc: "Tesisimizdeki tüm süreçlerde sıfır atık ve sürdürülebilirlik ilkelerini benimsiyoruz. Geleceğe duyarlı bir konaklama deneyimi sunuyoruz.",
},
{
icon: ChefHat,
title: "Lokal Mutfak",
desc: "Malzemelerimizin büyük bir bölümünü yerel üreticilerden ve Ege köylerinden temin ediyoruz. Taze, mevsimsel ve sürdürülebilir.",
},
{
icon: Award,
title: "Premium Deneyim",
desc: "IKO sertifikalı kitesurf okulumuzdandan odalarımıza kadar her noktada en yüksek kalite standartlarını sunuyoruz.",
},
];
const stats = [
{ value: "10+", label: "Yıllık Deneyim" },
{ value: "500+", label: "Mutlu Misafir" },
{ value: "3", label: "IKO Sertifikalı Eğitmen" },
{ value: "4", label: "Benzersiz Aktivite" },
];
export default function HakkimizdaPage() {
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-1544551763-46a013bb70d5?q=80&w=2940&auto=format&fit=crop"
alt="Hakkımızda"
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">
Biz Kimiz
</span>
<h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
Hikayemiz
</h1>
<p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
Rüzgarın, denizin ve nehrin kesiştiği yerde.
</p>
</div>
</section>
{/* Story */}
<section className="py-24 bg-white">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<ScrollReveal>
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
Akyaka'nın Kalbinde
</span>
<h2 className="font-serif text-4xl font-bold text-dark mb-6 leading-tight">
Bir Tutku<br />Yolculuğu
</h2>
<div className="space-y-4 text-gray-500 leading-relaxed text-[15px]">
<p>
Kite Beach Akyaka, Gökova Körfezi'nin kristal sularına dökülen Azmak Nehri'nin
hemen kıyısında doğdu. Amacımız, misafirlerimize sıradan bir konaklamadan çok
daha fazlasını sunmak; rüzgar sörfü tutkusunu doğayla, konforla ve iyi yemekle
bütünleştiren eşsiz bir yaşam alanı yaratmaktı.
</p>
<p>
Doğaya saygılı mimarimiz, lokal üreticileri destekleyen mutfağımız ve IKO
standartlarındaki eğitim merkezimizle, Akyaka'nın sürdürülebilir turizm yüzü
olmayı hedefliyoruz.
</p>
</div>
</ScrollReveal>
<ScrollReveal delay={150}>
<div className="relative h-[460px] rounded-3xl overflow-hidden">
<Image
src="https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
alt="Kitesurf"
fill
className="object-cover"
/>
</div>
</ScrollReveal>
</div>
</div>
</section>
{/* Stats */}
<section className="py-20 bg-primary">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal stagger className="grid grid-cols-2 md:grid-cols-4 gap-0 divide-x divide-white/10">
{stats.map((s, i) => (
<div key={i} className="text-center py-8 px-6">
<span className="block font-serif text-4xl font-bold text-white mb-2">{s.value}</span>
<span className="block text-white/50 text-[12px] uppercase tracking-wider">{s.label}</span>
</div>
))}
</ScrollReveal>
</div>
</section>
{/* Values */}
<section className="py-24 bg-background">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal className="text-center mb-14">
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
Ne İnanıyoruz
</span>
<h2 className="font-serif text-4xl font-bold text-dark">Değerlerimiz</h2>
</ScrollReveal>
<ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
{values.map((v, i) => {
const Icon = v.icon;
return (
<div key={i} className="bg-white rounded-2xl p-8 border border-sand card-lift">
<div className="w-12 h-12 bg-primary/8 rounded-xl flex items-center justify-center mb-6">
<Icon size={22} className="text-primary" />
</div>
<h3 className="font-serif text-xl font-bold text-dark mb-3">{v.title}</h3>
<p className="text-gray-500 text-[14px] leading-relaxed">{v.desc}</p>
</div>
);
})}
</ScrollReveal>
</div>
</section>
{/* Vision */}
<section className="py-24 bg-dark text-white">
<div className="max-w-3xl mx-auto px-4 text-center">
<ScrollReveal>
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
Vizyonumuz
</span>
<blockquote className="font-serif text-3xl md:text-4xl font-bold leading-tight mb-8">
"Akyaka'nın sürdürülebilir turizm yüzü olmak ve her misafirimize benzersiz bir kaçış sunmak."
</blockquote>
<div className="section-line mx-auto" />
</ScrollReveal>
</div>
</section>
</div>
);
}