From f78fb90a55bd37d7852cf51b0b90736a35a171ed Mon Sep 17 00:00:00 2001
From: Ayris Dev <dev@ayris.tech>
Date: Wed, 15 Jul 2026 14:31:56 +0300
Subject: [PATCH] UI: Refactor all page headers to minimal text layout without
 hero images and fix overlapping with navbar

---
 app/[lang]/aktiviteler/page.tsx  | 37 +++++++++-------------------
 app/[lang]/etkinlikler/page.tsx  | 42 ++++++++++----------------------
 app/[lang]/hakkimizda/page.tsx   | 39 ++++++++++-------------------
 app/[lang]/odalar/page.tsx       | 37 +++++++++-------------------
 app/[lang]/restoran/page.tsx     | 37 +++++++++-------------------
 components/home/AboutSection.tsx |  2 +-
 6 files changed, 63 insertions(+), 131 deletions(-)

diff --git a/app/[lang]/aktiviteler/page.tsx b/app/[lang]/aktiviteler/page.tsx
index b072458..c6eadb8 100644
--- a/app/[lang]/aktiviteler/page.tsx
+++ b/app/[lang]/aktiviteler/page.tsx
@@ -26,32 +26,19 @@ export default async function AktivitelerPage({ params }: { params: Promise<{ la
   const activities = await prisma.activity.findMany({ where: { lang }, orderBy: { order: "asc" } });
 
   return (
-    <div className="min-h-screen bg-background">
-
+    <div className="min-h-screen bg-background pt-40 pb-10">
       {/* 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-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
-            alt={isEn ? "Activities" : "Aktiviteler"}
-            fill
-            sizes="100vw"
-            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">
-            {isEn ? "Experiences" : "Deneyimler"}
-          </span>
-          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
-            {isEn ? "Activities" : "Aktiviteler"}
-          </h1>
-          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
-            {isEn ? "Feel the wind, be one with nature." : "Rüzgarı hisset, doğayla bir ol."}
-          </p>
-        </div>
-      </section>
+      <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">
diff --git a/app/[lang]/etkinlikler/page.tsx b/app/[lang]/etkinlikler/page.tsx
index 5f47411..24b3487 100644
--- a/app/[lang]/etkinlikler/page.tsx
+++ b/app/[lang]/etkinlikler/page.tsx
@@ -31,35 +31,19 @@ export default async function EventsPage({ params }: { params: Promise<{ lang: s
       {/* ──────────────────────────────────────────
           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={isEn ? "Kite Beach Akyaka Events" : "Kite Beach Akyaka Etkinlikler"}
-            fill
-            sizes="100vw"
-            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">
-              {isEn ? "Events" : "Etkinlikler"}
-            </h1>
-            <p className="text-white/80 text-lg md:text-xl font-light max-w-2xl mx-auto leading-relaxed">
-              {isEn 
-                ? "Unforgettable experiences where music, sports, and nature intertwine." 
-                : "Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler."}
-            </p>
-          </ScrollReveal>
-        </div>
-      </section>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16 pt-40">
+        <span className="inline-block text-accent text-xs tracking-[0.35em] uppercase font-bold mb-4 animate-fade-up">
+          Kite Beach Akyaka
+        </span>
+        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
+          {isEn ? "Events" : "Etkinlikler"}
+        </h1>
+        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
+          {isEn 
+            ? "Unforgettable experiences where music, sports, and nature intertwine." 
+            : "Müzik, spor ve doğanın iç içe geçtiği unutulmaz deneyimler."}
+        </p>
+      </div>
 
       {/* ──────────────────────────────────────────
           EVENTS LIST
diff --git a/app/[lang]/hakkimizda/page.tsx b/app/[lang]/hakkimizda/page.tsx
index 409a0fa..5ea3b7e 100644
--- a/app/[lang]/hakkimizda/page.tsx
+++ b/app/[lang]/hakkimizda/page.tsx
@@ -75,32 +75,19 @@ export default async function HakkimizdaPage({ params }: { params: Promise<{ lan
   const displayStats = isEn ? statsEn : statsTr;
 
   return (
-    <div className="min-h-screen bg-background">
-
+    <div className="min-h-screen bg-background pt-40 pb-10">
       {/* 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={isEn ? "About Us" : "Hakkımızda"}
-            fill
-            sizes="100vw"
-            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">
-            {isEn ? "Who We Are" : "Biz Kimiz"}
-          </span>
-          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
-            {isEn ? "Our Story" : "Hikayemiz"}
-          </h1>
-          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
-            {isEn ? "Where the wind, sea and river meet." : "Rüzgarın, denizin ve nehrin kesiştiği yerde."}
-          </p>
-        </div>
-      </section>
+      <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 ? "Who We Are" : "Biz Kimiz"}
+        </span>
+        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
+          {isEn ? "Our Story" : "Hikayemiz"}
+        </h1>
+        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
+          {isEn ? "Where the wind, sea and river meet." : "Rüzgarın, denizin ve nehrin kesiştiği yerde."}
+        </p>
+      </div>
 
       {/* Story */}
       <section className="py-24 bg-white">
@@ -134,7 +121,7 @@ export default async function HakkimizdaPage({ params }: { params: Promise<{ lan
             <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"
+                  src="/kitesurf.png"
                   alt="Kitesurf"
                   fill
                   sizes="(max-width: 768px) 100vw, 50vw"
diff --git a/app/[lang]/odalar/page.tsx b/app/[lang]/odalar/page.tsx
index 98ef111..86ce4e6 100644
--- a/app/[lang]/odalar/page.tsx
+++ b/app/[lang]/odalar/page.tsx
@@ -22,32 +22,19 @@ export default async function OdalarPage({ params }: { params: Promise<{ lang: s
     : ["Organik Serpme Kahvaltı", "Ücretsiz Otopark", "Plaj & Nehir Erişimi", "Şezlong & Havlu", "Wi-Fi", "24/7 Resepsiyon", "Klima", "Minibar"];
 
   return (
-    <div className="min-h-screen bg-background">
-
+    <div className="min-h-screen bg-background pt-40 pb-10">
       {/* 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-1618773928121-c32242e63f39?q=80&w=2940&auto=format&fit=crop"
-            alt={isEn ? "Our Rooms" : "Odalarımız"}
-            fill
-            sizes="100vw"
-            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">
-            {isEn ? "Accommodation" : "Konaklama"}
-          </span>
-          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
-            {isEn ? "Our Rooms" : "Odalarımız"}
-          </h1>
-          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
-            {isEn ? "A comfortable break in the heart of nature." : "Doğanın içinde, konforlu bir mola."}
-          </p>
-        </div>
-      </section>
+      <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 ? "Accommodation" : "Konaklama"}
+        </span>
+        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
+          {isEn ? "Our Rooms" : "Odalarımız"}
+        </h1>
+        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
+          {isEn ? "A comfortable break in the heart of nature." : "Doğanın içinde, konforlu bir mola."}
+        </p>
+      </div>
 
       {/* Intro & Price */}
       <section className="py-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/app/[lang]/restoran/page.tsx b/app/[lang]/restoran/page.tsx
index f347ec6..110f282 100644
--- a/app/[lang]/restoran/page.tsx
+++ b/app/[lang]/restoran/page.tsx
@@ -72,32 +72,19 @@ export default async function RestoranPage({ params }: { params: Promise<{ lang:
   const displayMenuCategories = isEn ? menuCategoriesEn : menuCategoriesTr;
 
   return (
-    <div className="min-h-screen bg-background">
-
+    <div className="min-h-screen bg-background pt-40 pb-10">
       {/* 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-1517248135467-4c7edcad34c4?q=80&w=2940&auto=format&fit=crop"
-            alt={isEn ? "Restaurant & Bar" : "Restoran & Bar"}
-            fill
-            sizes="100vw"
-            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">
-            {isEn ? "Flavors" : "Lezzetler"}
-          </span>
-          <h1 className="font-serif text-5xl md:text-7xl text-white font-bold animate-fade-up delay-100">
-            {isEn ? "Restaurant & Bar" : "Restoran & Bar"}
-          </h1>
-          <p className="text-white/60 text-lg mt-3 font-light animate-fade-up delay-200">
-            {isEn ? "Aegean flavors and river view." : "Ege lezzetleri ve nehir manzarası."}
-          </p>
-        </div>
-      </section>
+      <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 ? "Flavors" : "Lezzetler"}
+        </span>
+        <h1 className="font-serif text-5xl md:text-6xl text-dark font-bold animate-fade-up delay-100 mb-6">
+          {isEn ? "Restaurant & Bar" : "Restoran & Bar"}
+        </h1>
+        <p className="text-muted text-lg max-w-2xl mx-auto animate-fade-up delay-200">
+          {isEn ? "Aegean flavors and river view." : "Ege lezzetleri ve nehir manzarası."}
+        </p>
+      </div>
 
       {/* Intro */}
       <section className="py-20 bg-white">
diff --git a/components/home/AboutSection.tsx b/components/home/AboutSection.tsx
index fed8fc9..402baa1 100644
--- a/components/home/AboutSection.tsx
+++ b/components/home/AboutSection.tsx
@@ -30,7 +30,7 @@ export default function AboutSection({ aboutData, lang }: AboutSectionProps) {
           <ScrollReveal className="relative">
             <div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
               <Image
-                src={aboutData.image}
+                src="/kitesurf.png"
                 alt={aboutData.badge}
                 fill
                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"