first commit
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user