first commit
This commit is contained in:
+1
-1
@@ -9,7 +9,7 @@
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
/docs
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { setRequestLocale } from "next-intl/server";
|
||||
import Image from "next/image";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
|
||||
export default async function GaleriPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
|
||||
// Combine hero slides and accommodation images for a rich gallery
|
||||
const allImages = [
|
||||
...mockData.heroSlides.map((url, i) => ({ id: `slide-${i}`, url, title: "Kordon Apart" })),
|
||||
...mockData.accommodations.map(r => ({ id: r.id, url: r.image, title: r.name }))
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="pt-32 min-h-screen max-w-7xl mx-auto px-4 md:px-12 pb-24">
|
||||
<div className="mb-16 text-center max-w-2xl mx-auto">
|
||||
<h1 className="font-heading text-4xl md:text-5xl font-bold text-primary dark:text-primary-fixed-dim mb-4">Galeri</h1>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline text-lg">
|
||||
Kordon Apart'ın eşsiz atmosferini, mimarisini ve Fethiye'nin güzelliklerini keşfedin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{allImages.map((img) => (
|
||||
<div key={img.id} className="relative aspect-square w-full rounded-xl overflow-hidden group cursor-pointer shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
<Image
|
||||
src={img.url}
|
||||
alt={img.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { setRequestLocale, getTranslations } from 'next-intl/server';
|
||||
import { ContactContent } from '@/components/contact-content';
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: 'nav' });
|
||||
return {
|
||||
title: `${t('contact')} - Kordon Apart`,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
|
||||
return <ContactContent />;
|
||||
}
|
||||
+29
-12
@@ -1,24 +1,28 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Inter, Montserrat } from "next/font/google";
|
||||
import { NextIntlClientProvider } from 'next-intl';
|
||||
import { getMessages, setRequestLocale } from 'next-intl/server';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { routing } from '@/i18n/routing';
|
||||
import { Navbar } from '@/components/navbar';
|
||||
import { Footer } from '@/components/footer';
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { Toaster } from "sonner";
|
||||
import "../globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const montserrat = Montserrat({
|
||||
variable: "--font-montserrat",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Boilerplate App",
|
||||
description: "Next.js boilerplate with next-intl and NextAuth",
|
||||
title: "Kordon Apart - Fethiye",
|
||||
description: "Kordon Apart Fethiye / Merkez - Delüks ve Premium Apart Odalar",
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
@@ -44,12 +48,25 @@ export default async function RootLayout({
|
||||
return (
|
||||
<html
|
||||
lang={locale}
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
className={`${inter.variable} ${montserrat.variable} h-full antialiased`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body className="min-h-full flex flex-col" suppressHydrationWarning>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
{children}
|
||||
</NextIntlClientProvider>
|
||||
<body className="min-h-full flex flex-col bg-surface dark:bg-inverse-surface text-on-surface dark:text-inverse-on-surface transition-colors duration-300" suppressHydrationWarning>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange={false}
|
||||
>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
<Navbar />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
<Toaster position="bottom-right" richColors theme="system" />
|
||||
</NextIntlClientProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { setRequestLocale } from "next-intl/server";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
|
||||
export default async function RoomDetailPage({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{ locale: string; slug: string }>
|
||||
}) {
|
||||
const { locale, slug } = await params;
|
||||
setRequestLocale(locale);
|
||||
|
||||
const room = mockData.accommodations.find(r => r.slug === slug);
|
||||
if (!room) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 min-h-screen max-w-7xl mx-auto px-4 md:px-12 pb-24">
|
||||
<div className="relative w-full h-[500px] rounded-xl overflow-hidden mb-12">
|
||||
<Image
|
||||
src={room.image}
|
||||
alt={room.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#002045]/80 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 p-12 text-white">
|
||||
<span className="bg-[#CA8A04] text-white px-3 py-1 rounded-full font-label-sm text-[12px] uppercase font-bold tracking-wider mb-4 inline-block">
|
||||
{room.type}
|
||||
</span>
|
||||
<h1 className="font-heading text-5xl md:text-6xl font-bold mb-4">{room.name}</h1>
|
||||
<p className="font-body-lg text-xl text-white/90">
|
||||
{room.location} • {room.bedrooms} Yatak Odası • {room.capacity} Kişi
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="font-heading text-3xl text-primary dark:text-primary-fixed-dim font-bold mb-6">Oda Detayları</h2>
|
||||
<p className="font-body-md text-lg text-on-surface-variant dark:text-outline leading-relaxed mb-8">
|
||||
Bu oda, konforunuz için özenle tasarlanmış benzersiz bir yaşam alanı sunar.
|
||||
{room.name}, muhteşem Fethiye manzarasıyla birleşen lüks dokunuşlarla unutulmaz bir konaklama deneyimi vadediyor.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import { setRequestLocale } from "next-intl/server";
|
||||
import { RoomList } from "@/components/home/room-list";
|
||||
|
||||
export default async function OdalarPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
|
||||
return (
|
||||
<div className="pt-24 min-h-screen">
|
||||
<RoomList />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+14
-43
@@ -1,48 +1,19 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import Link from 'next/link'
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { Hero } from '@/components/home/hero';
|
||||
import { RoomList } from '@/components/home/room-list';
|
||||
import { Services } from '@/components/home/services';
|
||||
import { Newsletter } from '@/components/home/newsletter';
|
||||
|
||||
export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const t = await getTranslations('hero')
|
||||
const nav = await getTranslations('nav')
|
||||
const footer = await getTranslations('footer')
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-screen">
|
||||
<header className="px-6 py-4 border-b flex items-center justify-between">
|
||||
<div className="font-bold text-xl">Boilerplate</div>
|
||||
<nav className="space-x-4">
|
||||
<Link href="/" className="text-gray-600 hover:text-gray-900">{nav('home')}</Link>
|
||||
<Link href="/about" className="text-gray-600 hover:text-gray-900">{nav('about')}</Link>
|
||||
<Link href="/contact" className="text-gray-600 hover:text-gray-900">{nav('contact')}</Link>
|
||||
<Link href="/login" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm">Login</Link>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col items-center justify-center text-center px-4">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-7xl mb-6">
|
||||
{t('title')}
|
||||
</h1>
|
||||
<p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto mb-8">
|
||||
This is a dummy landing page to demonstrate the localization setup using next-intl.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<button className="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition">
|
||||
{t('cta')}
|
||||
</button>
|
||||
|
||||
<div className="flex bg-gray-100 rounded-full p-1">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="py-6 border-t text-center text-gray-500 text-sm">
|
||||
<p>{footer('rights')} <a href="https://ayris.tech" className="hover:text-blue-600 transition">Created by ayris.tech</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
<>
|
||||
<Hero />
|
||||
<RoomList />
|
||||
<Services />
|
||||
<Newsletter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+125
-98
@@ -5,116 +5,125 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
/* Shadcn UI Variables */
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--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-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
/* Luxe Stay Design Tokens - Clean High Contrast Luxury */
|
||||
--color-surface: #ffffff;
|
||||
--color-on-surface: #0f172a;
|
||||
--color-on-surface-variant: #475569;
|
||||
--color-surface-container-lowest: #ffffff;
|
||||
--color-surface-container-low: #f8fafc;
|
||||
--color-surface-container: #f1f5f9;
|
||||
--color-surface-container-high: #e2e8f0;
|
||||
--color-surface-container-highest: #cbd5e1;
|
||||
--color-surface-variant: #f1f5f9;
|
||||
--color-primary-container: #1e293b;
|
||||
--color-on-primary-container: #f8fafc;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-secondary-container: #e2e8f0;
|
||||
--color-on-secondary-container: #0f172a;
|
||||
--color-tertiary: #2d1d00;
|
||||
--color-on-tertiary: #ffffff;
|
||||
--color-tertiary-container: #493100;
|
||||
--color-on-tertiary-container: #cb9524;
|
||||
--color-tertiary-fixed: #ffdeaa;
|
||||
--color-tertiary-fixed-dim: #f8bc4b;
|
||||
--color-outline: #64748b;
|
||||
--color-outline-variant: #cbd5e1;
|
||||
--color-inverse-surface: #0f172a;
|
||||
--color-inverse-on-surface: #f8fafc;
|
||||
--color-primary-fixed-dim: #94a3b8;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: var(--font-inter);
|
||||
--font-heading: var(--font-montserrat);
|
||||
--font-label-sm: var(--font-inter);
|
||||
--font-headline-md: var(--font-montserrat);
|
||||
--font-display-lg-mobile: var(--font-montserrat);
|
||||
--font-display-lg: var(--font-montserrat);
|
||||
--font-body-lg: var(--font-inter);
|
||||
--font-body-md: var(--font-inter);
|
||||
|
||||
/* Spacing */
|
||||
--spacing-margin-desktop: 48px;
|
||||
--spacing-margin-mobile: 16px;
|
||||
--spacing-container-max: 1280px;
|
||||
--spacing-stack-sm: 8px;
|
||||
--spacing-stack-md: 24px;
|
||||
--spacing-stack-lg: 48px;
|
||||
--spacing-gutter: 24px;
|
||||
|
||||
/* Radius */
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 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);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
/* Mapping Shadcn to Luxe Stay */
|
||||
--background: #ffffff;
|
||||
--foreground: #0f172a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0f172a;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #0f172a;
|
||||
--primary: #0f172a;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f1f5f9;
|
||||
--secondary-foreground: #0f172a;
|
||||
--muted: #f8fafc;
|
||||
--muted-foreground: #64748b;
|
||||
--accent: #f1f5f9;
|
||||
--accent-foreground: #0f172a;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e2e8f0;
|
||||
--input: #c4c6cf;
|
||||
--ring: #002045;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--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);
|
||||
/* Inverse for Dark Mode */
|
||||
--background: #020617;
|
||||
--foreground: #f8fafc;
|
||||
--card: #0f172a;
|
||||
--card-foreground: #f8fafc;
|
||||
--popover: #0f172a;
|
||||
--popover-foreground: #f8fafc;
|
||||
--primary: #f8fafc;
|
||||
--primary-foreground: #0f172a;
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
--destructive: #7f1d1d;
|
||||
--destructive-foreground: #f8fafc;
|
||||
--border: #1e293b;
|
||||
--input: #1e293b;
|
||||
--ring: #f8fafc;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -122,9 +131,27 @@
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-surface text-on-surface font-body-md;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
::selection {
|
||||
@apply bg-primary text-primary-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility: Respect reduced motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
export function ContactContent() {
|
||||
const t = useTranslations("contact");
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
// Simulate network request
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
setIsLoading(false);
|
||||
toast.success("Talebiniz başarıyla alındı!", {
|
||||
description: "En kısa sürede size dönüş yapacağız.",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-24 relative overflow-hidden">
|
||||
{/* Decorative background blob */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-slate-200/50 dark:bg-slate-800/30 rounded-full blur-[100px] -z-10 opacity-50" />
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-5xl font-black text-slate-900 dark:text-white mb-16 text-center tracking-tight"
|
||||
>
|
||||
{t("title")}
|
||||
</motion.h1>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-3xl p-10 rounded-[2rem] border border-white dark:border-slate-800 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("title")}</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="group">
|
||||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("email")}</p>
|
||||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.email}</p>
|
||||
</div>
|
||||
<div className="group">
|
||||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("phone")}</p>
|
||||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200">{mockData.contact.phone}</p>
|
||||
</div>
|
||||
<div className="group">
|
||||
<p className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">{t("address")}</p>
|
||||
<p className="text-xl font-medium text-slate-800 dark:text-slate-200 leading-relaxed max-w-xs">{mockData.contact.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="bg-white dark:bg-slate-900 p-10 rounded-[2rem] shadow-[0_20px_50px_rgb(0,0,0,0.08)] border border-slate-100 dark:border-slate-800"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-10">{t("reservationReq")}</h2>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("email")}</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 placeholder:text-slate-400 dark:placeholder:text-slate-600 text-slate-900 dark:text-white"
|
||||
placeholder="ornek@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">{t("reservationNo")} <span className="text-slate-400 dark:text-slate-500 font-normal">(Opsiyonel)</span></label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border-none bg-slate-50 dark:bg-slate-950 rounded-xl px-5 py-4 focus:ring-2 focus:ring-slate-900 dark:focus:ring-slate-100 outline-none transition-all hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex justify-center items-center gap-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-100 px-8 py-5 rounded-xl font-bold text-lg tracking-wide transition-all hover:shadow-xl hover:-translate-y-1 active:translate-y-0 disabled:opacity-70 disabled:hover:translate-y-0 disabled:hover:shadow-none"
|
||||
>
|
||||
{isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : t("send")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
import { Share2, Mail } from "lucide-react";
|
||||
|
||||
const FacebookIcon = ({ className }: { className?: string }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const InstagramIcon = ({ className }: { className?: string }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
|
||||
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export function Footer() {
|
||||
const t = useTranslations("footer");
|
||||
|
||||
return (
|
||||
<footer className="w-full bg-surface-container-high dark:bg-inverse-surface border-t border-outline-variant/20 dark:border-outline/20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-4 md:px-12 py-24 max-w-7xl mx-auto">
|
||||
<div className="space-y-6">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={mockData.logos.main} alt="Kordon Apart Logo" className="h-10 w-auto" />
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline pr-4">
|
||||
{t("desc")}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Link href={mockData.contact.social.facebook} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
|
||||
<FacebookIcon className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link href={mockData.contact.social.instagram} className="w-10 h-10 rounded-full bg-primary/5 dark:bg-primary-fixed-dim/10 flex items-center justify-center text-primary dark:text-primary-fixed-dim hover:bg-primary dark:hover:bg-primary-fixed-dim hover:text-white dark:hover:text-primary-fixed transition-all">
|
||||
<InstagramIcon className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("pages")}</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("accommodations")}</Link></li>
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("about")}</Link></li>
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("reviews")}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("legal")}</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("privacyPolicy")}</Link></li>
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("userAgreement")}</Link></li>
|
||||
<li><Link className="font-body-md text-on-surface-variant dark:text-outline hover:text-secondary dark:hover:text-primary-fixed transition-colors" href="/">{t("cookiePolicy")}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-label-sm text-[12px] text-primary dark:text-primary-fixed-dim uppercase font-bold tracking-widest">{t("contact")}</h4>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.address}</p>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.phone}</p>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline">{mockData.contact.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-12 py-8 border-t border-outline-variant/30 dark:border-outline/20 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<span className="font-body-md text-on-surface-variant/70 dark:text-outline/70">
|
||||
© {new Date().getFullYear()} Kordon Apart. {t("rights")}
|
||||
</span>
|
||||
<div className="flex gap-8 items-center">
|
||||
<Link href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-primary dark:text-primary-fixed-dim font-semibold font-body-md hover:underline">
|
||||
Created by ayris.tech
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { motion } from "framer-motion";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export function Hero() {
|
||||
const t = useTranslations("hero");
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="relative h-[921px] min-h-[600px] w-full overflow-hidden"
|
||||
aria-label="Hero Section"
|
||||
>
|
||||
{/* Background Image - Using Next.js Image for optimization */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<motion.div
|
||||
initial={{ scale: 1.05 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 15, ease: "easeOut" }}
|
||||
style={{ willChange: "transform" }}
|
||||
className="relative w-full h-full motion-reduce:!transform-none"
|
||||
>
|
||||
<Image
|
||||
src={mockData.heroSlides[1]}
|
||||
alt="Kordon Apart - Fethiye Marina manzarası"
|
||||
fill
|
||||
className="object-cover object-[center_top]"
|
||||
priority
|
||||
sizes="100vw"
|
||||
/>
|
||||
</motion.div>
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#002045]/80 via-[#002045]/50 to-[#002045]/90" />
|
||||
</div>
|
||||
|
||||
{/* Hero Content */}
|
||||
<div className="relative z-10 h-full max-w-7xl mx-auto px-4 md:px-12 flex flex-col justify-center items-start pt-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="max-w-2xl motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<span className="font-label-sm text-[12px] text-white/80 uppercase tracking-widest mb-4 block font-bold">
|
||||
{t("subtitle")}
|
||||
</span>
|
||||
<h1 className="font-heading text-5xl md:text-6xl lg:text-7xl text-white mb-6 leading-tight font-extrabold tracking-tight">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className="font-body-lg text-lg text-white/90 mb-8 max-w-lg leading-relaxed" style={{ maxWidth: "65ch" }}>
|
||||
{t("desc")}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link
|
||||
href="#"
|
||||
className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px] flex items-center"
|
||||
role="button"
|
||||
>
|
||||
{t("explore")}
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="bg-white/10 backdrop-blur-md border border-white/20 text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-white/20 transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-white/50 focus:outline-none min-h-[48px] flex items-center"
|
||||
role="button"
|
||||
>
|
||||
{t("virtualTour")}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Bar Utility (Floating over Hero bottom) */}
|
||||
<div className="relative z-20 max-w-5xl mx-auto px-4 -mt-24 hidden md:block">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="bg-white p-8 rounded-xl shadow-2xl shadow-black/10 grid grid-cols-4 gap-6 items-end border border-gray-100 motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="check-in" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkIn")}</label>
|
||||
<input id="check-in" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="check-out" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkOut")}</label>
|
||||
<input id="check-out" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="guests" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("guests")}</label>
|
||||
<select id="guests" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]">
|
||||
<option value="1">{t("adult1")}</option>
|
||||
<option value="2">{t("adult2")}</option>
|
||||
<option value="3+">{t("adult3")}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button className="bg-[#CA8A04] text-white min-h-[48px] rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 font-bold cursor-pointer shadow-lg focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none">
|
||||
{t("checkAvailability")}
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function Newsletter() {
|
||||
const t = useTranslations("newsletter");
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-[#002045] text-white overflow-hidden relative" aria-label={t("title")}>
|
||||
{/* Decorative Background Elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0" aria-hidden="true">
|
||||
<div className="absolute -top-[20%] -left-[10%] w-[50%] h-[150%] bg-white/5 blur-3xl transform rotate-12 rounded-full" />
|
||||
<div className="absolute -bottom-[20%] -right-[10%] w-[50%] h-[150%] bg-[#CA8A04]/10 blur-3xl transform -rotate-12 rounded-full" />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-7xl mx-auto px-4 md:px-12 relative z-10 text-center motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<h2 className="font-heading text-4xl md:text-5xl text-white mb-6 font-bold tracking-tight">
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="font-body-lg text-lg text-white/70 mb-10 max-w-xl mx-auto" style={{ maxWidth: "65ch" }}>
|
||||
{t("desc")}
|
||||
</p>
|
||||
|
||||
<form className="max-w-md mx-auto flex flex-col md:flex-row gap-4" onSubmit={(e) => e.preventDefault()}>
|
||||
<label htmlFor="newsletter-email" className="sr-only">{t("label")}</label>
|
||||
<input
|
||||
id="newsletter-email"
|
||||
className="flex-1 bg-white/10 border border-white/20 text-white placeholder-white/40 rounded-lg px-6 py-4 focus:ring-2 focus:ring-[#CA8A04]/50 focus:border-[#CA8A04] outline-none transition-colors duration-200 min-h-[48px]"
|
||||
placeholder={t("placeholder")}
|
||||
type="email"
|
||||
required
|
||||
autoComplete="email"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm text-[12px] uppercase tracking-widest font-bold hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px]"
|
||||
>
|
||||
{t("subscribe")}
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export function RoomList() {
|
||||
const t = useTranslations("accommodations");
|
||||
|
||||
// We take the first 3 rooms for the bento grid
|
||||
const featuredRoom = mockData.accommodations[0];
|
||||
const sideRooms = mockData.accommodations.slice(1, 3);
|
||||
|
||||
return (
|
||||
<section className="py-24 max-w-7xl mx-auto px-4 md:px-12" aria-label="Odalarımız">
|
||||
<div className="flex justify-between items-end mb-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-2 motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<h2 className="font-heading text-3xl md:text-4xl font-bold text-primary dark:text-primary-fixed-dim">{t("title")}</h2>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline text-lg" style={{ maxWidth: "65ch" }}>{t("desc")}</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<Link href="/odalar" className="font-label-sm text-[12px] uppercase tracking-widest text-primary dark:text-primary-fixed-dim flex items-center gap-2 group font-bold cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-md px-2 py-1 min-h-[44px]">
|
||||
{t("viewAll")}
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bento-style Grid */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="grid grid-cols-1 md:grid-cols-12 gap-6 h-auto md:h-[600px] motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
<Link
|
||||
href={`/odalar/${featuredRoom.slug}`}
|
||||
className="md:col-span-8 group relative overflow-hidden rounded-xl cursor-pointer focus:ring-2 focus:ring-primary/50 focus:outline-none"
|
||||
aria-label={`${featuredRoom.name} - ${featuredRoom.type}`}
|
||||
>
|
||||
<div className="relative w-full h-full min-h-[300px]">
|
||||
<Image
|
||||
src={featuredRoom.image}
|
||||
alt={`${featuredRoom.name} - ${featuredRoom.type} oda görseli`}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 100vw, 66vw"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#002045]/90 via-[#002045]/20 to-transparent opacity-80" />
|
||||
|
||||
<div className="absolute bottom-0 left-0 p-8 text-white w-full">
|
||||
<div className="flex gap-2 mb-3">
|
||||
<span className="bg-[#CA8A04] text-white px-3 py-1 rounded-full font-label-sm text-[10px] uppercase font-bold tracking-wider">
|
||||
{t("bestseller")}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-heading text-3xl md:text-4xl font-bold mb-2">{featuredRoom.name}</h3>
|
||||
<p className="font-body-md text-white/80 text-lg">
|
||||
{featuredRoom.type} • {t("bedrooms", { count: featuredRoom.bedrooms })} • {t("persons", { count: featuredRoom.capacity })}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Side Stacked Items */}
|
||||
<div className="md:col-span-4 grid grid-rows-2 gap-6">
|
||||
{sideRooms.map((room) => (
|
||||
<Link
|
||||
href={`/odalar/${room.slug}`}
|
||||
key={room.id}
|
||||
className="group relative overflow-hidden rounded-xl cursor-pointer focus:ring-2 focus:ring-primary/50 focus:outline-none"
|
||||
aria-label={`${room.name} - ${room.type}`}
|
||||
>
|
||||
<div className="relative w-full h-full min-h-[150px]">
|
||||
<Image
|
||||
src={room.image}
|
||||
alt={`${room.name} - ${room.type} oda görseli`}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#002045]/80 to-transparent opacity-90" />
|
||||
<div className="absolute bottom-0 left-0 p-6 text-white w-full">
|
||||
<h4 className="font-label-sm text-[12px] uppercase tracking-wider font-bold text-[#CA8A04] mb-1">{room.type}</h4>
|
||||
<h3 className="font-heading text-xl font-semibold mb-1">{room.name}</h3>
|
||||
<p className="font-body-md text-white/80 text-sm">
|
||||
{t("persons", { count: room.capacity })}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { motion } from "framer-motion";
|
||||
import { Waves, UtensilsCrossed, ConciergeBell } from "lucide-react";
|
||||
|
||||
export function Services() {
|
||||
const t = useTranslations("services");
|
||||
|
||||
const container = {
|
||||
hidden: { opacity: 0 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.15,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const item = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
|
||||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Waves,
|
||||
title: t("service1_title"),
|
||||
desc: t("service1_desc"),
|
||||
},
|
||||
{
|
||||
icon: UtensilsCrossed,
|
||||
title: t("service2_title"),
|
||||
desc: t("service2_desc"),
|
||||
},
|
||||
{
|
||||
icon: ConciergeBell,
|
||||
title: t("service3_title"),
|
||||
desc: t("service3_desc"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-surface-container-low dark:bg-inverse-surface/50 py-24" aria-label="Hizmetlerimiz">
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-12">
|
||||
<div className="text-center max-w-2xl mx-auto mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="font-label-sm text-[12px] text-[#CA8A04] dark:text-[#F8BC4B] uppercase tracking-widest mb-4 block font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
{t("subtitle")}
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="font-heading text-4xl text-primary dark:text-primary-fixed-dim mb-4 font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
>
|
||||
{t("title")}
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="font-body-md text-on-surface-variant dark:text-outline text-lg motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
style={{ maxWidth: "65ch", margin: "0 auto" }}
|
||||
>
|
||||
{t("desc")}
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
variants={container}
|
||||
initial="hidden"
|
||||
whileInView="show"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-12"
|
||||
role="list"
|
||||
>
|
||||
{services.map((service) => (
|
||||
<motion.div
|
||||
variants={item}
|
||||
key={service.title}
|
||||
className="text-center space-y-6 px-4 motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||||
role="listitem"
|
||||
>
|
||||
<div className="w-20 h-20 bg-white dark:bg-primary-container rounded-full flex items-center justify-center mx-auto shadow-md text-primary dark:text-primary-fixed-dim" aria-hidden="true">
|
||||
<service.icon className="w-8 h-8" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl text-primary dark:text-primary-fixed-dim mb-3 font-semibold">{service.title}</h3>
|
||||
<p className="font-body-md text-on-surface-variant dark:text-outline leading-relaxed" style={{ maxWidth: "45ch", margin: "0 auto" }}>
|
||||
{service.desc}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { mockData } from "@/lib/mock-data";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
|
||||
export function Navbar() {
|
||||
const t = useTranslations("nav");
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 w-full z-50 bg-surface/80 dark:bg-inverse-surface/80 backdrop-blur-md shadow-sm shadow-primary-container/5 transition-colors duration-200">
|
||||
<nav className="flex justify-between items-center px-4 md:px-12 py-4 max-w-7xl mx-auto" aria-label="Main Navigation">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/" className="flex items-center space-x-2 group cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-md min-h-[44px]" aria-label="Ana Sayfa - Kordon Apart">
|
||||
<Image src={mockData.logos.main} alt="Kordon Apart Logo" width={120} height={40} className="h-10 w-auto group-hover:opacity-80 transition-opacity duration-200" priority />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<Link href="/" className="text-primary dark:text-primary-fixed-dim font-bold border-b border-primary dark:border-primary-fixed-dim font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("home")}</Link>
|
||||
<Link href="/odalar" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("accommodations")}</Link>
|
||||
<Link href="/galeri" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("gallery")}</Link>
|
||||
<Link href="/iletisim" className="text-on-surface-variant dark:text-outline hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 font-label-sm uppercase tracking-widest text-[12px] cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm py-1 min-h-[44px] flex items-center">{t("contact")}</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden md:flex gap-3 text-on-surface-variant dark:text-outline font-label-sm text-[12px]">
|
||||
<Link href="/tr" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="Türkçe">TR</Link>
|
||||
<Link href="/en" className="hover:text-primary dark:hover:text-primary-fixed-dim transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-primary/30 focus:outline-none rounded-sm min-h-[44px] min-w-[44px] flex items-center justify-center" aria-label="English">EN</Link>
|
||||
</div>
|
||||
<div className="w-px h-4 bg-outline-variant dark:bg-outline mx-2 hidden md:block" aria-hidden="true" />
|
||||
<ThemeToggle />
|
||||
<Link
|
||||
href="/iletisim"
|
||||
className="hidden md:flex bg-[#CA8A04] text-white px-6 py-2 rounded-full font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-md cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[44px] items-center"
|
||||
>
|
||||
{t("bookNow")}
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
type Theme = "light" | "dark" | "system"
|
||||
|
||||
const ThemeContext = React.createContext<{
|
||||
theme: Theme
|
||||
setTheme: (theme: Theme) => void
|
||||
resolvedTheme: "light" | "dark"
|
||||
}>({
|
||||
theme: "system",
|
||||
setTheme: () => {},
|
||||
resolvedTheme: "light",
|
||||
})
|
||||
|
||||
export function useTheme() {
|
||||
return React.useContext(ThemeContext)
|
||||
}
|
||||
|
||||
function getSystemTheme(): "light" | "dark" {
|
||||
if (typeof window === "undefined") return "light"
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
}
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
attribute = "class",
|
||||
defaultTheme = "system",
|
||||
enableSystem = true,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
attribute?: string
|
||||
defaultTheme?: Theme
|
||||
enableSystem?: boolean
|
||||
disableTransitionOnChange?: boolean
|
||||
}) {
|
||||
const [theme, setThemeState] = React.useState<Theme>(defaultTheme)
|
||||
const [resolvedTheme, setResolvedTheme] = React.useState<"light" | "dark">("light")
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
|
||||
// Read saved theme from localStorage on mount
|
||||
React.useEffect(() => {
|
||||
const saved = localStorage.getItem("theme") as Theme | null
|
||||
if (saved) {
|
||||
setThemeState(saved)
|
||||
}
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
// Resolve system theme and apply to document
|
||||
React.useEffect(() => {
|
||||
const resolved = theme === "system" ? getSystemTheme() : theme
|
||||
setResolvedTheme(resolved)
|
||||
|
||||
const root = document.documentElement
|
||||
root.classList.remove("light", "dark")
|
||||
root.classList.add(resolved)
|
||||
}, [theme])
|
||||
|
||||
// Listen for system theme changes
|
||||
React.useEffect(() => {
|
||||
if (!enableSystem) return
|
||||
|
||||
const mql = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
const handler = () => {
|
||||
if (theme === "system") {
|
||||
const resolved = getSystemTheme()
|
||||
setResolvedTheme(resolved)
|
||||
const root = document.documentElement
|
||||
root.classList.remove("light", "dark")
|
||||
root.classList.add(resolved)
|
||||
}
|
||||
}
|
||||
|
||||
mql.addEventListener("change", handler)
|
||||
return () => mql.removeEventListener("change", handler)
|
||||
}, [theme, enableSystem])
|
||||
|
||||
const setTheme = React.useCallback((newTheme: Theme) => {
|
||||
setThemeState(newTheme)
|
||||
localStorage.setItem("theme", newTheme)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
import { useTheme } from "@/components/theme-provider"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme, resolvedTheme } = useTheme()
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return <div className="w-9 h-9" />
|
||||
}
|
||||
|
||||
const isDark = resolvedTheme === "dark"
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
className="relative p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary overflow-hidden"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
scale: isDark ? 0 : 1,
|
||||
opacity: isDark ? 0 : 1,
|
||||
rotate: isDark ? -90 : 0
|
||||
}}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
<Sun className="h-4 w-4" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{
|
||||
scale: isDark ? 1 : 0,
|
||||
opacity: isDark ? 1 : 0,
|
||||
rotate: isDark ? 0 : 90
|
||||
}}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<Moon className="h-4 w-4" />
|
||||
</motion.div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
export const mockData = {
|
||||
logos: {
|
||||
main: "https://kordonaparts.com/tema/assets/images/logo.png",
|
||||
footer: "https://kordonaparts.com/tema/assets/images/footer-logo.png"
|
||||
},
|
||||
heroSlides: [
|
||||
"https://kordonaparts.com/media/images/slide/1669728563.jpg",
|
||||
"https://kordonaparts.com/media/images/slide/1669728527.jpg",
|
||||
"https://kordonaparts.com/media/images/slide/1669728539.jpg",
|
||||
"https://kordonaparts.com/media/images/slide/1669728553.jpg",
|
||||
"https://kordonaparts.com/media/images/slide/1669728576.jpg"
|
||||
],
|
||||
contact: {
|
||||
email: "info@kordonapart.com",
|
||||
phone: "+90 532 345 15 96",
|
||||
address: "Atatürk Cad. No:10 48300 Fethiye MUĞLA TURKEY",
|
||||
social: {
|
||||
facebook: "https://www.facebook.com/fethiyekordonapart/",
|
||||
twitter: "https://twitter.com/kordonaparts",
|
||||
instagram: "https://www.instagram.com/kordonaparts",
|
||||
youtube: "https://www.youtube.com/kordonaparts"
|
||||
}
|
||||
},
|
||||
accommodations: [
|
||||
{
|
||||
id: "kordon-apart-11",
|
||||
slug: "kordon-apart-11",
|
||||
name: "Kordon Apart 11",
|
||||
type: "Delüks Apart",
|
||||
bedrooms: 2,
|
||||
capacity: 4,
|
||||
location: "Fethiye / Merkez",
|
||||
image: "https://kordonaparts.com/media/images/villa/kordon-apart-1.jpg"
|
||||
},
|
||||
{
|
||||
id: "kordon-apart-21",
|
||||
slug: "kordon-apart-21",
|
||||
name: "Kordon Apart 21",
|
||||
type: "Premium Apart Oda",
|
||||
bedrooms: 1,
|
||||
capacity: 3,
|
||||
location: "Fethiye / Merkez",
|
||||
image: "https://kordonaparts.com/media/images/villa/kordon-apart-2.jpg"
|
||||
},
|
||||
{
|
||||
id: "kordon-apart-22",
|
||||
slug: "kordon-apart-22",
|
||||
name: "Kordon Apart 22",
|
||||
type: "Standart Apart Oda",
|
||||
bedrooms: 1,
|
||||
capacity: 2,
|
||||
location: "Fethiye / Merkez",
|
||||
image: "https://kordonaparts.com/media/images/villa/kordon-apart-3.jpg"
|
||||
},
|
||||
{
|
||||
id: "kordon-apart-23",
|
||||
slug: "kordon-apart-23",
|
||||
name: "Kordon Apart 23",
|
||||
type: "Standart Apart Oda",
|
||||
bedrooms: 1,
|
||||
capacity: 3,
|
||||
location: "Fethiye / Merkez",
|
||||
image: "https://kordonaparts.com/media/images/villa/kordon-apart-3.jpg" // Using 22's image as fallback since PRD had lazy.png
|
||||
},
|
||||
{
|
||||
id: "kordon-apart-12",
|
||||
slug: "kordon-apart-12",
|
||||
name: "Kordon Apart 12",
|
||||
type: "Meerblick",
|
||||
bedrooms: 2,
|
||||
capacity: 4,
|
||||
location: "Fethiye / Merkez",
|
||||
image: "https://kordonaparts.com/media/images/villa/kordon-apart-1.jpg" // Using 11's image as fallback since PRD had lazy.png
|
||||
}
|
||||
],
|
||||
accommodationTypes: [
|
||||
"Delüks Apart",
|
||||
"Premium Apart Oda",
|
||||
"Standart Apart Oda",
|
||||
"Meerblick"
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Homepage",
|
||||
"accommodations": "Unsere Unterkünfte",
|
||||
"accommodationTypes": "Unterkunft",
|
||||
"gallery": "Galerie",
|
||||
"blog": "Blog",
|
||||
"contact": "Kommunikation"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Kordon Apart",
|
||||
"region": "Fethiye / Merkez",
|
||||
"checkInCheckOut": "Check in - Check out Datum",
|
||||
"persons": "Anzahl der Personen Auswählen",
|
||||
"search": "Suche",
|
||||
"reservation": "Reservierungsanfrage"
|
||||
},
|
||||
"accommodations": {
|
||||
"title": "Unsere Unterkünfte",
|
||||
"viewAll": "Alle anzeigen",
|
||||
"bedrooms": "{count} Schlafzimmer",
|
||||
"persons": "{count} Personen",
|
||||
"view": "Ansehen"
|
||||
},
|
||||
"footer": {
|
||||
"rights": "Alle Rechte vorbehalten.",
|
||||
"contact": "Kontakt",
|
||||
"pages": "Seiten",
|
||||
"accommodations": "Unsere Unterkünfte",
|
||||
"social": "Social-Media-Konten",
|
||||
"cookiePolicy": "Cookie-Richtlinie",
|
||||
"userAgreement": "Kullanıcı Sözleşmesi",
|
||||
"privacyPolicy": "Gizlilik Politikası",
|
||||
"about": "Über Uns",
|
||||
"reviews": "Kundenrezensionen"
|
||||
},
|
||||
"contact": {
|
||||
"title": "Kommunikation",
|
||||
"email": "E-Mail-Adresse",
|
||||
"phone": "Telefon",
|
||||
"address": "Adresse",
|
||||
"reservationReq": "Reservierungsanfrage",
|
||||
"reservationNo": "Reservierungs-Nr.",
|
||||
"send": "Senden"
|
||||
}
|
||||
}
|
||||
+63
-5
@@ -1,14 +1,72 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"about": "About Us",
|
||||
"contact": "Contact"
|
||||
"accommodations": "Suites",
|
||||
"gallery": "Gallery",
|
||||
"contact": "Contact",
|
||||
"bookNow": "BOOK NOW"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Welcome",
|
||||
"cta": "Learn More"
|
||||
"subtitle": "Boutique Hospitality",
|
||||
"title": "Architecture of Serenity.",
|
||||
"desc": "Experience curated living in the heart of Fethiye. Luxury is in the details we choose to leave out.",
|
||||
"explore": "EXPLORE SUITES",
|
||||
"virtualTour": "VIRTUAL TOUR",
|
||||
"checkIn": "Check In",
|
||||
"checkOut": "Check Out",
|
||||
"guests": "Guests",
|
||||
"checkAvailability": "CHECK AVAILABILITY",
|
||||
"adult1": "1 Adult",
|
||||
"adult2": "2 Adults",
|
||||
"adult3": "3+ Adults"
|
||||
},
|
||||
"accommodations": {
|
||||
"title": "Curated Residences",
|
||||
"desc": "Each space is a unique architectural study.",
|
||||
"viewAll": "VIEW ALL SUITES",
|
||||
"bedrooms": "{count} Bedrooms",
|
||||
"persons": "{count} Persons",
|
||||
"bestseller": "Bestseller"
|
||||
},
|
||||
"services": {
|
||||
"subtitle": "The Experience",
|
||||
"title": "Beyond the Four Walls",
|
||||
"desc": "We curate moments of stillness and connection through bespoke services designed for the modern nomad.",
|
||||
"service1_title": "Rooftop Wellness",
|
||||
"service1_desc": "A heated infinity pool and sauna overlooking the historical district skyline.",
|
||||
"service2_title": "In-Suite Dining",
|
||||
"service2_desc": "Chef-prepared meals delivered to your door, celebrating local seasonal ingredients.",
|
||||
"service3_title": "Digital Concierge",
|
||||
"service3_desc": "24/7 contactless assistance for bookings, transport, and local recommendations."
|
||||
},
|
||||
"newsletter": {
|
||||
"title": "Join the Luxe Collective",
|
||||
"desc": "Be the first to know about new property openings and exclusive seasonal offers.",
|
||||
"placeholder": "YOUR EMAIL ADDRESS",
|
||||
"subscribe": "SUBSCRIBE",
|
||||
"label": "Your email address"
|
||||
},
|
||||
"footer": {
|
||||
"rights": "All rights reserved."
|
||||
"rights": "All rights reserved.",
|
||||
"contact": "Contact",
|
||||
"pages": "Pages",
|
||||
"accommodations": "Suites",
|
||||
"social": "Social Media Accounts",
|
||||
"cookiePolicy": "Cookie Policy",
|
||||
"userAgreement": "User Agreement",
|
||||
"privacyPolicy": "Privacy Policy",
|
||||
"about": "About Us",
|
||||
"reviews": "Customer Reviews",
|
||||
"legal": "Legal",
|
||||
"desc": "Boutique apart-hotels redefined through architectural clarity and premium hospitality."
|
||||
},
|
||||
"contact": {
|
||||
"title": "Contact",
|
||||
"email": "E-mail Address",
|
||||
"phone": "Phone",
|
||||
"address": "Address",
|
||||
"reservationReq": "Reservation Request",
|
||||
"reservationNo": "Reservation No",
|
||||
"send": "Send"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Главная",
|
||||
"accommodations": "Наши апартаменты",
|
||||
"accommodationTypes": "Проживание",
|
||||
"gallery": "Галерея",
|
||||
"blog": "Блог",
|
||||
"contact": "Контакты"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Kordon Apart",
|
||||
"region": "Фетхие / Центр",
|
||||
"checkInCheckOut": "Дата заезда - выезда",
|
||||
"persons": "Количество человек",
|
||||
"search": "Поиск",
|
||||
"reservation": "Запрос на бронирование"
|
||||
},
|
||||
"accommodations": {
|
||||
"title": "Наши апартаменты",
|
||||
"viewAll": "Смотреть все",
|
||||
"bedrooms": "{count} Спальни",
|
||||
"persons": "{count} Человек",
|
||||
"view": "Смотреть"
|
||||
},
|
||||
"footer": {
|
||||
"rights": "Все права защищены.",
|
||||
"contact": "Контакты",
|
||||
"pages": "Страницы",
|
||||
"accommodations": "Наши апартаменты",
|
||||
"social": "Социальные сети",
|
||||
"cookiePolicy": "Политика использования файлов cookie",
|
||||
"userAgreement": "Пользовательское соглашение",
|
||||
"privacyPolicy": "Политика конфиденциальности",
|
||||
"about": "О нас",
|
||||
"reviews": "Отзывы клиентов"
|
||||
},
|
||||
"contact": {
|
||||
"title": "Контакты",
|
||||
"email": "Адрес электронной почты",
|
||||
"phone": "Телефон",
|
||||
"address": "Адрес",
|
||||
"reservationReq": "Запрос на бронирование",
|
||||
"reservationNo": "Номер бронирования",
|
||||
"send": "Отправить"
|
||||
}
|
||||
}
|
||||
+63
-5
@@ -1,14 +1,72 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Ana Sayfa",
|
||||
"about": "Hakkımızda",
|
||||
"contact": "İletişim"
|
||||
"accommodations": "Odalarımız",
|
||||
"gallery": "Galeri",
|
||||
"contact": "İletişim",
|
||||
"bookNow": "REZERVASYON"
|
||||
},
|
||||
"hero": {
|
||||
"title": "Hoş Geldiniz",
|
||||
"cta": "Daha Fazla Bilgi"
|
||||
"subtitle": "Butik Konaklama",
|
||||
"title": "Huzurun Mimarisi.",
|
||||
"desc": "Fethiye'nin kalbinde özenle seçilmiş bir yaşamı deneyimleyin. Lüks, dışarıda bıraktığımız detaylarda gizlidir.",
|
||||
"explore": "ODALARI KEŞFET",
|
||||
"virtualTour": "SANAL TUR",
|
||||
"checkIn": "Giriş Tarihi",
|
||||
"checkOut": "Çıkış Tarihi",
|
||||
"guests": "Misafirler",
|
||||
"checkAvailability": "MÜSAİTLİK KONTROLÜ",
|
||||
"adult1": "1 Yetişkin",
|
||||
"adult2": "2 Yetişkin",
|
||||
"adult3": "3+ Yetişkin"
|
||||
},
|
||||
"accommodations": {
|
||||
"title": "Odalarımız",
|
||||
"desc": "Her mekan benzersiz bir mimari çalışmadır.",
|
||||
"viewAll": "TÜM ODALARI GÖR",
|
||||
"bedrooms": "{count} Yatak Odası",
|
||||
"persons": "{count} Kişi",
|
||||
"bestseller": "En Çok Tercih Edilen"
|
||||
},
|
||||
"services": {
|
||||
"subtitle": "Deneyim",
|
||||
"title": "Dört Duvarın Ötesinde",
|
||||
"desc": "Modern göçebeler için tasarlanmış özel hizmetlerle dinginlik ve bağlantı anları yaratıyoruz.",
|
||||
"service1_title": "Teras Wellness",
|
||||
"service1_desc": "Tarihi bölge silüetine bakan ısıtmalı sonsuzluk havuzu ve sauna.",
|
||||
"service2_title": "Oda İçi Yemek",
|
||||
"service2_desc": "Yerel mevsimlik malzemeleri kutlayan, kapınıza teslim şef yapımı yemekler.",
|
||||
"service3_title": "Dijital Concierge",
|
||||
"service3_desc": "Rezervasyonlar, ulaşım ve yerel öneriler için 7/24 temassız asistan."
|
||||
},
|
||||
"newsletter": {
|
||||
"title": "Luxe Collective'e Katılın",
|
||||
"desc": "Yeni tesis açılışları ve özel sezonluk tekliflerden ilk siz haberdar olun.",
|
||||
"placeholder": "E-POSTA ADRESİNİZ",
|
||||
"subscribe": "ABONE OL",
|
||||
"label": "E-posta adresiniz"
|
||||
},
|
||||
"footer": {
|
||||
"rights": "Tüm hakları saklıdır."
|
||||
"rights": "Tüm hakları saklıdır.",
|
||||
"contact": "İletişim",
|
||||
"pages": "Sayfalar",
|
||||
"accommodations": "Odalarımız",
|
||||
"social": "Sosyal Medya Hesaplarımız",
|
||||
"cookiePolicy": "Çerez Politikası",
|
||||
"userAgreement": "Kullanıcı Sözleşmesi",
|
||||
"privacyPolicy": "Gizlilik Sözleşmesi",
|
||||
"about": "Hakkımızda",
|
||||
"reviews": "Müşteri Yorumları",
|
||||
"legal": "Yasal",
|
||||
"desc": "Mimari netlik ve üst düzey misafirperverlik ile yeniden tanımlanmış butik apart oteller."
|
||||
},
|
||||
"contact": {
|
||||
"title": "İletişim",
|
||||
"email": "E-Posta Adresi",
|
||||
"phone": "Telefon",
|
||||
"address": "Adres",
|
||||
"reservationReq": "Rezervasyon Talebi",
|
||||
"reservationNo": "Rezervasyon No",
|
||||
"send": "Gönder"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ const nextConfig: NextConfig = {
|
||||
remotePatterns: [
|
||||
{ protocol: 'https', hostname: 'res.cloudinary.com' },
|
||||
{ protocol: 'https', hostname: 'images.unsplash.com' },
|
||||
{ protocol: 'https', hostname: 'kordonaparts.com' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
Generated
+24
-2
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "fethiye-holiday",
|
||||
"name": "kordonaparts",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "fethiye-holiday",
|
||||
"name": "kordonaparts",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.5.0",
|
||||
@@ -19,9 +19,11 @@
|
||||
"next": "16.2.9",
|
||||
"next-auth": "^5.0.0-beta.31",
|
||||
"next-intl": "^4.13.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shadcn": "^4.11.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
@@ -8590,6 +8592,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-themes": {
|
||||
"version": "0.4.6",
|
||||
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
|
||||
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/next/node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
@@ -10223,6 +10235,16 @@
|
||||
"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sonner": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
|
||||
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
||||
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
|
||||
+3
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "fethiye-holiday",
|
||||
"name": "kordonaparts",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -20,9 +20,11 @@
|
||||
"next": "16.2.9",
|
||||
"next-auth": "^5.0.0-beta.31",
|
||||
"next-intl": "^4.13.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shadcn": "^4.11.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user