75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Link } from '@/i18n/routing';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
export default function Hero() {
|
|
const t = useTranslations('Index');
|
|
|
|
return (
|
|
<section className="relative h-screen flex items-center justify-center overflow-hidden">
|
|
{/* Background with Overlay */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1542718610-a1d656d1884c?q=80&w=2070&auto=format&fit=crop"
|
|
alt="Luxury Villa"
|
|
fill
|
|
priority
|
|
className="object-cover scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/30 bg-gradient-to-b from-black/40 via-transparent to-bone/10" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 text-center px-6 max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
>
|
|
<span className="inline-block mb-4 text-bone text-sm font-bold tracking-[0.3em] uppercase opacity-90">
|
|
Salmakis Collection
|
|
</span>
|
|
<h1 className="text-5xl md:text-8xl font-serif text-bone leading-tight mb-6">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-bone/90 font-sans max-w-2xl mx-auto mb-10 leading-relaxed">
|
|
{t('description')}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link
|
|
href="/#villas"
|
|
className="group relative px-8 py-4 bg-salmakis-blue text-white rounded-full font-bold overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-salmakis-blue/20"
|
|
>
|
|
<span className="relative z-10 flex items-center space-x-2">
|
|
<span>{t('explore')}</span>
|
|
<ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="px-8 py-4 bg-white/10 backdrop-blur-md border border-white/20 text-white rounded-full font-bold hover:bg-white/20 transition-all duration-300"
|
|
>
|
|
İletişime Geç
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1, duration: 1 }}
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
|
>
|
|
<div className="w-[1px] h-20 bg-gradient-to-b from-white to-transparent" />
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|