79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
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>
|
||
);
|
||
}
|