veda/www_veda_2025
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-28 14:10:51 +02:00
parent 24c2a245b6
commit 3ca4017584
8 changed files with 172 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Hero4.jsx
View File

@@ -6,41 +6,41 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
export function Hero4() {
const scrollDown = () => {
// Scroll to Hero5 (3rd section) - account for Hero3 + Hero4 heights
const hero3Height = window.innerHeight * 0.9; // Hero3 is 90vh
const hero4Height = document.querySelector('img[src="/images/hero_story2.jpg"]')?.offsetHeight || window.innerHeight;
window.scrollTo({
top: hero3Height + hero4Height,
behavior: 'smooth'
})
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 className="relative w-full overflow-hidden mt-0">
{/* Background Image - Extended to cover header */}
<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"
className="w-full h-auto object-cover block relative z-0 lg:hidden"
/>
{/* Black Overlay */}
<div className="absolute inset-0 bg-black opacity-50"></div>
{/* Content */}
<div className="absolute inset-0 lg:top-32 flex items-start justify-start text-start px-4 lg:px-8 z-20">
<div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full">
<PS className=" text-white">
<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 text-white">
<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>
{/* Chevron Down Button */}
<div className="mt-8 flex justify-start">
<ChevronDownIcon
<ChevronDownIcon
onClick={scrollDown}
className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
className="h-12 w-12 animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
/>
</div>
</div>