245 lines
9.8 KiB
TypeScript
245 lines
9.8 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useRef } from "react";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { motion, useScroll, useTransform } from "framer-motion";
|
||
import { resortData } from "@/src/data/resort";
|
||
import ScrollVideo from "./components/ScrollVideo";
|
||
import SplitSection from "./components/SplitSection";
|
||
import TestimonialsSlider from "./components/TestimonialsSlider";
|
||
|
||
export default function Home() {
|
||
const portfolioRef = useRef(null);
|
||
|
||
const { scrollYProgress } = useScroll({
|
||
target: portfolioRef,
|
||
offset: ["start end", "end start"]
|
||
});
|
||
|
||
const portfolioBgY = useTransform(scrollYProgress, [0, 1], ["0%", "15%"]);
|
||
const portfolioScale = useTransform(scrollYProgress, [0, 0.5, 1], [1.05, 1, 1.05]);
|
||
|
||
return (
|
||
<div className="flex flex-col">
|
||
<section className="relative h-[85vh] w-full bg-[#FAF9F6] flex flex-col items-center justify-center pt-20 overflow-hidden">
|
||
<motion.div
|
||
initial={{ scale: 0.8, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
transition={{ duration: 1.5, ease: "easeOut" }}
|
||
className="absolute bottom-[-20%] w-[1200px] h-[1200px] bg-white rounded-full"
|
||
/>
|
||
|
||
<div className="relative z-20 flex flex-col items-center text-center px-6">
|
||
<motion.h1
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 1, ease: "easeOut" }}
|
||
className="flex flex-col items-center"
|
||
>
|
||
<span className="text-gray-900 text-6xl md:text-9xl font-sans font-medium tracking-[0.1em] leading-none mb-2 uppercase">
|
||
KUSURSUZ
|
||
</span>
|
||
<motion.span
|
||
initial={{ x: -20, opacity: 0 }}
|
||
animate={{ x: 0, opacity: 1 }}
|
||
transition={{ delay: 0.5, duration: 1 }}
|
||
className="text-gray-900 text-6xl md:text-9xl font-serif italic font-light tracking-[0.05em] leading-none"
|
||
>
|
||
BİR KAÇIŞ
|
||
</motion.span>
|
||
</motion.h1>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1, duration: 1 }}
|
||
className="mt-16"
|
||
>
|
||
<Link
|
||
href={resortData.bookingUrl}
|
||
className="bg-[#5C6353] text-white px-10 py-4 rounded-full text-[10px] font-bold tracking-[0.3em] hover:bg-gold transition-all shadow-xl shadow-black/5"
|
||
>
|
||
REZERVASYON YAP
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
<ScrollVideo />
|
||
|
||
<section className="bg-white py-32 md:py-48 px-6 text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 1 }}
|
||
className="max-w-5xl mx-auto space-y-12"
|
||
>
|
||
<p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
|
||
Ege'nin kalbinde, tarihin ve denizin kucaklaştığı özel bir dünyada,
|
||
<span className="italic"> unutulmaz anılar</span> biriktirmek için tasarlandı.
|
||
</p>
|
||
<div className="w-16 h-px bg-gold mx-auto opacity-60" />
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section ref={portfolioRef} className="relative min-h-[120vh] py-32 flex flex-col justify-between overflow-hidden">
|
||
<motion.div
|
||
style={{ y: portfolioBgY, scale: portfolioScale }}
|
||
className="absolute inset-0 z-0 h-full w-full"
|
||
>
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&q=80&w=2000"
|
||
alt="Palms"
|
||
fill
|
||
className="object-cover brightness-50"
|
||
priority
|
||
/>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
className="relative z-10 text-center"
|
||
>
|
||
<span className="text-white text-[10px] tracking-[0.5em] font-bold uppercase opacity-70">
|
||
HAYATI KEŞFEDİN
|
||
</span>
|
||
</motion.div>
|
||
|
||
<div className="relative z-10 flex flex-col items-center text-center px-6">
|
||
<h2 className="flex flex-col items-center">
|
||
<motion.span
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 1 }}
|
||
className="text-white text-4xl md:text-7xl font-sans font-extralight tracking-[0.2em] uppercase leading-tight"
|
||
>
|
||
YAVAŞ YAŞAMANIN <span className="font-serif italic font-light lowercase">lüksü</span>
|
||
</motion.span>
|
||
<motion.span
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2, duration: 1 }}
|
||
className="text-white text-5xl md:text-8xl font-sans font-medium tracking-[0.1em] uppercase leading-tight"
|
||
>
|
||
SALMAKIS'TE
|
||
</motion.span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="relative z-10 max-w-[1600px] mx-auto w-full px-10 grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left border-t border-white/20 pt-12">
|
||
{[
|
||
{ tag: "ÖZEL KOYUNUZ", title: "KUSURSUZ SAHİL" },
|
||
{ tag: "RİTÜELLER", title: "SPA CENTER" },
|
||
{ tag: "GURME", title: "DENİZ MUTFAĞI" },
|
||
].map((item, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: i * 0.1, duration: 0.8 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<span className="text-white/40 text-[9px] tracking-[0.4em] font-bold block mb-2 transition-colors group-hover:text-gold">
|
||
{item.tag}
|
||
</span>
|
||
<h4 className="text-white text-xl md:text-2xl font-sans font-light tracking-[0.2em] group-hover:italic transition-all">
|
||
{item.title}
|
||
</h4>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="bg-white py-32 md:py-48 px-6 text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-100px" }}
|
||
transition={{ duration: 1 }}
|
||
className="max-w-5xl mx-auto space-y-12"
|
||
>
|
||
<p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
|
||
Salmakis Resort & Spa olarak biz, sadece bir tatil değil, dönüştürücü bir deneyim sunuyoruz.
|
||
Halikarnassos'un antik büyüsünü modern lüksle birleştiren benzersiz konumumuz ve misafirperverliğimizle,
|
||
Ege'nin en özel köşesinde sizi ağırlıyoruz.
|
||
</p>
|
||
<div className="w-16 h-px bg-gold mx-auto opacity-60" />
|
||
<p className="text-lg md:text-2xl font-serif text-gray-400 italic font-light tracking-[0.2em] uppercase">
|
||
SESSİZ ZARAFETİN VE KALİTENİN BULUŞMA NOKTASI.
|
||
</p>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<SplitSection
|
||
title="KONAKLAMA"
|
||
subtitle="LÜKS & KONFOR"
|
||
description="Ege'nin kalbinde, her detayı huzurla işlenmiş odalarımızda lüksü ve konforu yeniden tanımlayın. Maviye uyanmanın en şık hali."
|
||
mainImage="salmakis/rooms/deluxe_room_1"
|
||
secondImage="salmakis/rooms/superior_room_1"
|
||
href="/accommodation"
|
||
/>
|
||
|
||
<SplitSection
|
||
title="YİYECEK & İÇECEK"
|
||
subtitle="GURME DENEYİM"
|
||
description="Denizden gelen tazeliğin Ege otlarıyla buluştuğu, her lokmada ayrı bir hikaye anlatan gastronomi yolculuğuna hazır olun."
|
||
mainImage="salmakis/experiences/dining"
|
||
secondImage="salmakis/experiences/dining"
|
||
href="/dining"
|
||
reverse
|
||
/>
|
||
|
||
<SplitSection
|
||
title="SPA CENTER"
|
||
subtitle="RUHSAL YENİLENME"
|
||
description="Bedeninizi ve ruhunuzu antik ritüellerle yenileyin. Salmakis'in şifalı sularında ve uzman ellerde kendinizi yeniden keşfedeceksiniz."
|
||
mainImage="salmakis/experiences/spa"
|
||
secondImage="salmakis/spa/turkish_bath"
|
||
href="/spa"
|
||
/>
|
||
|
||
<SplitSection
|
||
title="MAVİ KOY"
|
||
subtitle="SAHİL & BEACH"
|
||
description="Mavi bayraklı kristal sularımızda, Bodrum güneşinin ve denizin en saf halini keşfedin. Gününüzü turkuaz sularda sonlandırın."
|
||
mainImage="salmakis/experiences/beach"
|
||
secondImage="salmakis/experiences/beach"
|
||
href="/beach"
|
||
reverse
|
||
/>
|
||
|
||
<TestimonialsSlider />
|
||
|
||
<section className="py-24 bg-zinc-50 overflow-hidden">
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 1.2 }}
|
||
className="max-w-4xl mx-auto text-center space-y-8 px-6"
|
||
>
|
||
<span className="text-gold uppercase tracking-[0.5em] text-xs font-bold">
|
||
MİRASIMIZ
|
||
</span>
|
||
<h2 className="text-4xl md:text-5xl font-serif text-[#1D3557]">
|
||
{resortData.legend.title.tr}
|
||
</h2>
|
||
<div className="relative">
|
||
<div className="absolute -top-12 -left-12 text-9xl text-gold/10 font-serif -z-10">
|
||
“
|
||
</div>
|
||
<p className="text-lg md:text-xl text-gray-600 leading-relaxed font-light italic">
|
||
{resortData.legend.text.tr}
|
||
</p>
|
||
</div>
|
||
<div className="pt-8">
|
||
<div className="w-16 h-px bg-gold mx-auto" />
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|