first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChevronDown, MapPin } from 'lucide-react';
|
||||
|
||||
export default function Hero() {
|
||||
const t = useTranslations('Hero');
|
||||
|
||||
const openWhatsApp = () => {
|
||||
const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
|
||||
window.open(`https://wa.me/${phone}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="hero"
|
||||
className="relative w-full h-screen flex items-center justify-center overflow-hidden"
|
||||
style={{ background: '#080D18' }}
|
||||
>
|
||||
{/* ── Ambient gradient blobs ───────────────────── */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<motion.div
|
||||
animate={{ x: [0, 60, -20, 0], y: [0, -50, 30, 0], scale: [1, 1.15, 0.95, 1] }}
|
||||
transition={{ duration: 28, repeat: Infinity, ease: 'easeInOut' }}
|
||||
className="absolute -top-56 -left-56 w-[700px] h-[700px] rounded-full"
|
||||
style={{ background: 'radial-gradient(circle, rgba(255,90,54,0.28) 0%, transparent 65%)' }}
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ x: [0, -80, 50, 0], y: [0, 70, -30, 0], scale: [1, 0.85, 1.2, 1] }}
|
||||
transition={{ duration: 32, repeat: Infinity, ease: 'easeInOut', delay: 6 }}
|
||||
className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full"
|
||||
style={{ background: 'radial-gradient(circle, rgba(0,191,165,0.22) 0%, transparent 65%)' }}
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ x: [0, 100, -60, 0], y: [0, -80, 50, 0], scale: [1, 1.3, 0.85, 1] }}
|
||||
transition={{ duration: 22, repeat: Infinity, ease: 'easeInOut', delay: 12 }}
|
||||
className="absolute top-1/2 right-1/3 w-[400px] h-[400px] rounded-full"
|
||||
style={{ background: 'radial-gradient(circle, rgba(255,168,39,0.18) 0%, transparent 65%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Grain overlay */}
|
||||
<div
|
||||
className="absolute inset-0 z-[1] opacity-[0.035] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ── Content ──────────────────────────────────── */}
|
||||
<div className="relative z-10 container mx-auto px-6 flex flex-col items-center text-center">
|
||||
|
||||
{/* Location */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="text-[11px] tracking-[0.45em] uppercase text-coral font-bold mb-10"
|
||||
>
|
||||
Akyaka · Gökova Körfezi
|
||||
</motion.p>
|
||||
|
||||
{/* Brand name — static gradient, no shimmer */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.15 }}
|
||||
className="font-heading font-black uppercase tracking-tight leading-none gradient-text-warm mb-4"
|
||||
style={{ fontSize: 'clamp(3rem, 8vw, 6.5rem)' }}
|
||||
>
|
||||
KOZMOS
|
||||
</motion.h1>
|
||||
|
||||
{/* Thin divider */}
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.35 }}
|
||||
className="w-16 h-px mb-5"
|
||||
style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)' }}
|
||||
/>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.45 }}
|
||||
className="text-sm md:text-base tracking-[0.55em] uppercase text-white/40 font-medium mb-6"
|
||||
>
|
||||
Beach & More
|
||||
</motion.p>
|
||||
|
||||
{/* Tagline */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="text-white/55 text-sm md:text-base max-w-xs leading-relaxed mb-12"
|
||||
>
|
||||
{t('tagline')}
|
||||
</motion.p>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.75 }}
|
||||
className="flex flex-col sm:flex-row gap-3"
|
||||
>
|
||||
<button
|
||||
onClick={openWhatsApp}
|
||||
className="px-8 py-3.5 rounded-full font-bold text-sm tracking-wider text-white transition-all duration-300 hover:scale-105 hover:shadow-[0_0_32px_rgba(255,90,54,0.45)]"
|
||||
style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
|
||||
>
|
||||
{t('cta_reservation')}
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="#contact"
|
||||
className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-full text-sm tracking-wider font-medium text-white/70 border border-white/15 hover:border-white/35 hover:text-white transition-all duration-300"
|
||||
>
|
||||
<MapPin size={14} />
|
||||
{t('cta_location')}
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* ── Wave divider ─────────────────────────────── */}
|
||||
<div className="absolute bottom-0 left-0 w-full z-10 leading-none">
|
||||
<svg
|
||||
viewBox="0 0 1440 72"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
className="w-full h-[72px]"
|
||||
>
|
||||
<path
|
||||
d="M0,36 C240,72 480,0 720,36 C960,72 1200,0 1440,36 L1440,72 L0,72 Z"
|
||||
fill="#FFF8EE"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Scroll cue */}
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 text-white/35"
|
||||
animate={{ y: [0, 7, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 1.8 }}
|
||||
>
|
||||
<a href="#about" aria-label="Scroll down">
|
||||
<ChevronDown size={24} />
|
||||
</a>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user