51 lines
2.4 KiB
JavaScript
51 lines
2.4 KiB
JavaScript
'use client'
|
|
|
|
import { PS } from '@/components/text'
|
|
import { ChevronDownIcon } from '@heroicons/react/24/outline'
|
|
|
|
export function Hero4() {
|
|
const scrollDown = () => {
|
|
const el = document.getElementById('section-3');
|
|
if (!el) return;
|
|
const offset = 88;
|
|
const y = el.getBoundingClientRect().top + window.scrollY - offset;
|
|
window.scrollTo({ top: y, behavior: 'smooth' });
|
|
}
|
|
|
|
return (
|
|
<div
|
|
id="section-2"
|
|
data-story-section
|
|
data-image="/images/hero_story2.jpg"
|
|
className="relative w-full overflow-hidden h-screen lg:h-auto mt-0"
|
|
>
|
|
<img
|
|
src="/images/hero_story2.jpg"
|
|
alt="Hero Story Background"
|
|
className="absolute inset-0 w-full h-full object-cover z-0 lg:hidden"
|
|
/>
|
|
|
|
<div className="absolute inset-0 bg-black opacity-50 lg:hidden z-10"></div>
|
|
|
|
<div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-center lg:items-start justify-start text-start px-4 lg:px-0 z-20">
|
|
<div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-4">
|
|
<PS className="text-white lg:text-neutral-700 lg:text-base text-sm">
|
|
We are unique in the market as the cruises are designed to provide for a private, personalised and wellness experience on the River Nile. Families, communities or dedicated groups up to sixty people can sail the Nile together discovering her hidden treasures. The Nile is a powerful natural energy source, and the boats are designed to help you align with its frequencies to feel the magic carried by sacred waters of the Nile.
|
|
</PS>
|
|
<PS className="mt-6 text-white lg:text-neutral-700 lg:text-base text-sm">
|
|
Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
|
|
</PS>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chevron Down Button - Mobile Only */}
|
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 lg:hidden z-30">
|
|
<ChevronDownIcon
|
|
onClick={scrollDown}
|
|
className="h-10 w-10 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|