first commit
This commit is contained in:
283
app/page.tsx
283
app/page.tsx
@@ -1,65 +1,244 @@
|
||||
"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 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">
|
||||
<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="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"
|
||||
|
||||
<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"
|
||||
>
|
||||
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"
|
||||
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"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
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="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 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>
|
||||
</main>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user