feat: complete UI/UX improvements and localization
This commit is contained in:
AyrisAI
@@ -0,0 +1,181 @@
|
|||||||
|
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||||
|
import { Link } from '@/i18n/routing'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { notFound } from 'next/navigation'
|
||||||
|
import { CheckCircle2, Maximize, Users, BedDouble, ArrowRight } from 'lucide-react'
|
||||||
|
|
||||||
|
// Bu sayfa parametre olarak dinamik slug alacak
|
||||||
|
export default async function RoomDetailPage({ params }: { params: Promise<{ locale: string, slug: string }> }) {
|
||||||
|
const { locale, slug } = await params
|
||||||
|
setRequestLocale(locale)
|
||||||
|
|
||||||
|
const tRooms = await getTranslations('rooms')
|
||||||
|
|
||||||
|
const MOCK_ROOMS = [
|
||||||
|
{
|
||||||
|
slug: '1-0-daire',
|
||||||
|
name: tRooms('room_list.1_0_daire.name'),
|
||||||
|
description: tRooms('room_list.1_0_daire.desc'),
|
||||||
|
capacity: 2,
|
||||||
|
size: '25m²',
|
||||||
|
beds: '1',
|
||||||
|
image: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||||||
|
gallery: [
|
||||||
|
'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||||||
|
],
|
||||||
|
amenities: ['Mini Mutfak', 'Klima', 'Balkon', 'WiFi', 'TV', 'Saç Kurutma Makinesi']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: '1-1-daire-a',
|
||||||
|
name: tRooms('room_list.1_1_daire_a.name'),
|
||||||
|
description: tRooms('room_list.1_1_daire_a.desc'),
|
||||||
|
capacity: 2,
|
||||||
|
size: '40m²',
|
||||||
|
beds: '1 + Sofa',
|
||||||
|
image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
gallery: [
|
||||||
|
'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||||||
|
],
|
||||||
|
amenities: ['Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Oturma Alanı', 'Çamaşır Makinesi']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: '1-1-daire-b',
|
||||||
|
name: tRooms('room_list.1_1_daire_b.name'),
|
||||||
|
description: tRooms('room_list.1_1_daire_b.desc'),
|
||||||
|
capacity: 4,
|
||||||
|
size: '50m²',
|
||||||
|
beds: '2',
|
||||||
|
image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||||||
|
gallery: [
|
||||||
|
'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80'
|
||||||
|
],
|
||||||
|
amenities: ['2 Oda', 'Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Geniş Oturma Alanı']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const room = MOCK_ROOMS.find(r => r.slug === slug);
|
||||||
|
|
||||||
|
if (!room) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-background min-h-screen text-on-surface">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative h-[60vh] md:h-[70vh] w-full">
|
||||||
|
<Image
|
||||||
|
src={room.image}
|
||||||
|
alt={room.name}
|
||||||
|
fill
|
||||||
|
sizes="100vw"
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/40" />
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="font-serif text-[48px] md:text-[64px] text-white font-bold drop-shadow-md">
|
||||||
|
{room.name}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<section className="max-w-container-max mx-auto px-margin-mobile md:px-gutter py-16">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
|
|
||||||
|
{/* Left Column - Details */}
|
||||||
|
<div className="lg:col-span-2 space-y-12">
|
||||||
|
|
||||||
|
{/* Badges */}
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||||||
|
<Users className="w-5 h-5 text-primary" />
|
||||||
|
<span>Maks {room.capacity} Kişi</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||||||
|
<Maximize className="w-5 h-5 text-primary" />
|
||||||
|
<span>{room.size}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-full text-secondary font-medium">
|
||||||
|
<BedDouble className="w-5 h-5 text-primary" />
|
||||||
|
<span>{room.beds} Yatak</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="prose prose-lg text-on-surface-variant">
|
||||||
|
<p className="text-[18px] leading-relaxed">
|
||||||
|
{room.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Amenities */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-serif text-[28px] text-secondary font-semibold mb-6">
|
||||||
|
{tRooms('details.features')}
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{room.amenities.map((amenity, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-3">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-accent-green flex-shrink-0" />
|
||||||
|
<span className="text-on-surface-variant">{amenity}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mini Gallery */}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-serif text-[28px] text-secondary font-semibold mb-6">
|
||||||
|
{tRooms('details.gallery')}
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
{room.gallery.map((img, i) => (
|
||||||
|
<div key={i} className="relative aspect-square rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`${room.name} gallery ${i + 1}`}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 640px) 100vw, 33vw"
|
||||||
|
className="object-cover hover:scale-105 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column - Sticky Sidebar */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<div className="sticky top-32 bg-surface-container rounded-[24px] p-8 shadow-sm border border-outline/10">
|
||||||
|
<h4 className="font-serif text-[24px] text-secondary font-semibold mb-2">
|
||||||
|
Bilgi Alın
|
||||||
|
</h4>
|
||||||
|
<p className="text-on-surface-variant text-[15px] mb-8">
|
||||||
|
Tarihlerinize uygun fiyat ve müsaitlik durumunu öğrenmek için bizimle iletişime geçin.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary-hover text-white py-4 rounded-full font-bold transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
{tRooms('details.book_now_cta')}
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||||
|
import { Link } from '@/i18n/routing'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Users, Square, Info } from 'lucide-react'
|
||||||
|
|
||||||
|
export default async function RoomsPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||||
|
const { locale } = await params
|
||||||
|
setRequestLocale(locale)
|
||||||
|
|
||||||
|
const tNav = await getTranslations('nav')
|
||||||
|
const tRooms = await getTranslations('rooms')
|
||||||
|
|
||||||
|
const MOCK_ROOMS = [
|
||||||
|
{
|
||||||
|
slug: '1-0-daire',
|
||||||
|
name: tRooms('room_list.1_0_daire.name'),
|
||||||
|
description: tRooms('room_list.1_0_daire.desc'),
|
||||||
|
capacity: 2,
|
||||||
|
size: '25m²',
|
||||||
|
image: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||||||
|
amenities: ['Mini Mutfak', 'Klima', 'Balkon', 'WiFi']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: '1-1-daire-a',
|
||||||
|
name: tRooms('room_list.1_1_daire_a.name'),
|
||||||
|
description: tRooms('room_list.1_1_daire_a.desc'),
|
||||||
|
capacity: 2,
|
||||||
|
size: '40m²',
|
||||||
|
image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
amenities: ['Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Oturma Alanı']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: '1-1-daire-b',
|
||||||
|
name: tRooms('room_list.1_1_daire_b.name'),
|
||||||
|
description: tRooms('room_list.1_1_daire_b.desc'),
|
||||||
|
capacity: 4,
|
||||||
|
size: '50m²',
|
||||||
|
image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||||||
|
amenities: ['2 Oda', 'Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 bg-gray-50 py-12 pt-32">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="mb-10 text-center max-w-2xl mx-auto">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">{tRooms('title')}</h1>
|
||||||
|
<p className="text-gray-600 text-lg">
|
||||||
|
{tRooms('description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-12 max-w-5xl mx-auto">
|
||||||
|
{MOCK_ROOMS.map((room) => (
|
||||||
|
<div key={room.slug} className="bg-white rounded-2xl overflow-hidden border shadow-sm flex flex-col md:flex-row group">
|
||||||
|
<div className="relative w-full md:w-2/5 h-64 md:h-auto bg-gray-100">
|
||||||
|
<Image
|
||||||
|
src={room.image}
|
||||||
|
alt={room.name}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw, 40vw"
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 md:p-8 flex-1 flex flex-col">
|
||||||
|
<div className="flex justify-between items-start mb-4">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">{room.name}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-600 mb-6 flex-1">
|
||||||
|
{room.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 mb-8">
|
||||||
|
<div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
|
||||||
|
<Users className="w-4 h-4 text-[#2FB6C4]" />
|
||||||
|
<span>{room.capacity} {tRooms('capacity')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
|
||||||
|
<Square className="w-4 h-4 text-[#2FB6C4]" />
|
||||||
|
<span>{room.size}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
|
||||||
|
<Info className="w-4 h-4 text-[#2FB6C4]" />
|
||||||
|
<span>{room.amenities.length} {tRooms('amenities')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mt-auto border-t pt-6">
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
<span className="font-bold text-gray-900 text-lg">{tRooms('ask_price')}</span> {tRooms('per_night')}
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={`/dairelerimiz/${room.slug}`}
|
||||||
|
className="px-6 py-2.5 bg-[#2FB6C4] hover:bg-[#2597a3] text-white rounded-md font-medium transition-colors duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
{tRooms('details_btn')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
import { X } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function GalleryPage() {
|
||||||
|
const t = useTranslations('gallery')
|
||||||
|
const [activeFilter, setActiveFilter] = useState('all')
|
||||||
|
const [selectedImage, setSelectedImage] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const filters = [
|
||||||
|
{ id: 'all', label: t('filters.all') },
|
||||||
|
{ id: 'rooms', label: t('filters.rooms') },
|
||||||
|
{ id: 'exterior', label: t('filters.exterior') },
|
||||||
|
{ id: 'view', label: t('filters.view') },
|
||||||
|
{ id: 'balcony', label: t('filters.balcony') },
|
||||||
|
]
|
||||||
|
|
||||||
|
const galleryItems = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
category: 'rooms',
|
||||||
|
title: t('items.1'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
category: 'exterior',
|
||||||
|
title: t('items.2'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1 md:col-span-2 lg:col-span-1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
category: 'view',
|
||||||
|
title: t('items.3'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
category: 'balcony',
|
||||||
|
title: t('items.4'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1 md:col-span-2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
category: 'rooms',
|
||||||
|
title: t('items.5'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
category: 'view',
|
||||||
|
title: t('items.6'),
|
||||||
|
src: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80',
|
||||||
|
colSpan: 'col-span-1 md:col-span-2 lg:col-span-1',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const filteredItems = galleryItems.filter(item =>
|
||||||
|
activeFilter === 'all' || item.category === activeFilter
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-background min-h-screen text-on-surface pt-32 pb-section-gap container mx-auto px-4">
|
||||||
|
{/* Header Section */}
|
||||||
|
<header className="relative mb-16 max-w-2xl">
|
||||||
|
<div className="absolute -top-6 -left-4 opacity-80 -rotate-6 pointer-events-none text-accent-pink">
|
||||||
|
<BougainvilleaMotif className="w-16 h-16" />
|
||||||
|
</div>
|
||||||
|
<h1 className="font-serif text-[40px] md:text-[48px] font-semibold text-secondary mb-4 relative z-10">
|
||||||
|
{t('title')}
|
||||||
|
</h1>
|
||||||
|
<p className="font-sans text-[18px] text-on-surface-variant max-w-xl">
|
||||||
|
{t('description')}
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Filter Bar */}
|
||||||
|
<div className="flex flex-wrap items-center gap-4 mb-12">
|
||||||
|
{filters.map((filter) => (
|
||||||
|
<button
|
||||||
|
key={filter.id}
|
||||||
|
onClick={() => setActiveFilter(filter.id)}
|
||||||
|
className={`px-6 py-2 rounded-full font-sans font-bold text-[14px] uppercase tracking-wider transition-all duration-300 border-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
|
||||||
|
activeFilter === filter.id
|
||||||
|
? 'border-primary text-primary bg-primary/10'
|
||||||
|
: 'border-transparent text-secondary hover:border-primary/30'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{filter.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Masonry-like Grid */}
|
||||||
|
<motion.div layout className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<AnimatePresence>
|
||||||
|
{filteredItems.map((item) => (
|
||||||
|
<motion.div
|
||||||
|
key={item.id}
|
||||||
|
layout
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.9 }}
|
||||||
|
transition={{ duration: 0.4 }}
|
||||||
|
className={`group cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary rounded-[24px] ${item.colSpan}`}
|
||||||
|
onClick={() => setSelectedImage(item.src)}
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
setSelectedImage(item.src);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm hover:shadow-xl transition-all duration-500 aspect-[4/3] md:aspect-auto md:h-80">
|
||||||
|
<Image
|
||||||
|
src={item.src}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||||
|
className="object-cover transform group-hover:scale-105 transition-transform duration-700"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span className="text-white font-serif text-[24px] font-medium drop-shadow-md">
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Lightbox Overlay */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{selectedImage && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 md:p-8 backdrop-blur-sm"
|
||||||
|
onClick={() => setSelectedImage(null)}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Close lightbox"
|
||||||
|
className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors duration-300 z-50 p-2 bg-black/20 rounded-full cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
|
||||||
|
onClick={() => setSelectedImage(null)}
|
||||||
|
>
|
||||||
|
<X className="w-8 h-8" />
|
||||||
|
</button>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.9, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0.9, opacity: 0 }}
|
||||||
|
className="relative w-full max-w-5xl h-[80vh] bg-transparent rounded-lg overflow-hidden"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={selectedImage}
|
||||||
|
alt="Enlarged view"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
sizes="100vw"
|
||||||
|
quality={90}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
||||||
|
import { MapPin, Waves, ShoppingBasket, Coffee, PersonStanding, Phone, Mail } from 'lucide-react'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
|
||||||
|
const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const t = useTranslations('contact')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-background min-h-screen text-on-surface pt-32 pb-section-gap">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto mb-12">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE }}
|
||||||
|
className="relative inline-block mb-4"
|
||||||
|
>
|
||||||
|
<span className="absolute -top-6 -left-4 text-accent-pink/30 -rotate-12 pointer-events-none">
|
||||||
|
<BougainvilleaMotif className="w-12 h-12" />
|
||||||
|
</span>
|
||||||
|
<h1 className="font-serif text-[40px] md:text-[48px] font-semibold text-on-surface">{t('title')}</h1>
|
||||||
|
</motion.div>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
|
||||||
|
className="font-sans text-[18px] text-on-surface-variant max-w-2xl"
|
||||||
|
>
|
||||||
|
{t('description')}
|
||||||
|
</motion.p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Location Grid */}
|
||||||
|
<section className="bg-surface-container-low py-16 mb-16">
|
||||||
|
<div className="px-margin-mobile md:px-gutter max-w-container-max mx-auto grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
||||||
|
|
||||||
|
{/* Map Container */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE }}
|
||||||
|
className="lg:col-span-8 rounded-[24px] overflow-hidden aspect-video shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/30 relative bg-surface-container-high"
|
||||||
|
>
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-center text-secondary-container">
|
||||||
|
<MapPin className="w-16 h-16 mb-4 text-primary/40" />
|
||||||
|
<span className="text-primary/60 font-sans font-medium">{t('connect.map_placeholder')}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mock Map Interaction Layer */}
|
||||||
|
<div className="absolute bottom-6 left-6 bg-surface/90 backdrop-blur-md p-4 rounded-xl shadow-lg border border-outline-variant/20 flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
|
||||||
|
<MapPin className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-sans font-bold text-[12px] text-on-surface uppercase tracking-wider">{t('connect.address_title')}</p>
|
||||||
|
<p className="font-sans text-[16px] text-secondary">{t('connect.address_value')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Highlights List */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
|
||||||
|
className="lg:col-span-4 space-y-8"
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<h2 className="font-serif text-[24px] font-medium text-secondary">{t('walking_distance')}</h2>
|
||||||
|
<div className="h-1 w-12 bg-accent-pink mt-2 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-6">
|
||||||
|
{[
|
||||||
|
{ icon: Waves, title: t('locations.beach.title'), desc: t('locations.beach.desc') },
|
||||||
|
{ icon: ShoppingBasket, title: t('locations.market.title'), desc: t('locations.market.desc') },
|
||||||
|
{ icon: Coffee, title: t('locations.cafe.title'), desc: t('locations.cafe.desc') },
|
||||||
|
{ icon: PersonStanding, title: t('locations.hiking.title'), desc: t('locations.hiking.desc') },
|
||||||
|
].map((item, idx) => (
|
||||||
|
<li key={idx} className="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300 shadow-sm border border-outline-variant/10">
|
||||||
|
<item.icon className="w-6 h-6 text-primary mt-1 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="font-sans font-bold text-[14px] text-on-surface tracking-wide">{item.title}</p>
|
||||||
|
<p className="font-sans text-[16px] text-on-surface-variant mt-1">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
|
||||||
|
{/* Contact Form Card */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE }}
|
||||||
|
className="bg-surface p-8 md:p-12 rounded-[32px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/20"
|
||||||
|
>
|
||||||
|
<h3 className="font-serif text-[32px] font-semibold text-on-surface mb-8">{t('form.title')}</h3>
|
||||||
|
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.name')}</label>
|
||||||
|
<input type="text" placeholder={t('form.name_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.email')}</label>
|
||||||
|
<input type="email" placeholder={t('form.email_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.subject')}</label>
|
||||||
|
<input type="text" placeholder={t('form.subject_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.message')}</label>
|
||||||
|
<textarea rows={4} placeholder={t('form.message_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="w-full bg-accent-pink text-white py-4 rounded-full font-sans font-bold text-[14px] tracking-wider uppercase hover:opacity-90 transition-all duration-300 transform hover:-translate-y-1 shadow-md cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-accent-pink/50 focus-visible:ring-offset-2">
|
||||||
|
{t('form.submit')}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Contact Details & Visual */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
|
||||||
|
className="space-y-12"
|
||||||
|
>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="font-serif text-[32px] font-semibold text-on-surface">{t('connect.title')}</h3>
|
||||||
|
<p className="font-sans text-[18px] text-on-surface-variant">
|
||||||
|
{t('connect.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
|
||||||
|
<Phone className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.phone')}</p>
|
||||||
|
<p className="font-sans text-[16px] text-secondary font-medium">+90 530 510 98 42</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
|
||||||
|
<Mail className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.email')}</p>
|
||||||
|
<p className="font-sans text-[16px] text-secondary font-medium">iletisim@sitarapart.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Decorative Image */}
|
||||||
|
<div className="relative rounded-[24px] overflow-hidden aspect-[4/3] shadow-md border border-outline-variant/20">
|
||||||
|
<Image
|
||||||
|
src="https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80"
|
||||||
|
alt="Akyaka Details"
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw, 50vw"
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+18
-10
@@ -1,24 +1,28 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Literata, Nunito_Sans } from "next/font/google";
|
||||||
import { NextIntlClientProvider } from 'next-intl';
|
import { NextIntlClientProvider } from 'next-intl';
|
||||||
import { getMessages, setRequestLocale } from 'next-intl/server';
|
import { getMessages, setRequestLocale } from 'next-intl/server';
|
||||||
import { notFound } from 'next/navigation';
|
import { notFound } from 'next/navigation';
|
||||||
import { routing } from '@/i18n/routing';
|
import { routing } from '@/i18n/routing';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
import "../globals.css";
|
import "../globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const nunito_sans = Nunito_Sans({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-nunito-sans",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
weight: ["400", "600", "700"],
|
||||||
});
|
});
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
const literata = Literata({
|
||||||
variable: "--font-geist-mono",
|
variable: "--font-literata",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
weight: ["400", "500", "600", "700"],
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Boilerplate App",
|
title: "Sitar Apart & Otel",
|
||||||
description: "Next.js boilerplate with next-intl and NextAuth",
|
description: "Akyaka'nın Huzuru Sizinle!",
|
||||||
};
|
};
|
||||||
|
|
||||||
export function generateStaticParams() {
|
export function generateStaticParams() {
|
||||||
@@ -44,11 +48,15 @@ export default async function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html
|
<html
|
||||||
lang={locale}
|
lang={locale}
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
className={`${nunito_sans.variable} ${literata.variable} h-full antialiased font-sans`}
|
||||||
>
|
>
|
||||||
<body className="min-h-full flex flex-col" suppressHydrationWarning>
|
<body className="min-h-full flex flex-col bg-[#F8FAFC] text-[#0F172A]" suppressHydrationWarning>
|
||||||
<NextIntlClientProvider messages={messages}>
|
<NextIntlClientProvider messages={messages}>
|
||||||
{children}
|
<Header />
|
||||||
|
<main className="flex-1 flex flex-col">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</NextIntlClientProvider>
|
</NextIntlClientProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+185
-38
@@ -1,48 +1,195 @@
|
|||||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
'use client'
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
|
import { useTranslations } from 'next-intl'
|
||||||
const { locale } = await params
|
import { Link } from '@/i18n/routing'
|
||||||
setRequestLocale(locale)
|
import { motion, useReducedMotion } from 'framer-motion'
|
||||||
|
import { MapPin, Wifi, UtensilsCrossed, Waves, Car } from 'lucide-react'
|
||||||
const t = await getTranslations('hero')
|
import Image from 'next/image'
|
||||||
const nav = await getTranslations('nav')
|
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
||||||
const footer = await getTranslations('footer')
|
|
||||||
|
const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const tHero = useTranslations('hero')
|
||||||
|
const tFeatures = useTranslations('features')
|
||||||
|
const tRooms = useTranslations('home_rooms')
|
||||||
|
const prefersReduced = useReducedMotion()
|
||||||
|
|
||||||
|
const heroContainer = prefersReduced ? undefined : {
|
||||||
|
hidden: {},
|
||||||
|
show: { transition: { staggerChildren: 0.12 } }
|
||||||
|
}
|
||||||
|
|
||||||
|
const heroItem = prefersReduced ? undefined : {
|
||||||
|
hidden: { opacity: 0, y: 40, filter: 'blur(8px)' },
|
||||||
|
show: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
filter: 'blur(0px)',
|
||||||
|
transition: { duration: 0.8, ease: EASE }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex-1 flex flex-col min-h-screen">
|
<div className="bg-background text-on-surface">
|
||||||
<header className="px-6 py-4 border-b flex items-center justify-between">
|
{/* Hero Section */}
|
||||||
<div className="font-bold text-xl">Boilerplate</div>
|
<header className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||||
<nav className="space-x-4">
|
<div className="absolute inset-0 z-0">
|
||||||
<Link href="/" className="text-gray-600 hover:text-gray-900">{nav('home')}</Link>
|
<Image
|
||||||
<Link href="/about" className="text-gray-600 hover:text-gray-900">{nav('about')}</Link>
|
src="https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80"
|
||||||
<Link href="/contact" className="text-gray-600 hover:text-gray-900">{nav('contact')}</Link>
|
alt="Sitar Apart Hotel View"
|
||||||
<Link href="/login" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm">Login</Link>
|
fill
|
||||||
</nav>
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-secondary/40 via-secondary/20 to-secondary/60" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={heroContainer}
|
||||||
|
initial="hidden"
|
||||||
|
animate="show"
|
||||||
|
className="relative z-10 text-center px-margin-mobile max-w-3xl"
|
||||||
|
>
|
||||||
|
<motion.h1 variants={heroItem} className="font-serif text-[40px] md:text-[60px] leading-[1.2] font-semibold text-white mb-6 drop-shadow-lg">
|
||||||
|
{tHero('title')}
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p variants={heroItem} className="font-sans text-[18px] text-white/90 mb-10 max-w-xl mx-auto leading-relaxed drop-shadow-md">
|
||||||
|
{tHero('description')}
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div variants={heroItem}>
|
||||||
|
<Link
|
||||||
|
href="/dairelerimiz"
|
||||||
|
className="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-sans font-bold text-[16px] tracking-wider uppercase hover:scale-105 transition-all duration-300 shadow-xl cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-accent-pink"
|
||||||
|
>
|
||||||
|
{tHero('cta')}
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
|
||||||
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="flex-1 flex flex-col items-center justify-center text-center px-4">
|
{/* Amenities Strip */}
|
||||||
<h1 className="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-7xl mb-6">
|
<section className="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-[16px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20">
|
||||||
{t('title')}
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
|
||||||
</h1>
|
{[
|
||||||
<p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto mb-8">
|
{ icon: Waves, label: tFeatures('pool') },
|
||||||
This is a dummy landing page to demonstrate the localization setup using next-intl.
|
{ icon: Wifi, label: tFeatures('wifi') },
|
||||||
</p>
|
{ icon: UtensilsCrossed, label: tFeatures('kitchen') },
|
||||||
<div className="flex space-x-4">
|
{ icon: Car, label: tFeatures('parking') }
|
||||||
<button className="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition">
|
].map((amenity, idx) => (
|
||||||
{t('cta')}
|
<motion.div
|
||||||
</button>
|
key={idx}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<div className="flex bg-gray-100 rounded-full p-1">
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
<Link href="/tr" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'tr' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>TR</Link>
|
viewport={{ once: true, margin: '-50px' }}
|
||||||
<Link href="/en" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'en' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>EN</Link>
|
transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
|
||||||
</div>
|
className="flex flex-col items-center text-center gap-3 group"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary transition-transform duration-300 group-hover:scale-110">
|
||||||
|
<amenity.icon className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<span className="font-sans font-bold text-[14px] text-secondary tracking-wide">{amenity.label}</span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
<footer className="py-6 border-t text-center text-gray-500 text-sm">
|
{/* Apartments Section */}
|
||||||
<p>{footer('rights')} <a href="https://ayris.tech" className="hover:text-blue-600 transition">Created by ayris.tech</a></p>
|
<section className="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
|
||||||
</footer>
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: '-100px' }}
|
||||||
|
transition={{ duration: 0.8, ease: EASE }}
|
||||||
|
className="relative mb-16 text-center"
|
||||||
|
>
|
||||||
|
<div className="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 flex items-center justify-center opacity-15 -rotate-6 pointer-events-none text-accent-pink">
|
||||||
|
<BougainvilleaMotif className="w-24 h-24" />
|
||||||
|
</div>
|
||||||
|
<h2 className="font-serif text-[32px] md:text-[40px] font-semibold text-secondary mb-4 relative z-10">
|
||||||
|
{tRooms('title')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-on-surface-variant text-[16px] max-w-xl mx-auto font-sans">
|
||||||
|
{tRooms('subtitle')}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
id: '1-0-daire',
|
||||||
|
title: tRooms('room_1.title'),
|
||||||
|
desc: tRooms('room_1.desc'),
|
||||||
|
img: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-daire-a',
|
||||||
|
title: tRooms('room_2.title'),
|
||||||
|
desc: tRooms('room_2.desc'),
|
||||||
|
img: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1-1-daire-b',
|
||||||
|
title: tRooms('room_3.title'),
|
||||||
|
desc: tRooms('room_3.desc'),
|
||||||
|
img: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80'
|
||||||
|
}
|
||||||
|
].map((room, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: '-50px' }}
|
||||||
|
transition={{ duration: 0.6, delay: idx * 0.15, ease: EASE }}
|
||||||
|
className="group bg-surface-container-lowest rounded-[24px] overflow-hidden shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2 flex flex-col cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="aspect-[3/2] overflow-hidden relative">
|
||||||
|
<Image
|
||||||
|
src={room.img}
|
||||||
|
alt={room.title}
|
||||||
|
fill
|
||||||
|
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 flex flex-col flex-1 bg-surface-container-lowest relative z-10">
|
||||||
|
<h3 className="font-serif text-[24px] font-medium text-secondary mb-3 group-hover:text-primary transition-colors">{room.title}</h3>
|
||||||
|
<p className="font-sans text-on-surface-variant mb-6 text-[16px] leading-relaxed flex-1">
|
||||||
|
{room.desc}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={`/dairelerimiz/${room.id}`}
|
||||||
|
className="inline-flex items-center text-primary font-sans font-bold text-[16px] border-b-2 border-transparent hover:border-primary transition-colors pb-1 w-fit cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
|
||||||
|
>
|
||||||
|
Detayları İncele <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className="text-center mt-16"
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href="/dairelerimiz"
|
||||||
|
className="inline-flex items-center justify-center px-10 py-4 border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-full font-sans font-bold text-[16px] uppercase tracking-wider transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
|
||||||
|
>
|
||||||
|
Tüm Daireleri Gör
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
+131
-104
@@ -6,115 +6,142 @@
|
|||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--on-background);
|
||||||
--font-sans: var(--font-sans);
|
--font-sans: var(--font-nunito-sans);
|
||||||
|
--font-serif: var(--font-literata);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
--font-heading: var(--font-sans);
|
--font-heading: var(--font-literata);
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
--color-surface: var(--surface);
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
--color-surface-dim: var(--surface-dim);
|
||||||
--color-sidebar-accent: var(--sidebar-accent);
|
--color-surface-bright: var(--surface-bright);
|
||||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
--color-surface-container-lowest: var(--surface-container-lowest);
|
||||||
--color-sidebar-primary: var(--sidebar-primary);
|
--color-surface-container-low: var(--surface-container-low);
|
||||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
--color-surface-container: var(--surface-container);
|
||||||
--color-sidebar: var(--sidebar);
|
--color-surface-container-high: var(--surface-container-high);
|
||||||
--color-chart-5: var(--chart-5);
|
--color-surface-container-highest: var(--surface-container-highest);
|
||||||
--color-chart-4: var(--chart-4);
|
--color-on-surface: var(--on-surface);
|
||||||
--color-chart-3: var(--chart-3);
|
--color-on-surface-variant: var(--on-surface-variant);
|
||||||
--color-chart-2: var(--chart-2);
|
--color-inverse-surface: var(--inverse-surface);
|
||||||
--color-chart-1: var(--chart-1);
|
--color-inverse-on-surface: var(--inverse-on-surface);
|
||||||
--color-ring: var(--ring);
|
|
||||||
--color-input: var(--input);
|
--color-outline: var(--outline);
|
||||||
--color-border: var(--border);
|
--color-outline-variant: var(--outline-variant);
|
||||||
--color-destructive: var(--destructive);
|
|
||||||
--color-accent-foreground: var(--accent-foreground);
|
|
||||||
--color-accent: var(--accent);
|
|
||||||
--color-muted-foreground: var(--muted-foreground);
|
|
||||||
--color-muted: var(--muted);
|
|
||||||
--color-secondary-foreground: var(--secondary-foreground);
|
|
||||||
--color-secondary: var(--secondary);
|
|
||||||
--color-primary-foreground: var(--primary-foreground);
|
|
||||||
--color-primary: var(--primary);
|
--color-primary: var(--primary);
|
||||||
--color-popover-foreground: var(--popover-foreground);
|
--color-on-primary: var(--on-primary);
|
||||||
--color-popover: var(--popover);
|
--color-primary-container: var(--primary-container);
|
||||||
--color-card-foreground: var(--card-foreground);
|
--color-on-primary-container: var(--on-primary-container);
|
||||||
--color-card: var(--card);
|
--color-inverse-primary: var(--inverse-primary);
|
||||||
--radius-sm: calc(var(--radius) * 0.6);
|
|
||||||
--radius-md: calc(var(--radius) * 0.8);
|
--color-secondary: var(--secondary);
|
||||||
--radius-lg: var(--radius);
|
--color-on-secondary: var(--on-secondary);
|
||||||
--radius-xl: calc(var(--radius) * 1.4);
|
--color-secondary-container: var(--secondary-container);
|
||||||
--radius-2xl: calc(var(--radius) * 1.8);
|
--color-on-secondary-container: var(--on-secondary-container);
|
||||||
--radius-3xl: calc(var(--radius) * 2.2);
|
|
||||||
--radius-4xl: calc(var(--radius) * 2.6);
|
--color-tertiary: var(--tertiary);
|
||||||
|
--color-on-tertiary: var(--on-tertiary);
|
||||||
|
--color-tertiary-container: var(--tertiary-container);
|
||||||
|
--color-on-tertiary-container: var(--on-tertiary-container);
|
||||||
|
|
||||||
|
--color-error: var(--error);
|
||||||
|
--color-on-error: var(--on-error);
|
||||||
|
--color-error-container: var(--error-container);
|
||||||
|
--color-on-error-container: var(--on-error-container);
|
||||||
|
|
||||||
|
--color-accent-pink: var(--accent-pink);
|
||||||
|
|
||||||
|
/* shadcn mappings */
|
||||||
|
--color-border: var(--outline-variant);
|
||||||
|
--color-input: var(--outline-variant);
|
||||||
|
--color-ring: var(--primary);
|
||||||
|
--color-muted: var(--surface-container-highest);
|
||||||
|
--color-muted-foreground: var(--on-surface-variant);
|
||||||
|
--color-accent: var(--tertiary);
|
||||||
|
--color-accent-foreground: var(--on-tertiary);
|
||||||
|
--color-card: var(--surface);
|
||||||
|
--color-card-foreground: var(--on-surface);
|
||||||
|
--color-popover: var(--surface);
|
||||||
|
--color-popover-foreground: var(--on-surface);
|
||||||
|
--color-destructive: var(--error);
|
||||||
|
--color-destructive-foreground: var(--on-error);
|
||||||
|
|
||||||
|
--radius-sm: 0.25rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 1rem;
|
||||||
|
--radius-xl: 1.5rem;
|
||||||
|
--radius-2xl: 2rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
--spacing-unit: 8px;
|
||||||
|
--spacing-container-max: 1200px;
|
||||||
|
--spacing-gutter: 24px;
|
||||||
|
--spacing-margin-mobile: 20px;
|
||||||
|
--spacing-section-gap: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: oklch(1 0 0);
|
/* Aegean Coastal Sanctuary Palette */
|
||||||
--foreground: oklch(0.145 0 0);
|
--surface: #f6fafb;
|
||||||
--card: oklch(1 0 0);
|
--surface-dim: #d7dbdc;
|
||||||
--card-foreground: oklch(0.145 0 0);
|
--surface-bright: #f6fafb;
|
||||||
--popover: oklch(1 0 0);
|
--surface-container-lowest: #ffffff;
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--surface-container-low: #f1f4f5;
|
||||||
--primary: oklch(0.205 0 0);
|
--surface-container: #ebeef0;
|
||||||
--primary-foreground: oklch(0.985 0 0);
|
--surface-container-high: #e5e9ea;
|
||||||
--secondary: oklch(0.97 0 0);
|
--surface-container-highest: #dfe3e4;
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
--on-surface: #181c1d;
|
||||||
--muted: oklch(0.97 0 0);
|
--on-surface-variant: #3e494b;
|
||||||
--muted-foreground: oklch(0.556 0 0);
|
--inverse-surface: #2d3132;
|
||||||
--accent: oklch(0.97 0 0);
|
--inverse-on-surface: #eef1f2;
|
||||||
--accent-foreground: oklch(0.205 0 0);
|
--outline: #6e797c;
|
||||||
--destructive: oklch(0.577 0.245 27.325);
|
--outline-variant: #bdc8cb;
|
||||||
--border: oklch(0.922 0 0);
|
--surface-tint: #006877;
|
||||||
--input: oklch(0.922 0 0);
|
--primary: #006574;
|
||||||
--ring: oklch(0.708 0 0);
|
--on-primary: #ffffff;
|
||||||
--chart-1: oklch(0.87 0 0);
|
--primary-container: #088092;
|
||||||
--chart-2: oklch(0.556 0 0);
|
--on-primary-container: #f8fdff;
|
||||||
--chart-3: oklch(0.439 0 0);
|
--inverse-primary: #78d4e7;
|
||||||
--chart-4: oklch(0.371 0 0);
|
--secondary: #705a4c;
|
||||||
--chart-5: oklch(0.269 0 0);
|
--on-secondary: #ffffff;
|
||||||
--radius: 0.625rem;
|
--secondary-container: #f8dac8;
|
||||||
--sidebar: oklch(0.985 0 0);
|
--on-secondary-container: #755e50;
|
||||||
--sidebar-foreground: oklch(0.145 0 0);
|
--tertiary: #8a4c17;
|
||||||
--sidebar-primary: oklch(0.205 0 0);
|
--on-tertiary: #ffffff;
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
--tertiary-container: #a7642e;
|
||||||
--sidebar-accent: oklch(0.97 0 0);
|
--on-tertiary-container: #fffbff;
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--error: #ba1a1a;
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
--on-error: #ffffff;
|
||||||
--sidebar-ring: oklch(0.708 0 0);
|
--error-container: #ffdad6;
|
||||||
|
--on-error-container: #93000a;
|
||||||
|
--background: #f6fafb;
|
||||||
|
--on-background: #181c1d;
|
||||||
|
|
||||||
|
--accent-pink: #d46a8c;
|
||||||
|
|
||||||
|
/* Fluid Typography from Design System */
|
||||||
|
--text-hero: clamp(3rem, 8vw, 8rem);
|
||||||
|
--text-h1: 48px;
|
||||||
|
--text-h2: 32px;
|
||||||
|
--text-h3: 24px;
|
||||||
|
--text-body-lg: 18px;
|
||||||
|
--text-body-md: 16px;
|
||||||
|
--text-label-lg: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* For simplicity, map dark mode to slightly adjusted values if needed, or leave as is if dark mode isn't explicitly defined in design.md */
|
||||||
.dark {
|
.dark {
|
||||||
--background: oklch(0.145 0 0);
|
--background: #181c1d;
|
||||||
--foreground: oklch(0.985 0 0);
|
--on-background: #f6fafb;
|
||||||
--card: oklch(0.205 0 0);
|
--surface: #181c1d;
|
||||||
--card-foreground: oklch(0.985 0 0);
|
--on-surface: #e5e9ea;
|
||||||
--popover: oklch(0.205 0 0);
|
--primary: #78d4e7;
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
--on-primary: #00363f;
|
||||||
--primary: oklch(0.922 0 0);
|
--secondary: #dec1af;
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
--on-secondary: #3e2d22;
|
||||||
--secondary: oklch(0.269 0 0);
|
--tertiary: #ffb782;
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--on-tertiary: #4c2700;
|
||||||
--muted: oklch(0.269 0 0);
|
--outline-variant: #3e494b;
|
||||||
--muted-foreground: oklch(0.708 0 0);
|
|
||||||
--accent: oklch(0.269 0 0);
|
|
||||||
--accent-foreground: oklch(0.985 0 0);
|
|
||||||
--destructive: oklch(0.704 0.191 22.216);
|
|
||||||
--border: oklch(1 0 0 / 10%);
|
|
||||||
--input: oklch(1 0 0 / 15%);
|
|
||||||
--ring: oklch(0.556 0 0);
|
|
||||||
--chart-1: oklch(0.87 0 0);
|
|
||||||
--chart-2: oklch(0.556 0 0);
|
|
||||||
--chart-3: oklch(0.439 0 0);
|
|
||||||
--chart-4: oklch(0.371 0 0);
|
|
||||||
--chart-5: oklch(0.269 0 0);
|
|
||||||
--sidebar: oklch(0.205 0 0);
|
|
||||||
--sidebar-foreground: oklch(0.985 0 0);
|
|
||||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
||||||
--sidebar-accent: oklch(0.269 0 0);
|
|
||||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
||||||
--sidebar-border: oklch(1 0 0 / 10%);
|
|
||||||
--sidebar-ring: oklch(0.556 0 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
@@ -124,7 +151,7 @@
|
|||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
html {
|
h1 { font-size: var(--text-h1); line-height: 1.2; font-weight: 600; }
|
||||||
@apply font-sans;
|
h2 { font-size: var(--text-h2); line-height: 1.3; font-weight: 600; }
|
||||||
}
|
h3 { font-size: var(--text-h3); line-height: 1.4; font-weight: 500; }
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export default function BougainvilleaMotif({ className = "" }: { className?: string }) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
className={`text-accent opacity-80 ${className}`}
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path d="M49.9 22.8c-2.3-5.5-8.5-12.7-16-11.2-13.8 2.8-15.5 19.3-7.5 28.5C32.1 46.5 45 47.9 50 51.5c4.9-3.6 17.9-5 23.6-11.4 8-9.2 6.3-25.7-7.5-28.5-7.5-1.5-13.7 5.7-16 11.2zM49.9 77.2c2.3 5.5 8.5 12.7 16 11.2 13.8-2.8 15.5-19.3 7.5-28.5-5.7-6.4-18.7-7.8-23.6-11.4-4.9 3.6-17.9 5-23.6 11.4-8 9.2-6.3 25.7 7.5 28.5 7.5 1.5 13.7-5.7 16-11.2z" />
|
||||||
|
<path d="M22.8 50.1c-5.5 2.3-12.7 8.5-11.2 16 2.8 13.8 19.3 15.5 28.5 7.5 6.4-5.7 7.8-18.7 11.4-23.6-3.6-4.9-5-17.9-11.4-23.6-9.2-8-25.7-6.3-28.5 7.5-1.5 7.5 5.7 13.7 11.2 16zM77.2 50.1c5.5-2.3 12.7-8.5 11.2-16-2.8-13.8-19.3-15.5-28.5-7.5-6.4 5.7-7.8 18.7-11.4 23.6 3.6 4.9 5 17.9 11.4 23.6 9.2 8 25.7 6.3 28.5-7.5 1.5-7.5-5.7-13.7-11.2-16z" />
|
||||||
|
<circle cx="50" cy="50" r="4" fill="#FFC107" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { Link } from '@/i18n/routing';
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
const t = useTranslations('footer');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="border-t bg-gray-50 mt-auto">
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-4 text-[#2FB6C4]">Sitar Apart & Otel</h3>
|
||||||
|
<p className="text-gray-600 text-sm">
|
||||||
|
{t('about')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-4">{t('contact')}</h3>
|
||||||
|
<p className="text-gray-600 text-sm mb-2">{t('address_1')}</p>
|
||||||
|
<p className="text-gray-600 text-sm mb-2">{t('address_2')}</p>
|
||||||
|
<p className="text-gray-600 text-sm">0 530 510 98 42</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-4">{t('quick_links')}</h3>
|
||||||
|
<ul className="text-gray-600 text-sm space-y-2">
|
||||||
|
<li><Link href="/dairelerimiz" className="hover:text-[#2FB6C4] transition-colors duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] rounded-sm px-1 cursor-pointer inline-block">{t('quick_links_rooms', { defaultMessage: 'Dairelerimiz' })}</Link></li>
|
||||||
|
<li><Link href="/galeri" className="hover:text-[#2FB6C4] transition-colors duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] rounded-sm px-1 cursor-pointer inline-block">{t('quick_links_gallery', { defaultMessage: 'Galeri' })}</Link></li>
|
||||||
|
<li><Link href="/iletisim" className="hover:text-[#2FB6C4] transition-colors duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] rounded-sm px-1 cursor-pointer inline-block">{t('quick_links_contact', { defaultMessage: 'İletişim' })}</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="border-t mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
|
||||||
|
<p>{t('rights')}</p>
|
||||||
|
<p>Created by <a href="https://ayris.tech" className="text-[#2FB6C4] hover:underline transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] rounded-sm px-1 cursor-pointer inline-block" target="_blank" rel="noreferrer">ayris.tech</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Link, usePathname } from '@/i18n/routing'
|
||||||
|
import { useTranslations } from 'next-intl'
|
||||||
|
import LocaleSwitcher from './LocaleSwitcher'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Menu, X } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const [scrolled, setScrolled] = useState(false)
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||||
|
const t = useTranslations('nav')
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
const isHome = pathname === '/'
|
||||||
|
// If we are not on the home page, the header should always look "scrolled"
|
||||||
|
// so the text is visible against the light background.
|
||||||
|
const isScrolledOrInner = scrolled || !isHome
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = () => setScrolled(window.scrollY > 50)
|
||||||
|
window.addEventListener('scroll', handler, { passive: true })
|
||||||
|
// Initialize
|
||||||
|
handler()
|
||||||
|
return () => window.removeEventListener('scroll', handler)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.header
|
||||||
|
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-300',
|
||||||
|
isScrolledOrInner
|
||||||
|
? 'bg-surface/85 backdrop-blur-md border-b border-outline-variant/20 shadow-sm py-4'
|
||||||
|
: 'bg-transparent py-6'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="max-w-container-max mx-auto px-margin-mobile md:px-gutter">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link href="/" className="flex items-center z-50">
|
||||||
|
<span className={cn(
|
||||||
|
"font-serif text-2xl md:text-[32px] font-bold tracking-tight italic transition-colors duration-300",
|
||||||
|
isScrolledOrInner ? "text-secondary" : "text-white"
|
||||||
|
)}>
|
||||||
|
Sitar Apart
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<nav className="hidden md:flex items-center gap-8">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className={cn(
|
||||||
|
"text-[14px] font-bold tracking-wider uppercase transition-colors duration-300 hover:text-tertiary cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm px-1",
|
||||||
|
isScrolledOrInner ? "text-secondary" : "text-white/90"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('home')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/dairelerimiz"
|
||||||
|
className={cn(
|
||||||
|
"text-[14px] font-bold tracking-wider uppercase transition-colors duration-300 hover:text-tertiary cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm px-1",
|
||||||
|
isScrolledOrInner ? "text-secondary" : "text-white/90"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('rooms')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/galeri"
|
||||||
|
className={cn(
|
||||||
|
"text-[14px] font-bold tracking-wider uppercase transition-colors duration-300 hover:text-tertiary cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm px-1",
|
||||||
|
isScrolledOrInner ? "text-secondary" : "text-white/90"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('gallery')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
className={cn(
|
||||||
|
"text-[14px] font-bold tracking-wider uppercase transition-colors duration-300 hover:text-tertiary cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm px-1",
|
||||||
|
isScrolledOrInner ? "text-secondary" : "text-white/90"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('contact')}
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Desktop Actions */}
|
||||||
|
<div className="hidden md:flex items-center gap-4">
|
||||||
|
<LocaleSwitcher scrolled={isScrolledOrInner} />
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
className={cn(
|
||||||
|
"px-6 py-3 rounded-full text-[14px] font-bold tracking-wider uppercase transition-all duration-300 hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
|
||||||
|
isScrolledOrInner
|
||||||
|
? "bg-accent-pink text-white shadow-md"
|
||||||
|
: "bg-accent-pink text-white backdrop-blur-md"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{t('book_now')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
className="md:hidden z-50 p-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md transition-all duration-300"
|
||||||
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
|
>
|
||||||
|
{mobileMenuOpen ? (
|
||||||
|
<X className={cn("w-6 h-6", isScrolledOrInner ? "text-secondary" : "text-white")} />
|
||||||
|
) : (
|
||||||
|
<Menu className={cn("w-6 h-6", isScrolledOrInner ? "text-secondary" : "text-white")} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<div className="md:hidden absolute top-full left-0 right-0 bg-surface border-b border-outline-variant/20 shadow-lg p-6">
|
||||||
|
<nav className="flex flex-col gap-6">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="text-secondary hover:text-tertiary font-bold tracking-wider uppercase text-[14px]"
|
||||||
|
>
|
||||||
|
{t('home')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/dairelerimiz"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="text-secondary hover:text-tertiary font-bold tracking-wider uppercase text-[14px]"
|
||||||
|
>
|
||||||
|
{t('rooms')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/galeri"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="text-secondary hover:text-tertiary font-bold tracking-wider uppercase text-[14px]"
|
||||||
|
>
|
||||||
|
{t('gallery')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="text-secondary hover:text-tertiary font-bold tracking-wider uppercase text-[14px]"
|
||||||
|
>
|
||||||
|
{t('contact')}
|
||||||
|
</Link>
|
||||||
|
<div className="pt-6 border-t border-outline-variant/20 flex flex-col gap-4">
|
||||||
|
<div className="self-end"><LocaleSwitcher scrolled={true} /></div>
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="bg-accent-pink text-white px-6 py-3 rounded-full text-[14px] font-bold tracking-wider uppercase text-center"
|
||||||
|
>
|
||||||
|
{t('book_now')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.header>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useLocale } from 'next-intl'
|
||||||
|
import { useRouter, usePathname } from '@/i18n/routing'
|
||||||
|
import { ChangeEvent } from 'react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Globe } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function LocaleSwitcher({ scrolled }: { scrolled: boolean }) {
|
||||||
|
const locale = useLocale()
|
||||||
|
const router = useRouter()
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const nextLocale = e.target.value
|
||||||
|
router.replace({ pathname }, { locale: nextLocale as any })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<Globe className={cn(
|
||||||
|
"w-4 h-4 absolute left-2 pointer-events-none transition-colors",
|
||||||
|
scrolled ? "text-foreground" : "text-white"
|
||||||
|
)} />
|
||||||
|
<select
|
||||||
|
value={locale}
|
||||||
|
onChange={onSelectChange}
|
||||||
|
className={cn(
|
||||||
|
"appearance-none bg-transparent border-none py-1 pl-8 pr-4 text-sm font-medium focus:ring-0 focus:outline-none cursor-pointer uppercase transition-colors",
|
||||||
|
scrolled ? "text-foreground" : "text-white"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<option value="tr" className="text-foreground">TR</option>
|
||||||
|
<option value="en" className="text-foreground">EN</option>
|
||||||
|
<option value="de" className="text-foreground">DE</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
# Design Brief — Sitar Apart & Otel
|
||||||
|
|
||||||
|
`/design-demo` skill'ine doğrudan girdi olarak verilebilir.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
📐 **Estetik Yön: Warm Coastal** (Warm/Organic + kıyı tonu karışımı — lüks otel değil, samimi butik apart)
|
||||||
|
|
||||||
|
- **Neden:** Broşürdeki gerçek görseller (ahşap balkonlar, yeşillik, deniz-dağ manzarası, havlu üzerine serpiştirilmiş buğunvil çiçekleri) samimi, ev sıcaklığında bir apart havası veriyor. "Luxury/Refined" bu işletme için fazla iddialı — 1+0/1+1 self-catering daireler satıyoruz, 5 yıldızlı otel değil.
|
||||||
|
- **Karakter:** Yuvarlatılmış köşeler, toprak + turkuaz tonları, bol doğal ışık hissi, gerçekçi/samimi fotoğraf ağırlıklı
|
||||||
|
|
||||||
|
🎨 **Palet (OKLCH):**
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--background: oklch(0.97 0.012 80); /* kirli beyaz/krem */
|
||||||
|
--foreground: oklch(0.16 0.01 40); /* koyu ahşap-kahve */
|
||||||
|
--primary: oklch(0.62 0.09 200); /* turkuaz — broşür logosu/bantları */
|
||||||
|
--primary-foreground: oklch(0.98 0.01 80);
|
||||||
|
--secondary: oklch(0.40 0.05 40); /* koyu ahşap balkon tonu */
|
||||||
|
--accent: oklch(0.68 0.14 15); /* buğunvil pembe-mor — vurgu/CTA'da nokta atışı kullan */
|
||||||
|
--muted: oklch(0.92 0.01 80);
|
||||||
|
--muted-foreground: oklch(0.48 0.01 60);
|
||||||
|
--border: oklch(0.87 0.01 80);
|
||||||
|
--radius: 0.75rem; /* organik, yuvarlak */
|
||||||
|
}
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.14 0.01 40);
|
||||||
|
--foreground: oklch(0.95 0.01 80);
|
||||||
|
--primary: oklch(0.68 0.10 200);
|
||||||
|
--border: oklch(0.24 0.01 40);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
🔤 **Font:**
|
||||||
|
- Başlık: **Lora** (700) — sıcak serif, otel siteleri için klişe olmayan seçim
|
||||||
|
- Body: **Nunito** (400/600) — yuvarlak, samimi sans
|
||||||
|
|
||||||
|
**Tipografi tonu:** Büyük başlıklarda serif ağırlık, gövde metinde yumuşak sans. Aşırı ince/keskin geometrik font yok — sıcaklık hissi korunmalı.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Unforgettable Element (Farklılaştırıcı Detay)
|
||||||
|
|
||||||
|
**Buğunvil çiçeği motifi** — broşürdeki gerçek fotoğraflarda havlu/yatak üzerine serpiştirilmiş çiçekler işletmenin kendine has, samimi bir dokunuşu. Bunu jenerik "gradient blob" yerine tekrar eden görsel imza olarak kullan:
|
||||||
|
- Hero'da başlık etrafında ince, elle çizilmiş çiçek/dal SVG detayı (Magic UI değil, custom)
|
||||||
|
- Section divider'larda minimal çiçek ikonu
|
||||||
|
- Daire kartlarında hover'da hafif yaprak/çiçek parçacık animasyonu (abartısız, `prefers-reduced-motion` ile kapanır)
|
||||||
|
|
||||||
|
Bu, "jenerik AI otel sitesi" hissinden kaçınmak için PRD'deki gerçek marka detayına dayanıyor — uydurma değil.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bölüm Bazlı Yönlendirme
|
||||||
|
|
||||||
|
- **Hero:** Broşürdeki balkon/manzara fotoğrafı (veya benzeri) full-bleed, hafif koyu overlay, ortalanmış serif başlık + "Akyaka'nın Huzuru Sizinle" alt başlık + rezervasyon/iletişim CTA. Transparent navbar, scroll'da frosted glass.
|
||||||
|
- **Daire kartları:** 3/2 oranlı büyük görsel, shadcn Carousel, `whileHover scale-[1.02]`, minimal metin (ad + kapasite + "Detaylar" linki)
|
||||||
|
- **Olanaklar (Amenity) bandı:** Ana sayfada ikon + kısa etiket şeklinde yatay şerit (Havuz, Wifi, Özel Mutfak, Balkon)
|
||||||
|
- **Konum/Galeri:** Editorial düzen, bol whitespace, masonry veya kategori tab'lı galeri
|
||||||
|
- **Footer:** Koyu ahşap-kahve arka plan (`--secondary` bazlı), serif logo, adres + telefon + WhatsApp butonu
|
||||||
|
|
||||||
|
## Anti-Klişe Kontrol
|
||||||
|
- `bg-gradient-to-r from-blue-500 to-purple-600` yok — palet OKLCH sabitlerinden
|
||||||
|
- Sistem fontu yok — `next/font` ile Lora + Nunito
|
||||||
|
- Her section `py-20 text-center` tekrarı yok — ritim değişken
|
||||||
|
- Stok "genel otel" görseli yerine broşürdeki gerçek fotoğraflar önceliklendirilir
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Sonraki adım:** Bu brief + `docs/prd.md` ile `/design-demo` çalıştırılabilir.
|
||||||
+187
@@ -0,0 +1,187 @@
|
|||||||
|
# PRD — Sitar Apart & Otel Web Sitesi
|
||||||
|
|
||||||
|
## 1. Proje Özeti
|
||||||
|
|
||||||
|
**İşletme:** Sitar Apart & Otel
|
||||||
|
**Konum:** Akyaka, İnişdibi Cd. No:46, Ula/Muğla
|
||||||
|
**Telefon:** 0 530 510 98 42
|
||||||
|
**Mevcut domain:** www.akyakastarapart.com
|
||||||
|
**Slogan:** "Akyaka'nın Huzuru Sizinle!"
|
||||||
|
|
||||||
|
Akyaka'da, denize 10 dakika yürüme mesafesinde, merkezi konumda (market, pazaryeri, kafelere yakın) faaliyet gösteren self-catering apart otel. Kaynak içerik: işletmenin mevcut tanıtım broşüründen (sitar apart.pdf) çıkarıldı.
|
||||||
|
|
||||||
|
**Site tipi:** Otel / Apart Otel (self-catering)
|
||||||
|
|
||||||
|
## 2. Marka Bilgileri
|
||||||
|
|
||||||
|
- **Logo:** Ev/dalga siluetli çizgi logo, turkuaz (#2FB6C4 civarı) renkte, "SİTAR APART & OTEL" yazısı
|
||||||
|
- **Ana renk:** Turkuaz / camgöbeği (broşürde üst-alt bantlarda kullanılan turkuaz)
|
||||||
|
- **Yardımcı renkler:** Kirli beyaz / krem arka plan, koyu kahve (ahşap balkon detayları)
|
||||||
|
- **Ton:** Sıcak, sade, huzurlu — butik apart otel havası (5 yıldızlı lüks otel değil)
|
||||||
|
|
||||||
|
## 3. Site Haritası (Sayfa Envanteri)
|
||||||
|
|
||||||
|
| Route | Açıklama |
|
||||||
|
|---|---|
|
||||||
|
| `/` | Ana Sayfa — hero, kısa tanıtım, olanaklar özeti, öne çıkan daireler, CTA (rezervasyon/iletişim) |
|
||||||
|
| `/dairelerimiz` | Tüm daire tiplerinin listesi (1+0, 1+1 x2 varyant) |
|
||||||
|
| `/dairelerimiz/[slug]` | Daire detay sayfası — galeri, açıklama, olanaklar, kapasite, rezervasyon formu |
|
||||||
|
| `/galeri` | Fotoğraf galerisi (kategorili: daireler, dış cephe, manzara, balkon) |
|
||||||
|
| `/konum` | Akyaka & ulaşım bilgisi, harita gömme, çevredeki market/pazaryeri/kafeler |
|
||||||
|
| `/iletisim` | İletişim formu, adres, telefon, WhatsApp linki, harita |
|
||||||
|
| `/admin/*` | Yönetim paneli (bkz. Bölüm 8) |
|
||||||
|
|
||||||
|
Not: Bu işletme restoran/spa gibi ek hizmetler sunmuyor (self-catering apart), bu yüzden "Hizmetlerimiz" sayfası yerine olanaklar (amenities) ana sayfada ve daire detayında gösterilir.
|
||||||
|
|
||||||
|
## 4. Dil Seçenekleri
|
||||||
|
|
||||||
|
`tr`, `en`, `de` (Akyaka bölgesi yoğun Alman turist trafiği alıyor, DE desteği önemli)
|
||||||
|
|
||||||
|
→ next-intl locales: `['tr', 'en', 'de']`
|
||||||
|
→ `messages/tr.json`, `en.json`, `de.json`
|
||||||
|
|
||||||
|
## 5. Servisler / Olanaklar (Amenity)
|
||||||
|
|
||||||
|
Broşürden çıkarılan olanaklar:
|
||||||
|
|
||||||
|
- Yüzme Havuzu (Pool)
|
||||||
|
- Wifi
|
||||||
|
- Özel Mutfak Alanı (Private Kitchen Area)
|
||||||
|
- Balkon (fotoğraflarda görünüyor, tüm dairelerde var)
|
||||||
|
- Klima (Akyaka yaz sıcaklarında standart, eklenmesi önerilir — teyit gerekir)
|
||||||
|
|
||||||
|
→ Prisma: `model Amenity { slug, labelTr, labelEn, labelDe, icon }`
|
||||||
|
→ Room modeli üzerinde `amenities String[]` veya `RoomAmenity` join tablosu
|
||||||
|
|
||||||
|
## 6. Daire Tipleri (Room)
|
||||||
|
|
||||||
|
Broşürden 3 daire konfigürasyonu çıkarıldı:
|
||||||
|
|
||||||
|
| Slug | Ad (TR) | Açıklama | Kapasite (tahmini) |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `1-0-daire` | 1+0 Dairemiz | Stüdyo tip, tek yatak, mini mutfak, banyo | 1-2 kişi |
|
||||||
|
| `1-1-daire-a` | 1+1 Dairemiz | Yatak odası + ayrı mutfak köşesi, balkon | 2 kişi |
|
||||||
|
| `1-1-daire-b` | 1+1 Dairemiz (2 Oda) | 2 kişilik ve 1 kişilik olmak üzere 2 oda, balkon | 3-4 kişi |
|
||||||
|
|
||||||
|
Ortak özellikler (broşürden): Denize 10 dk yürüme mesafesi, merkezi konum, market/pazaryeri/kafelere yakınlık.
|
||||||
|
|
||||||
|
→ Prisma:
|
||||||
|
```prisma
|
||||||
|
enum RoomType {
|
||||||
|
STUDIO_1_0
|
||||||
|
SUITE_1_1
|
||||||
|
}
|
||||||
|
|
||||||
|
model Room {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
slug String @unique
|
||||||
|
type RoomType
|
||||||
|
nameTr String
|
||||||
|
nameEn String
|
||||||
|
nameDe String
|
||||||
|
descriptionTr String
|
||||||
|
descriptionEn String
|
||||||
|
descriptionDe String
|
||||||
|
capacity Int
|
||||||
|
price Int? // gecelik fiyat (varsa; broşürde fiyat yok, admin'den girilecek)
|
||||||
|
imageUrl String?
|
||||||
|
images String[]
|
||||||
|
amenities String[]
|
||||||
|
available Boolean @default(true)
|
||||||
|
featured Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
deletedAt DateTime?
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Not:** Broşürde gecelik fiyat bilgisi yok. İşletme sahibinden fiyat teyidi alınmalı; alınana kadar mock data'da placeholder fiyat kullanılacak ve "Fiyat için iletişime geçin" ibaresi eklenmesi önerilir.
|
||||||
|
|
||||||
|
## 7. Rezervasyon Formu Alanları
|
||||||
|
|
||||||
|
Bu bir self-catering apart, online ödeme/anlık onay yok — **rezervasyon talebi** (inquiry) formu olarak kurgulanmalı, otomatik onay değil.
|
||||||
|
|
||||||
|
Alanlar: `checkIn`, `checkOut`, `adults`, `children`, `roomId` (daire tipi seçimi), `fullName`, `email`, `phone`, `message`
|
||||||
|
|
||||||
|
→ Prisma:
|
||||||
|
```prisma
|
||||||
|
enum ReservationStatus {
|
||||||
|
PENDING
|
||||||
|
CONFIRMED
|
||||||
|
CANCELLED
|
||||||
|
}
|
||||||
|
|
||||||
|
model Reservation {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
roomId String
|
||||||
|
room Room @relation(fields: [roomId], references: [id])
|
||||||
|
checkIn DateTime
|
||||||
|
checkOut DateTime
|
||||||
|
adults Int
|
||||||
|
children Int @default(0)
|
||||||
|
fullName String
|
||||||
|
email String
|
||||||
|
phone String
|
||||||
|
message String?
|
||||||
|
status ReservationStatus @default(PENDING)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
deletedAt DateTime?
|
||||||
|
}
|
||||||
|
```
|
||||||
|
→ API: `POST /api/reservations` (public), `GET /api/admin/reservations` (liste)
|
||||||
|
→ Zod: `ReservationSchema`
|
||||||
|
|
||||||
|
## 8. İletişim Formu Alanları
|
||||||
|
|
||||||
|
`fullName`, `email`, `phone`, `message`
|
||||||
|
|
||||||
|
→ Prisma: `model ContactMessage { fullName, email, phone, message, read Boolean @default(false), ... }`
|
||||||
|
→ API: `POST /api/contact` (public), `GET /api/admin/messages`
|
||||||
|
|
||||||
|
## 9. Admin / Yönetim İhtiyaçları
|
||||||
|
|
||||||
|
Standart admin paneli (her projede sabit) + bu proje için:
|
||||||
|
|
||||||
|
- `/admin/rooms` — daire tipleri CRUD (ad, açıklama TR/EN/DE, kapasite, fiyat, olanaklar, görseller)
|
||||||
|
- `/admin/reservations` — rezervasyon talepleri listesi, durum güncelleme (PENDING/CONFIRMED/CANCELLED)
|
||||||
|
- `/admin/gallery` — galeri görselleri CRUD, kategori bazlı
|
||||||
|
- `/admin/messages` — iletişim mesajları listesi, okundu işaretleme
|
||||||
|
- `/admin/amenities` — olanaklar listesi (opsiyonel, sabit liste de olabilir)
|
||||||
|
- Dashboard: toplam daire sayısı, bekleyen rezervasyon sayısı, okunmamış mesaj sayısı
|
||||||
|
|
||||||
|
## 10. Sosyal Medya / 3. Parti Entegrasyonlar
|
||||||
|
|
||||||
|
- **WhatsApp click-to-chat:** `0 530 510 98 42` numarasına yönlenen buton (header + iletişim sayfası)
|
||||||
|
- **Google Maps embed:** Akyaka, İnişdibi Cd. No:46, Ula/Muğla konumu
|
||||||
|
- Instagram/Facebook hesabı broşürde belirtilmemiş — işletme sahibinden teyit alınmalı, varsa footer'a eklenir
|
||||||
|
|
||||||
|
→ Env: `NEXT_PUBLIC_WHATSAPP_NUMBER`, `NEXT_PUBLIC_MAPS_EMBED_URL`
|
||||||
|
|
||||||
|
## 11. Teknik Notlar
|
||||||
|
|
||||||
|
- Mevcut domain `www.akyakastarapart.com` — yeni site bu domain üzerine yayınlanacak (Coolify deploy sürecinde teyit edilmeli)
|
||||||
|
- Broşürdeki fotoğraflar (3 sayfa, düşük-orta çözünürlük) başlangıç mock görseli olarak kullanılabilir; ancak production için işletmeden yüksek çözünürlüklü orijinal fotoğraf talep edilmesi önerilir
|
||||||
|
- Fiyat bilgisi eksik — admin panelinden sonradan girilecek şekilde `price` alanı nullable
|
||||||
|
- Tek işletme, çoklu şube yok — `Location`/`Branch` modeline gerek yok
|
||||||
|
|
||||||
|
## 12. Rebranding / Öncelik Sırası (Todo)
|
||||||
|
|
||||||
|
1. Ana Sayfa + Daireler listesi + Daire detay (temel akış)
|
||||||
|
2. Rezervasyon talep formu + admin onay ekranı
|
||||||
|
3. Galeri sayfası
|
||||||
|
4. İletişim sayfası + WhatsApp/Harita entegrasyonu
|
||||||
|
5. Admin panel (rooms, reservations, gallery, messages)
|
||||||
|
6. TR/EN/DE içerik doldurma
|
||||||
|
7. Openinary görsel yükleme entegrasyonu
|
||||||
|
8. Coolify deploy (bkz. `/coolify-deploy` skill)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## PRD'den Çıkarılanlar (Özet)
|
||||||
|
|
||||||
|
- **Modeller:** Room, Reservation, Amenity, Gallery, ContactMessage
|
||||||
|
- **Lokaller:** tr, en, de
|
||||||
|
- **Admin sayfaları:** rooms, reservations, gallery, messages, amenities
|
||||||
|
- **Özel route'lar:** `/api/reservations` (public POST), `/api/contact` (public POST)
|
||||||
|
- **Eksik / teyit gereken bilgiler:** gecelik fiyatlar, sosyal medya hesapları, klima olup olmadığı, yüksek çözünürlüklü görseller
|
||||||
@@ -0,0 +1,175 @@
|
|||||||
|
---
|
||||||
|
name: Aegean Coastal Sanctuary
|
||||||
|
colors:
|
||||||
|
surface: '#f6fafb'
|
||||||
|
surface-dim: '#d7dbdc'
|
||||||
|
surface-bright: '#f6fafb'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f1f4f5'
|
||||||
|
surface-container: '#ebeef0'
|
||||||
|
surface-container-high: '#e5e9ea'
|
||||||
|
surface-container-highest: '#dfe3e4'
|
||||||
|
on-surface: '#181c1d'
|
||||||
|
on-surface-variant: '#3e494b'
|
||||||
|
inverse-surface: '#2d3132'
|
||||||
|
inverse-on-surface: '#eef1f2'
|
||||||
|
outline: '#6e797c'
|
||||||
|
outline-variant: '#bdc8cb'
|
||||||
|
surface-tint: '#006877'
|
||||||
|
primary: '#006574'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#088092'
|
||||||
|
on-primary-container: '#f8fdff'
|
||||||
|
inverse-primary: '#78d4e7'
|
||||||
|
secondary: '#705a4c'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#f8dac8'
|
||||||
|
on-secondary-container: '#755e50'
|
||||||
|
tertiary: '#8a4c17'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#a7642e'
|
||||||
|
on-tertiary-container: '#fffbff'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#a3eeff'
|
||||||
|
primary-fixed-dim: '#78d4e7'
|
||||||
|
on-primary-fixed: '#001f25'
|
||||||
|
on-primary-fixed-variant: '#004e5a'
|
||||||
|
secondary-fixed: '#fbddca'
|
||||||
|
secondary-fixed-dim: '#dec1af'
|
||||||
|
on-secondary-fixed: '#28180d'
|
||||||
|
on-secondary-fixed-variant: '#574335'
|
||||||
|
tertiary-fixed: '#ffdcc5'
|
||||||
|
tertiary-fixed-dim: '#ffb782'
|
||||||
|
on-tertiary-fixed: '#301400'
|
||||||
|
on-tertiary-fixed-variant: '#703802'
|
||||||
|
background: '#f6fafb'
|
||||||
|
on-background: '#181c1d'
|
||||||
|
surface-variant: '#dfe3e4'
|
||||||
|
typography:
|
||||||
|
headline-xl:
|
||||||
|
fontFamily: Literata
|
||||||
|
fontSize: 48px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
headline-lg:
|
||||||
|
fontFamily: Literata
|
||||||
|
fontSize: 32px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Literata
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '500'
|
||||||
|
lineHeight: '1.4'
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Nunito Sans
|
||||||
|
fontSize: 18px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
body-md:
|
||||||
|
fontFamily: Nunito Sans
|
||||||
|
fontSize: 16px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
label-lg:
|
||||||
|
fontFamily: Nunito Sans
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: 0.05em
|
||||||
|
headline-lg-mobile:
|
||||||
|
fontFamily: Literata
|
||||||
|
fontSize: 28px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
rounded:
|
||||||
|
sm: 0.25rem
|
||||||
|
DEFAULT: 0.5rem
|
||||||
|
md: 0.75rem
|
||||||
|
lg: 1rem
|
||||||
|
xl: 1.5rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
unit: 8px
|
||||||
|
container-max: 1200px
|
||||||
|
gutter: 24px
|
||||||
|
margin-mobile: 20px
|
||||||
|
section-gap: 80px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
|
||||||
|
This design system embodies the "Warm Coastal" aesthetic, specifically tailored for the slow-living atmosphere of Akyaka. It departs from sterile corporate luxury in favor of an **Authentic & Boutique** personality. The visual language is tactile and inviting, evoking the feeling of sun-drenched stone walls, turquoise waters, and the iconic bougainvillea of the Turkish coast.
|
||||||
|
|
||||||
|
The style leverages **soft minimalism** paired with **organic accents**. Large, evocative photography of the Aegean landscape is grounded by generous whitespace and soft, rounded geometry. A signature line-art motif of a bougainvillea branch is used sparingly to anchor section headers, adding a human, illustrative touch to the digital interface.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
The palette is derived directly from the Akyaka landscape:
|
||||||
|
- **Primary (Turquoise):** Represents the Azmak River and the Aegean sea. Used for primary branding and navigational elements.
|
||||||
|
- **Secondary (Dark Wood):** Inspired by the traditional Ula-style architecture and woodwork. Used for deep contrast, footers, and high-priority text.
|
||||||
|
- **Accent (Bougainvillea Pink):** Reserved specifically for call-to-action buttons and highlights to ensure they pop against the neutral base.
|
||||||
|
- **Background (Cream):** An off-white, paper-like base that feels warmer and more organic than pure white.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
The typographic hierarchy balances a literary, authoritative serif with a friendly, accessible sans-serif.
|
||||||
|
|
||||||
|
- **Headlines:** Use **Literata** (or Lora) to convey a sense of history and boutique quality. Larger headlines should use tighter tracking, while smaller subheads benefit from more breathing room.
|
||||||
|
- **Body & UI:** Use **Nunito Sans**. Its rounded terminals mirror the "soft" shape language of the UI and ensure high readability for room descriptions and booking details.
|
||||||
|
- **Accents:** Use all-caps labels with slight letter spacing for categories or "small print" to maintain a clean, organized appearance.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
|
||||||
|
This design system uses a **Fluid-Fixed hybrid grid**. On desktop, content is contained within a 1200px max-width container to maintain focus, while background elements can bleed to the edges.
|
||||||
|
|
||||||
|
- **Rhythm:** A base 8px unit dictates all spacing.
|
||||||
|
- **Sectioning:** Large gaps (80px-120px) are used between major content blocks to evoke a sense of calm and "unhurried" browsing.
|
||||||
|
- **Mobile:** Margins shrink to 20px, and vertical spacing is compressed slightly to 64px between sections to maintain momentum.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**.
|
||||||
|
|
||||||
|
- **Surfaces:** Cards and floating elements sit on the Cream background with extremely soft, diffused shadows (Blur: 32px, Opacity: 4%, Color: Secondary Brown).
|
||||||
|
- **Glassmorphism:** The primary navigation bar uses a frosted glass effect (Backdrop Blur: 12px) with a semi-transparent cream tint (85% opacity). This allows the colors of the hero imagery to bleed through subtly.
|
||||||
|
- **Depth Levels:**
|
||||||
|
- Level 0: Background (#F7F4EF).
|
||||||
|
- Level 1: Flat cards with a 1px #E5E0D5 border.
|
||||||
|
- Level 2: Raised elements (interactive cards) with the ambient shadow.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
The shape language is consistently "Soft-Organic."
|
||||||
|
|
||||||
|
- **Corner Radii:** Standard components (buttons, input fields) use 12px. Larger components (cards, image containers) use 24px.
|
||||||
|
- **Images:** Always utilize the `rounded-xl` (24px) radius to soften the edges of the photography, making the imagery feel more like "windows" into the hotel.
|
||||||
|
- **Icons:** Use rounded icon sets (e.g., Feather or Lucide) with a 2px stroke weight to match the body typography weight.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Navbar
|
||||||
|
The navbar is a fixed-top element with a frosted glass background. The logo (Sitar) is placed on the left, with primary navigation links in the center (Secondary Brown) and a "Book Now" CTA in the Accent Pink on the right.
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
- **Primary:** Filled Accent Pink (#D46A8C) with Cream text. 24px rounded corners. Minimum height 48px.
|
||||||
|
- **Secondary:** Outlined Primary Teal (#3A9CAE) with 1.5px border.
|
||||||
|
- **Text:** Underlined Serif (Literata) for a sophisticated "Read More" feel.
|
||||||
|
|
||||||
|
### Cards
|
||||||
|
Room and amenity cards use a vertical stack:
|
||||||
|
1. **Image:** 3:2 aspect ratio with a 24px corner radius.
|
||||||
|
2. **Content:** Cream background, 12px padding.
|
||||||
|
3. **Typography:** Headline-MD for titles, Body-MD for descriptions.
|
||||||
|
|
||||||
|
### Input Fields
|
||||||
|
Soft cream background (#F2EEE5) with no border until focused. On focus, a 1.5px Primary Teal border appears. Label text sits above the field in Nunito Sans Bold (12px).
|
||||||
|
|
||||||
|
### Footer
|
||||||
|
A high-contrast block using the Dark Wood Brown (#3D2B1F). Text is rendered in Cream (#F7F4EF) at 80% opacity for secondary info, and 100% for links and titles.
|
||||||
|
|
||||||
|
### Motifs
|
||||||
|
Small SVG line-art bougainvillea branches should be placed at a -5 degree angle above H2 section headers, slightly overlapping the text to create a hand-crafted, scrapbook feel.
|
||||||
@@ -0,0 +1,349 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="light" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Sitar Apart & Otel - 1+1 Premium Apartment</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:wght@300;400;600;700;800&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": {
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-tertiary-container": "#fffbff",
|
||||||
|
"on-secondary-fixed": "#28180d",
|
||||||
|
"on-secondary-fixed-variant": "#574335",
|
||||||
|
"on-primary-fixed": "#001f25",
|
||||||
|
"surface-dim": "#d7dbdc",
|
||||||
|
"secondary-container": "#f8dac8",
|
||||||
|
"on-tertiary-fixed": "#301400",
|
||||||
|
"tertiary-container": "#a7642e",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed": "#a3eeff",
|
||||||
|
"inverse-on-surface": "#eef1f2",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-variant": "#dfe3e4",
|
||||||
|
"surface-bright": "#f6fafb",
|
||||||
|
"surface": "#f6fafb",
|
||||||
|
"on-primary-container": "#f8fdff",
|
||||||
|
"on-secondary-container": "#755e50",
|
||||||
|
"surface-container": "#ebeef0",
|
||||||
|
"on-surface-variant": "#3e494b",
|
||||||
|
"primary-fixed-dim": "#78d4e7",
|
||||||
|
"secondary-fixed": "#fbddca",
|
||||||
|
"outline": "#6e797c",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#dec1af",
|
||||||
|
"outline-variant": "#bdc8cb",
|
||||||
|
"surface-container-highest": "#dfe3e4",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-container-low": "#f1f4f5",
|
||||||
|
"on-surface": "#181c1d",
|
||||||
|
"tertiary-fixed-dim": "#ffb782",
|
||||||
|
"primary": "#006574",
|
||||||
|
"inverse-surface": "#2d3132",
|
||||||
|
"tertiary-fixed": "#ffdcc5",
|
||||||
|
"on-primary-fixed-variant": "#004e5a",
|
||||||
|
"background": "#f6fafb",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-background": "#181c1d",
|
||||||
|
"surface-tint": "#006877",
|
||||||
|
"on-tertiary-fixed-variant": "#703802",
|
||||||
|
"inverse-primary": "#78d4e7",
|
||||||
|
"surface-container-high": "#e5e9ea",
|
||||||
|
"secondary": "#705a4c",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"tertiary": "#8a4c17",
|
||||||
|
"primary-container": "#088092",
|
||||||
|
"accent-pink": "#D46A8C"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "12px",
|
||||||
|
"2xl": "24px",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1200px",
|
||||||
|
"margin-mobile": "20px",
|
||||||
|
"section-gap": "80px",
|
||||||
|
"unit": "8px",
|
||||||
|
"gutter": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-lg": ["Literata"],
|
||||||
|
"label-lg": ["Nunito Sans"],
|
||||||
|
"headline-xl": ["Literata"],
|
||||||
|
"headline-md": ["Literata"],
|
||||||
|
"body-lg": ["Nunito Sans"],
|
||||||
|
"body-md": ["Nunito Sans"],
|
||||||
|
"headline-lg-mobile": ["Literata"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||||
|
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||||
|
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||||
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #F7F4EF; /* Overriding with brand background */
|
||||||
|
color: #3D2B1F;
|
||||||
|
}
|
||||||
|
.bougainvillea-motif {
|
||||||
|
position: absolute;
|
||||||
|
top: -24px;
|
||||||
|
left: -12px;
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.glass-nav {
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
background-color: rgba(247, 244, 239, 0.85);
|
||||||
|
}
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.04);
|
||||||
|
}
|
||||||
|
.carousel-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-md text-secondary">
|
||||||
|
<!-- TopNavBar Navigation Shell -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 glass-nav border-b border-outline-variant/20 shadow-sm">
|
||||||
|
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||||
|
<div class="font-headline-md text-headline-md text-secondary italic">Sitar Apart & Otel</div>
|
||||||
|
<div class="hidden md:flex gap-8 items-center">
|
||||||
|
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Apartments</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||||
|
</div>
|
||||||
|
<button class="bg-accent-pink text-on-tertiary px-6 py-2.5 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">
|
||||||
|
Book Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="pt-24 pb-section-gap px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<!-- Hero Section / Breadcrumb -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<nav class="flex text-on-surface-variant font-label-lg text-[12px] uppercase tracking-widest gap-2 mb-4">
|
||||||
|
<a class="hover:text-primary transition-colors" href="#">Home</a>
|
||||||
|
<span>/</span>
|
||||||
|
<a class="hover:text-primary transition-colors" href="#">Apartments</a>
|
||||||
|
<span>/</span>
|
||||||
|
<span class="text-secondary font-bold">1+1 Premium Apartment</span>
|
||||||
|
</nav>
|
||||||
|
<div class="relative inline-block">
|
||||||
|
<!-- Motif Asset Simulation -->
|
||||||
|
<svg class="bougainvillea-motif w-16 h-16" fill="none" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 80C20 80 40 40 80 20M30 60C30 60 50 70 70 50" stroke="#D46A8C" stroke-linecap="round" stroke-width="2"></path>
|
||||||
|
<circle cx="80" cy="20" fill="#D46A8C" r="4"></circle>
|
||||||
|
<circle cx="70" cy="50" fill="#D46A8C" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
<h1 class="font-headline-xl text-headline-xl md:text-headline-xl text-secondary mt-2">1+1 Premium Apartment</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Layout Grid -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
|
<!-- Content Column -->
|
||||||
|
<div class="lg:col-span-2 space-y-12">
|
||||||
|
<!-- Image Carousel Placeholder -->
|
||||||
|
<section class="relative group">
|
||||||
|
<div class="carousel-container flex overflow-x-auto snap-x snap-mandatory gap-4 pb-4 scroll-smooth">
|
||||||
|
<div class="flex-shrink-0 w-full aspect-[16/9] snap-center rounded-2xl overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A sun-drenched balcony of a boutique Mediterranean apartment in Akyaka. The scene features a small cafe table with a white ceramic coffee cup and an open book. Lush vibrant pink bougainvillea spills over the dark wood railing. In the background, calm turquoise sea waters meet a densely forested green coastline under golden hour sunlight, creating a warm, tranquil, and authentic coastal living atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAwFWBl0TtXeuhwpDeP5XxCX-pRxKOvatQRMjYNDW5Qs_BEXSictnCPy-X218OaW5yq0COlgrggDtcTA2zm7YpODg3vJ7DCn-ZLuaaJmE1ON7MBvvAP2xsSBjd_-K9FXWTclgJsyakeW5BGSfdiVIBejX5ZARSPZgl6xf4Tc-d5bBEEkrXLzDXhvJ4kvH-SkXthN9y50NRk_iW0bJKWmH8nCwV1_bKypjy78Wrm2crlMdzvtU2JWORPDb5PNVE4xfZsz4RztzRY9M4"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0 w-full aspect-[16/9] snap-center rounded-2xl overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A warm, minimalist interior of a 1+1 boutique apartment. The living area features soft cream-colored stone walls and natural light flooding through large windows. A contemporary linen sofa in a sandy tone sits on a textured rug. Subtle teal accents appear in throw pillows, while a small sprig of bougainvillea rests in a handmade clay vase on a dark wood coffee table. The mood is airy, clean, and unhurried." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCrZkzMyjNJCiAJfvWFrNA4Wjhl3RZVQjjobhbQhHQYCnbMRt4uzsVyFKjFo4IGRRq6a-iFoxu-SFcsuLMpx_fNZsd5QWPtMdPEqCH6dIUwcys5UZFk45wqlUGS4wKKOcoviXBMMbo0OZFHQImKWsmTd6gHdfZlWB5hUlvWlxBRK6RmTljPwGdRqUtZJuZ7oH7EUL3FJZ-Fr4prhjBo-CFcRqCjU2_VJ8KqXMZJ6Q_DqeDgxGbeV5AwHXA8rDDiZ3BtFX7AsQBLBd0"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center gap-2 mt-4">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-accent-pink"></span>
|
||||||
|
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||||
|
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Description -->
|
||||||
|
<section class="space-y-6">
|
||||||
|
<div class="flex items-center gap-6 py-4 border-y border-outline-variant/30">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="groups">groups</span>
|
||||||
|
<span class="font-label-lg text-secondary">Up to 4 Guests</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="square_foot">square_foot</span>
|
||||||
|
<span class="font-label-lg text-secondary">55 m²</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="bed">bed</span>
|
||||||
|
<span class="font-label-lg text-secondary">1 Bedroom</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-secondary">A Sanctuary of Slow Living</h2>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||||
|
Our 1+1 Premium Apartment is designed for those who seek the authentic Akyaka experience. Combining traditional Aegean architecture with soft modern minimalism, this space offers a private balcony overlooking the forest-meets-sea horizon. The interiors are crafted with natural materials—exposed stone, cedarwood, and linen—to create a tactile, grounding atmosphere.
|
||||||
|
</p>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
||||||
|
Whether you are waking up to the scent of salt air or spending an afternoon reading under the bougainvillea, every detail in this apartment invites you to slow down and embrace the rhythm of the Turkish coast.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<!-- Amenities -->
|
||||||
|
<section class="space-y-8">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-secondary">Apartment Amenities</h3>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="wifi">wifi</span>
|
||||||
|
<span class="font-body-md">High-speed Wi-Fi</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="ac_unit">ac_unit</span>
|
||||||
|
<span class="font-body-md">Air Conditioning</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="kitchen">kitchen</span>
|
||||||
|
<span class="font-body-md">Fully Equipped Kitchen</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="local_laundry_service">local_laundry_service</span>
|
||||||
|
<span class="font-body-md">Washing Machine</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="coffee_maker">coffee_maker</span>
|
||||||
|
<span class="font-body-md">Espresso Machine</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="material-symbols-outlined text-primary" data-icon="balcony">balcony</span>
|
||||||
|
<span class="font-body-md">Private Balcony</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<!-- Inquiry Sidebar -->
|
||||||
|
<aside class="relative">
|
||||||
|
<div class="sticky top-28 bg-surface-container-lowest p-8 rounded-2xl border border-outline-variant/30 custom-shadow space-y-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-secondary">Inquiry Form</h3>
|
||||||
|
<p class="font-body-md text-on-surface-variant">Check availability for your stay.</p>
|
||||||
|
</div>
|
||||||
|
<form action="#" class="space-y-4">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Check-In</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" type="date"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Check-Out</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" type="date"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Adults</label>
|
||||||
|
<select class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md">
|
||||||
|
<option>1 Adult</option>
|
||||||
|
<option selected="">2 Adults</option>
|
||||||
|
<option>3 Adults</option>
|
||||||
|
<option>4 Adults</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Children</label>
|
||||||
|
<select class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md">
|
||||||
|
<option>None</option>
|
||||||
|
<option>1 Child</option>
|
||||||
|
<option>2 Children</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Full Name</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="John Doe" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Email Address</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="hello@example.com" type="email"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Phone Number</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="+90 ..." type="tel"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<label class="block font-label-lg text-[12px] text-primary uppercase">Your Message</label>
|
||||||
|
<textarea class="w-full bg-[#F2EEE5] border-none rounded-xl py-3 px-4 focus:ring-2 focus:ring-primary/20 focus:bg-white transition-all text-body-md" placeholder="Tell us about your needs..." rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-accent-pink text-white font-label-lg text-label-lg py-4 rounded-2xl hover:opacity-90 transition-opacity shadow-lg shadow-accent-pink/20" type="submit">
|
||||||
|
Submit Inquiry
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div class="pt-4 text-center">
|
||||||
|
<a class="font-headline-md text-primary italic border-b border-primary/30 pb-0.5 hover:border-primary transition-all" href="#">WhatsApp Support</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer Shell -->
|
||||||
|
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</div>
|
||||||
|
<p class="text-surface-container-low/80 font-body-md">© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<h4 class="text-surface-container-lowest font-headline-md">Explore</h4>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Apartments</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Location</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">Contact Us</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all font-label-lg" href="#">WhatsApp Support</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h4 class="text-surface-container-lowest font-headline-md">Follow Us</h4>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<span class="material-symbols-outlined text-surface-container-lowest cursor-pointer hover:opacity-70" data-icon="photo_camera">photo_camera</span>
|
||||||
|
<span class="material-symbols-outlined text-surface-container-lowest cursor-pointer hover:opacity-70" data-icon="share">share</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-surface-container-low/80 text-sm">Experience the magic of Akyaka's architecture and nature.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Simple micro-interaction for the carousel
|
||||||
|
const carousel = document.querySelector('.carousel-container');
|
||||||
|
const dots = document.querySelectorAll('.flex.justify-center.gap-2.mt-4 span');
|
||||||
|
|
||||||
|
carousel.addEventListener('scroll', () => {
|
||||||
|
const scrollPos = carousel.scrollLeft;
|
||||||
|
const width = carousel.offsetWidth;
|
||||||
|
const index = Math.round(scrollPos / width);
|
||||||
|
|
||||||
|
dots.forEach((dot, i) => {
|
||||||
|
if(i === index) {
|
||||||
|
dot.classList.add('bg-accent-pink');
|
||||||
|
dot.classList.remove('bg-outline-variant');
|
||||||
|
} else {
|
||||||
|
dot.classList.remove('bg-accent-pink');
|
||||||
|
dot.classList.add('bg-outline-variant');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
@@ -0,0 +1,339 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="scroll-smooth" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Gallery | Sitar Apart & Otel Akyaka</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Nunito+Sans:wght@400;600;700;800&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": {
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-tertiary-container": "#fffbff",
|
||||||
|
"on-secondary-fixed": "#28180d",
|
||||||
|
"on-secondary-fixed-variant": "#574335",
|
||||||
|
"on-primary-fixed": "#001f25",
|
||||||
|
"surface-dim": "#d7dbdc",
|
||||||
|
"secondary-container": "#f8dac8",
|
||||||
|
"on-tertiary-fixed": "#301400",
|
||||||
|
"tertiary-container": "#a7642e",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed": "#a3eeff",
|
||||||
|
"inverse-on-surface": "#eef1f2",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-variant": "#dfe3e4",
|
||||||
|
"surface-bright": "#f6fafb",
|
||||||
|
"surface": "#f6fafb",
|
||||||
|
"on-primary-container": "#f8fdff",
|
||||||
|
"on-secondary-container": "#755e50",
|
||||||
|
"surface-container": "#ebeef0",
|
||||||
|
"on-surface-variant": "#3e494b",
|
||||||
|
"primary-fixed-dim": "#78d4e7",
|
||||||
|
"secondary-fixed": "#fbddca",
|
||||||
|
"outline": "#6e797c",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#dec1af",
|
||||||
|
"outline-variant": "#bdc8cb",
|
||||||
|
"surface-container-highest": "#dfe3e4",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-container-low": "#f1f4f5",
|
||||||
|
"on-surface": "#181c1d",
|
||||||
|
"tertiary-fixed-dim": "#ffb782",
|
||||||
|
"primary": "#006574",
|
||||||
|
"inverse-surface": "#2d3132",
|
||||||
|
"tertiary-fixed": "#ffdcc5",
|
||||||
|
"on-primary-fixed-variant": "#004e5a",
|
||||||
|
"background": "#f6fafb",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-background": "#181c1d",
|
||||||
|
"surface-tint": "#006877",
|
||||||
|
"on-tertiary-fixed-variant": "#703802",
|
||||||
|
"inverse-primary": "#78d4e7",
|
||||||
|
"surface-container-high": "#e5e9ea",
|
||||||
|
"secondary": "#705a4c",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"tertiary": "#8a4c17",
|
||||||
|
"primary-container": "#088092"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1200px",
|
||||||
|
"margin-mobile": "20px",
|
||||||
|
"section-gap": "80px",
|
||||||
|
"unit": "8px",
|
||||||
|
"gutter": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-lg": ["Literata"],
|
||||||
|
"label-lg": ["Nunito Sans"],
|
||||||
|
"headline-xl": ["Literata"],
|
||||||
|
"headline-md": ["Literata"],
|
||||||
|
"body-lg": ["Nunito Sans"],
|
||||||
|
"body-md": ["Nunito Sans"],
|
||||||
|
"headline-lg-mobile": ["Literata"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||||
|
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||||
|
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||||
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #f6fafb; /* surface / cream background */
|
||||||
|
color: #181c1d; /* on-surface */
|
||||||
|
}
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 1;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.masonry-item {
|
||||||
|
break-inside: avoid;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.bougainvillea-motif {
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
position: absolute;
|
||||||
|
top: -24px;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.glass-nav {
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-md text-body-md antialiased overflow-x-hidden">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 bg-surface/85 backdrop-blur-xl border-b border-outline-variant/20 shadow-sm transition-all duration-300 ease-in-out">
|
||||||
|
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||||
|
<a class="font-headline-md text-headline-md text-secondary italic" href="#">Sitar Apart & Otel</a>
|
||||||
|
<!-- Desktop Links -->
|
||||||
|
<div class="hidden md:flex gap-8 items-center">
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Apartments</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Gallery</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||||
|
</div>
|
||||||
|
<button class="bg-[#D46A8C] text-surface-container-lowest px-6 py-2 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">
|
||||||
|
Book Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="pt-32 pb-section-gap px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<header class="relative mb-16 max-w-2xl">
|
||||||
|
<div class="bougainvillea-motif">
|
||||||
|
<svg fill="none" height="60" viewbox="0 0 100 100" width="60" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 90C30 70 50 85 90 10" stroke="#D46A8C" stroke-linecap="round" stroke-width="2"></path>
|
||||||
|
<path d="M40 60C35 55 25 58 20 65C15 72 20 80 28 78C36 76 42 68 40 60Z" fill="#D46A8C" fill-opacity="0.2" stroke="#D46A8C" stroke-width="1"></path>
|
||||||
|
<path d="M65 35C60 30 50 33 45 40C40 47 45 55 53 53C61 51 67 43 65 35Z" fill="#D46A8C" fill-opacity="0.2" stroke="#D46A8C" stroke-width="1"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-headline-xl text-headline-xl text-secondary mb-4">Slow Living Captured</h1>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
||||||
|
Explore the tranquil atmosphere of Akyaka through our lens. From sun-drenched balconies to our boutique interiors, every corner of Sitar is designed for authentic comfort.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<!-- Filter Bar -->
|
||||||
|
<div class="flex flex-wrap items-center gap-4 mb-12" id="gallery-filters">
|
||||||
|
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-primary text-primary transition-all active-filter bg-primary/10" data-filter="all">All</button>
|
||||||
|
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="rooms">Rooms</button>
|
||||||
|
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="exterior">Exterior</button>
|
||||||
|
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="view">View</button>
|
||||||
|
<button class="filter-btn px-6 py-2 rounded-full font-label-lg text-label-lg border-2 border-transparent text-secondary hover:border-primary/30 transition-all" data-filter="balcony">Balcony</button>
|
||||||
|
</div>
|
||||||
|
<!-- Masonry Gallery -->
|
||||||
|
<div class="masonry-grid" id="gallery-grid">
|
||||||
|
<!-- Item 1: Rooms -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="rooms">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A serene boutique hotel room in Akyaka with white linens, soft morning light streaming through wooden shutters, and a palette of cream, teal, and earthy brown tones. The aesthetic is warm coastal minimalism with high-end textures and sun-drenched stone walls in the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1aEElwzEj1OO6C3NKAnkKmGutSgmyOrciZa_kG2hHFEF9S5G1ENVfI6-yV86TEQzx5K-RrCupJrV2LmAgEqcdhVQob36ZGwcOUTyZCnr_iev7VxDcFzkHCeuSSjDVExhSxJvlsDaic4p03Z71vM6uD7Iw0bdJXpEjSuC1u6creV0oNXpb3hACVc_uKDQvmoID8jhzf2AGuzuOtGYZ9ejE-hbi4j2w9pMVdfQn0qYiKZGqAphOf2oUtWdeF7nniTh5mIWXjyjRx6k"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">Boutique Interior</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 2: Exterior -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="exterior">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="The exterior of a traditional Muğla-style stone house in Akyaka, featuring ornate wooden balconies and vibrant pink bougainvillea draping over the walls. The scene is bathed in golden hour sunlight, highlighting the turquoise accents and the warm, inviting boutique atmosphere of the property." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD4BZHDKlEkRMvcPb0tSot5HHJuWr7_Pj_qkr7w7iEamd1YMRcSzSYok-2dc6Mo9t3ahx32kzrgB0C3ofVzn5KtlHMMqC8MXB_ghvMahdP4TfCJhDF1uRC4PrDY2G-gCNpTcmRPv_M8h5ZwbsWUDyMud-x-IZQxlltB-AfCeSDrEbjKVh7wVa3qo3GH0i4_1iECtiebc9GrwcZIjsbbvJSm5eneJXZBqwlIoxhFWGimT7YcZc6VF0j6nfBpP3LZq1VFgFkgqaDZgc"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">The Architecture</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 3: View -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="view">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A panoramic view of the Azmak River meeting the Aegean sea in Akyaka, Turkey. The water is a brilliant crystal-clear turquoise, surrounded by lush green reeds and distant hazy mountains. The lighting is bright and airy, capturing the essence of slow living and coastal tranquility." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBNcdY2wPycoAqYz4JBr7X6FN4huXhXiIlEYtcZqcW_3eFaqId6olZp6iYD4hMapBqcLkGs14-1A8k5l47367MFsKw2SicImjat1JvJe9-QdBT87VoyG1gTyMgJVUtfwdGGD-OQrsX4HEM1aGKDAgdejUnuoB8q18yrbBe0lZhXga5TvGzNlxybMs3d1Uq2cU7cUGp4AYNSvUBKr9Yu7JqZfh1YkvmVOPpl-9aNI7bjmYJQ7tZDZHn5UM9XW0kKu98JGrV-8sR03ds"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">Coastal Vistas</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 4: Balcony -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="balcony">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="A private balcony with a small wooden table and two chairs, overlooking a garden of bougainvillea and olive trees. A tray with Turkish coffee and a small vase of flowers sits on the table. The lighting is soft and diffused, creating a peaceful and intimate boutique hotel vibe." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAcy0OEgSo9Ur2xJdcrcVUC0646swAod5YG8zW7vYwuCQ271NwflGxRImcG76GQYv_lxKBHl581Yl06Uk5FqZJbxOZP9GiP2vq0dHC-dPU6cP5J1B61DxBksgk6uIOrNzbCdOJ_AjCW4srQp8ZR-R9aEw9fuI0hAw3wGu08BXdpC0nvK8AsmkFandeKoSTV9zUcB0N6Uws2i_kXh4NdfEjTYCpy-a2xWtkei6azHAWTACDevkQ3sSi4NsBoRZRcdIFv8w44aS9-r0"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">Morning Coffee Spot</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 5: Rooms -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="rooms">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="Detail shot of a boutique apartment bathroom featuring organic textures, stone basins, and teal-colored handcrafted tiles. The lighting is warm and spa-like, emphasizing the slow living aesthetic and high-end natural materials used in the interior design." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBo5eye6UD8H6-bMRp5ABMrkKgwcMZ1r7jimRL2M_kxmV7z9U7AbxTRnvu5_TprSCs53QvaqmueFB6-t6iHdTQb5s_02FTOWF-rfN5ShTGlYjPRzhmzDOgTWeOO1YPe6gAmks_x00Q6yZvLeyb1p93ZowIpJpYSqLTuZh-brLT-lDpytaxtgBkM2rWBQL5MEVeG2Z3t8JZIEyVpVOBHgOt-jx-xf2JzuNJUZqpcmdLJjER_HQFbsXCXbF21OrcLJTBLoJGA10Ti2_Y"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">Organic Details</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Item 6: View -->
|
||||||
|
<div class="masonry-item group cursor-pointer" data-category="view">
|
||||||
|
<div class="relative overflow-hidden rounded-[24px] bg-surface-container shadow-sm group-hover:shadow-xl transition-all duration-500">
|
||||||
|
<img class="w-full h-auto transform group-hover:scale-105 transition-transform duration-700" data-alt="Aerial view of Akyaka village nestled between pine-covered mountains and the bright blue Aegean Sea. The red-tiled roofs of traditional houses contrast beautifully with the vibrant greens and blues. The overall mood is serene, idyllic, and perfectly representative of the Turkish Riviera." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJ5db8rxbn6-31ZqKfZMq1fzqbJ_Jvg6ocB9Bz7jdO7ydqtZUVQuBcpaxfBaQpzZkalbKlnfRsxfSwpiicLtZFKTI7Q_02gU3vLkeSc43voN8SZLhe_3FUCpvPL_A02hENSAQbZPrrqvQCJTCIdiF8SJvpMu9S6vyLzdW4cpC3hBHAe0Ft0Fl2n4VMNWkfUy2iawZj1A5-LYgnqR3JZaVwTEFgR75AKbJZu8AdOG-V3d5bsAbH3h1xEfI5TiR59nYmfdpgxSU4chk"/>
|
||||||
|
<div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
|
||||||
|
<span class="text-surface-container-lowest font-headline-md text-headline-md">Village Panorama</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto text-surface-container-lowest">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</h3>
|
||||||
|
<p class="text-surface-container-low/80 font-body-md text-body-md">
|
||||||
|
Experience the art of slow living in the heart of Akyaka. Authentic hospitality meets coastal charm.
|
||||||
|
</p>
|
||||||
|
<div class="pt-4">
|
||||||
|
<span class="font-body-md text-body-md text-surface-container-low/60 italic">© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-3">
|
||||||
|
<h4 class="font-label-lg text-label-lg text-surface-container-lowest uppercase tracking-wider mb-2">Explore</h4>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Apartments</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Location</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Contact Us</a>
|
||||||
|
<a class="text-surface-container-low/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">WhatsApp Support</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<h4 class="font-label-lg text-label-lg text-surface-container-lowest uppercase tracking-wider">Stay Connected</h4>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">photo_camera</span>
|
||||||
|
</a>
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">face_nod</span>
|
||||||
|
</a>
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-container-low/30 flex items-center justify-center hover:bg-surface-container-low/10 transition-colors" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">map</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-surface-container-low/5 rounded-xl border border-surface-container-low/10">
|
||||||
|
<p class="text-label-lg text-label-lg">Contact:</p>
|
||||||
|
<p class="text-body-md text-body-md">+90 252 243 XXXX</p>
|
||||||
|
<p class="text-body-md text-body-md">Akyaka, Muğla, Turkey</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- Interactive Scripts -->
|
||||||
|
<script>
|
||||||
|
// Gallery Filter Logic
|
||||||
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||||
|
const galleryItems = document.querySelectorAll('.masonry-item');
|
||||||
|
|
||||||
|
filterBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
// UI update
|
||||||
|
filterBtns.forEach(b => {
|
||||||
|
b.classList.remove('bg-primary/10', 'active-filter', 'border-primary');
|
||||||
|
b.classList.add('border-transparent');
|
||||||
|
b.classList.remove('text-primary');
|
||||||
|
b.classList.add('text-secondary');
|
||||||
|
});
|
||||||
|
btn.classList.remove('border-transparent', 'text-secondary');
|
||||||
|
btn.classList.add('bg-primary/10', 'active-filter', 'border-primary', 'text-primary');
|
||||||
|
|
||||||
|
const filter = btn.getAttribute('data-filter');
|
||||||
|
|
||||||
|
// Filter items
|
||||||
|
galleryItems.forEach(item => {
|
||||||
|
if (filter === 'all' || item.getAttribute('data-category') === filter) {
|
||||||
|
item.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.opacity = '1';
|
||||||
|
item.style.transform = 'translateY(0)';
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
item.style.opacity = '0';
|
||||||
|
item.style.transform = 'translateY(20px)';
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize with all items visible
|
||||||
|
galleryItems.forEach(item => {
|
||||||
|
item.style.transition = 'all 0.4s ease-out';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple scroll reveal for navbar
|
||||||
|
let lastScroll = 0;
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
|
||||||
|
if (currentScroll <= 0) {
|
||||||
|
nav.classList.remove('shadow-lg');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentScroll > lastScroll) {
|
||||||
|
nav.style.transform = 'translateY(-100%)';
|
||||||
|
} else {
|
||||||
|
nav.style.transform = 'translateY(0)';
|
||||||
|
nav.classList.add('shadow-lg');
|
||||||
|
}
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,347 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="scroll-smooth" lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Location & Contact | Sitar Apart & Otel Akyaka</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito+Sans:wght@400;600;700&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": {
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-tertiary-container": "#fffbff",
|
||||||
|
"on-secondary-fixed": "#28180d",
|
||||||
|
"on-secondary-fixed-variant": "#574335",
|
||||||
|
"on-primary-fixed": "#001f25",
|
||||||
|
"surface-dim": "#d7dbdc",
|
||||||
|
"secondary-container": "#f8dac8",
|
||||||
|
"on-tertiary-fixed": "#301400",
|
||||||
|
"tertiary-container": "#a7642e",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed": "#a3eeff",
|
||||||
|
"inverse-on-surface": "#eef1f2",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-variant": "#dfe3e4",
|
||||||
|
"surface-bright": "#f6fafb",
|
||||||
|
"surface": "#f6fafb",
|
||||||
|
"on-primary-container": "#f8fdff",
|
||||||
|
"on-secondary-container": "#755e50",
|
||||||
|
"surface-container": "#ebeef0",
|
||||||
|
"on-surface-variant": "#3e494b",
|
||||||
|
"primary-fixed-dim": "#78d4e7",
|
||||||
|
"secondary-fixed": "#fbddca",
|
||||||
|
"outline": "#6e797c",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#dec1af",
|
||||||
|
"outline-variant": "#bdc8cb",
|
||||||
|
"surface-container-highest": "#dfe3e4",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-container-low": "#f1f4f5",
|
||||||
|
"on-surface": "#181c1d",
|
||||||
|
"tertiary-fixed-dim": "#ffb782",
|
||||||
|
"primary": "#006574",
|
||||||
|
"inverse-surface": "#2d3132",
|
||||||
|
"tertiary-fixed": "#ffdcc5",
|
||||||
|
"on-primary-fixed-variant": "#004e5a",
|
||||||
|
"background": "#f6fafb",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-background": "#181c1d",
|
||||||
|
"surface-tint": "#006877",
|
||||||
|
"on-tertiary-fixed-variant": "#703802",
|
||||||
|
"inverse-primary": "#78d4e7",
|
||||||
|
"surface-container-high": "#e5e9ea",
|
||||||
|
"secondary": "#705a4c",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"tertiary": "#8a4c17",
|
||||||
|
"primary-container": "#088092"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1200px",
|
||||||
|
"margin-mobile": "20px",
|
||||||
|
"section-gap": "80px",
|
||||||
|
"unit": "8px",
|
||||||
|
"gutter": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-lg": ["Literata"],
|
||||||
|
"label-lg": ["Nunito Sans"],
|
||||||
|
"headline-xl": ["Literata"],
|
||||||
|
"headline-md": ["Literata"],
|
||||||
|
"body-lg": ["Nunito Sans"],
|
||||||
|
"body-md": ["Nunito Sans"],
|
||||||
|
"headline-lg-mobile": ["Literata"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||||
|
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||||
|
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||||
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.glass-nav {
|
||||||
|
background-color: rgba(246, 250, 251, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.motif-branch {
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ambient-shadow {
|
||||||
|
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.08);
|
||||||
|
}
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-background text-on-background font-body-md selection:bg-secondary-container">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 bg-surface/85 backdrop-blur-xl border-b border-outline-variant/20 shadow-sm transition-all duration-300 ease-in-out">
|
||||||
|
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||||
|
<a class="font-headline-md text-headline-md text-secondary italic" href="#">Sitar Apart & Otel</a>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Apartments</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary dark:text-secondary-fixed-dim hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Contact</a>
|
||||||
|
</div>
|
||||||
|
<button class="bg-[#D46A8C] text-surface-container-lowest px-6 py-2.5 rounded-full font-label-lg hover:opacity-80 transition-opacity">
|
||||||
|
Book Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="pt-24">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="px-margin-mobile md:px-gutter max-w-container-max mx-auto pt-12 pb-section-gap">
|
||||||
|
<div class="relative inline-block mb-4">
|
||||||
|
<span class="absolute -top-6 -left-4 motif-branch text-tertiary-container/30">
|
||||||
|
<span class="material-symbols-outlined text-4xl">eco</span>
|
||||||
|
</span>
|
||||||
|
<h1 class="font-headline-xl text-headline-xl text-on-surface">Find Us in Akyaka</h1>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
||||||
|
Nestled in the heart of Akyaka's slow-living paradise, Sitar offers the perfect balance between serene seclusion and coastal proximity.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<!-- Location Grid -->
|
||||||
|
<section class="bg-surface-container-low py-section-gap">
|
||||||
|
<div class="px-margin-mobile md:px-gutter max-w-container-max mx-auto grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
|
||||||
|
<!-- Map Container -->
|
||||||
|
<div class="lg:col-span-8 rounded-[24px] overflow-hidden aspect-video ambient-shadow border border-outline-variant/30 relative">
|
||||||
|
<div class="absolute inset-0 z-0 bg-surface-variant/50" data-location="Akyaka, Mugla, Turkey" style="">
|
||||||
|
<div class="w-full h-full flex items-center justify-center bg-surface-container-high">
|
||||||
|
<span class="material-symbols-outlined text-secondary-container text-6xl">map</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mock Map Interaction Layer -->
|
||||||
|
<div class="absolute bottom-6 left-6 bg-surface/90 backdrop-blur-md p-4 rounded-xl shadow-lg border border-outline-variant/20 flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary">
|
||||||
|
<span class="material-symbols-outlined">location_on</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface text-xs uppercase tracking-wider">Our Address</p>
|
||||||
|
<p class="font-body-md text-secondary">Karanfil Sokak No: 12, Akyaka</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Highlights List -->
|
||||||
|
<div class="lg:col-span-4 space-y-8">
|
||||||
|
<div class="relative">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-secondary">Walking Distance</h2>
|
||||||
|
<div class="h-1 w-12 bg-tertiary-container mt-2 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-6">
|
||||||
|
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1">waves</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface">Akyaka Blue Flag Beach</p>
|
||||||
|
<p class="font-body-md text-outline">10 minute gentle stroll through pine trees.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1">shopping_basket</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface">Local Organic Market</p>
|
||||||
|
<p class="font-body-md text-outline">5 minutes to fresh citrus and village honey.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1">coffee</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface">Azmak Riverside Cafes</p>
|
||||||
|
<p class="font-body-md text-outline">8 minutes to the iconic crystal-clear springs.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300">
|
||||||
|
<span class="material-symbols-outlined text-primary mt-1">directions_run</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface">Forest Hiking Trails</p>
|
||||||
|
<p class="font-body-md text-outline">Trailhead begins just 200m behind the otel.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section class="py-section-gap">
|
||||||
|
<div class="px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<!-- Contact Form Card -->
|
||||||
|
<div class="bg-surface p-8 md:p-12 rounded-[32px] ambient-shadow border border-outline-variant/20">
|
||||||
|
<h3 class="font-headline-lg text-headline-lg text-on-surface mb-8">Send us a message</h3>
|
||||||
|
<form class="space-y-6">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Full Name</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="John Doe" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Email Address</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="john@example.com" type="email"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Subject</label>
|
||||||
|
<input class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="Booking Inquiry" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="font-label-lg text-secondary text-[12px] uppercase tracking-widest ml-1">Message</label>
|
||||||
|
<textarea class="w-full bg-[#F2EEE5] border-none rounded-xl p-4 focus:ring-1.5 focus:ring-primary transition-all font-body-md" placeholder="Tell us how we can help..." rows="4"></textarea>
|
||||||
|
</div>
|
||||||
|
<button class="w-full bg-[#D46A8C] text-on-tertiary py-4 rounded-full font-label-lg hover:opacity-90 transition-all transform hover:-translate-y-1 shadow-md" type="submit">
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<!-- Contact Details & Visual -->
|
||||||
|
<div class="space-y-12">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h3 class="font-headline-lg text-headline-lg text-on-surface">Let's Connect</h3>
|
||||||
|
<p class="font-body-lg text-on-surface-variant">
|
||||||
|
Whether you're planning your first visit to Akyaka or returning for another slow-living escape, our team is here to assist with every detail.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||||
|
<span class="material-symbols-outlined">call</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface text-xs uppercase">Call Us</p>
|
||||||
|
<p class="font-headline-md text-[18px] text-secondary">+90 252 243 00 00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||||
|
<span class="material-symbols-outlined">mail</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-label-lg text-on-surface text-xs uppercase">Email</p>
|
||||||
|
<p class="font-headline-md text-[18px] text-secondary">hello@sitarakyaka.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-6">
|
||||||
|
<a class="inline-flex items-center gap-4 bg-primary text-on-primary px-8 py-4 rounded-full font-label-lg hover:opacity-90 transition-all shadow-lg group" href="#">
|
||||||
|
<span class="material-symbols-outlined">chat</span>
|
||||||
|
Chat on WhatsApp
|
||||||
|
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- Atmospheric Image -->
|
||||||
|
<div class="rounded-[24px] overflow-hidden aspect-[16/9] mt-8 grayscale hover:grayscale-0 transition-all duration-700">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A tranquil, sun-drenched close-up of a boutique Mediterranean hotel entrance in Akyaka. The scene features warm, textured stone walls adorned with vibrant pink bougainvillea branches casting soft shadows in the afternoon light. In the foreground, a rustic wooden table holds a single glass of refreshing mint tea. The aesthetic is warm, authentic, and evocative of slow living, using a palette of soft creams, secondary browns, and pops of floral pink." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7ipAnrNarVoDiN6J62EFCdU_fZklSZx84GYzhIohBwBbNZIs8gKz_xCraS8tcBwqqOusUeWcsOXWpdvsPlAHEWXQS-JkCo-Gjsd5slkk9oJel7mK2-tYpmnPzRG62X_9-7_777J2snWuEERsPmRWfyTPtagKFokEZZ4uySdjBmnJmPUHaSAe_6X3BwNLsUIODoeRRdyl2_k343_9XdH7Q1EICnmJIvP8DRTku0le9IU4LsjlAlCMTvzZutf5PKkZi8tesAyp18bQ"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-inverse-surface dark:bg-on-surface w-full py-section-gap mt-section-gap">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-surface-container-lowest">Sitar Apart & Otel</h2>
|
||||||
|
<p class="font-body-md text-body-md text-surface-container-low/80 max-w-xs">
|
||||||
|
Experience the rhythm of Akyaka. Boutique apartments designed for comfort, slow living, and Aegean soul.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-8">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="font-label-lg text-surface-container-lowest/50 uppercase tracking-widest text-[10px]">Explore</p>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">Apartments</a></li>
|
||||||
|
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">Location</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="font-label-lg text-surface-container-lowest/50 uppercase tracking-widest text-[10px]">Support</p>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a class="font-body-md text-surface-container-lowest font-bold hover:underline transition-all" href="#">Contact Us</a></li>
|
||||||
|
<li><a class="font-body-md text-surface-container-low/80 hover:text-surface-container-lowest hover:underline transition-all" href="#">WhatsApp Support</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6 flex flex-col items-start md:items-end">
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-container-low/20 flex items-center justify-center text-surface-container-low hover:bg-surface-container-lowest hover:text-inverse-surface transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">public</span>
|
||||||
|
</a>
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-container-low/20 flex items-center justify-center text-surface-container-low hover:bg-surface-container-lowest hover:text-inverse-surface transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined text-[20px]">camera</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-md text-body-md text-surface-container-low/80 text-left md:text-right">
|
||||||
|
© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Subtle scroll animation for navbar
|
||||||
|
window.onscroll = function() {
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
if (window.pageYOffset > 50) {
|
||||||
|
nav.classList.add('py-2', 'shadow-md');
|
||||||
|
nav.classList.remove('py-4', 'shadow-sm');
|
||||||
|
} else {
|
||||||
|
nav.classList.add('py-4', 'shadow-sm');
|
||||||
|
nav.classList.remove('py-2', 'shadow-md');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Micro-interaction for form focus
|
||||||
|
const inputs = document.querySelectorAll('input, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
input.addEventListener('focus', () => {
|
||||||
|
input.parentElement.querySelector('label').classList.add('text-primary');
|
||||||
|
});
|
||||||
|
input.addEventListener('blur', () => {
|
||||||
|
input.parentElement.querySelector('label').classList.remove('text-primary');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
@@ -0,0 +1,315 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="scroll-smooth" lang="tr"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Sitar Apart & Otel | Akyaka'nın Huzuru Sizinle</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Nunito+Sans:wght@400;700&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": {
|
||||||
|
"on-tertiary": "#ffffff",
|
||||||
|
"error-container": "#ffdad6",
|
||||||
|
"on-tertiary-container": "#fffbff",
|
||||||
|
"on-secondary-fixed": "#28180d",
|
||||||
|
"on-secondary-fixed-variant": "#574335",
|
||||||
|
"on-primary-fixed": "#001f25",
|
||||||
|
"surface-dim": "#d7dbdc",
|
||||||
|
"secondary-container": "#f8dac8",
|
||||||
|
"on-tertiary-fixed": "#301400",
|
||||||
|
"tertiary-container": "#a7642e",
|
||||||
|
"on-error-container": "#93000a",
|
||||||
|
"primary-fixed": "#a3eeff",
|
||||||
|
"inverse-on-surface": "#eef1f2",
|
||||||
|
"error": "#ba1a1a",
|
||||||
|
"surface-variant": "#dfe3e4",
|
||||||
|
"surface-bright": "#f6fafb",
|
||||||
|
"surface": "#f6fafb",
|
||||||
|
"on-primary-container": "#f8fdff",
|
||||||
|
"on-secondary-container": "#755e50",
|
||||||
|
"surface-container": "#ebeef0",
|
||||||
|
"on-surface-variant": "#3e494b",
|
||||||
|
"primary-fixed-dim": "#78d4e7",
|
||||||
|
"secondary-fixed": "#fbddca",
|
||||||
|
"outline": "#6e797c",
|
||||||
|
"on-secondary": "#ffffff",
|
||||||
|
"secondary-fixed-dim": "#dec1af",
|
||||||
|
"outline-variant": "#bdc8cb",
|
||||||
|
"surface-container-highest": "#dfe3e4",
|
||||||
|
"on-primary": "#ffffff",
|
||||||
|
"surface-container-low": "#f1f4f5",
|
||||||
|
"on-surface": "#181c1d",
|
||||||
|
"tertiary-fixed-dim": "#ffb782",
|
||||||
|
"primary": "#006574",
|
||||||
|
"inverse-surface": "#2d3132",
|
||||||
|
"tertiary-fixed": "#ffdcc5",
|
||||||
|
"on-primary-fixed-variant": "#004e5a",
|
||||||
|
"background": "#f6fafb",
|
||||||
|
"on-error": "#ffffff",
|
||||||
|
"on-background": "#181c1d",
|
||||||
|
"surface-tint": "#006877",
|
||||||
|
"on-tertiary-fixed-variant": "#703802",
|
||||||
|
"inverse-primary": "#78d4e7",
|
||||||
|
"surface-container-high": "#e5e9ea",
|
||||||
|
"secondary": "#705a4c",
|
||||||
|
"surface-container-lowest": "#ffffff",
|
||||||
|
"tertiary": "#8a4c17",
|
||||||
|
"primary-container": "#088092",
|
||||||
|
"accent-pink": "#D46A8C"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1200px",
|
||||||
|
"margin-mobile": "20px",
|
||||||
|
"section-gap": "80px",
|
||||||
|
"unit": "8px",
|
||||||
|
"gutter": "24px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"headline-lg": ["Literata"],
|
||||||
|
"label-lg": ["Nunito Sans"],
|
||||||
|
"headline-xl": ["Literata"],
|
||||||
|
"headline-md": ["Literata"],
|
||||||
|
"body-lg": ["Nunito Sans"],
|
||||||
|
"body-md": ["Nunito Sans"],
|
||||||
|
"headline-lg-mobile": ["Literata"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"headline-lg": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||||
|
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||||
|
"headline-xl": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "1.4", "fontWeight": "500"}],
|
||||||
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.3", "fontWeight": "600"}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.bougainvillea-motif {
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
opacity: 0.15;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.glass-nav {
|
||||||
|
background-color: rgba(247, 244, 239, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
.hero-gradient {
|
||||||
|
background: linear-gradient(to bottom, rgba(61, 43, 31, 0.4) 0%, rgba(61, 43, 31, 0.2) 50%, rgba(61, 43, 31, 0.6) 100%);
|
||||||
|
}
|
||||||
|
.ambient-shadow {
|
||||||
|
box-shadow: 0 32px 64px -12px rgba(112, 90, 76, 0.04);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#F7F4EF] text-on-surface font-body-md selection:bg-accent-pink selection:text-white">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="fixed top-0 w-full z-50 glass-nav border-b border-outline-variant/20 shadow-sm transition-all duration-300">
|
||||||
|
<div class="flex justify-between items-center px-margin-mobile md:px-gutter py-4 max-w-container-max mx-auto">
|
||||||
|
<div class="font-headline-md text-headline-md text-secondary italic">Sitar Apart & Otel</div>
|
||||||
|
<div class="hidden md:flex items-center gap-8">
|
||||||
|
<a class="font-label-lg text-label-lg text-tertiary border-b-2 border-tertiary pb-1" href="#">Apartments</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Akyaka</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Gallery</a>
|
||||||
|
<a class="font-label-lg text-label-lg text-secondary hover:text-tertiary transition-colors" href="#">Contact</a>
|
||||||
|
</div>
|
||||||
|
<button class="bg-accent-pink text-on-tertiary px-6 py-3 rounded-full font-label-lg text-label-lg hover:opacity-80 transition-opacity">Book Now</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<header class="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||||
|
<div class="absolute inset-0 w-full h-full bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida/AP1WRLuIVRCovTeLHlXlZb7jkKPLtpwyf8OfI_UDAMbeTkPjKt7Npz-5l-5UD_cA3TPQqKW4hf4049NNiHwv7V2lhY3_5PaB_wcUD1lrooFf3JNM3cZASakeM7HHlOK5bC2Akmw77vNn3s81CpzlNYHyKQ1agxdXJQby1_8JGUX3c_dIBhgoP8sTljwWIQlaznOHSuyf5V-Rk_IiTHpe6wTWKdxDc9qfahLkbnbF4-bcBddyzXHGhhAIMdijgw')"></div>
|
||||||
|
<div class="absolute inset-0 hero-gradient"></div>
|
||||||
|
<div class="relative z-10 text-center px-margin-mobile max-w-3xl">
|
||||||
|
<h1 class="font-headline-xl text-headline-xl md:text-6xl text-white mb-6 drop-shadow-lg">
|
||||||
|
Akyaka'nın Huzuru Sizinle
|
||||||
|
</h1>
|
||||||
|
<p class="font-body-lg text-body-lg text-white/90 mb-10 max-w-xl mx-auto leading-relaxed">
|
||||||
|
Experience authentic slow living in the heart of Akyaka. Nestled between the mountains and the turquoise Aegean, discover the art of unhurried travel.
|
||||||
|
</p>
|
||||||
|
<a class="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-label-lg text-lg hover:scale-105 transition-transform shadow-xl" href="#booking">
|
||||||
|
Book Your Stay
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
|
||||||
|
<span class="material-symbols-outlined text-4xl">keyboard_double_arrow_down</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Amenities Strip -->
|
||||||
|
<section class="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-xl ambient-shadow border border-outline-variant/20">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
|
||||||
|
<div class="flex flex-col items-center text-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-3xl">pool</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-lg text-secondary">Outdoor Pool</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center text-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-3xl">wifi</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-lg text-secondary">Free WiFi</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center text-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-3xl">flatware</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-lg text-secondary">Private Kitchen</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center text-center gap-3">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-primary-fixed-dim/20 flex items-center justify-center text-primary">
|
||||||
|
<span class="material-symbols-outlined text-3xl">balcony</span>
|
||||||
|
</div>
|
||||||
|
<span class="font-label-lg text-secondary">Private Balcony</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Apartments Section -->
|
||||||
|
<section class="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
|
||||||
|
<div class="relative mb-16 text-center">
|
||||||
|
<!-- Bougainvillea Motif Placeholder -->
|
||||||
|
<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 bougainvillea-motif flex items-center justify-center">
|
||||||
|
<span class="material-symbols-outlined text-6xl text-accent-pink">spa</span>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg md:text-4xl text-secondary mb-4 relative z-10">Konaklama Seçeneklerimiz</h2>
|
||||||
|
<p class="text-on-surface-variant max-w-xl mx-auto">Modern konforun geleneksel dokunuşlarla buluştuğu, her ihtiyaca uygun geniş apart dairelerimiz.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Card 1 -->
|
||||||
|
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||||
|
<div class="aspect-[3/2] overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A beautiful boutique hotel room in Akyaka with white linens, wooden furniture, and sun-drenched stone walls. The room is decorated in a warm coastal aesthetic with soft teal accents and views of green mountains through the window. The atmosphere is peaceful, light-filled, and evokes slow living." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBR9KtvxpmOEpuRqQ0aC9jvZTrWyuKa4ZbIRltl51unfeywjPhq3FDQNyJSSv8ubfP2qr5l5rGFFT78FUfegN4RGbwlCLqdMax-sFAZkQqHC9M5GvCPdyJnnt7EHqUemPjtXw_U_yujTRVttdo9Jv0yPe_6cm_RdvQfKHicMRgShdXwDNbPAWgZ8XxZg17Vv7hTpsY-EHFgNNNfzlO6-t6xWCKftj0tSSPkyGYUd1xwZIdDf8rPNA0RC88IzDRbmhFajRQ546-ZasY"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-secondary">1+0 Studio Apart</h3>
|
||||||
|
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Popüler</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||||
|
<span class="material-symbols-outlined text-xl">group</span>
|
||||||
|
<span class="font-label-lg">2 Misafir</span>
|
||||||
|
</div>
|
||||||
|
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 2 -->
|
||||||
|
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||||
|
<div class="aspect-[3/2] overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A spacious 1+1 apartment interior with a separate living area and bedroom. The design features light wood flooring, turquoise textiles, and handmade ceramics on open shelving. Warm Aegean sunlight streams in through floor-to-ceiling windows, highlighting the minimalist and rustic boutique charm of the space." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7lJi5pDELmSz9JddepycZrw7NqUXUnR_rTH-NcGmTShh4j1Lk681qkMN32_GQpr7mK_ZkwQ2ixdViy0T9wSi3AGaU2F5VCWqJUchgyg3n2cH3PI6NrybUDiR7J1gD7JKj1_QmJFa_5FVf46KtuvBzSr6UVsomxpGMagSNuQP-Q_8Dqwci-2o5IdVUYKDxHvBPO4W0cQLxtZK00yusIEYuDMNDTr07SFz6V__DadCilxoHrEz7dMRQTm8VVs3FBXEc29xcgRS2BrU"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-secondary mb-4">1+1 Standart Apart</h3>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||||
|
<span class="material-symbols-outlined text-xl">group</span>
|
||||||
|
<span class="font-label-lg">3 Misafir</span>
|
||||||
|
</div>
|
||||||
|
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Card 3 -->
|
||||||
|
<div class="group bg-surface-container-lowest rounded-[24px] overflow-hidden ambient-shadow border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2">
|
||||||
|
<div class="aspect-[3/2] overflow-hidden">
|
||||||
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="A luxury 2-room apartment at a boutique Turkish hotel, featuring a large private balcony with a wooden pergola. The balcony is draped in vibrant pink bougainvillea and overlooks a serene bay and pine-covered hills. The interior visible through the door is airy with cream walls and boutique coastal decor." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9d5Ct1kK_kzDYg-HgxAAVXyMZt3TxkJgWyhSfJ5XFGiZOeLTIlfIGNAbqrpDLPF3gU_F3jTwwYkVrbvpwpZQrjZkkmQj_MwEyhxcEd3yF-u_LsitHwp4gAK4DeWOuZeJ_pbGXlbPEasnzQ9E_jFq5mkf0VZ0uFwA-0yvtMmo-ImFVNkprf_HcdPFwSbwZOgx1NOVK2EIPnjmkjOzpP_rinlwCxVW3CbiNhK03M5QrXya1o1QqLPkFADfwrvjagZa0SOK35pM4-yI"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-secondary mb-4">1+1 Geniş (2 Oda)</h3>
|
||||||
|
<div class="flex items-center gap-2 text-on-surface-variant mb-6">
|
||||||
|
<span class="material-symbols-outlined text-xl">group</span>
|
||||||
|
<span class="font-label-lg">4 Misafir</span>
|
||||||
|
</div>
|
||||||
|
<a class="inline-block font-headline-md text-primary underline underline-offset-8 decoration-1 hover:text-accent-pink transition-colors" href="#">View Details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- CTA / Contact Section -->
|
||||||
|
<section class="py-section-gap bg-primary-container/10">
|
||||||
|
<div class="max-w-container-max mx-auto px-margin-mobile grid grid-cols-1 md:grid-cols-2 gap-gutter items-center">
|
||||||
|
<div class="rounded-[32px] overflow-hidden h-[400px] ambient-shadow">
|
||||||
|
<img class="w-full h-full object-cover" data-alt="A serene landscape of Akyaka, Turkey, showing the Azmak river meeting the sea at sunset. The sky is painted in soft oranges and purples, reflecting in the crystal clear water. High pine mountains surround the bay, and traditional Muğla-style houses with white walls and red-tiled roofs are nestled in the greenery." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDfPt1cFJbc0Rk5h1Fekc6yDFsYOhs-ahlFTZYkvWEoOAey4jtuy2DbMoIO8dbJm3sE2MqmIqhuBl4kISADrBR-Jt_5rGfDFzRGKyFryYR-eoTzeneccAGjKYTfaz29ktJQe0zx4sHXUEJDV7afuK1UO1qFeJrOfTsSkkQJVYzCy9nUfXmLPHp-fL9WtSZBuN8ucKFVDkgS1G3zrtJ07XPR20JaOqSaXvm73MLOXakUxuEHApo7lLPK8hYcXACvBjEpY0xFyx83iYM"/>
|
||||||
|
</div>
|
||||||
|
<div class="md:pl-12">
|
||||||
|
<div class="relative inline-block mb-6">
|
||||||
|
<span class="material-symbols-outlined absolute -top-8 -left-8 text-4xl text-accent-pink/30">favorite</span>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-secondary">Doğanın Kalbinde Bir Tatil</h2>
|
||||||
|
</div>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 leading-relaxed">
|
||||||
|
Azmak Çayı'nın serinliği, Akyaka'nın eşsiz mimarisi ve Sitar Apart'ın samimi misafirperverliği ile unutulmaz bir tatile davetlisiniz.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<button class="bg-primary text-white px-8 py-4 rounded-full font-label-lg text-label-lg hover:bg-primary-container transition-colors shadow-lg">WhatsApp ile Ulaşın</button>
|
||||||
|
<button class="border-2 border-primary text-primary px-8 py-4 rounded-full font-label-lg text-label-lg hover:bg-primary hover:text-white transition-all">Konumu Gör</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-[#3D2B1F] w-full py-section-gap text-surface-container-lowest">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-gutter max-w-container-max mx-auto">
|
||||||
|
<div>
|
||||||
|
<div class="font-headline-md text-headline-md text-surface-container-lowest mb-6">Sitar Apart & Otel</div>
|
||||||
|
<p class="text-surface-dim/80 font-body-md max-w-xs leading-relaxed">
|
||||||
|
© 2024 Sitar Apart & Otel Akyaka. Slow living at its finest. Experience the authentic spirit of the Aegean.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<h4 class="font-label-lg text-surface-container-lowest tracking-widest uppercase mb-2">Hızlı Menü</h4>
|
||||||
|
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Apartments</a>
|
||||||
|
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Location</a>
|
||||||
|
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">Contact Us</a>
|
||||||
|
<a class="text-surface-dim/80 hover:text-surface-container-lowest transition-all hover:underline" href="#">WhatsApp Support</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<h4 class="font-label-lg text-surface-container-lowest tracking-widest uppercase mb-2">Bize Ulaşın</h4>
|
||||||
|
<p class="text-surface-dim/80">Akyaka Mah. Atatürk Cad. No:12 <br/>Ula, Muğla - Türkiye</p>
|
||||||
|
<p class="text-surface-dim/80">+90 252 243 XXXX</p>
|
||||||
|
<div class="flex gap-4 mt-4">
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-dim/20 flex items-center justify-center hover:bg-surface-container-lowest hover:text-secondary transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">share</span>
|
||||||
|
</a>
|
||||||
|
<a class="w-10 h-10 rounded-full border border-surface-dim/20 flex items-center justify-center hover:bg-surface-container-lowest hover:text-secondary transition-all" href="#">
|
||||||
|
<span class="material-symbols-outlined text-lg">alternate_email</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
// Smooth navbar appearance on scroll
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
nav.classList.add('py-2', 'shadow-md');
|
||||||
|
nav.classList.remove('py-4', 'shadow-sm');
|
||||||
|
} else {
|
||||||
|
nav.classList.add('py-4', 'shadow-sm');
|
||||||
|
nav.classList.remove('py-2', 'shadow-md');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple interaction for detail links
|
||||||
|
document.querySelectorAll('a[href="#"]').forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('Navigating to apartment details...');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 932 KiB |
@@ -0,0 +1,39 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
export default function openinaryLoader({ src, width, quality }: { src: string, width: number, quality?: number }) {
|
||||||
|
// Handle already absolute openinary URLs
|
||||||
|
let path = src;
|
||||||
|
if (src.startsWith('https://media.ayris.tech/t/')) {
|
||||||
|
// format: https://media.ayris.tech/t/w_800,h_800/moyqr/img.jpg
|
||||||
|
const parts = src.split('/');
|
||||||
|
path = parts.slice(5).join('/');
|
||||||
|
} else if (src.startsWith('https://media.ayris.tech/upload/')) {
|
||||||
|
// format: https://media.ayris.tech/upload/moyqr/img.jpg
|
||||||
|
const parts = src.split('/');
|
||||||
|
path = parts.slice(4).join('/');
|
||||||
|
} else if (src.includes('res.cloudinary.com')) {
|
||||||
|
// Correctly apply width & quality for unmigrated Cloudinary URLs
|
||||||
|
// e.g. https://res.cloudinary.com/domain/image/upload/v1234/path.jpg
|
||||||
|
// becomes: https://res.cloudinary.com/domain/image/upload/w_800,f_webp,q_75/v1234/path.jpg
|
||||||
|
const parts = src.split('/upload/');
|
||||||
|
if (parts.length === 2) {
|
||||||
|
return `${parts[0]}/upload/w_${width},f_webp,q_${quality || 75}/${parts[1]}`;
|
||||||
|
}
|
||||||
|
return src;
|
||||||
|
} else if (src.startsWith('http')) {
|
||||||
|
// For other external URLs, we append the width as a query parameter to satisfy Next.js.
|
||||||
|
const url = new URL(src);
|
||||||
|
url.searchParams.set('w', width.toString());
|
||||||
|
if (quality) {
|
||||||
|
url.searchParams.set('q', quality.toString());
|
||||||
|
}
|
||||||
|
return url.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean up any leading slash
|
||||||
|
if (path.startsWith('/')) {
|
||||||
|
path = path.substring(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return `https://media.ayris.tech/t/w_${width},f_webp,q_${quality || 75}/${path}`
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
const BASE = process.env.NEXT_PUBLIC_OPENINARY_URL;
|
||||||
|
|
||||||
|
export function optimizedImage(path: string, params: string) {
|
||||||
|
return `${BASE}/t/${params}/${path}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
export async function uploadToOpeninary(file: File, folder: string) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("files", file);
|
||||||
|
formData.append("folder", folder);
|
||||||
|
|
||||||
|
const res = await fetch(`${process.env.OPENINARY_API_URL}/api/upload`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { Authorization: `Bearer ${process.env.OPENINARY_API_KEY}` },
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const errorText = await res.text();
|
||||||
|
console.error("Openinary upload error:", errorText);
|
||||||
|
throw new Error("Upload başarısız: " + errorText);
|
||||||
|
}
|
||||||
|
const data = await res.json();
|
||||||
|
return data.files[0]; // { path, url, size, ... }
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
{
|
||||||
|
"nav": {
|
||||||
|
"home": "Startseite",
|
||||||
|
"rooms": "Wohnungen",
|
||||||
|
"gallery": "Galerie",
|
||||||
|
"location": "Standort",
|
||||||
|
"contact": "Kontakt",
|
||||||
|
"book_now": "Buchen"
|
||||||
|
},
|
||||||
|
"hero": {
|
||||||
|
"title": "Die Ruhe von Akyaka ist mit Ihnen",
|
||||||
|
"subtitle": "Geräumige Apartments, die modernen Komfort mit traditionellen Akzenten verbinden.",
|
||||||
|
"cta": "Wohnungen entdecken",
|
||||||
|
"description": "Erleben Sie authentisches Slow Living im Herzen von Akyaka. Eingebettet zwischen den Bergen und der türkisfarbenen Ägäis."
|
||||||
|
},
|
||||||
|
"features": {
|
||||||
|
"pool": "Freibad",
|
||||||
|
"wifi": "Kostenloses WLAN",
|
||||||
|
"kitchen": "Eigene Küche",
|
||||||
|
"parking": "Parkplatz"
|
||||||
|
},
|
||||||
|
"home_rooms": {
|
||||||
|
"title": "Unsere Unterkünfte",
|
||||||
|
"subtitle": "Geräumige Apartments, die modernen Komfort mit traditionellen Akzenten verbinden.",
|
||||||
|
"room_1": {
|
||||||
|
"title": "Studio-Apartment",
|
||||||
|
"desc": "Komfortables Studio für 1-2 Personen mit Einzelbett, Miniküche und Bad."
|
||||||
|
},
|
||||||
|
"room_2": {
|
||||||
|
"title": "1-Zimmer-Apartment",
|
||||||
|
"desc": "Geräumiges Apartment für 2 Personen mit Schlafzimmer, Wohnzimmer mit Küchenzeile und Balkon."
|
||||||
|
},
|
||||||
|
"room_3": {
|
||||||
|
"title": "2-Zimmer-Apartment",
|
||||||
|
"desc": "Apartment mit 2 separaten Zimmern und Balkon. Bietet Platz für 3-4 Personen."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rooms": {
|
||||||
|
"title": "Unsere Wohnungen",
|
||||||
|
"description": "Wir bieten im Sitar Apart & Hotel verschiedene Apartment-Optionen für Ihre Bedürfnisse an. Nur 10 Gehminuten vom Meer entfernt.",
|
||||||
|
"capacity": "Gäste",
|
||||||
|
"amenities": "Ausstattung",
|
||||||
|
"ask_price": "Preis auf Anfrage",
|
||||||
|
"per_night": "/ Nacht",
|
||||||
|
"details_btn": "Details ansehen",
|
||||||
|
"room_list": {
|
||||||
|
"1_0_daire": {
|
||||||
|
"name": "Studio-Apartment",
|
||||||
|
"desc": "Komfortables Studio für 1-2 Personen mit Einzelbett, Miniküche und Bad."
|
||||||
|
},
|
||||||
|
"1_1_daire_a": {
|
||||||
|
"name": "1-Zimmer-Apartment",
|
||||||
|
"desc": "Geräumiges Apartment für 2 Personen mit Schlafzimmer, Wohnzimmer mit Küchenzeile und Balkon."
|
||||||
|
},
|
||||||
|
"1_1_daire_b": {
|
||||||
|
"name": "2-Zimmer-Apartment",
|
||||||
|
"desc": "Apartment mit 2 separaten Zimmern und Balkon. Bietet Platz für 3-4 Personen."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"features": "Ausstattung",
|
||||||
|
"gallery": "Galerie",
|
||||||
|
"book_now_cta": "Kontakt aufnehmen",
|
||||||
|
"not_found": "Wohnung nicht gefunden."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gallery": {
|
||||||
|
"title": "Eingefangenes Slow Living",
|
||||||
|
"description": "Entdecken Sie die ruhige Atmosphäre von Akyaka durch unsere Linse. Jeder Winkel ist auf authentischen Komfort ausgelegt.",
|
||||||
|
"filters": {
|
||||||
|
"all": "Alle",
|
||||||
|
"rooms": "Zimmer",
|
||||||
|
"exterior": "Außenansicht",
|
||||||
|
"view": "Aussicht",
|
||||||
|
"balcony": "Balkon"
|
||||||
|
},
|
||||||
|
"items": {
|
||||||
|
"1": "Boutique-Interieur",
|
||||||
|
"2": "Die Architektur",
|
||||||
|
"3": "Küstenpanorama",
|
||||||
|
"4": "Morgenkaffee",
|
||||||
|
"5": "Organische Details",
|
||||||
|
"6": "Dorfpanorama"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Finden Sie uns in Akyaka",
|
||||||
|
"description": "Das Sitar liegt im Herzen von Akyaka und bietet die perfekte Balance zwischen ruhiger Abgeschiedenheit und Küstennähe.",
|
||||||
|
"walking_distance": "Gehweite",
|
||||||
|
"locations": {
|
||||||
|
"beach": {
|
||||||
|
"title": "Akyaka Strand",
|
||||||
|
"desc": "10 Minuten sanfter Spaziergang durch Kiefernwälder."
|
||||||
|
},
|
||||||
|
"market": {
|
||||||
|
"title": "Lokaler Bio-Markt",
|
||||||
|
"desc": "5 Minuten zu frischen Zitrusfrüchten und Dorfohonig."
|
||||||
|
},
|
||||||
|
"cafe": {
|
||||||
|
"title": "Azmak Fluss-Cafés",
|
||||||
|
"desc": "8 Minuten zu den kristallklaren Quellen."
|
||||||
|
},
|
||||||
|
"hiking": {
|
||||||
|
"title": "Wanderwege",
|
||||||
|
"desc": "Der Wanderweg beginnt nur 200 m hinter dem Hotel."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Senden Sie uns eine Nachricht",
|
||||||
|
"name": "Vollständiger Name",
|
||||||
|
"name_placeholder": "Max Mustermann",
|
||||||
|
"email": "E-Mail-Adresse",
|
||||||
|
"email_placeholder": "max@beispiel.de",
|
||||||
|
"subject": "Betreff",
|
||||||
|
"subject_placeholder": "Buchungsanfrage",
|
||||||
|
"message": "Nachricht",
|
||||||
|
"message_placeholder": "Wie können wir helfen?",
|
||||||
|
"submit": "Nachricht Senden"
|
||||||
|
},
|
||||||
|
"connect": {
|
||||||
|
"title": "Kontaktieren Sie uns",
|
||||||
|
"description": "Unser Team hilft Ihnen bei jedem Detail Ihrer Reise nach Akyaka.",
|
||||||
|
"phone": "Telefon",
|
||||||
|
"email": "E-Mail",
|
||||||
|
"address_title": "Unsere Adresse",
|
||||||
|
"address_value": "Karanfil Sokak No: 12, Akyaka",
|
||||||
|
"map_placeholder": "Interaktive Karte"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"footer": {
|
||||||
|
"about": "Die Ruhe von Akyaka ist mit Ihnen! Ein ruhiger Urlaub in zentraler Lage, 10 Gehminuten vom Meer entfernt.",
|
||||||
|
"contact": "Kontakt",
|
||||||
|
"address_1": "İnişdibi Cd. No:46",
|
||||||
|
"address_2": "Akyaka, Ula / Muğla",
|
||||||
|
"quick_links": "Schnelle Links",
|
||||||
|
"quick_links_rooms": "Wohnungen",
|
||||||
|
"quick_links_gallery": "Galerie",
|
||||||
|
"quick_links_contact": "Kontakt",
|
||||||
|
"rights": "© 2024 Sitar Apart & Hotel Akyaka. Alle Rechte vorbehalten."
|
||||||
|
}
|
||||||
|
}
|
||||||
+132
-5
@@ -1,14 +1,141 @@
|
|||||||
{
|
{
|
||||||
"nav": {
|
"nav": {
|
||||||
"home": "Home",
|
"home": "Home",
|
||||||
"about": "About Us",
|
"rooms": "Apartments",
|
||||||
"contact": "Contact"
|
"gallery": "Gallery",
|
||||||
|
"location": "Location",
|
||||||
|
"contact": "Contact",
|
||||||
|
"book_now": "Book Now"
|
||||||
},
|
},
|
||||||
"hero": {
|
"hero": {
|
||||||
"title": "Welcome",
|
"title": "Peace of Akyaka is With You",
|
||||||
"cta": "Learn More"
|
"subtitle": "Spacious apartments combining modern comfort with traditional touches, suitable for every need.",
|
||||||
|
"cta": "Explore Our Apartments",
|
||||||
|
"description": "Experience authentic slow living in the heart of Akyaka. Nestled between the mountains and the turquoise Aegean, discover the art of unhurried travel."
|
||||||
|
},
|
||||||
|
"features": {
|
||||||
|
"pool": "Outdoor Pool",
|
||||||
|
"wifi": "Free WiFi",
|
||||||
|
"kitchen": "Private Kitchen",
|
||||||
|
"parking": "Parking"
|
||||||
|
},
|
||||||
|
"home_rooms": {
|
||||||
|
"title": "Accommodation Options",
|
||||||
|
"subtitle": "Spacious apartments combining modern comfort with traditional touches, suitable for every need.",
|
||||||
|
"room_1": {
|
||||||
|
"title": "Studio Apartment",
|
||||||
|
"desc": "Comfortable studio for 1-2 people with a single bed, mini kitchen, and bathroom."
|
||||||
|
},
|
||||||
|
"room_2": {
|
||||||
|
"title": "1 Bedroom Apartment",
|
||||||
|
"desc": "Spacious apartment for 2 with a bedroom, living room with kitchenette, and balcony."
|
||||||
|
},
|
||||||
|
"room_3": {
|
||||||
|
"title": "2 Bedroom Apartment",
|
||||||
|
"desc": "Apartment with 2 separate rooms (one double, one single) and balcony. Accommodates 3-4 people."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rooms": {
|
||||||
|
"title": "Our Apartments",
|
||||||
|
"description": "We offer different apartment options to suit your needs at Sitar Apart & Hotel. Check out our apartments for a comfortable stay just 10 minutes walk from the sea.",
|
||||||
|
"capacity": "Guests",
|
||||||
|
"amenities": "Amenities",
|
||||||
|
"ask_price": "Ask for Price",
|
||||||
|
"per_night": "/ night",
|
||||||
|
"details_btn": "View Details",
|
||||||
|
"room_list": {
|
||||||
|
"1_0_daire": {
|
||||||
|
"name": "Studio Apartment",
|
||||||
|
"desc": "Comfortable studio for 1-2 people with a single bed, mini kitchen, and bathroom."
|
||||||
|
},
|
||||||
|
"1_1_daire_a": {
|
||||||
|
"name": "1 Bedroom Apartment",
|
||||||
|
"desc": "Spacious apartment for 2 with a bedroom, living room with kitchenette, and balcony."
|
||||||
|
},
|
||||||
|
"1_1_daire_b": {
|
||||||
|
"name": "2 Bedroom Apartment",
|
||||||
|
"desc": "Apartment with 2 separate rooms (one double, one single) and balcony. Accommodates 3-4 people."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"features": "Apartment Features",
|
||||||
|
"gallery": "Gallery",
|
||||||
|
"book_now_cta": "Contact to Book",
|
||||||
|
"not_found": "Apartment not found."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gallery": {
|
||||||
|
"title": "Slow Living Captured",
|
||||||
|
"description": "Explore the tranquil atmosphere of Akyaka through our lens. From sun-drenched balconies to our boutique interiors, every corner of Sitar is designed for authentic comfort.",
|
||||||
|
"filters": {
|
||||||
|
"all": "All",
|
||||||
|
"rooms": "Rooms",
|
||||||
|
"exterior": "Exterior",
|
||||||
|
"view": "View",
|
||||||
|
"balcony": "Balcony"
|
||||||
|
},
|
||||||
|
"items": {
|
||||||
|
"1": "Boutique Interior",
|
||||||
|
"2": "The Architecture",
|
||||||
|
"3": "Coastal Vistas",
|
||||||
|
"4": "Morning Coffee Spot",
|
||||||
|
"5": "Organic Details",
|
||||||
|
"6": "Village Panorama"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Find Us in Akyaka",
|
||||||
|
"description": "Nestled in the heart of Akyaka's slow-living paradise, Sitar offers the perfect balance between serene seclusion and coastal proximity.",
|
||||||
|
"walking_distance": "Walking Distance",
|
||||||
|
"locations": {
|
||||||
|
"beach": {
|
||||||
|
"title": "Akyaka Blue Flag Beach",
|
||||||
|
"desc": "10 minute gentle stroll through pine trees."
|
||||||
|
},
|
||||||
|
"market": {
|
||||||
|
"title": "Local Organic Market",
|
||||||
|
"desc": "5 minutes to fresh citrus and village honey."
|
||||||
|
},
|
||||||
|
"cafe": {
|
||||||
|
"title": "Azmak Riverside Cafes",
|
||||||
|
"desc": "8 minutes to the iconic crystal-clear springs."
|
||||||
|
},
|
||||||
|
"hiking": {
|
||||||
|
"title": "Forest Hiking Trails",
|
||||||
|
"desc": "Trailhead begins just 200m behind the otel."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Send us a message",
|
||||||
|
"name": "Full Name",
|
||||||
|
"name_placeholder": "John Doe",
|
||||||
|
"email": "Email Address",
|
||||||
|
"email_placeholder": "john@example.com",
|
||||||
|
"subject": "Subject",
|
||||||
|
"subject_placeholder": "Booking Inquiry",
|
||||||
|
"message": "Message",
|
||||||
|
"message_placeholder": "Tell us how we can help...",
|
||||||
|
"submit": "Send Message"
|
||||||
|
},
|
||||||
|
"connect": {
|
||||||
|
"title": "Let's Connect",
|
||||||
|
"description": "Whether you're planning your first visit to Akyaka or returning for another slow-living escape, our team is here to assist with every detail.",
|
||||||
|
"phone": "Phone",
|
||||||
|
"email": "Email",
|
||||||
|
"address_title": "Our Address",
|
||||||
|
"address_value": "Karanfil Sokak No: 12, Akyaka",
|
||||||
|
"map_placeholder": "Interactive Map Placeholder"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"rights": "All rights reserved."
|
"about": "Peace of Akyaka is With You! A peaceful holiday in a central location, 10 minutes walking distance to the sea.",
|
||||||
|
"contact": "Contact",
|
||||||
|
"address_1": "İnişdibi Cd. No:46",
|
||||||
|
"address_2": "Akyaka, Ula / Muğla, Turkey",
|
||||||
|
"quick_links": "Quick Links",
|
||||||
|
"quick_links_rooms": "Apartments",
|
||||||
|
"quick_links_gallery": "Gallery",
|
||||||
|
"quick_links_contact": "Contact",
|
||||||
|
"rights": "© 2024 Sitar Apart & Hotel Akyaka. All rights reserved."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+132
-5
@@ -1,14 +1,141 @@
|
|||||||
{
|
{
|
||||||
"nav": {
|
"nav": {
|
||||||
"home": "Ana Sayfa",
|
"home": "Ana Sayfa",
|
||||||
"about": "Hakkımızda",
|
"rooms": "Dairelerimiz",
|
||||||
"contact": "İletişim"
|
"gallery": "Galeri",
|
||||||
|
"location": "Konum",
|
||||||
|
"contact": "İletişim",
|
||||||
|
"book_now": "Rezervasyon"
|
||||||
},
|
},
|
||||||
"hero": {
|
"hero": {
|
||||||
"title": "Hoş Geldiniz",
|
"title": "Akyaka'nın Huzuru Sizinle",
|
||||||
"cta": "Daha Fazla Bilgi"
|
"subtitle": "Modern konforun geleneksel dokunuşlarla buluştuğu, her ihtiyaca uygun geniş apart dairelerimiz.",
|
||||||
|
"cta": "Dairelerimizi İnceleyin",
|
||||||
|
"description": "Akyaka'nın kalbinde otantik ve yavaş bir yaşam deneyimi. Dağlar ile turkuaz Ege denizi arasına gizlenmiş, telaşsız seyahat etme sanatını keşfedin."
|
||||||
|
},
|
||||||
|
"features": {
|
||||||
|
"pool": "Açık Havuz",
|
||||||
|
"wifi": "Ücretsiz WiFi",
|
||||||
|
"kitchen": "Özel Mutfak",
|
||||||
|
"parking": "Otopark"
|
||||||
|
},
|
||||||
|
"home_rooms": {
|
||||||
|
"title": "Konaklama Seçeneklerimiz",
|
||||||
|
"subtitle": "Modern konforun geleneksel dokunuşlarla buluştuğu, her ihtiyaca uygun geniş apart dairelerimiz.",
|
||||||
|
"room_1": {
|
||||||
|
"title": "1+0 Dairemiz",
|
||||||
|
"desc": "Stüdyo tip, tek yataklı, mini mutfak ve banyo içeren konforlu 1-2 kişilik dairelerimiz."
|
||||||
|
},
|
||||||
|
"room_2": {
|
||||||
|
"title": "1+1 Dairemiz",
|
||||||
|
"desc": "Yatak odası ve ayrı mutfak köşeli salon, balkonlu, 2 kişilik ferah dairelerimiz."
|
||||||
|
},
|
||||||
|
"room_3": {
|
||||||
|
"title": "1+1 Dairemiz (2 Oda)",
|
||||||
|
"desc": "2 kişilik ve 1 kişilik olmak üzere 2 ayrı oda içeren balkonlu dairelerimiz. 3-4 kişi konaklayabilir."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rooms": {
|
||||||
|
"title": "Dairelerimiz",
|
||||||
|
"description": "Sitar Apart & Otel'de ihtiyacınıza uygun farklı daire seçenekleri sunuyoruz. Denize 10 dakika yürüme mesafesinde konforlu bir konaklama için dairelerimizi inceleyin.",
|
||||||
|
"capacity": "Kişilik",
|
||||||
|
"amenities": "Olanak",
|
||||||
|
"ask_price": "Fiyat sorunuz",
|
||||||
|
"per_night": "/ gece",
|
||||||
|
"details_btn": "Detaylı İncele",
|
||||||
|
"room_list": {
|
||||||
|
"1_0_daire": {
|
||||||
|
"name": "1+0 Dairemiz",
|
||||||
|
"desc": "Stüdyo tip, tek yataklı, mini mutfak ve banyo içeren 1-2 kişilik dairelerimiz."
|
||||||
|
},
|
||||||
|
"1_1_daire_a": {
|
||||||
|
"name": "1+1 Dairemiz",
|
||||||
|
"desc": "Yatak odası ve ayrı mutfak köşeli salon, balkonlu, 2 kişilik ferah dairelerimiz."
|
||||||
|
},
|
||||||
|
"1_1_daire_b": {
|
||||||
|
"name": "1+1 Dairemiz (2 Oda)",
|
||||||
|
"desc": "2 kişilik ve 1 kişilik olmak üzere 2 ayrı oda içeren balkonlu dairelerimiz. 3-4 kişi konaklayabilir."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"features": "Daire Özellikleri",
|
||||||
|
"gallery": "Daireden Kareler",
|
||||||
|
"book_now_cta": "Hemen İletişime Geçin",
|
||||||
|
"not_found": "Daire bulunamadı."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gallery": {
|
||||||
|
"title": "Yavaş Yaşamın Kareleri",
|
||||||
|
"description": "Akyaka'nın huzurlu atmosferini objektifimizden keşfedin. Güneş alan balkonlardan butik iç mekanlarımıza kadar Sitar'ın her köşesi otantik bir konfor için tasarlandı.",
|
||||||
|
"filters": {
|
||||||
|
"all": "Tümü",
|
||||||
|
"rooms": "Odalar",
|
||||||
|
"exterior": "Dış Mekan",
|
||||||
|
"view": "Manzara",
|
||||||
|
"balcony": "Balkon"
|
||||||
|
},
|
||||||
|
"items": {
|
||||||
|
"1": "Butik İç Mekan",
|
||||||
|
"2": "Mimari",
|
||||||
|
"3": "Sahil Manzarası",
|
||||||
|
"4": "Sabah Kahvesi Köşesi",
|
||||||
|
"5": "Organik Detaylar",
|
||||||
|
"6": "Köy Panoraması"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Akyaka'da Bizi Bulun",
|
||||||
|
"description": "Akyaka'nın yavaş yaşam cennetinin kalbinde yer alan Sitar, sakin bir inziva ile sahile yakınlık arasında mükemmel bir denge sunuyor.",
|
||||||
|
"walking_distance": "Yürüme Mesafesi",
|
||||||
|
"locations": {
|
||||||
|
"beach": {
|
||||||
|
"title": "Akyaka Mavi Bayraklı Plaj",
|
||||||
|
"desc": "Çam ağaçları arasından 10 dakikalık keyifli bir yürüyüş."
|
||||||
|
},
|
||||||
|
"market": {
|
||||||
|
"title": "Yerel Organik Pazar",
|
||||||
|
"desc": "Taze narenciye ve köy balına 5 dakika uzaklıkta."
|
||||||
|
},
|
||||||
|
"cafe": {
|
||||||
|
"title": "Azmak Kenarı Kafeleri",
|
||||||
|
"desc": "İkonik, kristal berraklığındaki su kaynaklarına 8 dakika."
|
||||||
|
},
|
||||||
|
"hiking": {
|
||||||
|
"title": "Orman Yürüyüş Parkurları",
|
||||||
|
"desc": "Parkur başlangıcı otelin sadece 200m arkasında."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Bize Mesaj Gönderin",
|
||||||
|
"name": "Ad Soyad",
|
||||||
|
"name_placeholder": "Adınız Soyadınız",
|
||||||
|
"email": "E-posta Adresi",
|
||||||
|
"email_placeholder": "ornek@mail.com",
|
||||||
|
"subject": "Konu",
|
||||||
|
"subject_placeholder": "Rezervasyon Talebi",
|
||||||
|
"message": "Mesajınız",
|
||||||
|
"message_placeholder": "Size nasıl yardımcı olabiliriz?",
|
||||||
|
"submit": "Mesaj Gönder"
|
||||||
|
},
|
||||||
|
"connect": {
|
||||||
|
"title": "İletişime Geçin",
|
||||||
|
"description": "İster Akyaka'ya ilk ziyaretinizi planlıyor olun, isterseniz yeni bir yavaş yaşam kaçamağı için geri dönüyor olun, ekibimiz her detayda size yardımcı olmak için burada.",
|
||||||
|
"phone": "Telefon",
|
||||||
|
"email": "E-posta",
|
||||||
|
"address_title": "Adresimiz",
|
||||||
|
"address_value": "Karanfil Sokak No: 12, Akyaka",
|
||||||
|
"map_placeholder": "İnteraktif Harita"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"rights": "Tüm hakları saklıdır."
|
"about": "Akyaka'nın Huzuru Sizinle! Denize 10 dakika yürüme mesafesinde, merkezi konumda huzurlu bir tatil.",
|
||||||
|
"contact": "İletişim",
|
||||||
|
"address_1": "İnişdibi Cd. No:46",
|
||||||
|
"address_2": "Akyaka, Ula / Muğla",
|
||||||
|
"quick_links": "Hızlı Bağlantılar",
|
||||||
|
"quick_links_rooms": "Dairelerimiz",
|
||||||
|
"quick_links_gallery": "Galeri",
|
||||||
|
"quick_links_contact": "İletişim",
|
||||||
|
"rights": "© 2024 Sitar Apart & Otel Akyaka. Tüm hakları saklıdır."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+52
-161
@@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"name": "fethiye-holiday",
|
"name": "starapart",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "fethiye-holiday",
|
"name": "starapart",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@base-ui/react": "^1.5.0",
|
"@base-ui/react": "^1.5.0",
|
||||||
@@ -14,7 +14,8 @@
|
|||||||
"cloudinary": "^2.10.0",
|
"cloudinary": "^2.10.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"developer-icons": "^7.0.1",
|
"developer-icons": "^7.0.1",
|
||||||
"framer-motion": "^12.40.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"framer-motion": "^12.42.2",
|
||||||
"lucide-react": "^1.18.0",
|
"lucide-react": "^1.18.0",
|
||||||
"next": "16.2.9",
|
"next": "16.2.9",
|
||||||
"next-auth": "^5.0.0-beta.31",
|
"next-auth": "^5.0.0-beta.31",
|
||||||
@@ -26,6 +27,7 @@
|
|||||||
"tw-animate-css": "^1.4.0"
|
"tw-animate-css": "^1.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@prisma/config": "^7.8.0",
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
@@ -1198,9 +1200,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1217,9 +1216,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1236,9 +1232,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1255,9 +1248,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1274,9 +1264,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1293,9 +1280,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1312,9 +1296,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1331,9 +1312,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1350,9 +1328,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1375,9 +1350,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1400,9 +1372,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1425,9 +1394,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1450,9 +1416,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1475,9 +1438,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1500,9 +1460,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1525,9 +1482,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1807,9 +1761,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1826,9 +1777,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1845,9 +1793,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1864,9 +1809,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2123,9 +2065,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2146,9 +2085,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2169,9 +2105,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2192,9 +2125,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2215,9 +2145,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2238,9 +2165,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2780,9 +2704,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2799,9 +2720,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2818,9 +2736,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2837,9 +2752,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2856,9 +2768,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2875,9 +2784,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "Apache-2.0 AND MIT",
|
"license": "Apache-2.0 AND MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3092,9 +2998,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3112,9 +3015,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3132,9 +3032,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3152,9 +3049,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3373,7 +3267,7 @@
|
|||||||
"version": "19.2.3",
|
"version": "19.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^19.2.0"
|
"@types/react": "^19.2.0"
|
||||||
@@ -3786,9 +3680,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3803,9 +3694,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3820,9 +3708,6 @@
|
|||||||
"loong64"
|
"loong64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3837,9 +3722,6 @@
|
|||||||
"loong64"
|
"loong64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3854,9 +3736,6 @@
|
|||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3871,9 +3750,6 @@
|
|||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3888,9 +3764,6 @@
|
|||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3905,9 +3778,6 @@
|
|||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3922,9 +3792,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3939,9 +3806,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -5291,6 +5155,34 @@
|
|||||||
"integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
|
"integrity": "sha512-M3yhbAlilnwqC8D21t28UCDGHyitShTmmLRU/H+b74P6Ski16Nb9HONYEaVpMj/pwC7BEo5B95FpjODLCWbtfA==",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
|
"node_modules/embla-carousel": {
|
||||||
|
"version": "8.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||||
|
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/embla-carousel-react": {
|
||||||
|
"version": "8.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
|
||||||
|
"integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"embla-carousel": "8.6.0",
|
||||||
|
"embla-carousel-reactive-utils": "8.6.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/embla-carousel-reactive-utils": {
|
||||||
|
"version": "8.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
|
||||||
|
"integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"embla-carousel": "8.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/emoji-regex": {
|
"node_modules/emoji-regex": {
|
||||||
"version": "9.2.2",
|
"version": "9.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
|
||||||
@@ -6386,12 +6278,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/framer-motion": {
|
"node_modules/framer-motion": {
|
||||||
"version": "12.40.0",
|
"version": "12.42.2",
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz",
|
||||||
"integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
|
"integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"motion-dom": "^12.40.0",
|
"motion-dom": "^12.42.2",
|
||||||
"motion-utils": "^12.39.0",
|
"motion-utils": "^12.39.0",
|
||||||
"tslib": "^2.4.0"
|
"tslib": "^2.4.0"
|
||||||
},
|
},
|
||||||
@@ -7933,9 +7825,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -7957,9 +7846,6 @@
|
|||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -7981,9 +7867,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"glibc"
|
|
||||||
],
|
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -8005,9 +7888,6 @@
|
|||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"libc": [
|
|
||||||
"musl"
|
|
||||||
],
|
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -8329,9 +8209,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/motion-dom": {
|
"node_modules/motion-dom": {
|
||||||
"version": "12.40.0",
|
"version": "12.42.2",
|
||||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
|
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz",
|
||||||
"integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
|
"integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"motion-utils": "^12.39.0"
|
"motion-utils": "^12.39.0"
|
||||||
@@ -8590,6 +8470,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/next-intl/node_modules/@swc/helpers": {
|
||||||
|
"version": "0.5.23",
|
||||||
|
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
|
||||||
|
"integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"optional": true,
|
||||||
|
"peer": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/next/node_modules/postcss": {
|
"node_modules/next/node_modules/postcss": {
|
||||||
"version": "8.4.31",
|
"version": "8.4.31",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||||
|
|||||||
+4
-2
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "fethiye-holiday",
|
"name": "starapart",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -15,7 +15,8 @@
|
|||||||
"cloudinary": "^2.10.0",
|
"cloudinary": "^2.10.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"developer-icons": "^7.0.1",
|
"developer-icons": "^7.0.1",
|
||||||
"framer-motion": "^12.40.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"framer-motion": "^12.42.2",
|
||||||
"lucide-react": "^1.18.0",
|
"lucide-react": "^1.18.0",
|
||||||
"next": "16.2.9",
|
"next": "16.2.9",
|
||||||
"next-auth": "^5.0.0-beta.31",
|
"next-auth": "^5.0.0-beta.31",
|
||||||
@@ -27,6 +28,7 @@
|
|||||||
"tw-animate-css": "^1.4.0"
|
"tw-animate-css": "^1.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@prisma/config": "^7.8.0",
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { defineConfig } from '@prisma/config'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
})
|
||||||
+94
-23
@@ -4,7 +4,6 @@ generator client {
|
|||||||
|
|
||||||
datasource db {
|
datasource db {
|
||||||
provider = "postgresql"
|
provider = "postgresql"
|
||||||
url = env("DATABASE_URL")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
enum Role {
|
enum Role {
|
||||||
@@ -13,31 +12,31 @@ enum Role {
|
|||||||
}
|
}
|
||||||
|
|
||||||
model User {
|
model User {
|
||||||
id String @id @default(cuid())
|
id String @id @default(cuid())
|
||||||
name String?
|
name String?
|
||||||
email String @unique
|
email String @unique
|
||||||
password String?
|
password String?
|
||||||
role Role @default(USER)
|
role Role @default(USER)
|
||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
deletedAt DateTime?
|
deletedAt DateTime?
|
||||||
accounts Account[]
|
accounts Account[]
|
||||||
sessions Session[]
|
sessions Session[]
|
||||||
}
|
}
|
||||||
|
|
||||||
model Account {
|
model Account {
|
||||||
id String @id @default(cuid())
|
id String @id @default(cuid())
|
||||||
userId String
|
userId String
|
||||||
type String
|
type String
|
||||||
provider String
|
provider String
|
||||||
providerAccountId String
|
providerAccountId String
|
||||||
refresh_token String? @db.Text
|
refresh_token String? @db.Text
|
||||||
access_token String? @db.Text
|
access_token String? @db.Text
|
||||||
expires_at Int?
|
expires_at Int?
|
||||||
token_type String?
|
token_type String?
|
||||||
scope String?
|
scope String?
|
||||||
id_token String? @db.Text
|
id_token String? @db.Text
|
||||||
session_state String?
|
session_state String?
|
||||||
|
|
||||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
@@ -59,3 +58,75 @@ model VerificationToken {
|
|||||||
|
|
||||||
@@unique([identifier, token])
|
@@unique([identifier, token])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
enum RoomType {
|
||||||
|
STUDIO_1_0
|
||||||
|
SUITE_1_1
|
||||||
|
}
|
||||||
|
|
||||||
|
model Room {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
slug String @unique
|
||||||
|
type RoomType
|
||||||
|
nameTr String
|
||||||
|
nameEn String
|
||||||
|
nameDe String
|
||||||
|
descriptionTr String
|
||||||
|
descriptionEn String
|
||||||
|
descriptionDe String
|
||||||
|
capacity Int
|
||||||
|
price Int?
|
||||||
|
imageUrl String?
|
||||||
|
images String[]
|
||||||
|
amenities String[]
|
||||||
|
available Boolean @default(true)
|
||||||
|
featured Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
deletedAt DateTime?
|
||||||
|
reservations Reservation[]
|
||||||
|
}
|
||||||
|
|
||||||
|
enum ReservationStatus {
|
||||||
|
PENDING
|
||||||
|
CONFIRMED
|
||||||
|
CANCELLED
|
||||||
|
}
|
||||||
|
|
||||||
|
model Reservation {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
roomId String
|
||||||
|
room Room @relation(fields: [roomId], references: [id])
|
||||||
|
checkIn DateTime
|
||||||
|
checkOut DateTime
|
||||||
|
adults Int
|
||||||
|
children Int @default(0)
|
||||||
|
fullName String
|
||||||
|
email String
|
||||||
|
phone String
|
||||||
|
message String?
|
||||||
|
status ReservationStatus @default(PENDING)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
deletedAt DateTime?
|
||||||
|
}
|
||||||
|
|
||||||
|
model ContactMessage {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
fullName String
|
||||||
|
email String
|
||||||
|
phone String
|
||||||
|
message String @db.Text
|
||||||
|
read Boolean @default(false)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
deletedAt DateTime?
|
||||||
|
}
|
||||||
|
|
||||||
|
model Gallery {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
url String
|
||||||
|
category String?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user