198 lines
8.9 KiB
TypeScript
198 lines
8.9 KiB
TypeScript
'use client'
|
||
|
||
import { useTranslations } from 'next-intl'
|
||
import { Link } from '@/i18n/routing'
|
||
import { motion, useReducedMotion } from 'framer-motion'
|
||
import { MapPin, Wifi, UtensilsCrossed, Waves, Car } from 'lucide-react'
|
||
import Image from 'next/image'
|
||
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
||
import openinaryLoader from '@/lib/openinary-loader'
|
||
|
||
const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]
|
||
|
||
export default function HomePage() {
|
||
const tHero = useTranslations('hero')
|
||
const tFeatures = useTranslations('features')
|
||
const tRooms = useTranslations('home_rooms')
|
||
const prefersReduced = useReducedMotion()
|
||
|
||
const heroContainer = prefersReduced ? undefined : {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.12 } }
|
||
}
|
||
|
||
const heroItem = prefersReduced ? undefined : {
|
||
hidden: { opacity: 0, y: 40, filter: 'blur(8px)' },
|
||
show: {
|
||
opacity: 1,
|
||
y: 0,
|
||
filter: 'blur(0px)',
|
||
transition: { duration: 0.8, ease: EASE }
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="bg-background text-on-surface">
|
||
{/* Hero Section */}
|
||
<header className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||
<div className="absolute inset-0 z-0">
|
||
<Image
|
||
src="https://media.ayris.tech/t/starapart/hero/media__1784311319733.jpg"
|
||
alt="Sitar Apart Hotel View"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-secondary/40 via-secondary/20 to-secondary/60" />
|
||
</div>
|
||
|
||
<motion.div
|
||
variants={heroContainer}
|
||
initial="hidden"
|
||
animate="show"
|
||
className="relative z-10 text-center px-margin-mobile max-w-3xl"
|
||
>
|
||
<motion.h1 variants={heroItem} className="font-serif text-[40px] md:text-[60px] leading-[1.2] font-semibold text-white mb-6 drop-shadow-lg">
|
||
{tHero('title')}
|
||
</motion.h1>
|
||
|
||
<motion.p variants={heroItem} className="font-sans text-[18px] text-white/90 mb-10 max-w-xl mx-auto leading-relaxed drop-shadow-md">
|
||
{tHero('description')}
|
||
</motion.p>
|
||
|
||
<motion.div variants={heroItem}>
|
||
<Link
|
||
href="/dairelerimiz"
|
||
className="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-sans font-bold text-[16px] tracking-wider uppercase hover:scale-105 transition-all duration-300 shadow-xl cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-accent-pink"
|
||
>
|
||
{tHero('cta')}
|
||
</Link>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
|
||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||
</svg>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Amenities Strip */}
|
||
<section className="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-[16px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
|
||
{[
|
||
{ icon: Waves, label: tFeatures('pool') },
|
||
{ icon: Wifi, label: tFeatures('wifi') },
|
||
{ icon: UtensilsCrossed, label: tFeatures('kitchen') },
|
||
{ icon: Car, label: tFeatures('parking') }
|
||
].map((amenity, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-50px' }}
|
||
transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
|
||
className="flex flex-col items-center text-center gap-3 group"
|
||
>
|
||
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary transition-transform duration-300 group-hover:scale-110">
|
||
<amenity.icon className="w-6 h-6" />
|
||
</div>
|
||
<span className="font-sans font-bold text-[14px] text-secondary tracking-wide">{amenity.label}</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Apartments Section */}
|
||
<section className="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-100px' }}
|
||
transition={{ duration: 0.8, ease: EASE }}
|
||
className="relative mb-16 text-center"
|
||
>
|
||
<div className="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 flex items-center justify-center opacity-15 -rotate-6 pointer-events-none text-accent-pink">
|
||
<BougainvilleaMotif className="w-24 h-24" />
|
||
</div>
|
||
<h2 className="font-serif text-[32px] md:text-[40px] font-semibold text-secondary mb-4 relative z-10">
|
||
{tRooms('title')}
|
||
</h2>
|
||
<p className="text-on-surface-variant text-[16px] max-w-xl mx-auto font-sans">
|
||
{tRooms('subtitle')}
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||
{[
|
||
{
|
||
id: 'standart-oda',
|
||
title: tRooms('room_1.title'),
|
||
desc: tRooms('room_1.desc'),
|
||
img: 'https://media.ayris.tech/t/starapart/SUITE_1_1/DSC01491 (1).JPG'
|
||
},
|
||
{
|
||
id: 'kucuk-oda',
|
||
title: tRooms('room_2.title'),
|
||
desc: tRooms('room_2.desc'),
|
||
img: 'https://media.ayris.tech/t/starapart/STUDIO_1_0/DSC01465 (1).JPG'
|
||
},
|
||
{
|
||
id: '1-1-daire',
|
||
title: tRooms('room_3.title'),
|
||
desc: tRooms('room_3.desc'),
|
||
img: 'https://media.ayris.tech/t/starapart/SUITE_1_1/DSC01491 (1).JPG'
|
||
}
|
||
].map((room, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-50px' }}
|
||
transition={{ duration: 0.6, delay: idx * 0.15, ease: EASE }}
|
||
className="group bg-surface-container-lowest rounded-[24px] overflow-hidden shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2 flex flex-col cursor-pointer"
|
||
>
|
||
<div className="aspect-[3/2] overflow-hidden relative">
|
||
<Image
|
||
src={room.img}
|
||
alt={room.title}
|
||
fill
|
||
loader={openinaryLoader}
|
||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||
/>
|
||
</div>
|
||
<div className="p-6 flex flex-col flex-1 bg-surface-container-lowest relative z-10">
|
||
<h3 className="font-serif text-[24px] font-medium text-secondary mb-3 group-hover:text-primary transition-colors">{room.title}</h3>
|
||
<p className="font-sans text-on-surface-variant mb-6 text-[16px] leading-relaxed flex-1">
|
||
{room.desc}
|
||
</p>
|
||
<Link
|
||
href={`/dairelerimiz/${room.id}`}
|
||
className="inline-flex items-center text-primary font-sans font-bold text-[16px] border-b-2 border-transparent hover:border-primary transition-colors pb-1 w-fit cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
|
||
>
|
||
Detayları İncele <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="text-center mt-16"
|
||
>
|
||
<Link
|
||
href="/dairelerimiz"
|
||
className="inline-flex items-center justify-center px-10 py-4 border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-full font-sans font-bold text-[16px] uppercase tracking-wider transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
|
||
>
|
||
Tüm Daireleri Gör
|
||
</Link>
|
||
</motion.div>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|