feat: complete initial project setup with i18n and standalone config

app/[locale]/about/page.tsx

@@ -0,0 +1,82 @@
+import { useTranslations } from 'next-intl';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import Image from 'next/image';
+
+export default function AboutPage() {
+  const t = useTranslations('About');
+
+  return (
+    <main className="min-h-screen bg-bone">
+      <Navbar />
+
+      {/* Hero Section */}
+      <section className="pt-40 pb-20 px-6 max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
+            Salmakis Villas
+          </span>
+          <h1 className="text-5xl md:text-7xl font-serif text-aegean-dark mb-8">
+            {t('title')}
+          </h1>
+          <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto" />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="space-y-8 text-aegean-dark/80 text-lg leading-relaxed font-sans">
+            <p className="font-bold text-aegean-dark">
+              {t('paragraph1')}
+            </p>
+            <p>
+              {t('paragraph2')}
+            </p>
+            <p>
+              {t('paragraph3')}
+            </p>
+            <p className="bg-sand/10 p-6 rounded-2xl border border-sand/30 italic text-aegean-dark">
+              {t('paragraph4')}
+            </p>
+          </div>
+          
+          <div className="relative aspect-square rounded-3xl overflow-hidden shadow-2xl">
+            <Image
+              src="https://images.unsplash.com/photo-1542718610-a1d656d1884c?q=80&w=2070&auto=format&fit=crop"
+              alt="Dereköy Villas"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Location Details Section */}
+      <section className="py-20 bg-aegean-dark text-bone">
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
+          <div className="space-y-4">
+            <div className="text-4xl font-serif text-sand">01</div>
+            <h3 className="text-xl font-serif">{t('location_title')}</h3>
+            <p className="text-sm opacity-60 leading-relaxed font-sans">
+              Ortakent, Turgutreis ve Gümüşlük üçgeninin tam merkezinde huzurlu bir konum.
+            </p>
+          </div>
+          <div className="space-y-4">
+            <div className="text-4xl font-serif text-sand">02</div>
+            <h3 className="text-xl font-serif">{t('tradition_title')}</h3>
+            <p className="text-sm opacity-60 leading-relaxed font-sans">
+              Geleneksel Bodrum mimarisi ile modern konforun buluştuğu taş yapılar.
+            </p>
+          </div>
+          <div className="space-y-4">
+            <div className="text-4xl font-serif text-sand">03</div>
+            <h3 className="text-xl font-serif">{t('service_title')}</h3>
+            <p className="text-sm opacity-60 leading-relaxed font-sans">
+              Aynı arazide ikamet eden villa görevlisi ile 24 saat kesintisiz hizmet.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}

