ayrisdev/oludeniz-tur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve layout overlap on subpages and add language switcher to navbar

Browse Source
This commit is contained in:
ayrisdev
2026-06-16 13:45:50 +03:00
parent 2206a3fe39
commit 454119dd36
9 changed files with 107 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/aktiviteler/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default async function ActivitiesPage({ params }: { params: Promise<{ loc
setRequestLocale(locale);
return (
<div className="py-20 bg-sandwhite-100 flex-1">
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
<div className="container mx-auto px-4">
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">Aktiviteler</h1>
<p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
app/[locale]/hakkimizda/page.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default async function AboutPage({ params }: { params: Promise<{ locale:
setRequestLocale(locale);
return (
<div className="py-20 bg-sandwhite-100 flex-1">
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
<div className="container mx-auto px-4 max-w-4xl">
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-8 text-center">Hakkımızda</h1>
<div className="bg-white p-8 md:p-12 rounded-3xl shadow-sm border border-gray-100 text-gray-700 leading-relaxed space-y-6">
app/[locale]/iletisim/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default async function ContactPage({ params }: { params: Promise<{ locale
setRequestLocale(locale);
return (
<div className="py-20 bg-sandwhite-100 flex-1">
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
<div className="container mx-auto px-4 max-w-5xl">
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">İletişim</h1>
<p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
app/[locale]/tekne-turlari/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default async function BoatToursPage({ params }: { params: Promise<{ loca
setRequestLocale(locale);
return (
<div className="py-20 bg-sandwhite-100 flex-1">
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
<div className="container mx-auto px-4">
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">Tekne Turları</h1>
<p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
app/[locale]/turlar/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default async function ToursPage({ params }: { params: Promise<{ locale:
setRequestLocale(locale);
return (
<div className="py-20 bg-sandwhite-100 flex-1">
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
<div className="container mx-auto px-4">
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">Turlar</h1>
<p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
components/home/HeroSlider.tsx
+6 -4
View File
@@ -5,9 +5,11 @@ import Image from 'next/image';
import { heroSlides } from '@/lib/data';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Link } from '@/i18n/routing';
import { useTranslations } from 'next-intl';
export function HeroSlider() {
const [current, setCurrent] = useState(0);
const t = useTranslations('hero');
useEffect(() => {
const timer = setInterval(() => {
@@ -20,7 +22,7 @@ export function HeroSlider() {
const prevSlide = () => setCurrent(current === 0 ? heroSlides.length - 1 : current - 1);
return (
<div className="relative h-[80vh] min-h-[600px] w-full overflow-hidden group bg-deepblue-900">
<div className="relative h-screen min-h-[600px] w-full overflow-hidden group bg-deepblue-900">
{/* Decorative Aurora Gradients */}
<div className="absolute inset-0 overflow-hidden pointer-events-none z-10 opacity-60 mix-blend-screen">
<div className="absolute -top-[30%] -left-[10%] w-[60%] h-[60%] rounded-full bg-vibrantorange-500/30 blur-[120px] animate-pulse" style={{ animationDuration: '8s' }} />
@@ -53,14 +55,14 @@ export function HeroSlider() {
ÖLÜDENİZ <span className="text-transparent bg-clip-text bg-gradient-to-r from-turquoise-500 to-vibrantorange-500">TOUR</span> TRAVELS
</h1>
<p className="text-xl md:text-3xl text-sandwhite-100 mb-12 max-w-4xl mx-auto font-medium animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300 fill-mode-both drop-shadow-lg">
Mavi Yolculuk, Günübirlik Turlar ve Unutulmaz Aktiviteler
{t('subtitle')}
</p>
<div className="flex flex-col sm:flex-row gap-6 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-700 fill-mode-both">
<Link href="/turlar" className="px-10 py-5 bg-gradient-to-r from-vibrantorange-500 to-orange-400 hover:from-orange-400 hover:to-vibrantorange-500 text-white rounded-2xl font-bold text-lg transition-all shadow-[0_0_30px_rgba(249,115,22,0.4)] hover:shadow-[0_0_50px_rgba(249,115,22,0.6)] hover:-translate-y-1">
Turları Keşfet
{t('exploreTours')}
</Link>
<Link href="/aktiviteler" className="px-10 py-5 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white rounded-2xl font-bold text-lg transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
Aktiviteler
{t('activities')}
</Link>
</div>
</div>
components/layout/Navbar.tsx
+78 -44
View File
@@ -1,62 +1,96 @@
'use client';
import { Link } from '@/i18n/routing';
import { Link, usePathname, useRouter } from '@/i18n/routing';
import { useLocale, useTranslations } from 'next-intl';
import { siteInfo } from '@/lib/data';
import { Phone, MapPin, Menu } from 'lucide-react';
import { Phone, Menu, Globe } from 'lucide-react';
import { useState } from 'react';
export function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const locale = useLocale();
const t = useTranslations('nav');
const router = useRouter();
const pathname = usePathname();
const toggleLocale = () => {
const nextLocale = locale === 'tr' ? 'en' : 'tr';
router.replace(pathname, { locale: nextLocale });
};
return (
<div className="fixed top-4 left-4 right-4 z-50">
<header className="container mx-auto bg-white/80 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl transition-all duration-300">
<div className="px-6 h-20 flex items-center justify-between">
<Link href="/" className="font-extrabold text-2xl text-deepblue-900 tracking-tighter flex items-center gap-2 hover:opacity-80 transition-opacity">
<div className="fixed top-2 md:top-4 left-2 right-2 md:left-4 md:right-4 z-50">
<header className="container mx-auto bg-white/90 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl transition-all duration-300">
<div className="px-4 md:px-6 h-16 md:h-20 flex items-center justify-between">
<Link href="/" className="font-extrabold text-lg md:text-xl lg:text-2xl text-deepblue-900 tracking-tighter flex items-center gap-2 hover:opacity-80 transition-opacity shrink-0">
{siteInfo.name}
</Link>
{/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6">
<Link href="/" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Ana Sayfa</Link>
<Link href="/hakkimizda" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Hakkımızda</Link>
<Link href="/turlar" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Turlar</Link>
<Link href="/aktiviteler" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Aktiviteler</Link>
<Link href="/tekne-turlari" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Tekne Turları</Link>
<Link href="/iletisim" className="text-sm font-medium hover:text-turquoise-500 transition-colors">İletişim</Link>
</nav>
{/* Desktop Nav */}
<nav className="hidden lg:flex items-center gap-4 xl:gap-6">
<Link href="/" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('home')}</Link>
<Link href="/hakkimizda" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('about')}</Link>
<Link href="/turlar" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('tours')}</Link>
<Link href="/aktiviteler" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('activities')}</Link>
<Link href="/tekne-turlari" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('boatTours')}</Link>
<Link href="/iletisim" className="text-sm font-medium hover:text-turquoise-500 transition-colors">{t('contact')}</Link>
</nav>
<div className="hidden md:flex items-center gap-4">
<a href={siteInfo.phoneLink} className="flex items-center gap-2 text-sm font-semibold text-deepblue-900">
<Phone className="w-4 h-4 text-turquoise-500" />
{siteInfo.phone}
</a>
<a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="px-4 py-2 bg-vibrantorange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium transition-colors">
Rezervasyon
</a>
<div className="hidden md:flex items-center gap-3 lg:gap-4 shrink-0">
{/* Language Switcher */}
<button
onClick={toggleLocale}
className="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-gray-100 text-sm font-bold text-deepblue-900 transition-colors"
>
<Globe className="w-4 h-4 text-turquoise-500" />
{locale === 'tr' ? 'EN' : 'TR'}
</button>
<a href={siteInfo.phoneLink} className="hidden xl:flex items-center gap-2 text-sm font-semibold text-deepblue-900">
<Phone className="w-4 h-4 text-turquoise-500" />
{siteInfo.phone}
</a>
<a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="px-3 lg:px-4 py-2 bg-vibrantorange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium transition-colors">
{t('reservation')}
</a>
</div>
{/* Mobile Toggle */}
<div className="flex items-center gap-2 lg:hidden">
<button
onClick={toggleLocale}
className="flex items-center justify-center w-8 h-8 rounded-md hover:bg-gray-100 text-sm font-bold text-deepblue-900 transition-colors"
>
{locale === 'tr' ? 'EN' : 'TR'}
</button>
<button className="p-2" onClick={() => setIsOpen(!isOpen)}>
<Menu className="w-6 h-6" />
</button>
</div>
</div>
{/* Mobile Toggle */}
<button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}>
<Menu className="w-6 h-6" />
</button>
</div>
{/* Mobile Nav */}
{isOpen && (
<div className="md:hidden border-t p-4 flex flex-col gap-4 bg-sandwhite-100">
<Link href="/" onClick={() => setIsOpen(false)} className="text-sm font-medium">Ana Sayfa</Link>
<Link href="/hakkimizda" onClick={() => setIsOpen(false)} className="text-sm font-medium">Hakkımızda</Link>
<Link href="/turlar" onClick={() => setIsOpen(false)} className="text-sm font-medium">Turlar</Link>
<Link href="/aktiviteler" onClick={() => setIsOpen(false)} className="text-sm font-medium">Aktiviteler</Link>
<Link href="/tekne-turlari" onClick={() => setIsOpen(false)} className="text-sm font-medium">Tekne Turları</Link>
<Link href="/iletisim" onClick={() => setIsOpen(false)} className="text-sm font-medium">İletişim</Link>
<a href={siteInfo.whatsappLink} className="mt-2 block text-center px-4 py-2 bg-vibrantorange-500 text-white rounded-md text-sm font-medium">
Rezervasyon
</a>
</div>
)}
</header>
{/* Mobile Nav */}
{isOpen && (
<div className="lg:hidden border-t p-4 flex flex-col gap-4 bg-sandwhite-100 rounded-b-2xl">
<Link href="/" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('home')}</Link>
<Link href="/hakkimizda" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('about')}</Link>
<Link href="/turlar" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('tours')}</Link>
<Link href="/aktiviteler" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('activities')}</Link>
<Link href="/tekne-turlari" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('boatTours')}</Link>
<Link href="/iletisim" onClick={() => setIsOpen(false)} className="text-sm font-medium">{t('contact')}</Link>
<div className="pt-4 border-t flex flex-col gap-3">
<a href={siteInfo.phoneLink} className="flex items-center justify-center gap-2 text-sm font-semibold text-deepblue-900">
<Phone className="w-4 h-4 text-turquoise-500" />
{siteInfo.phone}
</a>
<a href={siteInfo.whatsappLink} className="block text-center px-4 py-3 bg-vibrantorange-500 text-white rounded-md text-sm font-medium">
{t('bookNow')}
</a>
</div>
</div>
)}
</header>
</div>
);
}
messages/en.json
+9 -3
View File
@@ -2,11 +2,17 @@
"nav": {
"home": "Home",
"about": "About Us",
"contact": "Contact"
"tours": "Tours",
"activities": "Activities",
"boatTours": "Boat Tours",
"contact": "Contact",
"reservation": "Reservation",
"bookNow": "Book Now"
},
"hero": {
"title": "Welcome",
"cta": "Learn More"
"subtitle": "Blue Cruise, Daily Tours and Unforgettable Activities",
"exploreTours": "Explore Tours",
"activities": "Activities"
},
"footer": {
"rights": "All rights reserved."
messages/tr.json
+9 -3
View File
@@ -2,11 +2,17 @@
"nav": {
"home": "Ana Sayfa",
"about": "Hakkımızda",
"contact": "İletişim"
"tours": "Turlar",
"activities": "Aktiviteler",
"boatTours": "Tekne Turları",
"contact": "İletişim",
"reservation": "Rezervasyon",
"bookNow": "Hemen Rezervasyon Yap"
},
"hero": {
"title": "Hoş Geldiniz",
"cta": "Daha Fazla Bilgi"
"subtitle": "Mavi Yolculuk, Günübirlik Turlar ve Unutulmaz Aktiviteler",
"exploreTours": "Turları Keşfet",
"activities": "Aktiviteler"
},
"footer": {
"rights": "Tüm hakları saklıdır."