51 lines
2.3 KiB
JavaScript
51 lines
2.3 KiB
JavaScript
'use client'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { H1, H2, H3, H4, P, PS, PXS, PXXS } 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 mt-0"
|
|
>
|
|
<img
|
|
src="/images/hero_story2.jpg"
|
|
alt="Hero Story Background"
|
|
className="w-full h-auto object-cover block relative z-0 lg:hidden"
|
|
/>
|
|
|
|
<div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
|
|
|
|
<div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex 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-10">
|
|
<PS className=" ">
|
|
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 ">
|
|
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 className="mt-8 flex justify-start">
|
|
<ChevronDownIcon
|
|
onClick={scrollDown}
|
|
className="h-12 w-12 animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|