app/[locale]/contact/page.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import { MapPin, Phone, Mail, Fax, Smartphone, Send } from 'lucide-react';
+
+export default function ContactPage() {
+  const t = useTranslations('Contact');
+
+  return (
+    <main className="min-h-screen bg-bone">
+      <Navbar />
+
+      {/* Hero Header */}
+      <section className="pt-40 pb-20 px-6 max-w-7xl mx-auto text-center">
+        <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
+          Salmakis Villas
+        </span>
+        <h1 className="text-5xl md:text-7xl font-serif text-aegean-dark mb-6">
+          {t('title')}
+        </h1>
+        <p className="text-aegean-dark/60 max-w-2xl mx-auto text-lg leading-relaxed">
+          {t('description')}
+        </p>
+        <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto mt-12" />
+      </section>
+
+      {/* Contact Content */}
+      <section className="pb-24 px-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20">
+        {/* Contact info cards */}
+        <div className="space-y-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
+              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
+                <MapPin className="w-5 h-5" />
+              </div>
+              <h3 className="text-lg font-serif text-aegean-dark">{t('address')}</h3>
+              <p className="text-xs uppercase font-bold tracking-widest text-aegean-dark/50 leading-loose">
+                Dereköy yolu, Bademlik Mevkii Küme evleri No:24 Gürece Ortakent Bodrum/Muğla Türkiye
+              </p>
+            </div>
+
+            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
+              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
+                <Phone className="w-5 h-5" />
+              </div>
+              <h3 className="text-lg font-serif text-aegean-dark">{t('phone')}</h3>
+              <div className="text-sm font-medium text-aegean-dark/70 space-y-1">
+                <p>+90 252 316 28 77</p>
+                <p>+90 252 316 27 38</p>
+                <p>+90 252 316 65 09</p>
+              </div>
+            </div>
+
+            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
+              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
+                <Smartphone className="w-5 h-5" />
+              </div>
+              <h3 className="text-lg font-serif text-aegean-dark">{t('mobile')}</h3>
+              <p className="text-sm font-medium text-aegean-dark/70">
+                +90 532 731 78 04
+              </p>
+            </div>
+
+            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
+              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
+                <Mail className="w-5 h-5" />
+              </div>
+              <h3 className="text-lg font-serif text-aegean-dark">{t('email')}</h3>
+              <p className="text-sm font-medium text-aegean-dark/70">
+                info@salmakisvillas.com
+              </p>
+            </div>
+          </div>
+
+          <div className="p-8 bg-aegean-dark text-bone rounded-3xl shadow-xl flex items-center justify-between">
+            <div className="space-y-2">
+               <h3 className="text-xl font-serif text-sand">{t('fax')}</h3>
+               <p className="text-sm opacity-60">+90 252 316 27 37</p>
+            </div>
+            <Fax className="w-8 h-8 opacity-20" />
+          </div>
+        </div>
+
+        {/* Contact Form */}
+        <div className="bg-white p-10 md:p-12 rounded-[2rem] shadow-2xl border border-aegean-dark/5">
+          <h2 className="text-3xl font-serif text-aegean-dark mb-8">Bize Mesaj Gönderin</h2>
+          <form className="space-y-6">
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
+                {t('form_name')}
+              </label>
+              <input 
+                type="text" 
+                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
+                {t('form_email')}
+              </label>
+              <input 
+                type="email" 
+                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
+                {t('form_message')}
+              </label>
+              <textarea 
+                rows={5}
+                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans resize-none"
+              />
+            </div>
+            <button 
+              type="submit"
+              className="w-full bg-aegean-dark hover:bg-salmakis-blue text-bone py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-xs flex items-center justify-center space-x-3 transition-all transform hover:-translate-y-1"
+            >
+              <span>{t('form_submit')}</span>
+              <Send className="w-4 h-4" />
+            </button>
+          </form>
+        </div>
+      </section>
+
+      {/* Map Section */}
+      <section className="h-[500px] w-full bg-aegean-dark/10 relative">
+        <iframe 
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m13!1d3183.1!2d27.35!3d37.05!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDAzJzAwLjAiTiAyN8KwMjEnMDAuMCJF!5e0!3m2!1sen!2str!4v1650000000000!5m2!1sen!2str" 
+          className="w-full h-full grayscale opacity-80"
+          style={{ border: 0 }} 
+          allowFullScreen={true} 
+          loading="lazy" 
+        />
+        <div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_100px_rgba(0,0,0,0.1)]" />
+      </section>
+
+      <Footer />
+    </main>
+  );
+}

