109 lines
5.5 KiB
TypeScript
109 lines
5.5 KiB
TypeScript
"use client";
|
||
|
||
import { useTranslations } from "next-intl";
|
||
import { motion } from "framer-motion";
|
||
import { mockData } from "@/lib/mock-data";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
|
||
export function Hero() {
|
||
const t = useTranslations("hero");
|
||
|
||
return (
|
||
<>
|
||
<section
|
||
className="relative h-[921px] min-h-[600px] w-full overflow-hidden"
|
||
aria-label="Hero Section"
|
||
>
|
||
{/* Background Image - Using Next.js Image for optimization */}
|
||
<div className="absolute inset-0 z-0">
|
||
<motion.div
|
||
initial={{ scale: 1.05 }}
|
||
animate={{ scale: 1 }}
|
||
transition={{ duration: 15, ease: "easeOut" }}
|
||
style={{ willChange: "transform" }}
|
||
className="relative w-full h-full motion-reduce:!transform-none"
|
||
>
|
||
<Image
|
||
src={mockData.heroSlides[1]}
|
||
alt="Kordon Apart - Fethiye Marina manzarası"
|
||
fill
|
||
className="object-cover object-[center_top]"
|
||
priority
|
||
sizes="100vw"
|
||
/>
|
||
</motion.div>
|
||
{/* Gradient Overlay */}
|
||
<div className="absolute inset-0 bg-gradient-to-b from-[#002045]/80 via-[#002045]/50 to-[#002045]/90" />
|
||
</div>
|
||
|
||
{/* Hero Content */}
|
||
<div className="relative z-10 h-full max-w-7xl mx-auto px-4 md:px-12 flex flex-col justify-center items-start pt-20">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="max-w-2xl motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||
>
|
||
<span className="font-label-sm text-[12px] text-white/80 uppercase tracking-widest mb-4 block font-bold">
|
||
{t("subtitle")}
|
||
</span>
|
||
<h1 className="font-heading text-5xl md:text-6xl lg:text-7xl text-white mb-6 leading-tight font-extrabold tracking-tight">
|
||
{t("title")}
|
||
</h1>
|
||
<p className="font-body-lg text-lg text-white/90 mb-8 max-w-lg leading-relaxed" style={{ maxWidth: "65ch" }}>
|
||
{t("desc")}
|
||
</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<Link
|
||
href="#"
|
||
className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px] flex items-center"
|
||
role="button"
|
||
>
|
||
{t("explore")}
|
||
</Link>
|
||
<Link
|
||
href="#"
|
||
className="bg-white/10 backdrop-blur-md border border-white/20 text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-white/20 transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-white/50 focus:outline-none min-h-[48px] flex items-center"
|
||
role="button"
|
||
>
|
||
{t("virtualTour")}
|
||
</Link>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Search Bar Utility (Floating over Hero bottom) */}
|
||
<div className="relative z-20 max-w-5xl mx-auto px-4 -mt-24 hidden md:block">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.5 }}
|
||
className="bg-white p-8 rounded-xl shadow-2xl shadow-black/10 grid grid-cols-4 gap-6 items-end border border-gray-100 motion-reduce:!transform-none motion-reduce:!opacity-100"
|
||
>
|
||
<div className="space-y-2">
|
||
<label htmlFor="check-in" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkIn")}</label>
|
||
<input id="check-in" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label htmlFor="check-out" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkOut")}</label>
|
||
<input id="check-out" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label htmlFor="guests" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("guests")}</label>
|
||
<select id="guests" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]">
|
||
<option value="1">{t("adult1")}</option>
|
||
<option value="2">{t("adult2")}</option>
|
||
<option value="3+">{t("adult3")}</option>
|
||
</select>
|
||
</div>
|
||
<button className="bg-[#CA8A04] text-white min-h-[48px] rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 font-bold cursor-pointer shadow-lg focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none">
|
||
{t("checkAvailability")}
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|