ayrisdev/kordonaparts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ayrisdev
2026-06-16 19:17:37 +03:00
parent 2d149f1178
commit 6fa7cc6630
25 changed files with 1378 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/galeri/page.tsx
+40
View File
@@ -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>
);
}
app/[locale]/iletisim/page.tsx
+17
View File
@@ -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 />;
}
app/[locale]/layout.tsx
+29 -12
View File
@@ -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>
);
app/[locale]/odalar/[slug]/page.tsx
+50
View File
@@ -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>
);
}
app/[locale]/odalar/page.tsx
+14
View File
@@ -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>
);
}
app/[locale]/page.tsx
+14 -43
View File
@@ -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 />
</>
);
}
app/globals.css
+125 -98
View File
@@ -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;
}
}