Files
kitebeachakyaka/components/home/CtaBand.tsx
T

51 lines
1.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import Image from "next/image";
import ScrollReveal from "@/components/ScrollReveal";
interface CtaBandProps {
lang: string;
}
export default function CtaBand({ lang }: CtaBandProps) {
return (
<section className="relative py-28 overflow-hidden">
<div
className="absolute inset-0 animate-gradient-pan"
style={{
background:
"linear-gradient(135deg, #0D3D50 0%, #1A6B8A 35%, #0E1A24 60%, #1A4A60 100%)",
}}
/>
<div className="absolute inset-0 opacity-[0.04]">
<Image
src="https://images.unsplash.com/photo-1498623116890-37e912163d5d?q=80&w=2940&auto=format&fit=crop"
alt=""
fill
sizes="100vw"
className="object-cover"
/>
</div>
<div className="relative z-10 max-w-3xl mx-auto px-4 text-center">
<ScrollReveal>
<span className="inline-block text-accent text-xs tracking-[0.3em] uppercase font-semibold mb-6">
{lang === "en" ? "Get Started" : "Hemen Başlayın"}
</span>
<h2 className="font-serif text-5xl md:text-6xl font-bold text-white leading-tight mb-6">
{lang === "en" ? (
<>Are you ready to plan<br />your dream vacation?</>
) : (
<>Hayalindeki tatili<br />planlamaya hazır mısın?</>
)}
</h2>
<p className="text-white/50 mb-10 text-base leading-relaxed">
{lang === "en"
? "The wind is calling you. Book your spot now and become a part of this unique experience."
: "Rüzgar seni çağırıyor. Hemen yerini ayırt ve bu eşsiz deneyimin bir parçası ol."}
</p>
</ScrollReveal>
</div>
</section>
);
}