app/[locale]/layout.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import { Cormorant_Garamond, Oswald } from "next/font/google";
+import "../globals.css";
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { routing } from '@/i18n/routing';
+
+const cormorant = Cormorant_Garamond({
+  subsets: ["latin", "latin-ext"],
+  weight: ["300", "400", "500", "600", "700"],
+  variable: "--font-serif",
+  display: 'swap',
+});
+
+const oswald = Oswald({
+  subsets: ["latin", "latin-ext"],
+  variable: "--font-sans",
+  display: 'swap',
+});
+
+export async function generateMetadata({
+  params
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Index' });
+
+  return {
+    title: {
+      default: t('title') + " | Salmakis Villas",
+      template: "%s | Salmakis Villas"
+    },
+    description: t('description'),
+  };
+}
+
+export default async function RootLayout({
+  children,
+  params
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  // Ensure that the incoming `locale` is valid
+  if (!routing.locales.includes(locale as "en" | "tr")) {
+    notFound();
+  }
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} className={`${cormorant.variable} ${oswald.variable} scroll-smooth`}>
+      <body className="font-sans bg-bone text-aegean-dark min-h-screen flex flex-col">
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

app/[locale]/page.tsx

@@ -0,0 +1,78 @@
+import Navbar from '@/components/Navbar';
+import Hero from '@/components/Hero';
+import VillaCard from '@/components/VillaCard';
+import Footer from '@/components/Footer';
+import { villas } from '@/data/villas';
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen">
+      <Navbar />
+      <Hero />
+      
+      {/* Featured Villas Section */}
+      <section id="villas" className="py-24 px-6 bg-bone">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
+              Özel Seçki
+            </span>
+            <h2 className="text-4xl md:text-6xl font-serif text-aegean-dark mb-6">
+              Lüks Konaklama Seçenekleri
+            </h2>
+            <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto" />
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-8 md:gap-12">
+            {villas.map((villa, index) => (
+              <div key={villa.id} className="w-full md:w-[calc(50%-1.5rem)] lg:w-[calc(33.33%-2.5rem)] max-w-sm">
+                <VillaCard villa={villa} index={index} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* About Preview Section */}
+      <section className="py-24 px-6 bg-aegean-dark text-bone overflow-hidden relative">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div>
+            <h2 className="text-4xl md:text-6xl font-serif mb-8 leading-tight">
+              Ege'nin Kalbinde <br />
+              Unutulmaz Bir Tatil
+            </h2>
+            <p className="text-bone/60 text-lg mb-10 leading-relaxed max-w-lg">
+              Salmakis Villas olarak, Bodrum'un en özel koylarında, size özel havuzlu ve lüks donanımlı villalarımızla hayalinizdeki tatili gerçeğe dönüştürüyoruz.
+            </p>
+            <div className="flex space-x-12">
+              <div>
+                <span className="block text-3xl font-serif text-salmakis-blue mb-1">10+</span>
+                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Özel Villa</span>
+              </div>
+              <div>
+                <span className="block text-3xl font-serif text-salmakis-blue mb-1">500+</span>
+                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Mutlu Misafir</span>
+              </div>
+              <div>
+                <span className="block text-3xl font-serif text-salmakis-blue mb-1">12 Ay</span>
+                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Kesintisiz Hizmet</span>
+              </div>
+            </div>
+          </div>
+          <div className="relative">
+             <div className="aspect-video rounded-2xl overflow-hidden border border-bone/10 shadow-2xl skew-y-3 hover:skew-y-0 transition-transform duration-700">
+                <img 
+                  src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2070&auto=format&fit=crop" 
+                  className="w-full h-full object-cover"
+                  alt="Background"
+                />
+             </div>
+             <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-salmakis-blue/20 rounded-full blur-3xl" />
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}

app/[locale]/villas/[slug]/page.tsx

@@ -0,0 +1,147 @@
+import { villas } from '@/data/villas';
+import { notFound } from 'next/navigation';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import { Bed, Users, Droplets, Wind, Wifi, Utensils, MapPin, Calendar, MessageCircle, Mail, Phone } from 'lucide-react';
+import VillaGallery from '@/components/VillaGallery';
+
+export default async function VillaDetailPage({
+  params
+}: {
+  params: Promise<{ locale: string, slug: string }>
+}) {
+  const { slug, locale } = await params;
+  const villa = villas.find((v) => v.slug === slug);
+
+  if (!villa) {
+    notFound();
+  }
+
+  const l = locale as 'tr' | 'en';
+
+  return (
+    <main className="bg-bone min-h-screen">
+      <Navbar />
+
+      {/* Hero / Header */}
+      <section className="pt-32 pb-12 px-6 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-8">
+          <div>
+            <div className="flex items-center text-salmakis-blue font-bold tracking-widest text-xs mb-2 uppercase">
+              <MapPin className="w-3 h-3 mr-1" />
+              {villa.location}
+            </div>
+            <h1 className="text-4xl md:text-6xl font-serif text-aegean-dark">{villa.name}</h1>
+          </div>
+          <div className="text-right">
+             <span className="text-[10px] uppercase font-bold text-aegean-dark/40 block mb-1">Gecelik Başlangıç</span>
+             <span className="text-3xl font-serif font-bold text-salmakis-blue">€{villa.priceLow}</span>
+          </div>
+        </div>
+
+        {/* Dynamic Gallery with Lightbox */}
+        <VillaGallery images={villa.images} name={villa.name} />
+      </section>
+
+      {/* Main Content Area */}
+      <section className="py-12 px-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-16">
+        {/* Description & Specs */}
+        <div className="lg:col-span-2">
+          <div className="prose prose-lg max-w-none text-aegean-dark/80 mb-16 font-sans">
+            <h2 className="text-3xl font-serif text-aegean-dark mb-6">Villa Hakkında</h2>
+            <p className="leading-relaxed whitespace-pre-line">
+              {villa.description[l]}
+            </p>
+          </div>
+
+          <div className="mb-16">
+            <h2 className="text-3xl font-serif text-aegean-dark mb-8">Özellikler & Olanaklar</h2>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+              {villa.amenities[l].map((amenity, idx) => (
+                <div key={idx} className="flex items-center space-x-3 text-aegean-dark/70">
+                  <div className="w-8 h-8 rounded-lg bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
+                    <Droplets className="w-4 h-4" />
+                  </div>
+                  <span className="text-sm font-medium">{amenity}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Pricing Table */}
+          <div className="bg-white rounded-3xl p-8 border border-aegean-dark/5 shadow-sm">
+            <h2 className="text-2xl font-serif text-aegean-dark mb-6 flex items-center">
+              <Calendar className="w-5 h-5 mr-3 text-salmakis-blue" />
+              Sezonluk Fiyatlandırma
+            </h2>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b border-aegean-dark/5">
+                    <th className="py-4 text-xs font-bold uppercase tracking-[0.2em] text-aegean-dark/40">Dönem</th>
+                    <th className="py-4 text-xs font-bold uppercase tracking-[0.2em] text-aegean-dark/40 text-right">Gecelik</th>
+                  </tr>
+                </thead>
+                <tbody className="text-sm">
+                  <tr className="border-b border-aegean-dark/5">
+                    <td className="py-4 font-medium text-aegean-dark/70">Nisan - Mayıs (Düşük Sezon)</td>
+                    <td className="py-4 text-right font-bold text-aegean-dark">€{villa.priceLow}</td>
+                  </tr>
+                  <tr className="border-b border-aegean-dark/5">
+                    <td className="py-4 font-medium text-aegean-dark/70">Haziran - Eylül (Yüksek Sezon)</td>
+                    <td className="py-4 text-right font-bold text-aegean-dark">€{villa.priceHigh}</td>
+                  </tr>
+                  <tr>
+                    <td className="py-4 font-medium text-aegean-dark/70">Ekim - Kasım (Orta Sezon)</td>
+                    <td className="py-4 text-right font-bold text-aegean-dark">€{Math.round((villa.priceLow + villa.priceHigh) / 1.5 / 50) * 50}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar / Booking */}
+        <div className="lg:col-span-1">
+          <div className="sticky top-32 space-y-6">
+            <div className="bg-aegean-dark text-bone p-8 rounded-3xl shadow-xl overflow-hidden relative">
+               <div className="relative z-10 text-center">
+                  <h3 className="text-2xl font-serif mb-4 text-sand">Rezervasyon Talebi</h3>
+                  <p className="text-bone/70 text-sm mb-8 leading-relaxed">Bu villa için uygunluk durumunu sorgulamak ve detaylı bilgi almak için bizimle iletişime geçin.</p>
+                  
+                  <div className="space-y-4">
+                    <a 
+                      href={`https://wa.me/905000000000?text=${encodeURIComponent(`${villa.name} hakkında bilgi almak istiyorum.`)}`}
+                      className="flex items-center justify-center space-x-3 w-full py-4 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-2xl font-bold transition-all shadow-lg shadow-green-900/20"
+                    >
+                      <MessageCircle className="w-5 h-5" />
+                      <span>WhatsApp'tan Sorun</span>
+                    </a>
+                    <a 
+                      href="tel:+902523162877"
+                      className="flex items-center justify-center space-x-3 w-full py-4 bg-white/10 hover:bg-white/20 text-white rounded-2xl font-bold border border-white/10 transition-all"
+                    >
+                      <Phone className="w-5 h-5" />
+                      <span>Hemen Arayın</span>
+                    </a>
+                  </div>
+               </div>
+               
+               {/* Decorative background circle */}
+               <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-salmakis-blue opacity-10 rounded-full blur-3xl" />
+            </div>
+
+            <div className="bg-sand/10 p-6 rounded-3xl border border-sand/20">
+               <h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-aegean-dark/60 mb-4">Minimum Konaklama</h4>
+               <p className="text-sm font-medium text-aegean-dark/80 leading-relaxed">
+                 Yüksek sezonda <span className="text-aegean-dark font-bold underline decoration-sand/50 decoration-2 underline-offset-4">7 gece</span>, diğer dönemlerde <span className="text-aegean-dark font-bold underline decoration-sand/50 decoration-2 underline-offset-4">3 gecedir</span>.
+               </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}

app/globals.css

@@ -1,26 +1,46 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-bone: #F9F8F6;
+  --color-sand: #E6D5B8;
+  --color-salmakis-blue: #20B2AA;
+  --color-aegean-dark: #1A1A1A;
+  
+  --font-serif: "Cormorant Garamond", serif;
+  --font-sans: "Oswald", sans-serif;
+  
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+:root {
+  --background: #F9F8F6;
+  --foreground: #1A1A1A;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #121212;
+    --foreground: #F9F8F6;
   }
 }
 
 body {
-  background: var(--background);
+  background-color: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, .font-serif {
+  font-family: var(--font-serif);
+}
+
+.glass-nav {
+  @apply backdrop-blur-md bg-white/70 border-b border-white/20;
+}
+
+.villa-card {
+  @apply transition-all duration-500 hover:shadow-2xl hover:-translate-y-2;
 }

app/layout.tsx

@@ -1,33 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
-    </html>
-  );
-}

app/page.tsx

@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}