first commit
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
.next
|
||||
node_modules
|
||||
.env
|
||||
.env.*.local
|
||||
.git
|
||||
.vscode
|
||||
docs
|
||||
README.md
|
||||
AGENTS.md
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@@ -0,0 +1,42 @@
|
||||
# AGENTS.md
|
||||
|
||||
## Stack
|
||||
- Framework: Next.js 16, App Router, TypeScript strict
|
||||
- Styling: Tailwind CSS v4
|
||||
- UI: shadcn/ui (new-york style, OKLCH)
|
||||
- Animation: Framer Motion
|
||||
- Icons: Lucide React
|
||||
- i18n: next-intl
|
||||
- ORM: Prisma + PostgreSQL
|
||||
- Auth: NextAuth.js v5
|
||||
- Media: Cloudinary
|
||||
- Deploy: Coolify (Docker, standalone output)
|
||||
|
||||
## Sabit Tercihler
|
||||
- Mock data: USE_MOCK=true (demo aşaması)
|
||||
- proxy.ts kullan — middleware.ts deprecated (Next.js 15.3+)
|
||||
- İletişim formu sadece /iletisim sayfasında — ana sayfada olmaz
|
||||
- Footer'da "Created by ayris.tech" linki zorunlu
|
||||
- Dockerfile'da dummy DATABASE_URL (prisma generate için)
|
||||
|
||||
## Altyapı
|
||||
- Gitea: https://git.ayris.tech (kullanıcı: ayrisdev)
|
||||
- Coolify: https://client2.ayris.tech
|
||||
- Cloudflare zone: ayris.tech
|
||||
- Server IP: 188.245.175.169
|
||||
|
||||
## docs/ Klasörü
|
||||
- docs/prd.md → ana içerik kaynağı
|
||||
- docs/*.html → varsa mevcut site içeriği
|
||||
- docs/*.md → ek belgeler
|
||||
|
||||
## Aktif Skill'ler
|
||||
- nextjs-seo → sitemap, metadata, robots.txt
|
||||
- next-best-practices → kod kalitesi
|
||||
- nextjs-app-router-patterns → Server Actions, Suspense
|
||||
- demo-site → komple site üretimi
|
||||
- design-demo → görsel kalite
|
||||
- coolify-deploy → deploy pipeline
|
||||
|
||||
## Proje Özel Notlar
|
||||
<!-- Buraya proje bazlı notlar ekle -->
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
FROM node:22-alpine AS base
|
||||
|
||||
FROM base AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci --legacy-peer-deps
|
||||
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
# Prisma generate için dummy URL — build sırasında gerçek DB gerekmez
|
||||
ARG DATABASE_URL=postgresql://dummy:dummy@localhost:5432/dummy
|
||||
ENV DATABASE_URL=$DATABASE_URL
|
||||
RUN npx prisma generate
|
||||
RUN npm run build
|
||||
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
COPY --from=builder /app/public ./public
|
||||
RUN mkdir .next && chown nextjs:nodejs .next
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
USER nextjs
|
||||
EXPOSE 3000
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
CMD ["node", "server.js"]
|
||||
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
@@ -0,0 +1,210 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { ArrowRight, Star } from 'lucide-react'
|
||||
import { ShimmerButton } from '@/components/magicui/shimmer-button'
|
||||
import { cn } from '@/components/common/Navbar'
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as const
|
||||
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 40, filter: 'blur(8px)' },
|
||||
show: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.8, ease: EASE } }
|
||||
}
|
||||
|
||||
export function HomePageClient({
|
||||
dict,
|
||||
tours,
|
||||
categories,
|
||||
reviews
|
||||
}: {
|
||||
dict: any,
|
||||
tours: any[],
|
||||
categories: any[],
|
||||
reviews: any[]
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-background min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-screen min-h-[700px] flex items-center justify-center overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ scale: 1.1, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 1.5, ease: EASE }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1471922694854-ff1b63b20054?auto=format&fit=crop&q=80"
|
||||
alt="Fethiye Hero"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="100vw"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/20 to-background/90" />
|
||||
</motion.div>
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto flex flex-col items-center">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { staggerChildren: 0.2 } }
|
||||
}}
|
||||
>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="font-heading text-hero text-foreground mb-6 leading-none drop-shadow-2xl"
|
||||
>
|
||||
{dict.hTitle}
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-h3 text-foreground/80 mb-12 max-w-2xl mx-auto font-light tracking-wide"
|
||||
>
|
||||
{dict.hSubtitle}
|
||||
</motion.p>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Link href="/tours">
|
||||
<ShimmerButton
|
||||
className="shadow-2xl"
|
||||
shimmerColor="var(--primary)"
|
||||
background="var(--background)"
|
||||
borderRadius="10px"
|
||||
>
|
||||
<span className="font-bold tracking-widest uppercase text-sm text-foreground flex items-center gap-2">
|
||||
{dict.hCta} <ArrowRight className="w-4 h-4 text-primary" />
|
||||
</span>
|
||||
</ShimmerButton>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Popular Tours Section */}
|
||||
<section className="py-32 relative z-20">
|
||||
<div className="container mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"
|
||||
>
|
||||
<h2 className="font-heading text-h2 text-foreground max-w-md leading-tight">
|
||||
{dict.sPopular}
|
||||
</h2>
|
||||
<Link href="/tours" className="group flex items-center gap-2 text-sm font-bold tracking-widest uppercase text-foreground hover:text-primary transition-colors">
|
||||
{dict.sViewAll}
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{tours.slice(0, 4).map((tour, i) => (
|
||||
<motion.div
|
||||
key={tour.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.8, ease: EASE, delay: i * 0.1 }}
|
||||
className="group relative flex flex-col gap-4"
|
||||
>
|
||||
<Link href={`/tours/${tour.slug}`} className="relative h-[400px] overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
src={tour.imageUrl || ''}
|
||||
alt={tour.title}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
|
||||
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500" />
|
||||
</Link>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-heading text-2xl font-bold text-foreground group-hover:text-primary transition-colors">{tour.title}</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs tracking-widest uppercase text-muted-foreground">{dict.tFrom}</span>
|
||||
<span className="font-sans font-bold text-xl text-primary">${tour.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Editorial Categories */}
|
||||
<section className="py-32 bg-card/30 border-y border-border/30">
|
||||
<div className="container mx-auto px-6">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="font-heading text-h2 text-center text-foreground mb-20"
|
||||
>
|
||||
{dict.sCategories}
|
||||
</motion.h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{categories.slice(0, 3).map((cat, i) => (
|
||||
<motion.div
|
||||
key={cat.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, ease: EASE, delay: i * 0.1 }}
|
||||
>
|
||||
<Link href={`/tours?category=${cat.slug}`} className="group block relative h-[500px] overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
src={cat.imageUrl || ''}
|
||||
alt={cat.name}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 p-8 w-full flex items-end justify-between">
|
||||
<h3 className="font-heading text-3xl font-bold text-foreground">{cat.name}</h3>
|
||||
<div className="w-10 h-10 rounded-full bg-primary/20 backdrop-blur-md flex items-center justify-center group-hover:bg-primary transition-colors">
|
||||
<ArrowRight className="w-5 h-5 text-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="font-heading text-h2 text-center text-foreground mb-20">{dict.sReviews}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{reviews.map((review, i) => (
|
||||
<motion.div
|
||||
key={review.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, ease: EASE, delay: i * 0.1 }}
|
||||
className="bg-card/40 p-8 rounded-3xl border border-border/50 hover:border-primary/30 transition-colors"
|
||||
>
|
||||
<div className="flex text-primary mb-6">
|
||||
{[...Array(review.rating)].map((_, j) => <Star key={j} className="w-4 h-4 fill-current mr-1" />)}
|
||||
</div>
|
||||
<p className="text-foreground/80 font-serif italic text-lg leading-relaxed mb-8">"{review.comment}"</p>
|
||||
<div>
|
||||
<div className="font-bold text-foreground text-sm tracking-widest uppercase">{review.authorName}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
'use client'
|
||||
|
||||
import { signOut } from 'next-auth/react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { LayoutDashboard, Users, Settings, LogOut, Menu, X } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
||||
{ name: 'Kullanıcılar', href: '/admin/users', icon: Users },
|
||||
{ name: 'Ayarlar', href: '/admin/settings', icon: Settings },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
|
||||
{/* Mobile sidebar backdrop */}
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-gray-900/80 lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className={`
|
||||
fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800
|
||||
transform transition-transform duration-200 ease-in-out lg:translate-x-0 lg:static lg:inset-0
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`}>
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-800">
|
||||
<h1 className="text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</h1>
|
||||
<button
|
||||
className="ml-auto lg:hidden text-gray-500"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname.endsWith(item.href)
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center px-3 py-2.5 text-sm font-medium rounded-md transition-colors
|
||||
${isActive
|
||||
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'}
|
||||
`}
|
||||
>
|
||||
<item.icon className={`mr-3 flex-shrink-0 h-5 w-5 ${isActive ? 'text-gray-900 dark:text-white' : 'text-gray-400'}`} />
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/' })}
|
||||
className="flex w-full items-center px-3 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
|
||||
>
|
||||
<LogOut className="mr-3 h-5 w-5" />
|
||||
Çıkış Yap
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<header className="h-16 flex items-center lg:hidden bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 px-4">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white focus:outline-none"
|
||||
>
|
||||
<Menu className="h-6 w-6" />
|
||||
</button>
|
||||
<span className="ml-4 text-lg font-bold text-gray-900 dark:text-white">Admin Paneli</span>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { auth } from '@/lib/auth'
|
||||
|
||||
export default async function AdminDashboardPage() {
|
||||
const session = await auth()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Dashboard</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400 mt-2">
|
||||
Hoş geldiniz, {session?.user?.name || session?.user?.email}. İşte projenizin genel görünümü.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{/* Placeholder Stat Cards */}
|
||||
{[
|
||||
{ name: 'Toplam Kullanıcı', stat: '1,245' },
|
||||
{ name: 'Aktif Oturumlar', stat: '42' },
|
||||
{ name: 'Yeni Kayıtlar', stat: '8' },
|
||||
{ name: 'Sistem Durumu', stat: 'Online' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="overflow-hidden rounded-lg bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 px-4 py-5 shadow-sm sm:p-6"
|
||||
>
|
||||
<dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">{item.name}</dt>
|
||||
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
||||
{item.stat}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 shadow-sm">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Son Aktiviteler</h3>
|
||||
<div className="mt-4 border-t border-gray-100 dark:border-gray-800">
|
||||
<div className="py-4 text-sm text-gray-500">
|
||||
Henüz aktivite kaydı bulunmuyor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { setRequestLocale } from 'next-intl/server'
|
||||
import { Mail, MapPin, Phone } from 'lucide-react'
|
||||
|
||||
export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-950 min-h-screen py-16">
|
||||
<div className="container mx-auto px-4 max-w-5xl">
|
||||
<h1 className="text-4xl font-black mb-12 text-center text-white uppercase tracking-tighter">Contact Us</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-2xl font-bold text-white">Get In Touch</h2>
|
||||
<p className="text-zinc-300">
|
||||
Pioneer travel is here to help you with all your trips and excursions. Fill out the form or contact us directly using the information below.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-orange-500/10 rounded-full flex items-center justify-center text-orange-500 shrink-0 mr-4">
|
||||
<MapPin className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">Office Address</h4>
|
||||
<p className="text-zinc-400">Çarşı Caddesi Tonoz İş Merkezi No:3/1<br/>Ölüdeniz - Fethiye / Türkiye</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-orange-500/10 rounded-full flex items-center justify-center text-orange-500 shrink-0 mr-4">
|
||||
<Phone className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">Phone Number</h4>
|
||||
<p className="text-zinc-400">+90 530 378 48 82</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-orange-500/10 rounded-full flex items-center justify-center text-orange-500 shrink-0 mr-4">
|
||||
<Mail className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-white mb-1">Email Address</h4>
|
||||
<p className="text-zinc-400">info@fethiyeholiday.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="bg-zinc-900 p-8 rounded-2xl shadow-xl border border-zinc-800">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Send a Message</h2>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-300 mb-1">Your Name</label>
|
||||
<input type="text" className="w-full px-4 py-2 border border-zinc-700 rounded-md bg-zinc-950/50 text-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition-colors" placeholder="John Doe" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-300 mb-1">Your Email</label>
|
||||
<input type="email" className="w-full px-4 py-2 border border-zinc-700 rounded-md bg-zinc-950/50 text-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition-colors" placeholder="john@example.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-300 mb-1">Message</label>
|
||||
<textarea rows={4} className="w-full px-4 py-2 border border-zinc-700 rounded-md bg-zinc-950/50 text-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition-colors" placeholder="How can we help you?"></textarea>
|
||||
</div>
|
||||
<button type="button" className="w-full py-3 bg-orange-500 text-white font-bold rounded-md hover:bg-orange-600 transition-colors shadow-[0_0_15px_rgba(249,115,22,0.3)]">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono, Playfair_Display } from "next/font/google";
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { getMessages, setRequestLocale } from 'next-intl/server';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { routing } from '@/i18n/routing';
|
||||
import { Navbar } from '@/components/common/Navbar';
|
||||
import { Footer } from '@/components/common/Footer';
|
||||
import "../globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const playfair = Playfair_Display({
|
||||
variable: "--font-playfair",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Fethiye Holiday | Pioneer Travel",
|
||||
description: "Discover the beauty of the Mediterranean with Pioneer Travel.",
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return routing.locales.map((locale) => ({locale}));
|
||||
}
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ locale: string }>;
|
||||
}>) {
|
||||
const { locale } = await params;
|
||||
|
||||
if (!routing.locales.includes(locale as any)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
setRequestLocale(locale);
|
||||
const messages = await getMessages();
|
||||
|
||||
return (
|
||||
<html
|
||||
lang={locale}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${playfair.variable} h-full antialiased dark`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col bg-background text-foreground" suppressHydrationWarning>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
<Navbar locale={locale} />
|
||||
{children}
|
||||
<Footer />
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { signIn } from 'next-auth/react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const result = await signIn('credentials', {
|
||||
redirect: false,
|
||||
email,
|
||||
password,
|
||||
})
|
||||
|
||||
if (result?.error) {
|
||||
setError('Geçersiz e-posta veya şifre')
|
||||
setLoading(false)
|
||||
} else {
|
||||
router.push('/admin')
|
||||
router.refresh()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
|
||||
<div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-800 overflow-hidden">
|
||||
<div className="p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Admin Girişi</h1>
|
||||
<p className="text-sm text-gray-500 mt-2">Yönetim paneline erişmek için giriş yapın</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-md text-sm mb-6 border border-red-100">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="email">
|
||||
E-posta
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors"
|
||||
placeholder="admin@ayris.tech"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" htmlFor="password">
|
||||
Şifre
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-md transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-xs text-gray-400">
|
||||
Demo credentials: admin@ayris.tech / admin
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { MOCK_CATEGORIES, MOCK_TOURS, MOCK_REVIEWS } from '@/lib/mock'
|
||||
import { HomePageClient } from './HomePageClient'
|
||||
|
||||
export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const h = await getTranslations('hero')
|
||||
const s = await getTranslations('sections')
|
||||
const t = await getTranslations('tour')
|
||||
|
||||
const dict = {
|
||||
hTitle: h('title'),
|
||||
hSubtitle: h('subtitle'),
|
||||
hCta: h('cta'),
|
||||
sPopular: s('popular'),
|
||||
sViewAll: s('view_all'),
|
||||
sCategories: s('categories'),
|
||||
sReviews: s('reviews'),
|
||||
tFrom: t('from')
|
||||
}
|
||||
|
||||
return (
|
||||
<HomePageClient
|
||||
dict={dict}
|
||||
tours={MOCK_TOURS}
|
||||
categories={MOCK_CATEGORIES}
|
||||
reviews={MOCK_REVIEWS}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { setRequestLocale } from 'next-intl/server'
|
||||
import { MOCK_TOURS } from '@/lib/mock'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import { Clock, Star } from 'lucide-react'
|
||||
|
||||
export default async function TourDetailPage({ params }: { params: Promise<{ locale: string, slug: string }> }) {
|
||||
const { locale, slug } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const tour = MOCK_TOURS.find(t => t.slug === slug)
|
||||
if (!tour) notFound()
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-950 min-h-screen py-12">
|
||||
<div className="container mx-auto px-4 max-w-6xl">
|
||||
<div className="bg-zinc-900 rounded-2xl overflow-hidden shadow-2xl border border-zinc-800 flex flex-col md:flex-row">
|
||||
<div className="w-full md:w-1/2 relative h-64 md:h-auto">
|
||||
<Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col">
|
||||
<h1 className="text-3xl md:text-4xl font-black mb-4 text-white">
|
||||
{tour.title}
|
||||
</h1>
|
||||
<div className="flex items-center space-x-6 text-sm text-zinc-400 mb-8">
|
||||
<span className="flex items-center"><Clock className="w-4 h-4 mr-1 text-orange-500" /> {tour.duration}</span>
|
||||
<span className="flex items-center"><Star className="w-4 h-4 mr-1 text-orange-500 fill-current" /> 5.0 (Review)</span>
|
||||
</div>
|
||||
|
||||
<p className="text-zinc-300 mb-8 leading-relaxed text-lg">
|
||||
{tour.description}
|
||||
</p>
|
||||
|
||||
<div className="mt-auto bg-zinc-950 p-6 rounded-xl flex items-center justify-between border border-zinc-800">
|
||||
<div>
|
||||
<span className="text-sm text-zinc-500 uppercase tracking-wider block mb-1">Price per person</span>
|
||||
<span className="font-black text-4xl text-orange-500">${tour.price}</span>
|
||||
</div>
|
||||
<button className="px-8 py-4 bg-orange-500 text-white font-bold rounded-lg hover:bg-orange-600 transition-all duration-300 shadow-[0_0_15px_rgba(249,115,22,0.4)] hover:shadow-[0_0_25px_rgba(249,115,22,0.6)] transform hover:-translate-y-0.5">
|
||||
Book Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import { MOCK_TOURS, MOCK_CATEGORIES } from '@/lib/mock'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
|
||||
export default async function ToursPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const s = await getTranslations('sections')
|
||||
const t = await getTranslations('tour')
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-950 min-h-screen py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl font-black mb-8 text-white uppercase tracking-tighter">
|
||||
{s('categories')}
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{MOCK_TOURS.map(tour => {
|
||||
const cat = MOCK_CATEGORIES.find(c => c.id === tour.categoryId)
|
||||
return (
|
||||
<div key={tour.id} className="bg-zinc-900 rounded-xl overflow-hidden shadow-lg border border-zinc-800 hover:border-orange-500/50 transition-all duration-300 flex flex-col group">
|
||||
<div className="relative h-56 overflow-hidden">
|
||||
<Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw" className="object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
{cat && (
|
||||
<div className="absolute top-4 left-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
|
||||
{cat.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
<h3 className="font-bold text-xl mb-3 text-zinc-100 line-clamp-1">{tour.title}</h3>
|
||||
<p className="text-zinc-400 text-sm mb-6 flex-1 line-clamp-3">{tour.description}</p>
|
||||
<div className="flex items-center justify-between border-t border-zinc-800 pt-4 mt-auto">
|
||||
<div>
|
||||
<span className="text-xs text-zinc-500 uppercase tracking-wider block">{t('from')}</span>
|
||||
<span className="font-bold text-2xl text-orange-500">${tour.price}</span>
|
||||
</div>
|
||||
<Link href={`/tours/${tour.slug}`} className="px-5 py-2.5 bg-zinc-800 text-white text-sm font-medium rounded-md hover:bg-orange-500 transition-colors duration-300">
|
||||
{t('book_now')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { handlers } from "@/lib/auth"
|
||||
|
||||
export const { GET, POST } = handlers
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
+124
@@ -0,0 +1,124 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
--font-heading: var(--font-playfair), var(--font-geist-sans), serif;
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Modern Editorial Dark Theme defaults */
|
||||
--background: oklch(0.12 0.01 260);
|
||||
--foreground: oklch(0.95 0.01 80);
|
||||
|
||||
/* Vibrant Orange Accent */
|
||||
--primary: oklch(0.65 0.20 35);
|
||||
--primary-foreground: oklch(0.98 0.008 80);
|
||||
|
||||
--secondary: oklch(0.20 0.01 260);
|
||||
--secondary-foreground: oklch(0.95 0.01 80);
|
||||
|
||||
--muted: oklch(0.20 0.01 260);
|
||||
--muted-foreground: oklch(0.60 0.01 80);
|
||||
|
||||
--accent: oklch(0.65 0.20 35);
|
||||
--accent-foreground: oklch(0.98 0.008 80);
|
||||
|
||||
--destructive: oklch(0.40 0.20 25);
|
||||
--destructive-foreground: oklch(0.98 0.008 80);
|
||||
|
||||
--border: oklch(0.25 0.01 260);
|
||||
--input: oklch(0.25 0.01 260);
|
||||
--ring: oklch(0.65 0.20 35);
|
||||
|
||||
--card: oklch(0.15 0.01 260);
|
||||
--card-foreground: oklch(0.95 0.01 80);
|
||||
|
||||
--popover: oklch(0.15 0.01 260);
|
||||
--popover-foreground: oklch(0.95 0.01 80);
|
||||
|
||||
--radius: 0.75rem;
|
||||
|
||||
/* Fluid Typography Scale */
|
||||
--text-hero: clamp(3rem, 7vw, 7rem);
|
||||
--text-h1: clamp(2.5rem, 5vw, 5rem);
|
||||
--text-h2: clamp(1.75rem, 3vw, 3rem);
|
||||
--text-h3: clamp(1.25rem, 2vw, 1.75rem);
|
||||
--text-body: 1rem;
|
||||
--text-small: 0.875rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, .font-hero {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.text-hero { font-size: var(--text-hero); }
|
||||
.text-h1 { font-size: var(--text-h1); }
|
||||
.text-h2 { font-size: var(--text-h2); }
|
||||
.text-h3 { font-size: var(--text-h3); }
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass-panel {
|
||||
background: color-mix(in oklch, var(--card) 60%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(to right, var(--primary), oklch(0.80 0.15 50));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "base-nova",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { useTranslations } from 'next-intl'
|
||||
import Link from 'next/link'
|
||||
import { MapPin, Phone, Mail } from 'lucide-react'
|
||||
|
||||
export function Footer() {
|
||||
const t = useTranslations('nav')
|
||||
const f = useTranslations('footer')
|
||||
|
||||
return (
|
||||
<footer className="bg-zinc-950 text-zinc-300 pt-16 pb-8 border-t border-zinc-900">
|
||||
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
|
||||
<div className="space-y-4">
|
||||
<Link href="/" className="flex items-center">
|
||||
<span className="text-2xl font-black tracking-tighter text-orange-500">FETHIYE</span>
|
||||
<span className="text-2xl font-bold tracking-tighter text-white">HOLIDAY</span>
|
||||
</Link>
|
||||
<p className="text-sm text-zinc-400 leading-relaxed">
|
||||
{f('description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Quick Links</h4>
|
||||
<ul className="space-y-2 text-sm text-zinc-400">
|
||||
<li><Link href="/" className="hover:text-orange-500 transition">{t('home')}</Link></li>
|
||||
<li><Link href="/about" className="hover:text-orange-500 transition">{t('about')}</Link></li>
|
||||
<li><Link href="/tours" className="hover:text-orange-500 transition">{t('tours')}</Link></li>
|
||||
<li><Link href="/blog" className="hover:text-orange-500 transition">{t('blog')}</Link></li>
|
||||
<li><Link href="/contact" className="hover:text-orange-500 transition">{t('contact')}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Contact</h4>
|
||||
<ul className="space-y-3 text-sm text-zinc-400">
|
||||
<li className="flex items-start">
|
||||
<MapPin className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
|
||||
<span>{f('contact_info')}</span>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Phone className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
|
||||
<span>+90 530 378 48 82</span>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<Mail className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
|
||||
<span>info@fethiyeholiday.com</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Follow Us</h4>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-zinc-900 flex items-center justify-center hover:bg-orange-500 hover:text-white transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-zinc-900 flex items-center justify-center hover:bg-orange-500 hover:text-white transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<p className="text-xs text-zinc-500">TURSAB Licence No: 6105</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 pt-8 border-t border-zinc-900 text-center text-xs text-zinc-500 flex flex-col items-center justify-center space-y-2">
|
||||
<p>{f('rights')}</p>
|
||||
<div>
|
||||
Created by{' '}
|
||||
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-orange-500 hover:text-orange-400 transition font-medium">
|
||||
ayris.tech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
'use client'
|
||||
|
||||
import { useTranslations } from 'next-intl'
|
||||
import Link from 'next/link'
|
||||
import { Menu } from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
export function Navbar({ locale }: { locale: string }) {
|
||||
const t = useTranslations('nav')
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const handler = () => setScrolled(window.scrollY > 50)
|
||||
window.addEventListener('scroll', handler, { passive: true })
|
||||
return () => window.removeEventListener('scroll', handler)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.nav
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={cn(
|
||||
'fixed top-0 inset-x-0 z-50 transition-all duration-500',
|
||||
scrolled ? 'bg-background/80 backdrop-blur-xl border-b border-border/40 shadow-sm'
|
||||
: 'bg-transparent border-b border-transparent'
|
||||
)}
|
||||
>
|
||||
<div className="container mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<Link href="/" className="font-heading text-xl md:text-2xl tracking-[0.2em] uppercase flex items-center gap-2">
|
||||
<span className="font-bold text-foreground">PIONEER</span>
|
||||
<span className="font-light text-primary">TRAVEL</span>
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-10">
|
||||
{['home', 'about', 'tours', 'blog', 'contact'].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
href={item === 'home' ? '/' : `/${item}`}
|
||||
className="text-xs font-medium tracking-[0.15em] uppercase text-foreground/80 hover:text-primary transition-colors duration-300 relative group"
|
||||
>
|
||||
{t(item)}
|
||||
<span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-primary transition-all duration-300 group-hover:w-full rounded-full" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="hidden md:flex bg-card/50 backdrop-blur-md rounded-full p-1 border border-border/50">
|
||||
<Link href="/tr" className={cn("px-4 py-1.5 rounded-full text-xs tracking-wider font-bold transition-all duration-300", locale === 'tr' ? 'bg-primary text-primary-foreground shadow-md' : 'text-muted-foreground hover:text-foreground')}>TR</Link>
|
||||
<Link href="/en" className={cn("px-4 py-1.5 rounded-full text-xs tracking-wider font-bold transition-all duration-300", locale === 'en' ? 'bg-primary text-primary-foreground shadow-md' : 'text-muted-foreground hover:text-foreground')}>EN</Link>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden text-foreground hover:text-primary transition"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
>
|
||||
<Menu className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.nav>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: '100%' }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: '100%' }}
|
||||
transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="fixed inset-0 z-[60] bg-background/95 backdrop-blur-2xl flex flex-col justify-center items-center"
|
||||
>
|
||||
<button
|
||||
className="absolute top-6 right-6 text-foreground text-sm tracking-widest uppercase font-bold hover:text-primary"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<div className="flex flex-col space-y-8 text-center">
|
||||
{['home', 'about', 'tours', 'blog', 'contact'].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
href={item === 'home' ? '/' : `/${item}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="font-heading text-3xl font-light text-foreground hover:text-primary hover:scale-105 transition-all"
|
||||
>
|
||||
{t(item)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import { cn } from "@/components/common/Navbar"; // reuse cn
|
||||
|
||||
export interface ShimmerButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
shimmerColor?: string;
|
||||
shimmerSize?: string;
|
||||
borderRadius?: string;
|
||||
shimmerDuration?: string;
|
||||
background?: string;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
|
||||
(
|
||||
{
|
||||
shimmerColor = "#ffffff",
|
||||
shimmerSize = "0.05em",
|
||||
shimmerDuration = "3s",
|
||||
borderRadius = "100px",
|
||||
background = "rgba(0, 0, 0, 1)",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
return (
|
||||
<button
|
||||
style={
|
||||
{
|
||||
"--spread": "90deg",
|
||||
"--shimmer-color": shimmerColor,
|
||||
"--radius": borderRadius,
|
||||
"--speed": shimmerDuration,
|
||||
"--cut": shimmerSize,
|
||||
"--bg": background,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-visible [container-type:size]">
|
||||
<div className="absolute inset-0 h-[100cqh] animate-[shimmer_var(--speed)_infinite_linear] bg-[length:200%_100%] bg-[linear-gradient(var(--spread),transparent_0%,var(--shimmer-color)_50%,transparent_100%)] [aspect-ratio:1/1]" />
|
||||
</div>
|
||||
<div className="absolute inset-[var(--cut)] bg-[var(--bg)] [border-radius:var(--radius)]" />
|
||||
<span className="relative z-10 flex w-full items-center justify-center gap-2">
|
||||
{children}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ShimmerButton.displayName = "ShimmerButton";
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>About Us & Contact | Fethiye Adventure Co.</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-bright": "#393939",
|
||||
"surface": "#131313",
|
||||
"surface-container": "#201f1f",
|
||||
"on-tertiary-fixed": "#001d35",
|
||||
"inverse-on-surface": "#313030",
|
||||
"on-primary-fixed": "#351000",
|
||||
"on-primary-container": "#572000",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"inverse-primary": "#a04100",
|
||||
"on-surface-variant": "#e2bfb0",
|
||||
"outline": "#a98a7d",
|
||||
"on-error": "#690005",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-secondary-container": "#b6b5b4",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-tertiary-fixed-variant": "#00497b",
|
||||
"surface-container-highest": "#353534",
|
||||
"surface-variant": "#353534",
|
||||
"on-primary-fixed-variant": "#7a3000",
|
||||
"error": "#ffb4ab",
|
||||
"tertiary-fixed-dim": "#9ccaff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"primary-fixed-dim": "#ffb693",
|
||||
"tertiary-container": "#059eff",
|
||||
"on-tertiary-container": "#003357",
|
||||
"surface-dim": "#131313",
|
||||
"on-secondary-fixed-variant": "#474746",
|
||||
"outline-variant": "#5a4136",
|
||||
"secondary-container": "#474746",
|
||||
"secondary": "#c8c6c5",
|
||||
"on-surface": "#e5e2e1",
|
||||
"secondary-fixed-dim": "#c8c6c5",
|
||||
"primary-fixed": "#ffdbcc",
|
||||
"on-secondary": "#303030",
|
||||
"on-tertiary": "#003257",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#1b1c1c",
|
||||
"primary-container": "#ff6b00",
|
||||
"secondary-fixed": "#e4e2e1",
|
||||
"on-primary": "#561f00",
|
||||
"primary": "#ffb693",
|
||||
"surface-tint": "#ffb693",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"error-container": "#93000a",
|
||||
"background": "#131313",
|
||||
"tertiary": "#9ccaff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "8px",
|
||||
"section-gap": "120px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "20px",
|
||||
"margin-desktop": "64px",
|
||||
"container-max": "1280px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Montserrat"],
|
||||
"headline-md": ["Montserrat"],
|
||||
"body-lg": ["Inter"],
|
||||
"display-lg": ["Montserrat"],
|
||||
"headline-lg": ["Montserrat"],
|
||||
"body-md": ["Inter"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.form-input-focus:focus {
|
||||
outline: none;
|
||||
border-color: #ff6b00;
|
||||
box-shadow: 0 0 0 1px #ff6b00;
|
||||
}
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #131313; }
|
||||
::-webkit-scrollbar-thumb { background: #333333; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #ff6b00; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 flex flex-col bg-surface dark:bg-surface border-b border-outline-variant transition-all duration-300 ease-in-out">
|
||||
<div class="max-w-container-max mx-auto w-full px-margin-desktop py-4 flex justify-between items-center">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">
|
||||
Fethiye Adventure Co.
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-stack-lg">
|
||||
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">Tours</a>
|
||||
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">Private Charters</a>
|
||||
<a class="font-body-md text-body-md text-on-surface hover:text-primary transition-colors" href="#">About Us</a>
|
||||
<a class="font-body-md text-body-md text-primary font-bold border-b-2 border-primary pb-1" href="#">Contact</a>
|
||||
<button class="bg-primary-container text-on-primary px-8 py-3 font-label-md text-label-md uppercase tracking-wider hover:opacity-90 transition-all">
|
||||
Book Now
|
||||
</button>
|
||||
</div>
|
||||
<button class="md:hidden text-primary">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-32 pb-section-gap">
|
||||
<div class="max-w-container-max mx-auto px-margin-desktop">
|
||||
<!-- Hero Heading -->
|
||||
<div class="mb-stack-lg border-l-4 border-primary-container pl-6">
|
||||
<h1 class="font-display-lg text-display-lg uppercase leading-none">The Spirit of<br/><span class="text-primary-container">Adventure</span></h1>
|
||||
<p class="font-body-lg text-body-lg mt-4 max-w-2xl text-on-surface-variant">We don't just provide tours; we curate life-defining moments amidst the turquoise waters and rugged peaks of Fethiye.</p>
|
||||
</div>
|
||||
<!-- Split Layout Section -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-section-gap items-start mt-stack-lg">
|
||||
<!-- Left: Content & Mission -->
|
||||
<div class="space-y-stack-lg">
|
||||
<section>
|
||||
<h2 class="font-headline-lg text-headline-lg mb-stack-md">Our Mission</h2>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||
Founded in 2010 by a team of local sailors and mountain guides, Fethiye Adventure Co. was born from a desire to showcase the Mediterranean's hidden gems with professional rigor and sustainable practices. We believe that true luxury lies in the raw beauty of nature, accessed through expert craftsmanship.
|
||||
</p>
|
||||
</section>
|
||||
<div class="relative h-[400px] overflow-hidden group border border-outline-variant">
|
||||
<img alt="Adventure Mission" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A professional tour guide in technical gear standing on a rugged cliffside overlooking the turquoise waters of Oludeniz, Fethiye. The lighting is high-contrast golden hour, casting long dramatic shadows. The aesthetic is clean, adventurous, and premium, with a deep anthracite color palette and sharp details in the surrounding limestone terrain." src="https://lh3.googleusercontent.com/aida-public/AB6AXuChYoQM5EXifUAJVegRfITxlbTcda7_woCek97JaojiIIVQqmW1lQpFwcDfAOGxvEpyR-LnRFPka9zjG0J2R0GSdCzZ5ofizZKQ0poir4tXVBHarWmA1Q12ZRQEkFbifbvFabF7nWhydvSRBL0GI88fXUx-c4GUJzQFnu92v-xhOVebCAqDAo44qQPICqRQtmw3p9gxTb4-GhzDxJTOY3PXcgQ5CSI2r-d8mpaSAy1VyEfdn3jVC7_ETJNJ3OOrSAEZKyewA7HkGoo"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-60"></div>
|
||||
</div>
|
||||
<section class="grid grid-cols-2 gap-gutter">
|
||||
<div class="p-stack-md bg-surface-container-high border border-outline-variant">
|
||||
<span class="text-primary-container font-headline-md text-headline-md block mb-1">14+</span>
|
||||
<span class="font-label-md text-label-md uppercase text-on-surface-variant">Years Experience</span>
|
||||
</div>
|
||||
<div class="p-stack-md bg-surface-container-high border border-outline-variant">
|
||||
<span class="text-primary-container font-headline-md text-headline-md block mb-1">200+</span>
|
||||
<span class="font-label-md text-label-md uppercase text-on-surface-variant">Unique Routes</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right: Contact Form -->
|
||||
<div class="bg-surface-container p-stack-lg border border-outline-variant sticky top-32">
|
||||
<h2 class="font-headline-lg text-headline-lg mb-stack-md">Get in Touch</h2>
|
||||
<form class="space-y-stack-md">
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Full Name</label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Email Address</label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="john@example.com" type="email"/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Phone</label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="+90 5XX XXX XX XX" type="tel"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Interest</label>
|
||||
<select class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all">
|
||||
<option>Private Yacht Charter</option>
|
||||
<option>Paragliding Adventure</option>
|
||||
<option>Hiking & Ancient Ruins</option>
|
||||
<option>Custom Itinerary</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-md text-label-md text-on-surface-variant uppercase">Message</label>
|
||||
<textarea class="w-full bg-surface-container-lowest border border-outline-variant p-4 text-on-surface form-input-focus transition-all" placeholder="How can we make your trip unforgettable?" rows="4"></textarea>
|
||||
</div>
|
||||
<button class="w-full bg-primary-container text-on-primary py-4 font-headline-md text-headline-md uppercase tracking-widest hover:bg-opacity-90 transition-all flex items-center justify-center gap-2" type="submit">
|
||||
Send Request
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Integrated Map Section -->
|
||||
<section class="mt-section-gap">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-stack-lg border-b border-outline-variant pb-stack-sm">
|
||||
<h2 class="font-headline-lg text-headline-lg">Our Headquarters</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-1">Karagözler, Fevzi Çakmak Cd. No:42, 48300 Fethiye/Muğla</p>
|
||||
</div>
|
||||
<div class="relative h-[500px] bg-surface-container-high border border-outline-variant grayscale hover:grayscale-0 transition-all duration-500 overflow-hidden">
|
||||
<!-- Map Placeholder with data-location -->
|
||||
<img alt="Fethiye Office Location" class="w-full h-full object-cover" data-alt="A stylized, high-contrast satellite view map of the Fethiye marina and surrounding Mediterranean coastline. The image uses a dark mode aesthetic with deep anthracite water and subtle orange glowing markers for key locations. The lighting is sophisticated and moody, highlighting the dramatic geography of the Turkish Riviera in a premium editorial style." data-location="Fethiye" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiXexIfdJoSzYGpyw5B52Y3UTpBZWSpn8HU6AAHlSLEH40ipaCOChjq5iBPfXyTj0WhDDjcyNQmT3g-8n7LZthDx4VdTqA32PJIQD9Z-NnHlJ4EGl8h6gxLzmkBpDZniPhgDbJJUEC_QqCol6AQ9lYaY572V5RzQDxFuwazWcDIGLqCY1iFwe_wlyfzDGUzP27Jk0_zTUIRpw6JMzobHtEYCd1aKoSaIp4IpTu8i3Xe8ILBqi2ECYeVQra7fEFgF7Gm7v1FntloI0"/>
|
||||
<!-- Overlay Marker Card -->
|
||||
<div class="absolute bottom-10 left-10 bg-background p-stack-md border border-primary-container max-w-xs shadow-2xl">
|
||||
<div class="flex items-center gap-stack-sm text-primary-container mb-2">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
||||
<span class="font-label-md text-label-md uppercase">Fethiye Office</span>
|
||||
</div>
|
||||
<p class="text-on-surface text-body-md">Open Daily: 08:00 - 20:00</p>
|
||||
<p class="text-on-surface-variant text-label-md mt-1">Pop by for a Turkish tea and a travel consultation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-surface-container-lowest dark:bg-surface-container-lowest border-t border-outline-variant">
|
||||
<div class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-stack-md">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary">
|
||||
Fethiye Adventure Co.
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-stack-lg">
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">FAQ</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Blog</a>
|
||||
</div>
|
||||
<div class="font-body-md text-body-md text-on-surface-variant">
|
||||
© 2024 Fethiye Adventure Co. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Simple scroll interaction for the Navbar
|
||||
window.addEventListener('scroll', () => {
|
||||
const nav = document.querySelector('nav');
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('bg-opacity-90', 'backdrop-blur-md', 'py-2');
|
||||
nav.classList.remove('py-4');
|
||||
} else {
|
||||
nav.classList.remove('bg-opacity-90', 'backdrop-blur-md', 'py-2');
|
||||
nav.classList.add('py-4');
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission feedback
|
||||
const form = document.querySelector('form');
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('button');
|
||||
const originalContent = btn.innerHTML;
|
||||
btn.innerHTML = 'Sending...';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = 'Message Sent!';
|
||||
btn.classList.replace('bg-primary-container', 'bg-green-600');
|
||||
form.reset();
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalContent;
|
||||
btn.classList.replace('bg-green-600', 'bg-primary-container');
|
||||
btn.disabled = false;
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,442 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>All Tours | Fethiye Adventure Co.</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #131313;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #474746;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.tour-card:hover .tour-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(32, 31, 31, 0.8);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-bright": "#393939",
|
||||
"surface": "#131313",
|
||||
"surface-container": "#201f1f",
|
||||
"on-tertiary-fixed": "#001d35",
|
||||
"inverse-on-surface": "#313030",
|
||||
"on-primary-fixed": "#351000",
|
||||
"on-primary-container": "#572000",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"inverse-primary": "#a04100",
|
||||
"on-surface-variant": "#e2bfb0",
|
||||
"outline": "#a98a7d",
|
||||
"on-error": "#690005",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-secondary-container": "#b6b5b4",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-tertiary-fixed-variant": "#00497b",
|
||||
"surface-container-highest": "#353534",
|
||||
"surface-variant": "#353534",
|
||||
"on-primary-fixed-variant": "#7a3000",
|
||||
"error": "#ffb4ab",
|
||||
"tertiary-fixed-dim": "#9ccaff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"primary-fixed-dim": "#ffb693",
|
||||
"tertiary-container": "#059eff",
|
||||
"on-tertiary-container": "#003357",
|
||||
"surface-dim": "#131313",
|
||||
"on-secondary-fixed-variant": "#474746",
|
||||
"outline-variant": "#5a4136",
|
||||
"secondary-container": "#474746",
|
||||
"secondary": "#c8c6c5",
|
||||
"on-surface": "#e5e2e1",
|
||||
"secondary-fixed-dim": "#c8c6c5",
|
||||
"primary-fixed": "#ffdbcc",
|
||||
"on-secondary": "#303030",
|
||||
"on-tertiary": "#003257",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#1b1c1c",
|
||||
"primary-container": "#ff6b00",
|
||||
"secondary-fixed": "#e4e2e1",
|
||||
"on-primary": "#561f00",
|
||||
"primary": "#ffb693",
|
||||
"surface-tint": "#ffb693",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"error-container": "#93000a",
|
||||
"background": "#131313",
|
||||
"tertiary": "#9ccaff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "8px",
|
||||
"section-gap": "120px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "20px",
|
||||
"margin-desktop": "64px",
|
||||
"container-max": "1280px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Montserrat"],
|
||||
"headline-md": ["Montserrat"],
|
||||
"body-lg": ["Inter"],
|
||||
"display-lg": ["Montserrat"],
|
||||
"headline-lg": ["Montserrat"],
|
||||
"body-md": ["Inter"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full z-50 flex flex-col bg-surface border-b border-outline-variant">
|
||||
<!-- Utility Bar -->
|
||||
<div class="hidden md:flex w-full py-2 px-margin-desktop bg-surface-container-lowest text-on-surface-variant font-label-md text-[12px] justify-between border-b border-outline-variant/30">
|
||||
<div class="flex gap-4">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Fethiye, TR</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">call</span> +90 252 612 0000</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<span>English</span>
|
||||
<span>USD</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Nav -->
|
||||
<nav class="flex items-center justify-between py-4 px-margin-desktop max-w-container-max mx-auto w-full transition-all duration-300 ease-in-out">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">
|
||||
Fethiye Adventure Co.
|
||||
</div>
|
||||
<div class="hidden md:flex gap-stack-lg items-center">
|
||||
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-md text-body-md" href="#">Tours</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Private Charters</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">About Us</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-6 py-3 rounded-none hover:brightness-110 transition-all uppercase tracking-widest font-bold">
|
||||
Book Now
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="pt-[140px] pb-section-gap px-margin-desktop max-w-container-max mx-auto">
|
||||
<!-- Hero Header -->
|
||||
<div class="mb-stack-lg border-l-4 border-primary pl-6">
|
||||
<h1 class="font-display-lg text-display-lg uppercase mb-2">Explore Fethiye</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Discover the hidden gems of the Mediterranean with our hand-picked adventure tours. From the heights of Babadağ to the crystal depths of the Blue Lagoon.</p>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row gap-gutter">
|
||||
<!-- Filter Sidebar -->
|
||||
<aside class="w-full lg:w-72 flex-shrink-0">
|
||||
<div class="sticky top-40 bg-surface-container-high border border-outline-variant p-stack-lg space-y-stack-lg">
|
||||
<div class="flex items-center justify-between pb-4 border-b border-outline-variant">
|
||||
<h2 class="font-headline-md text-[20px] uppercase">Filters</h2>
|
||||
<span class="material-symbols-outlined text-primary cursor-pointer">filter_list</span>
|
||||
</div>
|
||||
<!-- Activity Type -->
|
||||
<div>
|
||||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Activity Type</h3>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Air Adventures</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Water Sports</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input checked="" class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Off-Road</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Private Cruises</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Price Range -->
|
||||
<div>
|
||||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Price Range (USD)</h3>
|
||||
<input class="w-full h-1 bg-outline-variant rounded-lg appearance-none cursor-pointer accent-primary" max="500" min="30" type="range" value="250"/>
|
||||
<div class="flex justify-between mt-2 font-label-md text-on-surface-variant">
|
||||
<span>$30</span>
|
||||
<span>$500</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Duration -->
|
||||
<div>
|
||||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Duration</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="px-4 py-2 border border-outline-variant text-on-surface-variant font-label-md hover:border-primary hover:text-primary transition-colors">Short</button>
|
||||
<button class="px-4 py-2 border border-primary text-primary font-label-md">Full Day</button>
|
||||
<button class="px-4 py-2 border border-outline-variant text-on-surface-variant font-label-md hover:border-primary hover:text-primary transition-colors">Multi-Day</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full bg-surface-container-lowest border border-outline-variant py-3 font-label-md uppercase hover:bg-primary hover:text-on-primary transition-all duration-300">
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Results Grid -->
|
||||
<section class="flex-grow">
|
||||
<div class="flex justify-between items-center mb-stack-lg">
|
||||
<p class="font-body-md text-on-surface-variant"><span class="text-on-surface font-bold">12</span> adventures found in Fethiye</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-label-md uppercase hidden sm:inline">Sort by:</span>
|
||||
<select class="bg-surface-container border border-outline-variant font-label-md py-2 px-4 focus:ring-primary focus:border-primary rounded-none">
|
||||
<option>Most Popular</option>
|
||||
<option>Price: Low to High</option>
|
||||
<option>Price: High to Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento / Grid Hybrid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-gutter">
|
||||
<!-- Card 1: Paragliding -->
|
||||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A breathtaking view of a tandem paraglider soaring high above the turquoise Oludeniz Blue Lagoon in Fethiye, Turkey. The sun reflects off the crystal-clear Mediterranean water, while the lush green mountains create a dramatic backdrop. The image is captured with high-contrast, professional travel photography style, emphasizing the vibrant oranges of the paraglider and the deep blues of the sea." src="https://lh3.googleusercontent.com/aida-public/AB6AXuApXgdK3MPlpwfZ4UCJFKDSz5F2lWTw_9wgKqL_OW69UabnoUDOWIIo9WLjsJRJPa7jPYBOJmyr3UmdCMs2tApT-g3CUeoqUSKeWp3IYdG7TXkMw98sngZC50SG2njqXe0KSjfqMovabLjn_U3vxSFjtV3crU5eX5TxFquamH1EaENhjMKK_YkVl5IuOpwbD-xktckBNaMAbyM3WT9ZBrluBLM9lujF1nL1PqnnsW1YnBzZe7UZapOM_eSQnUdkm7fh7jAuVdawE_8"/>
|
||||
<div class="absolute top-4 left-4 bg-primary text-on-primary font-label-md px-3 py-1 uppercase tracking-tighter">Best Seller</div>
|
||||
<div class="absolute bottom-4 right-4 bg-surface/80 backdrop-blur px-3 py-1 border border-outline-variant">
|
||||
<div class="flex items-center gap-1 font-label-md text-primary">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span> 4.9
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Oludeniz Tandem Paragliding</h3>
|
||||
</div>
|
||||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 2 Hours</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">air</span> Air</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Fly from 2000m altitude at Babadağ mountain and land on the white sands of Belcekız beach.</p>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface-variant font-label-md line-through">$180</span>
|
||||
<span class="text-primary font-headline-md">$149</span>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Jeep Safari -->
|
||||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A rugged open-top 4x4 jeep splashing through a shallow riverbed in the Saklikent Canyon near Fethiye. Adventurers are cheering with their hands up, surrounded by ancient limestone cliffs and dusty terrain. The lighting is intense golden hour sunlight, highlighting the spray of water and the rugged textures of the canyon walls in a bold, cinematic style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvMLuqIuZ7vfceGD61BQzx1IORruzIPXrZoS8vTllS29Y1sr6KIJLMdHaMzQkUWI_tayyUBJL5vLMCcIva0eLLRep0ktobHfLSDhZthvyh9IAvCuG7HfG0O5U8C2piXPj5Uqv6Aw3N1LNjIOfS5o9Grickq924M5AlYC-c6lGMl3gy_6duZyCFxtHfNTuLaHULV-hlwaORZ7Yo0modVmRfs8ZIpvS0pP4MSngoCKAyUlklrnhiSyuHUaznmyWaR_n1Pv44fFAYeKs"/>
|
||||
<div class="absolute bottom-4 right-4 bg-surface/80 backdrop-blur px-3 py-1 border border-outline-variant">
|
||||
<div class="flex items-center gap-1 font-label-md text-primary">
|
||||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span> 4.7
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Tlos & Saklikent Jeep Safari</h3>
|
||||
</div>
|
||||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 8 Hours</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">explore</span> Adventure</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Explore the ancient ruins of Tlos, splash through water fights, and walk the deep Saklikent Gorge.</p>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface-variant font-label-md">From</span>
|
||||
<span class="text-primary font-headline-md">$45</span>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: Scuba Diving -->
|
||||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A pair of scuba divers exploring a vibrant underwater cave ecosystem in the clear blue waters of Fethiye. Schools of silver fish dart between colorful sea sponges and rock formations. Sunbeams pierce through the surface of the water, creating columns of light in the deep ocean. The aesthetic is professional, clear, and high-contrast, showcasing the mysterious beauty of the Mediterranean seabed." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDV10RJ4OLJ0GYhs8O1M7Ugy6y_w66EMJAsTRh2-IdM33kDpFzQBtV7yP4cZrAhkxbxTiNh_anCxmXbNdWKPrEPOocu3_5NKaxzvS8_nSx00rdy0_R8rRSaqQDWgNAx0yA8iDtzbgMgmmcMyfxddQ7yUObQjNwW0_WYf7qhZDUAONjrDNhEjJGbNHhOSs33Qo8XVeCoBFTVdK3aZUpCvceVImZ16Pytss8h9pFTFCpr9A2YH2LQ9-1yPY9-1cMUqWpVJyinNnXShxQ"/>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Dalyan Turtle & Cave Diving</h3>
|
||||
</div>
|
||||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 6 Hours</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">scuba_diving</span> Water</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Experience the magical underwater world of Fethiye bays with professional instructors.</p>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface-variant font-label-md">From</span>
|
||||
<span class="text-primary font-headline-md">$65</span>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Private Charter (Asymmetric) -->
|
||||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300 md:col-span-2">
|
||||
<div class="flex flex-col md:flex-row h-full">
|
||||
<div class="relative w-full md:w-1/2 h-64 md:h-full overflow-hidden">
|
||||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A luxury sailing yacht anchored in a secluded, emerald-green bay in Göcek, near Fethiye. The deck features plush white seating and a mahogany finish. The surrounding pine-clad hills reflect in the glass-like water. The mood is opulent, serene, and exclusive, utilizing high-key lighting and a sophisticated palette of deep greens and polished whites." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB03EtScQoviYONinNtrn87Ldd4cnLsWauQ8w2CxfpLT6_KOiRAX1YwDHdAr_ZY6HP0z57aTPNy81HcUkZ2yzsanNSiN8GzIV-JV7_piiYsmD78HlBxiCQISWj1nao0W1zDJcF-jiM3CFXdF0iNnEfMDVXTY6unWSFO4PLOKqnYr-8IzhXnX1j42736qutjEWnN08D5xcwfxREJZZxkpvGNPDByHs37rIvgmtUdOVIRSsKb-UtuPGyO-i8ca0oqUqHzyWxGNO1LKdY"/>
|
||||
<div class="absolute top-4 left-4 bg-tertiary text-on-tertiary font-label-md px-3 py-1 uppercase tracking-tighter">Premium</div>
|
||||
</div>
|
||||
<div class="p-8 flex flex-col justify-center w-full md:w-1/2">
|
||||
<h3 class="font-headline-lg text-headline-md uppercase mb-4 group-hover:text-primary transition-colors">Exclusive Göcek 12 Islands Cruise</h3>
|
||||
<div class="flex gap-4 mb-6 text-on-surface-variant font-label-md">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">directions_boat</span> Private Yacht</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">group</span> Max 10</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant mb-stack-lg">The ultimate luxury experience. Escape the crowds and cruise through the hidden bays of Göcek with a private chef and captain.</p>
|
||||
<div class="flex items-center justify-between pt-6 border-t border-outline-variant mt-auto">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface-variant font-label-md">Daily Charter</span>
|
||||
<span class="text-primary font-headline-md">$850</span>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-8 py-4 uppercase font-bold hover:brightness-110 transition-all">
|
||||
Book Private
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5: Horse Riding -->
|
||||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A serene horse riding tour at sunset in Kayaköy Ghost Village, Fethiye. The rider is on a majestic brown horse, trekking through historic ruins with the orange sun setting behind the cypress trees. The lighting is warm and ethereal, creating long shadows and a peaceful, cinematic atmosphere with high-contrast silhouettes." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnMSC_JuaNaIn8TzYRosRPTKdlBJq6L-QnMi57iJzCyS4ASqP4HkjJKk-pA5cS63T1LQ2UE5-xLigjMo_fa4hUZ6k9OlFQ4s98Jj6d_6umRmThn5i9BVRbfhQ5E8LMXqPSQE8Tjuv3FRl3aA6TNqrEfGuhFcrfH-yL_pqTfeqgGU8Jxv1R2haoSn3XQ128Pd8JY4wGXu-9oEwImFSxKo9NfYnhA9XUhYA5JxN-paQuWIFXzjGz66Kpa5u6KeqgrAaYplsaQcCk7RI"/>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col flex-grow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Kayaköy Ghost Village Ride</h3>
|
||||
</div>
|
||||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 3 Hours</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">pets</span> Nature</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Ride through the pine forests and discover the abandoned Greek village of Kayaköy.</p>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-on-surface-variant font-label-md">From</span>
|
||||
<span class="text-primary font-headline-md">$40</span>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="mt-section-gap flex justify-center items-center gap-4">
|
||||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-12 h-12 flex items-center justify-center border border-primary bg-primary text-on-primary font-bold">1</button>
|
||||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">2</button>
|
||||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">3</button>
|
||||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-surface-container-lowest border-t border-outline-variant">
|
||||
<div class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-stack-lg">
|
||||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||||
<span class="font-headline-md text-headline-md font-bold text-primary">Fethiye Adventure Co.</span>
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">© 2024 Fethiye Adventure Co. All rights reserved.</span>
|
||||
</div>
|
||||
<div class="flex gap-stack-lg">
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Privacy Policy</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Terms of Service</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">FAQ</a>
|
||||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Blog</a>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-10 h-10 flex items-center justify-center bg-surface-container border border-outline-variant hover:border-primary transition-colors cursor-pointer">
|
||||
<span class="material-symbols-outlined text-[20px]">share</span>
|
||||
</div>
|
||||
<div class="w-10 h-10 flex items-center justify-center bg-surface-container border border-outline-variant hover:border-primary transition-colors cursor-pointer">
|
||||
<span class="material-symbols-outlined text-[20px]">language</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Micro-interaction Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const header = document.querySelector('header');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
header.classList.add('glass-effect');
|
||||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.height = '0px';
|
||||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.opacity = '0';
|
||||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.overflow = 'hidden';
|
||||
} else {
|
||||
header.classList.remove('glass-effect');
|
||||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.height = 'auto';
|
||||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.opacity = '1';
|
||||
}
|
||||
});
|
||||
|
||||
// Subtle parallax for card images
|
||||
const cards = document.querySelectorAll('.tour-card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const img = card.querySelector('.tour-image');
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width;
|
||||
const y = (e.clientY - rect.top) / rect.height;
|
||||
img.style.transformOrigin = `${x * 100}% ${y * 100}%`;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Fethiye Adventure Co. | Premium Mediterranean Experiences</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<!-- Tailwind Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-bright": "#393939",
|
||||
"surface": "#131313",
|
||||
"surface-container": "#201f1f",
|
||||
"on-tertiary-fixed": "#001d35",
|
||||
"inverse-on-surface": "#313030",
|
||||
"on-primary-fixed": "#351000",
|
||||
"on-primary-container": "#572000",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"inverse-primary": "#a04100",
|
||||
"on-surface-variant": "#e2bfb0",
|
||||
"outline": "#a98a7d",
|
||||
"on-error": "#690005",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-secondary-container": "#b6b5b4",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-tertiary-fixed-variant": "#00497b",
|
||||
"surface-container-highest": "#353534",
|
||||
"surface-variant": "#353534",
|
||||
"on-primary-fixed-variant": "#7a3000",
|
||||
"error": "#ffb4ab",
|
||||
"tertiary-fixed-dim": "#9ccaff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"primary-fixed-dim": "#ffb693",
|
||||
"tertiary-container": "#059eff",
|
||||
"on-tertiary-container": "#003357",
|
||||
"surface-dim": "#131313",
|
||||
"on-secondary-fixed-variant": "#474746",
|
||||
"outline-variant": "#5a4136",
|
||||
"secondary-container": "#474746",
|
||||
"secondary": "#c8c6c5",
|
||||
"on-surface": "#e5e2e1",
|
||||
"secondary-fixed-dim": "#c8c6c5",
|
||||
"primary-fixed": "#ffdbcc",
|
||||
"on-secondary": "#303030",
|
||||
"on-tertiary": "#003257",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#1b1c1c",
|
||||
"primary-container": "#ff6b00",
|
||||
"secondary-fixed": "#e4e2e1",
|
||||
"on-primary": "#561f00",
|
||||
"primary": "#ffb693",
|
||||
"surface-tint": "#ffb693",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"error-container": "#93000a",
|
||||
"background": "#131313",
|
||||
"tertiary": "#9ccaff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "8px",
|
||||
"section-gap": "120px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "20px",
|
||||
"margin-desktop": "64px",
|
||||
"container-max": "1280px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Montserrat"],
|
||||
"headline-md": ["Montserrat"],
|
||||
"body-lg": ["Inter"],
|
||||
"display-lg": ["Montserrat"],
|
||||
"headline-lg": ["Montserrat"],
|
||||
"body-md": ["Inter"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
.hero-overlay {
|
||||
background: linear-gradient(to bottom, rgba(19, 19, 19, 0.4) 0%, rgba(19, 19, 19, 1) 100%);
|
||||
}
|
||||
.card-hover-stroke:hover {
|
||||
border-color: #ff6b00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- TopNavBar (Shared Component) -->
|
||||
<header class="fixed top-0 w-full z-50 flex flex-col">
|
||||
<!-- Utility Layer -->
|
||||
<div class="bg-surface-container-lowest py-2 px-margin-desktop hidden md:flex justify-between items-center border-b border-outline-variant/30">
|
||||
<div class="flex gap-stack-lg">
|
||||
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span> Fethiye, TR
|
||||
</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">call</span> +90 555 123 4567
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-stack-md">
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">face_nod</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors cursor-pointer">photo_camera</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Layer -->
|
||||
<nav class="bg-surface/80 nav-blur border-b border-outline-variant flex items-center justify-between px-margin-desktop py-4 h-20">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary">
|
||||
Fethiye Adventure Co.
|
||||
</div>
|
||||
<div class="hidden md:flex gap-10 items-center">
|
||||
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-md text-body-md" href="#">Tours</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Private Charters</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">About Us</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary-container px-8 py-3 font-label-md text-label-md font-bold hover:brightness-110 transition-all uppercase tracking-widest">
|
||||
Book Now
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<!-- High-Impact Hero Section -->
|
||||
<section class="relative h-screen min-h-[800px] flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img alt="Fethiye Coastline" class="w-full h-full object-cover" data-alt="A cinematic, panoramic view of the Fethiye coastline at golden hour, featuring the deep turquoise waters of the Mediterranean meeting the rugged, pine-covered Taurus Mountains. The sky is painted with vibrant oranges and soft purples, reflecting the high-end adventure brand's primary color palette. The lighting is dramatic and moody, emphasizing the scale and natural beauty of the Turkish landscape in a high-contrast professional photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzA2FQS_7IAJUPS-RHppUDDF3eOmf1m_jhPEu3fN5Gz4nrBQXRgLk2d8TO__ciMHHqrvDnsojsKXXW7bHKQc1p-TA19BEGfAFq2tAz4ND9zj0mCXDqu-29amRRbSGOPA7aLvtqGQyNVCJZswTSVho8-iMRya1-jg4AeFom9V1fquqWni6-Azecmm_w3a3MKIKFACOBb9RRYfiutgPOvBt0x8T66nTsr-2q07TvOBaCDjZxeI32zr8DUPcEiUL-CzGDt5IwxiXt6Lc"/>
|
||||
<div class="absolute inset-0 hero-overlay"></div>
|
||||
</div>
|
||||
<div class="relative z-10 text-center px-margin-mobile md:px-0 max-w-4xl">
|
||||
<span class="inline-block px-4 py-1 border border-primary text-primary font-label-md text-label-md mb-stack-md uppercase tracking-[0.2em]">Adventure Awaits</span>
|
||||
<h1 class="font-display-lg text-[48px] md:text-display-lg leading-tight mb-stack-lg text-on-surface">
|
||||
ELEVATE YOUR <br/><span class="text-primary">FETHIYE</span> EXPERIENCE
|
||||
</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12 max-w-2xl mx-auto">
|
||||
Bespoke adventures tailored for the bold. From the heights of Babadağ to the crystal depths of the Blue Lagoon, discover the Mediterranean's hidden soul.
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row gap-gutter justify-center items-center">
|
||||
<button class="w-full md:w-auto bg-primary-container text-on-primary-container px-12 py-5 font-headline-md text-[18px] font-bold hover:scale-105 transition-transform">
|
||||
Explore Tours
|
||||
</button>
|
||||
<button class="w-full md:w-auto border-2 border-on-surface text-on-surface px-12 py-5 font-headline-md text-[18px] font-bold hover:bg-on-surface hover:text-background transition-all">
|
||||
View Private Charters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Trending Tours Section -->
|
||||
<section class="py-section-gap px-margin-desktop bg-surface">
|
||||
<div class="max-w-container-max mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-16 border-l-4 border-primary pl-8">
|
||||
<div>
|
||||
<h2 class="font-headline-lg text-headline-lg mb-4 text-on-surface">Trending Adventures</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-xl">
|
||||
The most sought-after experiences in Fethiye this season. Selected for their uniqueness and professional execution.
|
||||
</p>
|
||||
</div>
|
||||
<a class="hidden md:flex items-center gap-2 text-primary font-label-md text-label-md hover:underline mb-2" href="#">
|
||||
VIEW ALL TOURS <span class="material-symbols-outlined">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Bento-style Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 h-auto">
|
||||
<!-- Paragliding Card (Large) -->
|
||||
<div class="md:col-span-8 group relative overflow-hidden bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
||||
<div class="aspect-[16/9] md:aspect-auto h-full min-h-[450px] relative">
|
||||
<img alt="Oludeniz Paragliding" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A breathtaking aerial view of a paraglider soaring high above the iconic Blue Lagoon of Oludeniz, Fethiye. The turquoise and deep blue hues of the water contrast sharply with the lush greenery of the peninsula below. The lighting is bright and clear, capturing a high-adrenaline professional adventure moment. The overall style is clean and high-contrast, matching the luxury adventure agency's sophisticated aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnp3654chtUR_yf1Z3Q3_ExL7V5NwacVrMJB_JQFpoiYPtl2SN-XJtI5REOzdGnLPnd8J-msred1gAGawbovdKaK70yEblzQm7ruKfmHBHdsFK17IOwDKElDPFhi-MAbjY_aeen6N7PMGcGDbgP6bI_DlQkO7f0P7fSnizKXkAJF03KDTy-nnorV3d_R4maNg6J3ZzqjFjRK_DO0DPWooeyGy0bpZxqWWhc5ZSYhk61IL4C9LueB5Rlj63Pww3nxlV_3QVcGpsDtw"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface to-transparent opacity-80"></div>
|
||||
<div class="absolute bottom-0 left-0 p-stack-lg">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="bg-primary text-on-primary-fixed font-label-md text-[12px] px-3 py-1 font-bold">BEST SELLER</span>
|
||||
<span class="bg-surface-container-highest text-on-surface font-label-md text-[12px] px-3 py-1 font-bold border border-outline">SKY</span>
|
||||
</div>
|
||||
<h3 class="font-headline-lg text-headline-lg mb-2">Ölüdeniz Tandem Paragliding</h3>
|
||||
<p class="font-body-md text-on-surface-variant mb-6 max-w-lg">Flight from 1900m Babadağ Mountain with expert pilots and 360-degree views.</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-primary font-headline-md text-headline-md">€140</span>
|
||||
<button class="bg-on-surface text-background px-6 py-2 font-bold hover:bg-primary transition-colors">Book Experience</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Boat Trip Card -->
|
||||
<div class="md:col-span-4 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
||||
<div class="aspect-[4/5] relative overflow-hidden">
|
||||
<img alt="Boat Trip" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A luxury sailing yacht anchored in a secluded, emerald-green bay near Fethiye. The water is perfectly still, reflecting the white hull of the boat and the surrounding limestone cliffs. Soft sunlight dapples through the trees, creating a serene and exclusive Mediterranean atmosphere. The image is styled as a high-end travel magazine feature with deep blacks in the shadows and vibrant natural colors." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmugXPbgcCdvc5L5NRz404O60_hphtGnTo0lOmZuZDlx9vOBnLZ2NJK7NNwZ2ymoMQ-puDfE6N1YuUNsoFiuwkwWLlya64_JPpn_jzQMA94Yyu9wMlaOvvCbHPt2CvUBNr8_vvPlA1r_bwAiN9jhmSStz8WLgGSPo_PWpAksp5alyx6sQU7Y82k_Fnc_tNsy7gfQmX9qMedPQ3uHPImshF7ET3BksdHGwwbEyBXFx3JHXA8PFYzZO87iG4gl5Wz4_mKzDrUlm-cx4"/>
|
||||
<div class="absolute top-4 right-4">
|
||||
<span class="bg-surface/60 backdrop-blur-md text-on-surface font-label-md text-[12px] px-3 py-1 border border-outline">SEA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-stack-lg">
|
||||
<h3 class="font-headline-md text-headline-md mb-2">12 Islands Private Charter</h3>
|
||||
<p class="font-body-md text-on-surface-variant mb-4 line-clamp-2">Exclusive day cruise visiting hidden coves, sunken ruins, and crystal lagoons with gourmet lunch.</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-primary font-headline-md text-headline-md">From €450</span>
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Saklikent Gorge Card -->
|
||||
<div class="md:col-span-4 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer">
|
||||
<div class="aspect-[4/5] relative overflow-hidden">
|
||||
<img alt="Saklikent Gorge" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Adventurers walking through the towering, narrow walls of Saklikent Gorge, with icy mountain water flowing around their feet. The limestone cliffs rise dramatically toward a sliver of blue sky, with high-contrast shadows emphasizing the depth and texture of the stone. The lighting is natural but intense, highlighting the raw power of the Mediterranean's geological wonders in a crisp, professional adventure photography style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSMn6DFJWfc_NIjDkKwbx2mPfSiyZLBCPQ89bvFd3ba7KRfv1nK8k6BCqnszpr5uHKlqyBOfdN5eWstiUx7m1AwZVYExh8P3a0n2OwofY4wechXRvbF9yMvhCRfAb-idRLSy4pM2tF69FmaMhXhi-KoXT5cgQ1cC7ydfjD_EXSLwH18jbwUmmLYbLdaSEy081El5anM6vOyOSKQEqfsYAmBnQ7OG5HNZWJCBT-fGf5TrEXxyr9zaU9Kfhj6OXCiWrz0vpeVfjlKck"/>
|
||||
<div class="absolute top-4 right-4">
|
||||
<span class="bg-surface/60 backdrop-blur-md text-on-surface font-label-md text-[12px] px-3 py-1 border border-outline">LAND</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-stack-lg">
|
||||
<h3 class="font-headline-md text-headline-md mb-2">Saklikent Canyon Trek</h3>
|
||||
<p class="font-body-md text-on-surface-variant mb-4 line-clamp-2">Guided hiking through one of the deepest canyons in the world, followed by Tlos ancient city.</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-primary font-headline-md text-headline-md">€65</span>
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Jeep Safari Card (Wide/Medium) -->
|
||||
<div class="md:col-span-8 group bg-surface-container-high border border-outline-variant card-hover-stroke transition-all cursor-pointer relative overflow-hidden">
|
||||
<div class="flex flex-col md:flex-row h-full">
|
||||
<div class="w-full md:w-1/2 overflow-hidden h-[300px] md:h-auto">
|
||||
<img alt="Jeep Safari" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A convoy of rugged 4x4 off-road vehicles kicking up dust as they traverse a winding mountain path in the Turkish countryside. The background features expansive views of the Fethiye valley and distant peaks. The sunlight is bright and warm, creating a sense of action and exploration. The visual style is bold and high-contrast, emphasizing the adventurous nature of the brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCW2aJ-YOHdKd1WVbxAEmB0K9C0bWIfHjlvk8laK3YzIctHHtgG7INT5ZGNh4V0ep9IgOuDqF5SjVE3mN9SUJf6OBsmA_T_s257iRJ_lsxcZxCaRP4XZN9XjGpOA_uaVJR-gZxqZsn21T983oW_VMadgAbTy7i9KunFJaLEjusrSSbNbmqgar_0miRk0TzgIP35wR3l0D-p2kNUBFSh84_dzSpt01P2z8OUfvi8ckAXsbgv9bv1HCjp07JJUEfcj83cpyWdp3e3exs"/>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 p-stack-lg flex flex-col justify-center">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="bg-surface-container-highest text-on-surface font-label-md text-[12px] px-3 py-1 font-bold border border-outline">OFF-ROAD</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md mb-4">Off-Road Jeep Safari</h3>
|
||||
<p class="font-body-md text-on-surface-variant mb-6">Explore the rugged Taurus Mountains, remote villages, and secret waterfalls in our custom 4x4s.</p>
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="text-primary font-headline-md text-headline-md">€85</span>
|
||||
<button class="bg-surface border border-outline text-on-surface px-6 py-2 font-bold hover:border-primary hover:text-primary transition-all">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats / Proof Section -->
|
||||
<section class="py-24 bg-surface-container-lowest border-y border-outline-variant">
|
||||
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-2 md:grid-cols-4 gap-gutter text-center">
|
||||
<div class="space-y-2">
|
||||
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">15+</div>
|
||||
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Years Experience</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">50k+</div>
|
||||
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Happy Guests</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">100%</div>
|
||||
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Safety Record</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-primary font-display-lg text-[40px] md:text-headline-lg">4.9/5</div>
|
||||
<div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">TripAdvisor</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="relative py-section-gap overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img alt="Beach Background" class="w-full h-full object-cover grayscale opacity-20" data-alt="A serene, minimalist view of a secluded white-sand beach with crystal clear turquoise water washing over smooth pebbles. The image is rendered with high contrast and a cool, sophisticated color palette, creating a luxurious and tranquil atmosphere. The composition is clean and symmetrical, reflecting the premium quality of the Fethiye Adventure Co. brand." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnJSQiCX2tONJGX7bmNkG8X0m9DP3OruDPUcqU_rfY6sLS7xiTRKpsQQUIIzMaTX5w6smkZiMhWk4yWfbtqZQL7QJQ9-FVWa1MqqYdgLe3dOT4IbHjnK72kMOxcrz1Wop5iUJ4LZuhsI4Uo78SBLZJzUf6y8zDNd_LpTkH8vdP64LbnKBum78i1Z29k51Ne6QDOzCvqj4MqiJV9rIbh1-GjDcITl6KaH5wkVb35EE2qTIz-zWHuPsP2PAiYrjvyxGnqvjqgF6pQSQ"/>
|
||||
</div>
|
||||
<div class="relative z-10 text-center max-w-3xl mx-auto px-margin-mobile">
|
||||
<h2 class="font-headline-lg text-headline-lg mb-8">Ready for your next adventure?</h2>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-12">
|
||||
Our team of adventure specialists is ready to craft the perfect itinerary for your stay in Fethiye. From group excursions to private VIP experiences.
|
||||
</p>
|
||||
<div class="p-8 bg-surface-container border border-outline-variant">
|
||||
<form class="flex flex-col md:flex-row gap-4">
|
||||
<input class="flex-grow bg-background border border-outline-variant p-4 text-on-surface focus:border-primary focus:ring-0" placeholder="Your Email Address" type="email"/>
|
||||
<button class="bg-primary-container text-on-primary-container px-10 py-4 font-bold uppercase tracking-widest hover:brightness-110">Get In Touch</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer (Shared Component) -->
|
||||
<footer class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center border-t border-outline-variant gap-8 bg-surface-container-lowest">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary">Fethiye Adventure Co.</div>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md">© 2024 Fethiye Adventure Co. All rights reserved.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-stack-lg">
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Privacy Policy</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Terms of Service</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">FAQ</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors font-body-md text-body-md" href="#">Blog</a>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant hover:text-primary cursor-pointer">language</span>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">EN / TRY</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// Micro-interaction for Sticky Header
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
const utilityLayer = header.querySelector('.bg-surface-container-lowest');
|
||||
if (window.scrollY > 50) {
|
||||
utilityLayer.style.marginTop = `-${utilityLayer.offsetHeight}px`;
|
||||
utilityLayer.style.transition = 'margin-top 0.3s ease-in-out';
|
||||
} else {
|
||||
utilityLayer.style.marginTop = '0';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,375 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(42, 42, 42, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.tour-gradient {
|
||||
background: linear-gradient(to bottom, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 1) 100%);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"surface-bright": "#393939",
|
||||
"surface": "#131313",
|
||||
"surface-container": "#201f1f",
|
||||
"on-tertiary-fixed": "#001d35",
|
||||
"inverse-on-surface": "#313030",
|
||||
"on-primary-fixed": "#351000",
|
||||
"on-primary-container": "#572000",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"inverse-primary": "#a04100",
|
||||
"on-surface-variant": "#e2bfb0",
|
||||
"outline": "#a98a7d",
|
||||
"on-error": "#690005",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-secondary-container": "#b6b5b4",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-tertiary-fixed-variant": "#00497b",
|
||||
"surface-container-highest": "#353534",
|
||||
"surface-variant": "#353534",
|
||||
"on-primary-fixed-variant": "#7a3000",
|
||||
"error": "#ffb4ab",
|
||||
"tertiary-fixed-dim": "#9ccaff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"primary-fixed-dim": "#ffb693",
|
||||
"tertiary-container": "#059eff",
|
||||
"on-tertiary-container": "#003357",
|
||||
"surface-dim": "#131313",
|
||||
"on-secondary-fixed-variant": "#474746",
|
||||
"outline-variant": "#5a4136",
|
||||
"secondary-container": "#474746",
|
||||
"secondary": "#c8c6c5",
|
||||
"on-surface": "#e5e2e1",
|
||||
"secondary-fixed-dim": "#c8c6c5",
|
||||
"primary-fixed": "#ffdbcc",
|
||||
"on-secondary": "#303030",
|
||||
"on-tertiary": "#003257",
|
||||
"on-error-container": "#ffdad6",
|
||||
"on-secondary-fixed": "#1b1c1c",
|
||||
"primary-container": "#ff6b00",
|
||||
"secondary-fixed": "#e4e2e1",
|
||||
"on-primary": "#561f00",
|
||||
"primary": "#ffb693",
|
||||
"surface-tint": "#ffb693",
|
||||
"tertiary-fixed": "#d0e4ff",
|
||||
"error-container": "#93000a",
|
||||
"background": "#131313",
|
||||
"tertiary": "#9ccaff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"stack-sm": "8px",
|
||||
"section-gap": "120px",
|
||||
"gutter": "24px",
|
||||
"margin-mobile": "20px",
|
||||
"margin-desktop": "64px",
|
||||
"container-max": "1280px",
|
||||
"stack-md": "16px",
|
||||
"stack-lg": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-lg-mobile": ["Montserrat"],
|
||||
"headline-md": ["Montserrat"],
|
||||
"body-lg": ["Inter"],
|
||||
"display-lg": ["Montserrat"],
|
||||
"headline-lg": ["Montserrat"],
|
||||
"body-md": ["Inter"],
|
||||
"label-md": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface selection:bg-primary-container selection:text-white">
|
||||
<!-- Header Navigation Shell -->
|
||||
<header class="fixed top-0 w-full z-50 flex flex-col bg-surface/80 backdrop-blur-md border-b border-outline-variant">
|
||||
<!-- Top Tier Utility -->
|
||||
<div class="hidden md:flex justify-between items-center px-margin-desktop py-2 border-b border-outline-variant text-[12px] uppercase tracking-widest text-on-surface-variant font-semibold">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px]">location_on</span> Fethiye, TR</span>
|
||||
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px]">call</span> +90 555 123 4567</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="hover:text-primary-container transition-colors" href="#">Weather: 28°C</a>
|
||||
<a class="hover:text-primary-container transition-colors" href="#">English / TRY</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Nav -->
|
||||
<nav class="flex justify-between items-center px-margin-mobile md:px-margin-desktop py-4">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">
|
||||
Fethiye Adventure Co.
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-md text-body-md" href="#">Tours</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Private Charters</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">About Us</a>
|
||||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-white px-8 py-3 font-bold uppercase tracking-widest text-label-md hover:brightness-110 transition-all">
|
||||
Book Now
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="pt-0">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[870px] w-full overflow-hidden">
|
||||
<img alt="Luxury Gulet in Fethiye" class="w-full h-full object-cover" data-alt="A majestic, traditional wooden luxury gulet sailing gracefully through the crystalline, electric turquoise waters of the Mediterranean near Fethiye. The vessel features polished dark wood decks and tall masts against a backdrop of rugged limestone cliffs and lush pine forests. The lighting is golden-hour warm, creating a high-contrast, premium atmosphere with deep shadows and sparkling highlights on the water's surface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCIoqx9C0y8xDwsfcGlG5z7obZosYwn9k1cdZDw7r7z7PBZ2ry4qLgjqzsCR7R2EsCluqABrFyp7KVYrEi-VQq575VT22SV4y2vgGD5viLFqRy34dj0N82VA4hHIAFFHkAPOFnGU25OI9EjJ_k8UWFWEl_68Rj0APk40uNSnfwQ57UR2jUXGK_lFnAs9aXvhaa1SKXc-WLh9L8asnOjQcKhxGNwY6ExOJ1bSIkixD_MIHr_On9NFCbPPGqWeB3iVjpHFrhqtHf_TlI"/>
|
||||
<div class="absolute inset-0 tour-gradient flex flex-col justify-end px-margin-mobile md:px-margin-desktop pb-section-gap">
|
||||
<div class="max-w-4xl space-y-stack-md">
|
||||
<div class="flex gap-stack-sm">
|
||||
<span class="px-3 py-1 border border-primary-container text-primary-container text-[12px] font-bold uppercase tracking-tighter">Bestseller</span>
|
||||
<span class="px-3 py-1 border border-outline text-on-surface-variant text-[12px] font-bold uppercase tracking-tighter">Full Day Trip</span>
|
||||
</div>
|
||||
<h1 class="font-display-lg text-display-lg leading-tight md:text-[84px]">Twelve Islands<br/>Luxury Boat Trip</h1>
|
||||
<p class="font-body-lg text-body-lg max-w-2xl text-on-surface-variant">Experience the ultimate Mediterranean escape through Fethiye's most pristine bays. Crystal clear waters, gourmet seafood, and untamed beauty.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content Grid -->
|
||||
<section class="px-margin-mobile md:px-margin-desktop py-stack-lg max-w-container-max mx-auto relative">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
|
||||
<!-- Main Content Column -->
|
||||
<div class="lg:col-span-8 space-y-section-gap">
|
||||
<!-- Overview -->
|
||||
<div class="space-y-stack-lg">
|
||||
<h2 class="font-headline-lg text-headline-lg border-l-4 border-primary-container pl-stack-md">The Experience</h2>
|
||||
<div class="font-body-md text-body-md text-on-surface-variant space-y-stack-md">
|
||||
<p>Embark on a journey through the famous Twelve Islands of Fethiye. This isn't just a boat trip; it's a curated odyssey designed for those who seek tranquility and luxury in equal measure. Our custom-built gulet offers expansive sun-decks and shaded lounges, providing the perfect platform to witness the sheer beauty of the Turkish Riviera.</p>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter pt-stack-lg">
|
||||
<div class="bg-surface-container p-stack-md border border-outline-variant text-center">
|
||||
<span class="material-symbols-outlined text-primary-container text-[32px] block mb-2">schedule</span>
|
||||
<p class="text-[12px] font-bold uppercase text-on-surface">Duration</p>
|
||||
<p class="text-label-md">8 Hours</p>
|
||||
</div>
|
||||
<div class="bg-surface-container p-stack-md border border-outline-variant text-center">
|
||||
<span class="material-symbols-outlined text-primary-container text-[32px] block mb-2">group</span>
|
||||
<p class="text-[12px] font-bold uppercase text-on-surface">Capacity</p>
|
||||
<p class="text-label-md">Max 12 Guests</p>
|
||||
</div>
|
||||
<div class="bg-surface-container p-stack-md border border-outline-variant text-center">
|
||||
<span class="material-symbols-outlined text-primary-container text-[32px] block mb-2">restaurant</span>
|
||||
<p class="text-[12px] font-bold uppercase text-on-surface">Meals</p>
|
||||
<p class="text-label-md">Chef Prepared</p>
|
||||
</div>
|
||||
<div class="bg-surface-container p-stack-md border border-outline-variant text-center">
|
||||
<span class="material-symbols-outlined text-primary-container text-[32px] block mb-2">anchor</span>
|
||||
<p class="text-[12px] font-bold uppercase text-on-surface">Stops</p>
|
||||
<p class="text-label-md">5 Pristine Bays</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Itinerary -->
|
||||
<div class="space-y-stack-lg">
|
||||
<h2 class="font-headline-lg text-headline-lg border-l-4 border-primary-container pl-stack-md">Daily Schedule</h2>
|
||||
<div class="space-y-stack-md">
|
||||
<div class="flex gap-stack-lg group">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-primary-container flex items-center justify-center font-bold text-primary-container">01</div>
|
||||
<div class="w-[2px] h-full bg-outline-variant group-last:hidden mt-2"></div>
|
||||
</div>
|
||||
<div class="pb-10">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">Departure from Fethiye Harbor</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Board the luxury gulet and meet your crew with a refreshing welcome cocktail.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-stack-lg group">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-primary-container flex items-center justify-center font-bold text-primary-container">02</div>
|
||||
<div class="w-[2px] h-full bg-outline-variant group-last:hidden mt-2"></div>
|
||||
</div>
|
||||
<div class="pb-10">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">Yassica Islands Exploration</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">The first anchor is dropped. Perfect for snorkeling in the shallow, warm lagoons of Yassica.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-stack-lg group">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-primary-container flex items-center justify-center font-bold text-primary-container">03</div>
|
||||
<div class="w-[2px] h-full bg-outline-variant group-last:hidden mt-2"></div>
|
||||
</div>
|
||||
<div class="pb-10">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">Mediterranean Seafood Lunch</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant">Enjoy a freshly prepared lunch featuring grilled sea bass, mezes, and organic salads.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Image Gallery Bento -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[200px]">
|
||||
<div class="col-span-2 row-span-2 overflow-hidden border border-outline-variant group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A macro shot of vibrant turquoise water rippling against the dark wooden hull of a luxury boat in Fethiye. The lighting is direct and bright, highlighting the incredible clarity of the Mediterranean sea. The scene captures the peaceful essence of a high-end maritime adventure." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLCpRZ_FG35YjVOCG6XS_HpEGrTxPl5l_a_SPwkVv2taEoyDr7bwB4D-_fwAujM1LdjSn9PDGZdM4qo0a8_ImqBo_lrAgSN4Cdp9fTa_dZ6GSQPJqTDURs7z_ZFejID7BCBs-5Bosdsikpr78LOxuJPg5o7xM9CiezrqYMDvK537WupTMP5fF_e9_ZmCr3ymFewt0CDFzSAv3wp3Ys6geKeBGyK8khBmZavD2m3cvPo-6E83WBdqF4UpOYzom7f32uU0CS62T-QeA"/>
|
||||
</div>
|
||||
<div class="col-span-2 overflow-hidden border border-outline-variant group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="An elegantly set table on the deck of a luxury wooden boat, featuring Mediterranean mezes and fresh seafood. The background shows the blurred coastline of Fethiye with pine-covered hills meeting the deep blue sea. The atmosphere is sophisticated and inviting, typical of a premium tour experience." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCevsqhY2X0m7jihHj-bwSQ5oVrP2p_XqtGhkc1Dp0-sU5wQTBavIIe3D-fQ9ad7desyWX8Mmr6fE8CMzBWE1L4VJM11Y-z0DS9rOBQhgXe08DS2C9qTiCGPRoXk7QVhfUu4oZrHt_LePfq6kq4mr2CAlFOesT2Iz5V-2R3x1P3HrhhD0NjCZL_N7KHeUPpO1o47wGOEedYrBkm3Tw6fXySgNHu1Z-miutMfmv8PZOJjzy7WgdmzTrXJ28uPDTqj0R8epwyloqmd_M"/>
|
||||
</div>
|
||||
<div class="overflow-hidden border border-outline-variant group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A wide perspective shot of a secluded beach in a rocky cove near Fethiye. The sand is white and coarse, meeting intensely blue water. The mood is tranquil and exclusive, evoking the feeling of a private escape during a boat trip." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxJ1MAEJmE1BX1AWwM-u4twxg2cyZjYooqg9T9jVii2U611TJxi-QIrdKIfhjZQBfFaJIP-1a-GFN_lqYdOPLjjjTx_Eh3KxobRahGsjYskqI1GPRr4qrSDZTvUxlV2s0sLnDGfXEm8zeQIVtoT65aJ2HWvdBLxB6_OHbHDJIoSg_gYIkqRf0wFNKeXbkwyb-fYN2ent2jg_un8TmCZ6pJJ-itfT5osEMpUoXIMzLZ_2Y7tR3xEIF175fV-PmBA9qJU8uWA_aM6aU"/>
|
||||
</div>
|
||||
<div class="overflow-hidden border border-outline-variant group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A luxury yacht's deck at sunset, with golden orange light reflecting off the water. The masts and rigging are silhouetted against a dramatic sky. The scene is high-end and romantic, perfectly aligned with a professional travel brand aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEjUXvlWqd_b3o4_qgoSSXzzWPk2Zt5l-mf82WRSngK9npUHabnejC1diSWS8TqRg53X5LkIVCt_vfCOF0aC_N0_V5Raj5w7cI5wUrn53M2UACcWpE9JxUU6pQYjEQW_IORg8KZ9shPfexepGcijQvBzOjDucdZAZLqwkYYHkdp3qBV4RFLrGKpTWNNFeafsWJtw1x5FK7rHJpl00mIuHPAfyIRBzDocSm2NluD_xjhRcelVGflq9FXKoOanhY-hUVv6IL-UzgvRI"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar Sticky Widget -->
|
||||
<div class="lg:col-span-4">
|
||||
<div class="sticky top-32 glass-card p-stack-lg space-y-stack-lg border-2 border-primary-container/30">
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-on-surface-variant text-[12px] uppercase font-bold tracking-widest">From</p>
|
||||
<p class="text-display-lg text-[48px] font-bold text-primary-container leading-none">€85</p>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-bold text-body-md mb-2">per person</p>
|
||||
</div>
|
||||
<div class="space-y-stack-md">
|
||||
<div class="space-y-1">
|
||||
<label class="text-[11px] uppercase tracking-widest font-bold text-on-surface">Select Date</label>
|
||||
<div class="bg-surface-container-highest p-3 border border-outline-variant flex justify-between items-center">
|
||||
<span class="text-label-md">June 24, 2024</span>
|
||||
<span class="material-symbols-outlined text-primary">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-[11px] uppercase tracking-widest font-bold text-on-surface">Guests</label>
|
||||
<div class="bg-surface-container-highest p-3 border border-outline-variant flex justify-between items-center">
|
||||
<span class="text-label-md">2 Adults</span>
|
||||
<span class="material-symbols-outlined text-primary">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full bg-primary-container text-white py-6 font-bold uppercase tracking-[0.2em] text-headline-md hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-primary-container/20">
|
||||
Book Now
|
||||
</button>
|
||||
<div class="space-y-stack-md pt-stack-md border-t border-outline-variant">
|
||||
<p class="text-[12px] font-bold flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-primary">check_circle</span> Instant Confirmation</p>
|
||||
<p class="text-[12px] font-bold flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-primary">verified_user</span> 100% Refundable up to 24h</p>
|
||||
<p class="text-[12px] font-bold flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-primary">local_activity</span> Mobile Ticket Accepted</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Related Tours Section -->
|
||||
<section class="bg-surface-container-low py-section-gap px-margin-mobile md:px-margin-desktop">
|
||||
<div class="max-w-container-max mx-auto space-y-stack-lg">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="font-headline-lg text-headline-lg border-l-4 border-primary-container pl-stack-md uppercase tracking-tight">You Might Also Like</h2>
|
||||
<a class="text-primary font-bold uppercase tracking-widest text-label-md border-b-2 border-primary" href="#">View All Tours</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<!-- Related Card 1 -->
|
||||
<div class="bg-surface-container border border-outline-variant overflow-hidden group">
|
||||
<div class="h-64 relative overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A wide view of Oludeniz's Blue Lagoon from above, showing the white sand spit and vibrant azure water. The scene is shot in high-definition with high-key lighting, emphasizing the Mediterranean beauty and luxury travel appeal." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJQXFPaH2lSqBo9cIcpu1Oq-lm25ji5RhziuVo99rcl2baIxQaIVWg4hn_hsue2hcvveQpH5hYEtxModAIQ9-hXbWW2BmdHQbQv1RR4KldHx9rUUj9LOcwyJoPAr3TVaHzvWJ0IRexqxiUwXH1cPp7CPkVg9zmf3ZN3had5CLO5SORwSNDhZH4LkOXtRZZyctJBKbfLLHhDOARGSWYweeG98PtPaa2o0NLN2xMQbh2WvlttMuZHPpnYHMaudJ-5bTaJFakWcdKoMY"/>
|
||||
<div class="absolute top-4 right-4 bg-primary-container px-3 py-1 text-white font-bold text-[12px]">€120</div>
|
||||
</div>
|
||||
<div class="p-stack-lg space-y-stack-md">
|
||||
<h3 class="font-headline-md text-headline-md uppercase tracking-tighter">Private Sunset Cruise</h3>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md line-clamp-2">The ultimate romantic escape. Tailored menu, premium champagne, and the famous Fethiye sunset.</p>
|
||||
<div class="flex items-center justify-between pt-stack-sm border-t border-outline-variant">
|
||||
<span class="text-[12px] uppercase font-bold text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 4 Hours</span>
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Related Card 2 -->
|
||||
<div class="bg-surface-container border border-outline-variant overflow-hidden group">
|
||||
<div class="h-64 relative overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="A crystal clear cave entrance on the Fethiye coast, with sunlight piercing through the water, illuminating the sea floor. The atmosphere is mysterious and adventurous, presented in a clean, professional aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYUcTsYOdMdazfiuWOaUMwNIjQ3LIzhHyBpyh3z5iGlUK-bWwoiL3ABeo2ICtFh5ZvcWN_WU-4u0pTfj2IfgvIB-nUjdRxbmPPTty5BH0aoMmPY8TB4WaAwSbpHalbX8AxZM8Mb1Mee9jTBi_VPi5wmE1VW_WGl-tBqFE7YUjPwE8VPnvk5JmzdDJIRWUc7Pm61ReGhyjvFWBlsY6F3T7x4bQ-Zf6s795ZCss_ROEhvn0cMqUynwf4QNngRIQO9F01N9Y74Imqsz4"/>
|
||||
<div class="absolute top-4 right-4 bg-primary-container px-3 py-1 text-white font-bold text-[12px]">€65</div>
|
||||
</div>
|
||||
<div class="p-stack-lg space-y-stack-md">
|
||||
<h3 class="font-headline-md text-headline-md uppercase tracking-tighter">Blue Cave Adventure</h3>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md line-clamp-2">Explore the hidden sea caves and grottos accessible only by boat. Perfect for families.</p>
|
||||
<div class="flex items-center justify-between pt-stack-sm border-t border-outline-variant">
|
||||
<span class="text-[12px] uppercase font-bold text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 6 Hours</span>
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Related Card 3 -->
|
||||
<div class="bg-surface-container border border-outline-variant overflow-hidden group">
|
||||
<div class="h-64 relative overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="An ancient ruins site overlooking the sea in Turkey. The weathered stones are illuminated by warm morning light, with the Mediterranean expanding into the distance. High-contrast and dramatic composition." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKWBLdTB_ezGtZbhJ1MkvXK-IvBlUpZNAiUXPGsJHZuxWmQ4KGhT69-h01s3_9l1nWbNCJ3v9QyjMVYFYQ5tBLvm2rBNxSCBNixRg2aY3ZdCjdonEY_pjD3UHWpB18NSo8_V7NpzJwVfeqjdOZCEhIQMp73M-5N3J2_dnbWD5VEng6fO7ALAB0UhsVl0YCdGenlrQNJqtXaebO1URuTcFw6wJkqnamvGvXJ7ecLr-csHJ_Zt2B9dBkbA49nXQzAJK5Rtf4-AxLjWE"/>
|
||||
<div class="absolute top-4 right-4 bg-primary-container px-3 py-1 text-white font-bold text-[12px]">€95</div>
|
||||
</div>
|
||||
<div class="p-stack-lg space-y-stack-md">
|
||||
<h3 class="font-headline-md text-headline-md uppercase tracking-tighter">Ancient Lycian Cruise</h3>
|
||||
<p class="text-on-surface-variant font-body-md text-body-md line-clamp-2">History meets the sea. Visit sunken ruins and ancient sarcophagi while cruising the Turquoise coast.</p>
|
||||
<div class="flex items-center justify-between pt-stack-sm border-t border-outline-variant">
|
||||
<span class="text-[12px] uppercase font-bold text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 8 Hours</span>
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer Shell -->
|
||||
<footer class="w-full bg-surface-container-lowest border-t border-outline-variant">
|
||||
<div class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-stack-lg">
|
||||
<div class="font-headline-md text-headline-md font-bold text-primary">Fethiye Adventure Co.</div>
|
||||
<div class="flex flex-wrap justify-center gap-8 font-body-md text-body-md">
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Privacy Policy</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Terms of Service</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">FAQ</a>
|
||||
<a class="text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Blog</a>
|
||||
</div>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant text-center md:text-right">© 2024 Fethiye Adventure Co. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Interactive Scripts -->
|
||||
<script>
|
||||
// Simple scroll observer for header transparency
|
||||
window.addEventListener('scroll', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (window.scrollY > 50) {
|
||||
header.classList.add('shadow-xl');
|
||||
} else {
|
||||
header.classList.remove('shadow-xl');
|
||||
}
|
||||
});
|
||||
|
||||
// Floating Action Button logic for mobile
|
||||
// In a real app, we might add a small floating button only on mobile for "Book"
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,7 @@
|
||||
İçerik analizi alınamadı.
|
||||
|
||||
---
|
||||
|
||||
## Görsel Analiz (Gemini Vision)
|
||||
|
||||
Generate a modern UI for a travel and tour booking platform, utilizing a dark theme with vibrant orange accents and crisp white typography. The layout should be clean, grid-based, and visually rich, emphasizing breathtaking hero imagery and high-quality activity visuals, coupled with prominent, action-oriented calls-to-action to convey an energetic and trustworthy brand experience.
|
||||
@@ -0,0 +1,493 @@
|
||||
# Site Verisi — http://www.fethiyeholiday.com/
|
||||
|
||||
Tarama Tarihi: 2026-06-10
|
||||
|
||||
---
|
||||
|
||||
[  ](https://www.fethiyeholiday.com/)
|
||||
[ ](https://www.fethiyeholiday.com/)
|
||||
* [Excursions](https://www.fethiyeholiday.com/en/excursions/)
|
||||
* [Fethiye Market and Ghost Town](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
* [Kaş-Kalkan-Kaputaş Beach](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
* [Dalyan - Mud Bath - Turtle Beach](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
* [Saklıkent - Tlos - Yakapark](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
* [Pamukkale - Hierapolis (Cotton Castle)](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
* [Ephesus - Pamukkale ( 2 Days 1 Night)](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
* [Rhodes](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
* [Activities](https://www.fethiyeholiday.com/en/activities/)
|
||||
* [Jeep Safari](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
* [Horse Riding](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
* [Turkish Bath ( Hamam )](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
* [Camel Trekking](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
* [Fishing](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
* [Canoeing](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
* [Boat Tours](https://www.fethiyeholiday.com/en/boat-tours/)
|
||||
* [12 Islands with Sailing Boat](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
* [Ölüdeniz Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
* [Blue Bays Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
* [All Inclusive Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/All-Inclusive-Boat-Trip)
|
||||
* [Sunset Trip](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
* [Speed Boat Hire](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
* [Private Boat Hire](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
* [Private Tours](https://www.fethiyeholiday.com/en/Private-Tours/)
|
||||
* [Fethiye Village Discovery](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
* [Private Tours](https://www.fethiyeholiday.com/en/Private-Tours/Private-Tours-Tailor-Made-Tours)
|
||||
* [Letoon - Xanthos - Patara](https://www.fethiyeholiday.com/en/Private-Tours/Letoon-Xanthos-Patara)
|
||||
* [City Tour](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
* [Adventure](https://www.fethiyeholiday.com/en/adventure/)
|
||||
* [Paragliding](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
* [Quad Bike Safari](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
* [Scuba Diving](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
* [White Water Rafting](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
* [Buggy Safari](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
* [Transfer](https://www.fethiyeholiday.com/en/Transfer)
|
||||
|
||||
|
||||
[Cart ](https://www.fethiyeholiday.com/en/Booking)
|
||||
|
||||
* * *
|
||||
[**Türkçe**](https://www.fethiyeholiday.com/en/)
|
||||
[**Home**](https://www.fethiyeholiday.com/en/)
|
||||
[**About Us**](https://www.fethiyeholiday.com/en/Aboutus/)
|
||||
[**Holiday Blog**](https://www.fethiyeholiday.com/en/Trip/)
|
||||
[**Contact**](https://www.fethiyeholiday.com/en/Contact/) info@fethiyeholiday.com
|
||||
+90 530 378 48 82
|
||||
[](https://www.fethiyeholiday.com/en/Login) [](https://www.tripadvisor.co.uk/Attraction_Review-g312737-d3506228-Reviews-Pioneer_Travel-Oludeniz_Mugla_Province_Turkish_Aegean_Coast.html) [](https://www.facebook.com/Pioneertraveloludeniz) [](https://www.instagram.com/pioneertravelfethiye/)
|
||||
[Cart ](https://www.fethiyeholiday.com/en/Booking)
|
||||
USD
|
||||
[ **Türkçe**](https://www.fethiyeholiday.com/tr/) | **+90 530 378 48 82** | **info@fethiyeholiday.com**
|
||||
[**Home**](https://www.fethiyeholiday.com/en/) | [**About Us**](https://www.fethiyeholiday.com/en/Aboutus/) | [**Holiday Blog**](https://www.fethiyeholiday.com/en/Trip/) | [**Contact**](https://www.fethiyeholiday.com/en/Contact/) | [TURSAB Licence No: 6105](https://www.tursab.org.tr/tr/ddsv)
|
||||
[Cart ](https://www.fethiyeholiday.com/en/Booking)
|
||||
[](https://www.fethiyeholiday.com/en/Login) [](https://www.tripadvisor.co.uk/Attraction_Review-g312737-d3506228-Reviews-Pioneer_Travel-Oludeniz_Mugla_Province_Turkish_Aegean_Coast.html) [](https://www.facebook.com/Pioneertraveloludeniz) [](https://www.instagram.com/pioneertravelfethiye/)
|
||||
[  ](https://www.fethiyeholiday.com/)
|
||||
[ ](https://www.fethiyeholiday.com/)
|
||||
* [Excursions](https://www.fethiyeholiday.com/en/excursions/)
|
||||
* [Fethiye Market and Ghost Town](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
* [Kaş-Kalkan-Kaputaş Beach](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
* [Dalyan - Mud Bath - Turtle Beach](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
* [Saklıkent - Tlos - Yakapark](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
* [Pamukkale - Hierapolis (Cotton Castle)](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
* [Ephesus - Pamukkale ( 2 Days 1 Night)](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
* [Rhodes](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
* [Activities](https://www.fethiyeholiday.com/en/activities/)
|
||||
* [Jeep Safari](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
* [Horse Riding](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
* [Turkish Bath ( Hamam )](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
* [Camel Trekking](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
* [Fishing](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
* [Canoeing](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
* [Boat Tours](https://www.fethiyeholiday.com/en/boat-tours/)
|
||||
* [12 Islands with Sailing Boat](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
* [Ölüdeniz Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
* [Blue Bays Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
* [All Inclusive Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/All-Inclusive-Boat-Trip)
|
||||
* [Sunset Trip](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
* [Speed Boat Hire](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
* [Private Boat Hire](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
* [Private Tours](https://www.fethiyeholiday.com/en/Private-Tours/)
|
||||
* [Fethiye Village Discovery](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
* [Private Tours](https://www.fethiyeholiday.com/en/Private-Tours/Private-Tours-Tailor-Made-Tours)
|
||||
* [Letoon - Xanthos - Patara](https://www.fethiyeholiday.com/en/Private-Tours/Letoon-Xanthos-Patara)
|
||||
* [City Tour](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
* [Adventure](https://www.fethiyeholiday.com/en/adventure/)
|
||||
* [Paragliding](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
* [Quad Bike Safari](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
* [Scuba Diving](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
* [White Water Rafting](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
* [Buggy Safari](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
* [Transfer](https://www.fethiyeholiday.com/en/Transfer)
|
||||
|
||||
|
||||
[Cart ](https://www.fethiyeholiday.com/en/Booking)
|
||||
|
||||
* * *
|
||||
[**Türkçe**](https://www.fethiyeholiday.com/en/)
|
||||
[**Home**](https://www.fethiyeholiday.com/en/)
|
||||
[**About Us**](https://www.fethiyeholiday.com/en/Aboutus/)
|
||||
[**Holiday Blog**](https://www.fethiyeholiday.com/en/Trip/)
|
||||
[**Contact**](https://www.fethiyeholiday.com/en/Contact/) info@fethiyeholiday.com
|
||||
+90 530 378 48 82
|
||||
[](https://www.fethiyeholiday.com/en/Login) [](https://www.tripadvisor.co.uk/Attraction_Review-g312737-d3506228-Reviews-Pioneer_Travel-Oludeniz_Mugla_Province_Turkish_Aegean_Coast.html) [](https://www.facebook.com/Pioneertraveloludeniz) [](https://www.instagram.com/pioneertravelfethiye/)
|
||||
[Cart ](https://www.fethiyeholiday.com/en/Booking)
|
||||
USD EUR GBP TL
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
# BOOK YOUR TOURS & ACTIVITIES ONLINE, SAVE YOUR MONEY AND TIME
|
||||
Pioneer travel is here to help you with all your trips and excursions, with some of the best prices around, offers and the upmost customer service
|
||||
#### **Tours & Activities**
|
||||
* * *
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
From/ $
|
||||
###### 13,00
|
||||
[ Rhodes ](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
What about a visit to a nearby...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
From/ $
|
||||
###### 177,00
|
||||
[ Buggy Safari ](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
Buggy Safari
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
From/ $
|
||||
###### 68,00
|
||||
[ White Water Rafting ](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
From the crazy source of the r...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
From/ $
|
||||
###### 40,00
|
||||
[ Scuba Diving ](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
You don’t have to go as far ...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
From/ $
|
||||
###### 47,00
|
||||
[ Quad Bike Safari ](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
We promise you heavens in a su...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
From/ $
|
||||
###### 136,00
|
||||
[ Paragliding ](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
Challenge your limits!
|
||||
[ ](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
From/ $
|
||||
###### 80,00
|
||||
[ City Tour ](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
Fethiye City Tour & Ghost Town
|
||||
[ ](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ Fethiye Village Discovery ](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
Discover the real Turkey
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
From/ $
|
||||
###### 16,00
|
||||
[ Private Boat Hire ](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
The best way to escape the hus...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
From/ $
|
||||
###### 115,00
|
||||
[ Speed Boat Hire ](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
A day for yourself ...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
From/ $
|
||||
###### 26,00
|
||||
[ Sunset Trip ](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
Listen to the symphony of the ...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Blue Bays Boat Trip ](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
A peaceful boat trip to Fethiy...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Ölüdeniz Boat Trip ](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
Endless Blue!
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ 12 Islands with Sailing Boat ](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
Sunbathe and fall asleep in tu...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
From/ $
|
||||
###### 39,00
|
||||
[ Canoeing ](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
Come and enjoy your Canoeing a...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
From/ $
|
||||
###### 147,00
|
||||
[ Fishing ](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
Good Luck to All !
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Camel Trekking ](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
Explore Kayaköy on a camel.
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
From/ $
|
||||
###### 13,00
|
||||
[ Turkish Bath ( Hamam ) ](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
Can you think of a better way ...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
From/ $
|
||||
###### 38,00
|
||||
[ Horse Riding ](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
Non-experienced and experience...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
From/ $
|
||||
###### 20,00
|
||||
[ Jeep Safari ](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
Get ready for a full day free ...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
From/ $
|
||||
###### 87,00
|
||||
[ Kaş-Kalkan-Kaputaş Beach ](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
As a tourist resort, it is tot...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
From/ $
|
||||
###### 24,00
|
||||
[ Fethiye Market and Ghost Town ](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
TUESDAYS in Fethiye are great ...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
From/ $
|
||||
###### 167,00
|
||||
[ Ephesus - Pamukkale ( 2 Days 1... ](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
You’ll come back as Turkey e...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
From/ $
|
||||
###### 60,00
|
||||
[ Pamukkale - Hierapolis (Cotton... ](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
The memories of this tour will...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
From/ $
|
||||
###### 40,00
|
||||
[ Saklıkent - Tlos - Yakapark ](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
A special treat...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ Dalyan - Mud Bath - Turtle Bea... ](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
A day in Dalyan with Pioneer T...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
From/ $
|
||||
###### 13,00
|
||||
[ Rhodes ](https://www.fethiyeholiday.com/en/excursions/Rhodes)
|
||||
What about a visit to a nearby...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
From/ $
|
||||
###### 177,00
|
||||
[ Buggy Safari ](https://www.fethiyeholiday.com/en/adventure/BuggySafari)
|
||||
Buggy Safari
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
From/ $
|
||||
###### 68,00
|
||||
[ White Water Rafting ](https://www.fethiyeholiday.com/en/adventure/White-Water-Rafting)
|
||||
From the crazy source of the r...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
From/ $
|
||||
###### 40,00
|
||||
[ Scuba Diving ](https://www.fethiyeholiday.com/en/adventure/Scuba-Diving)
|
||||
You don’t have to go as far ...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
From/ $
|
||||
###### 47,00
|
||||
[ Quad Bike Safari ](https://www.fethiyeholiday.com/en/adventure/Quad-Bike-Safari-Ghost-Town)
|
||||
We promise you heavens in a su...
|
||||
[ ](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
From/ $
|
||||
###### 136,00
|
||||
[ Paragliding ](https://www.fethiyeholiday.com/en/adventure/Paragliding)
|
||||
Challenge your limits!
|
||||
[ ](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
From/ $
|
||||
###### 80,00
|
||||
[ City Tour ](https://www.fethiyeholiday.com/en/Private-Tours/city-tour)
|
||||
Fethiye City Tour & Ghost Town
|
||||
[ ](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ Fethiye Village Discovery ](https://www.fethiyeholiday.com/en/Private-Tours/Village-Discovery)
|
||||
Discover the real Turkey
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
From/ $
|
||||
###### 16,00
|
||||
[ Private Boat Hire ](https://www.fethiyeholiday.com/en/boat-tours/private-boat-hire)
|
||||
The best way to escape the hus...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
From/ $
|
||||
###### 115,00
|
||||
[ Speed Boat Hire ](https://www.fethiyeholiday.com/en/boat-tours/rent-a-speed-boat)
|
||||
A day for yourself ...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
From/ $
|
||||
###### 26,00
|
||||
[ Sunset Trip ](https://www.fethiyeholiday.com/en/boat-tours/Sunset-Trip)
|
||||
Listen to the symphony of the ...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Blue Bays Boat Trip ](https://www.fethiyeholiday.com/en/boat-tours/Blue-Bays-Boat-Trip)
|
||||
A peaceful boat trip to Fethiy...
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Ölüdeniz Boat Trip ](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
Endless Blue!
|
||||
[ ](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ 12 Islands with Sailing Boat ](https://www.fethiyeholiday.com/en/boat-tours/12-Islands-with-Sailing-Boat)
|
||||
Sunbathe and fall asleep in tu...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
From/ $
|
||||
###### 39,00
|
||||
[ Canoeing ](https://www.fethiyeholiday.com/en/activities/Canoeing)
|
||||
Come and enjoy your Canoeing a...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
From/ $
|
||||
###### 147,00
|
||||
[ Fishing ](https://www.fethiyeholiday.com/en/activities/Fishing)
|
||||
Good Luck to All !
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[ Camel Trekking ](https://www.fethiyeholiday.com/en/activities/Camel-Trekking)
|
||||
Explore Kayaköy on a camel.
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
From/ $
|
||||
###### 13,00
|
||||
[ Turkish Bath ( Hamam ) ](https://www.fethiyeholiday.com/en/activities/Turkish-Bath)
|
||||
Can you think of a better way ...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
From/ $
|
||||
###### 38,00
|
||||
[ Horse Riding ](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
Non-experienced and experience...
|
||||
[ ](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
From/ $
|
||||
###### 20,00
|
||||
[ Jeep Safari ](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
Get ready for a full day free ...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
From/ $
|
||||
###### 87,00
|
||||
[ Kaş-Kalkan-Kaputaş Beach ](https://www.fethiyeholiday.com/en/excursions/Kas-Kalkan-Kaputas-Beach)
|
||||
As a tourist resort, it is tot...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
From/ $
|
||||
###### 24,00
|
||||
[ Fethiye Market and Ghost Town ](https://www.fethiyeholiday.com/en/excursions/Fethiye-Market-and-Ghost-Town)
|
||||
TUESDAYS in Fethiye are great ...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
From/ $
|
||||
###### 167,00
|
||||
[ Ephesus - Pamukkale ( 2 Days 1... ](https://www.fethiyeholiday.com/en/excursions/Ephesus-Pamukkale-Two-Days-One-Night)
|
||||
You’ll come back as Turkey e...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
From/ $
|
||||
###### 60,00
|
||||
[ Pamukkale - Hierapolis (Cotton... ](https://www.fethiyeholiday.com/en/excursions/Pamukkale-Hierapolis-Cotton-Castle)
|
||||
The memories of this tour will...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
From/ $
|
||||
###### 40,00
|
||||
[ Saklıkent - Tlos - Yakapark ](https://www.fethiyeholiday.com/en/excursions/Saklikent-Tlos-Yakapark)
|
||||
A special treat...
|
||||
[ ](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
From/ $
|
||||
###### 53,00
|
||||
[ Dalyan - Mud Bath - Turtle Bea... ](https://www.fethiyeholiday.com/en/excursions/Dalyan-Turtle-Beach)
|
||||
A day in Dalyan with Pioneer T...
|
||||
< >
|
||||
#### **About Fethiye**
|
||||
* * *
|
||||
Fethiye is located on the Lycian and Carian border and was called Telmessos in ancient times. The city was very prominent and a centre of prophecy, pledged to Apollon. That the city life was rich and highly cultured during the Hellenistic and Roman periods is evident from the existing monuments. Today the majority of ancient ruins in Telmessos are rock-tombs, Lycian-type sarcophagi, the fortress and the Roman Theatre.
|
||||
[Read More](https://www.fethiyeholiday.com/en/Blog/Fethiye-Turkey/)
|
||||
Dear Visitors We, PIONEER TRAVEL, will be glad to welcome you on our excursions. In full cognizance of your needs and expectations in an enjoyable holiday, we are at your service with our all-professional, competent and experienced staff. Keeping the point in mind that Health and Safety issues are of utmost importance to our clientele PIONEER TRAVEL, which is a Class A member of TÜRSAB ( Association Of Turkish Travel Agencies ). Besides showing utmost care and attention to your health and safety, we ascertain that you will get the best value for your money with PIONEER TRAVEL.
|
||||
[Read More](https://www.fethiyeholiday.com/en/Aboutus)
|
||||
|
||||
|
||||
#### Tripadvisor Reviews
|
||||
* * *
|
||||
### paragliding first time
|
||||
**Rating:** ★★★★★
|
||||
booked up for the paragliding from the top of the mountain ,2000 mtrs high ,the guide instructor was very experianced indeed and took care 100 % ,start of the season so got the go pro video and photos included ,the instructor had been doing this a long time starting at 14 years old ,the shop rep wa... [Read more](https://www.fethiyeholiday.com/en/)
|
||||
**Reviewer:** Alan A
|
||||
**Date:** 2026-05-30T04:05:49-0400
|
||||
### Tweety is your man!
|
||||
**Rating:** ★★★★★
|
||||
My husband and I wanted to do a couple of trips on our holiday to Olu Deniz. We booked the 6 islands boat trip and the horse riding with Tweety. This guy is lovely, so warm and friendly but not pushy. He's also very honest, we accidentally gave him 1000 lira too much and he called us to tell us and ... [Read more](https://www.fethiyeholiday.com/en/)
|
||||
**Reviewer:** charlene88
|
||||
**Date:** 2026-05-28T09:52:00-0400
|
||||
### Friendly, trustworthy tours
|
||||
**Rating:** ★★★★★
|
||||
Amazing personal service booking tour experiences with Tweetie. His tours were much cheaper than others and he came highly recommended from other guests. So pleased we used Tweetie as we saved money!
|
||||
**Reviewer:** Esther T
|
||||
**Date:** 2026-05-02T02:40:13-0400
|
||||
### Tweety is The Man 💪
|
||||
**Rating:** ★★★★★
|
||||
We booked FlySpot Paragliding & Spa Experience through Tweety @ Pioneer Travel. He's a great and gets you good deals, I thoroughly recommend him.
|
||||
**Reviewer:** A7607UQkarla
|
||||
**Date:** 2025-11-02T04:21:06-0500
|
||||
#### Recent Bookings
|
||||
* * *
|
||||
[](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
From/ $
|
||||
###### 20,00
|
||||
[Jeep Safari](https://www.fethiyeholiday.com/en/activities/Jeep-Safari)
|
||||
Get ready for a full day free ...
|
||||
[](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
From/ $
|
||||
###### 38,00
|
||||
[Horse Riding](https://www.fethiyeholiday.com/en/activities/Horse-Riding)
|
||||
Non-experienced and experience...
|
||||
[](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
From/ $
|
||||
###### 45,00
|
||||
[Ölüdeniz Boat Trip](https://www.fethiyeholiday.com/en/boat-tours/Oludeniz-Boat-Trip)
|
||||
Endless Blue!
|
||||
|
||||
|
||||
#### Car Rental
|
||||
* * *
|
||||
[](https://www.fethiyeholiday.com/en/Transfer)
|
||||
|
||||
|
||||
|
||||
#### Recent Blog Post
|
||||
* * *
|
||||
[ ](https://www.fethiyeholiday.com/en/Blog/Cadianda/)
|
||||
[Read More](https://www.fethiyeholiday.com/en/Blog/Cadianda/)
|
||||
CADIANDA
|
||||
The ancient city of Cadianda whose Lycian name is Cadavanti, is located near Üzümlü Village about 12 miles to Fethiye
|
||||
[ ](https://www.fethiyeholiday.com/en/Blog/Top-10-Things-to-Do-in-Fethiye/)
|
||||
[Read More](https://www.fethiyeholiday.com/en/Blog/Top-10-Things-to-Do-in-Fethiye/)
|
||||
Things to Do in Fethiye
|
||||
Things To Do in Fethiye Area
|
||||
[ ](https://www.fethiyeholiday.com/en/Blog/Fethiye-Turkey/)
|
||||
[Read More](https://www.fethiyeholiday.com/en/Blog/Fethiye-Turkey/)
|
||||
Fethiye
|
||||
Fethiye is located on the Lycian and Carian border and was called Telmessos in ancient times.
|
||||
[View All Blogs](https://www.fethiyeholiday.com/en/Trip)
|
||||
#### Activty Maps
|
||||
* * *
|
||||
|
||||
|
||||
[+](https://www.fethiyeholiday.com/en/ "Zoom in")[−](https://www.fethiyeholiday.com/en/ "Zoom out")
|
||||
[Leaflet](https://leafletjs.com "A JS library for interactive maps") | © [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors
|
||||
|
||||
Çarşı Caddesi Tonoz İş Merkezi No:3/1
|
||||
Ölüdeniz - Fethiye / Türkiye
|
||||
Tel +90 530 378 48 82
|
||||
[](https://www.tursab.org.tr/tr/ddsv)
|
||||
|
||||
|
||||
This site is protected by 256 bit SSL certificate and has the online payment system.
|
||||
[](https://www.fethiyeholiday.com/en/Login) [](https://www.tripadvisor.co.uk/Attraction_Review-g312737-d3506228-Reviews-Pioneer_Travel-Oludeniz_Mugla_Province_Turkish_Aegean_Coast.html) [](https://www.facebook.com/Pioneertraveloludeniz) [](https://www.instagram.com/pioneertravelfethiye/)
|
||||
* [Home](https://www.fethiyeholiday.com/en/)
|
||||
* [About Us](https://www.fethiyeholiday.com/en/Aboutus/)
|
||||
* [Holiday Blog](https://www.fethiyeholiday.com/en/Trip/)
|
||||
* [Contact](https://www.fethiyeholiday.com/en/Contact/)
|
||||
|
||||
|
||||
* [Cart](https://www.fethiyeholiday.com/en/Booking/)
|
||||
* [Login](https://www.fethiyeholiday.com/en/Login)
|
||||
* [Register](https://www.fethiyeholiday.com/en/user_register.php)
|
||||
* [Security Policy](https://www.fethiyeholiday.com/en/Security)
|
||||
|
||||
|
||||
**Hi**
|
||||
Need Help?
|
||||
Write to Us on WhatsApp
|
||||
*  Pionner Travel
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
@@ -0,0 +1,15 @@
|
||||
import {getRequestConfig} from 'next-intl/server';
|
||||
import {routing} from './routing';
|
||||
|
||||
export default getRequestConfig(async ({requestLocale}) => {
|
||||
let locale = await requestLocale;
|
||||
|
||||
if (!locale || !routing.locales.includes(locale as any)) {
|
||||
locale = routing.defaultLocale;
|
||||
}
|
||||
|
||||
return {
|
||||
locale,
|
||||
messages: (await import(`../messages/${locale}.json`)).default
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import {defineRouting} from 'next-intl/routing';
|
||||
import {createNavigation} from 'next-intl/navigation';
|
||||
|
||||
export const routing = defineRouting({
|
||||
locales: ['en', 'tr'],
|
||||
defaultLocale: 'tr'
|
||||
});
|
||||
|
||||
export const {Link, redirect, usePathname, useRouter, getPathname} =
|
||||
createNavigation(routing);
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
import NextAuth from "next-auth"
|
||||
import CredentialsProvider from "next-auth/providers/credentials"
|
||||
|
||||
export const { handlers, auth, signIn, signOut } = NextAuth({
|
||||
providers: [
|
||||
CredentialsProvider({
|
||||
name: "Credentials",
|
||||
credentials: {
|
||||
email: { label: "Email", type: "email" },
|
||||
password: { label: "Password", type: "password" }
|
||||
},
|
||||
async authorize(credentials) {
|
||||
// Boilerplate mock logic
|
||||
// TODO: In production, lookup user in Prisma and verify password using bcrypt
|
||||
// const user = await db.user.findUnique({ where: { email: credentials.email } })
|
||||
|
||||
if (credentials?.email === "admin@ayris.tech" && credentials?.password === "admin") {
|
||||
return {
|
||||
id: "1",
|
||||
name: "Admin User",
|
||||
email: "admin@ayris.tech",
|
||||
role: "ADMIN"
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
})
|
||||
],
|
||||
callbacks: {
|
||||
async jwt({ token, user }) {
|
||||
if (user) {
|
||||
token.role = (user as any).role
|
||||
}
|
||||
return token
|
||||
},
|
||||
async session({ session, token }) {
|
||||
if (session.user && token.role) {
|
||||
(session.user as any).role = token.role
|
||||
}
|
||||
return session
|
||||
}
|
||||
},
|
||||
pages: {
|
||||
signIn: '/login'
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
import { v2 as cloudinary } from 'cloudinary'
|
||||
|
||||
cloudinary.config({
|
||||
cloud_name: process.env.CLOUDINARY_CLOUD_NAME!,
|
||||
api_key: process.env.CLOUDINARY_API_KEY!,
|
||||
api_secret: process.env.CLOUDINARY_API_SECRET!,
|
||||
})
|
||||
|
||||
export async function uploadImage(file: string, folder: string) {
|
||||
const result = await cloudinary.uploader.upload(file, {
|
||||
folder, transformation: [{ quality: 'auto', fetch_format: 'auto' }],
|
||||
})
|
||||
return { url: result.secure_url, publicId: result.public_id }
|
||||
}
|
||||
|
||||
export async function deleteImage(publicId: string) {
|
||||
await cloudinary.uploader.destroy(publicId)
|
||||
}
|
||||
|
||||
export { cloudinary }
|
||||
@@ -0,0 +1,9 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
const globalForPrisma = globalThis as unknown as {
|
||||
prisma: PrismaClient | undefined
|
||||
}
|
||||
|
||||
export const db = globalForPrisma.prisma ?? new PrismaClient()
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
export const MOCK_CATEGORIES = [
|
||||
{
|
||||
id: 'c1',
|
||||
name: 'Excursions',
|
||||
slug: 'excursions',
|
||||
description: 'Explore historical sites and cultural highlights.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&q=80',
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
name: 'Activities',
|
||||
slug: 'activities',
|
||||
description: 'Fun and engaging activities for all ages.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1533692328991-08159ff19fca?auto=format&fit=crop&q=80',
|
||||
},
|
||||
{
|
||||
id: 'c3',
|
||||
name: 'Boat Tours',
|
||||
slug: 'boat-tours',
|
||||
description: 'Relax and swim in the beautiful blue bays.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
},
|
||||
{
|
||||
id: 'c4',
|
||||
name: 'Adventure',
|
||||
slug: 'adventure',
|
||||
description: 'Adrenaline-pumping experiences.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1526315865203-d14fb1e80938?auto=format&fit=crop&q=80',
|
||||
},
|
||||
{
|
||||
id: 'c5',
|
||||
name: 'Private Tours',
|
||||
slug: 'private-tours',
|
||||
description: 'Tailor-made private experiences.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&q=80',
|
||||
}
|
||||
];
|
||||
|
||||
export const MOCK_TOURS = [
|
||||
{
|
||||
id: 't1',
|
||||
title: 'Rhodes',
|
||||
slug: 'rhodes',
|
||||
description: 'What about a visit to a nearby Greek Island? Fast catamaran to Rhodes.',
|
||||
price: 13.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't2',
|
||||
title: 'Buggy Safari',
|
||||
slug: 'buggy-safari',
|
||||
description: 'Buggy Safari through the muddy, dusty and watery trails.',
|
||||
price: 177.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c4'
|
||||
},
|
||||
{
|
||||
id: 't3',
|
||||
title: 'White Water Rafting',
|
||||
slug: 'white-water-rafting',
|
||||
description: 'From the crazy source of the river to an adrenaline-pumping experience.',
|
||||
price: 68.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1530866495561-507c9faab2ed?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c4'
|
||||
},
|
||||
{
|
||||
id: 't4',
|
||||
title: 'Scuba Diving',
|
||||
slug: 'scuba-diving',
|
||||
description: 'You don’t have to go as far, discover the underwater beauty of Fethiye.',
|
||||
price: 40.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c4'
|
||||
},
|
||||
{
|
||||
id: 't5',
|
||||
title: 'Quad Bike Safari',
|
||||
slug: 'quad-bike-safari',
|
||||
description: 'We promise you heavens in a dusty, muddy but incredibly fun ride.',
|
||||
price: 47.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c4'
|
||||
},
|
||||
{
|
||||
id: 't6',
|
||||
title: 'Paragliding',
|
||||
slug: 'paragliding',
|
||||
description: 'Challenge your limits! Book up for paragliding from the top of Babadag mountain.',
|
||||
price: 136.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1471922694854-ff1b63b20054?auto=format&fit=crop&q=80',
|
||||
duration: '2 Hours',
|
||||
categoryId: 'c4'
|
||||
},
|
||||
{
|
||||
id: 't7',
|
||||
title: 'City Tour',
|
||||
slug: 'city-tour',
|
||||
description: 'Fethiye City Tour & Ghost Town exploration.',
|
||||
price: 80.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c5'
|
||||
},
|
||||
{
|
||||
id: 't8',
|
||||
title: 'Fethiye Village Discovery',
|
||||
slug: 'fethiye-village-discovery',
|
||||
description: 'Discover the real Turkey in our traditional village tour.',
|
||||
price: 53.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c5'
|
||||
},
|
||||
{
|
||||
id: 't9',
|
||||
title: 'Private Boat Hire',
|
||||
slug: 'private-boat-hire',
|
||||
description: 'The best way to escape the hustle, on a private yacht.',
|
||||
price: 16.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't10',
|
||||
title: 'Speed Boat Hire',
|
||||
slug: 'speed-boat-hire',
|
||||
description: 'A day for yourself, adrenaline and speed on the sea.',
|
||||
price: 115.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1500315331616-db4f707c24d1?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't11',
|
||||
title: 'Sunset Trip',
|
||||
slug: 'sunset-trip',
|
||||
description: 'Listen to the symphony of the sea as the sun sets.',
|
||||
price: 26.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1495562569060-2eec283d3391?auto=format&fit=crop&q=80',
|
||||
duration: 'Evening',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't12',
|
||||
title: 'Blue Bays Boat Trip',
|
||||
slug: 'blue-bays-boat-trip',
|
||||
description: 'A peaceful boat trip to Fethiye\'s most beautiful bays.',
|
||||
price: 45.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't13',
|
||||
title: 'Ölüdeniz Boat Trip',
|
||||
slug: 'oludeniz-boat-trip',
|
||||
description: 'Endless Blue! Discover the beauty of Ölüdeniz bays.',
|
||||
price: 45.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1498092651296-641e88c3b057?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't14',
|
||||
title: '12 Islands with Sailing Boat',
|
||||
slug: '12-islands-sailing',
|
||||
description: 'Sunbathe and fall asleep in the turquoise waters of the 12 islands.',
|
||||
price: 53.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c3'
|
||||
},
|
||||
{
|
||||
id: 't15',
|
||||
title: 'Canoeing',
|
||||
slug: 'canoeing',
|
||||
description: 'Come and enjoy your Canoeing adventure.',
|
||||
price: 39.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544256718-3b618235f5c6?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't16',
|
||||
title: 'Fishing',
|
||||
slug: 'fishing',
|
||||
description: 'Good Luck to All! Fishing tour in the rich waters.',
|
||||
price: 147.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1506158669146-619067262a00?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't17',
|
||||
title: 'Camel Trekking',
|
||||
slug: 'camel-trekking',
|
||||
description: 'Explore Kayaköy on a camel.',
|
||||
price: 45.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't18',
|
||||
title: 'Turkish Bath (Hamam)',
|
||||
slug: 'turkish-bath',
|
||||
description: 'Can you think of a better way to relax? Traditional Turkish Bath.',
|
||||
price: 13.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&q=80',
|
||||
duration: '2 Hours',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't19',
|
||||
title: 'Horse Riding',
|
||||
slug: 'horse-riding',
|
||||
description: 'Non-experienced and experienced riders welcome.',
|
||||
price: 38.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1553460662-8646b9a8964e?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't20',
|
||||
title: 'Jeep Safari',
|
||||
slug: 'jeep-safari',
|
||||
description: 'Get ready for a full day free of stress! Enjoy the nature.',
|
||||
price: 20.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c2'
|
||||
},
|
||||
{
|
||||
id: 't21',
|
||||
title: 'Kaş-Kalkan-Kaputaş Beach',
|
||||
slug: 'kas-kalkan-kaputas',
|
||||
description: 'As a tourist resort, it is totally a unique experience.',
|
||||
price: 87.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1600861194942-f883de0dfe96?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't22',
|
||||
title: 'Fethiye Market and Ghost Town',
|
||||
slug: 'fethiye-market-ghost-town',
|
||||
description: 'TUESDAYS in Fethiye are great! Kayaköy and local market.',
|
||||
price: 24.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&q=80',
|
||||
duration: 'Half Day',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't23',
|
||||
title: 'Ephesus - Pamukkale (2 Days 1 Night)',
|
||||
slug: 'ephesus-pamukkale',
|
||||
description: 'You’ll come back as an expert in Turkey.',
|
||||
price: 167.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1588523775466-231a48c41804?auto=format&fit=crop&q=80',
|
||||
duration: '2 Days',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't24',
|
||||
title: 'Pamukkale - Hierapolis (Cotton Castle)',
|
||||
slug: 'pamukkale',
|
||||
description: 'The memories of this tour will stay with you forever.',
|
||||
price: 60.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't25',
|
||||
title: 'Saklıkent - Tlos - Yakapark',
|
||||
slug: 'saklikent-tlos-yakapark',
|
||||
description: 'A special treat exploring the natural beauties.',
|
||||
price: 40.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1533692328991-08159ff19fca?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c1'
|
||||
},
|
||||
{
|
||||
id: 't26',
|
||||
title: 'Dalyan - Mud Bath - Turtle Beach',
|
||||
slug: 'dalyan-mud-bath',
|
||||
description: 'A day in Dalyan with Pioneer Travel.',
|
||||
price: 53.00,
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
duration: 'Full Day',
|
||||
categoryId: 'c1'
|
||||
}
|
||||
];
|
||||
|
||||
export const MOCK_REVIEWS = [
|
||||
{
|
||||
id: 'r1',
|
||||
authorName: 'Alan A',
|
||||
rating: 5,
|
||||
comment: 'booked up for the paragliding from the top of the mountain ,2000 mtrs high ,the guide instructor was very experianced indeed and took care 100 %...',
|
||||
tourId: 't6',
|
||||
createdAt: new Date('2026-05-30T04:05:49-0400')
|
||||
},
|
||||
{
|
||||
id: 'r2',
|
||||
authorName: 'charlene88',
|
||||
rating: 5,
|
||||
comment: 'My husband and I wanted to do a couple of trips on our holiday to Olu Deniz. We booked the 6 islands boat trip and the horse riding with Tweety. This guy is lovely...',
|
||||
tourId: 't14',
|
||||
createdAt: new Date('2026-05-28T09:52:00-0400')
|
||||
},
|
||||
{
|
||||
id: 'r3',
|
||||
authorName: 'Esther T',
|
||||
rating: 5,
|
||||
comment: 'Amazing personal service booking tour experiences with Tweetie. His tours were much cheaper than others and he came highly recommended from other guests.',
|
||||
tourId: 't20',
|
||||
createdAt: new Date('2026-05-02T02:40:13-0400')
|
||||
},
|
||||
{
|
||||
id: 'r4',
|
||||
authorName: 'A7607UQkarla',
|
||||
rating: 5,
|
||||
comment: 'We booked FlySpot Paragliding & Spa Experience through Tweety @ Pioneer Travel. He\'s a great and gets you good deals, I thoroughly recommend him.',
|
||||
tourId: 't6',
|
||||
createdAt: new Date('2025-11-02T04:21:06-0500')
|
||||
}
|
||||
];
|
||||
|
||||
export const MOCK_BLOGS = [
|
||||
{
|
||||
id: 'b1',
|
||||
title: 'CADIANDA',
|
||||
excerpt: 'The ancient city of Cadianda whose Lycian name is Cadavanti, is located near Üzümlü Village about 12 miles to Fethiye',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?auto=format&fit=crop&q=80',
|
||||
date: '2026-05-15'
|
||||
},
|
||||
{
|
||||
id: 'b2',
|
||||
title: 'Things to Do in Fethiye',
|
||||
excerpt: 'Things To Do in Fethiye Area',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1533692328991-08159ff19fca?auto=format&fit=crop&q=80',
|
||||
date: '2026-05-20'
|
||||
},
|
||||
{
|
||||
id: 'b3',
|
||||
title: 'Fethiye',
|
||||
excerpt: 'Fethiye is located on the Lycian and Carian border and was called Telmessos in ancient times.',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80',
|
||||
date: '2026-05-25'
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"about": "About Us",
|
||||
"tours": "Tours",
|
||||
"blog": "Blog",
|
||||
"contact": "Contact"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Welcome to Fethiye",
|
||||
"subtitle": "Discover the beauty of the Mediterranean with Pioneer Travel.",
|
||||
"cta": "Explore Tours"
|
||||
},
|
||||
"sections": {
|
||||
"popular": "Popular Tours",
|
||||
"categories": "Categories",
|
||||
"reviews": "What Our Guests Say",
|
||||
"view_all": "View All"
|
||||
},
|
||||
"tour": {
|
||||
"from": "From",
|
||||
"book_now": "Book Now"
|
||||
},
|
||||
"footer": {
|
||||
"description": "Your trusted partner for exploring Fethiye. Over 25 years of experience in organizing tours and excursions.",
|
||||
"contact_info": "Ölüdeniz - Fethiye / Türkiye",
|
||||
"rights": "All rights reserved."
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Ana Sayfa",
|
||||
"about": "Hakkımızda",
|
||||
"tours": "Turlar",
|
||||
"blog": "Blog",
|
||||
"contact": "İletişim"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Fethiye'ye Hoşgeldiniz",
|
||||
"subtitle": "Pioneer Travel ile Akdeniz'in güzelliklerini keşfedin.",
|
||||
"cta": "Turları Keşfet"
|
||||
},
|
||||
"sections": {
|
||||
"popular": "Popüler Turlar",
|
||||
"categories": "Kategoriler",
|
||||
"reviews": "Misafirlerimiz Ne Diyor",
|
||||
"view_all": "Tümünü Gör"
|
||||
},
|
||||
"tour": {
|
||||
"from": "Başlayan Fiyatlarla",
|
||||
"book_now": "Hemen Yer Ayırt"
|
||||
},
|
||||
"footer": {
|
||||
"description": "Fethiye'yi keşfetmek için güvenilir ortağınız. Tur ve gezilerde 25 yılı aşkın tecrübe.",
|
||||
"contact_info": "Ölüdeniz - Fethiye / Türkiye",
|
||||
"rights": "Tüm hakları saklıdır."
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { NextConfig } from 'next'
|
||||
import createNextIntlPlugin from 'next-intl/plugin'
|
||||
|
||||
const withNextIntl = createNextIntlPlugin('./i18n/request.ts')
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: 'standalone',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{ protocol: 'https', hostname: 'res.cloudinary.com' },
|
||||
{ protocol: 'https', hostname: 'images.unsplash.com' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export default withNextIntl(nextConfig)
|
||||
Generated
+11346
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "fethiye-holiday",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.5.0",
|
||||
"@prisma/client": "^7.8.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"cloudinary": "^2.10.0",
|
||||
"clsx": "^2.1.1",
|
||||
"developer-icons": "^7.0.1",
|
||||
"framer-motion": "^12.40.0",
|
||||
"lucide-react": "^1.18.0",
|
||||
"next": "16.2.9",
|
||||
"next-auth": "^5.0.0-beta.31",
|
||||
"next-intl": "^4.13.0",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shadcn": "^4.11.0",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.9",
|
||||
"prisma": "^7.8.0",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
datasource: {
|
||||
url: process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:5432/fethiye_holiday',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "postgresql"
|
||||
}
|
||||
|
||||
enum Role {
|
||||
ADMIN
|
||||
USER
|
||||
}
|
||||
|
||||
model User {
|
||||
id String @id @default(cuid())
|
||||
name String?
|
||||
email String @unique
|
||||
password String?
|
||||
role Role @default(USER)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
accounts Account[]
|
||||
sessions Session[]
|
||||
}
|
||||
|
||||
model Account {
|
||||
id String @id @default(cuid())
|
||||
userId String
|
||||
type String
|
||||
provider String
|
||||
providerAccountId String
|
||||
refresh_token String? @db.Text
|
||||
access_token String? @db.Text
|
||||
expires_at Int?
|
||||
token_type String?
|
||||
scope String?
|
||||
id_token String? @db.Text
|
||||
session_state String?
|
||||
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([provider, providerAccountId])
|
||||
}
|
||||
|
||||
model Session {
|
||||
id String @id @default(cuid())
|
||||
sessionToken String @unique
|
||||
userId String
|
||||
expires DateTime
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
}
|
||||
|
||||
model VerificationToken {
|
||||
identifier String
|
||||
token String @unique
|
||||
expires DateTime
|
||||
|
||||
@@unique([identifier, token])
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import createMiddleware from 'next-intl/middleware'
|
||||
import { auth } from '@/lib/auth'
|
||||
import { routing } from '@/i18n/routing'
|
||||
|
||||
const intlMiddleware = createMiddleware(routing)
|
||||
|
||||
export async function proxy(request: NextRequest) {
|
||||
if (request.nextUrl.pathname.includes('/admin')) {
|
||||
const session = await auth()
|
||||
if (!session || (session.user as any)?.role !== 'ADMIN') {
|
||||
return NextResponse.redirect(new URL('/login', request.url))
|
||||
}
|
||||
}
|
||||
return intlMiddleware(request)
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user