UI: Refactor all page headers to minimal text layout without hero images and fix overlapping with navbar
This commit is contained in:
Ayris Dev
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
+12
-25
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user