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

40
src/components/Hero3.jsx
View File

@@ -6,33 +6,39 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
export function Hero3() {
const scrollDown = () => {
// Scroll to Hero4 (2nd section) - account for Hero3's 90vh height
window.scrollTo({
top: window.innerHeight * 0.9,
behavior: 'smooth'
})
const el = document.getElementById('section-2');
if (!el) return;
const offset = 88; // adjust if header differs
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-1"
data-story-section
data-image="/images/hero_story1.jpg"
className="relative w-full overflow-hidden mt-0"
>
{/* Background Image - stays for mobile, hidden on lg (sticky column takes over) */}
<img
src="/images/hero_story1.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>
{/* Black Overlay (mobile only) */}
<div className="absolute inset-0 bg-black opacity-50 lg:hidden"></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">
<H2 className="text-white">Our Story</H2>
<P className="mt-4 text-white">THE TALE OF SACRED ENERGIES OF THE NILE</P>
<PS className="mt-6 text-white">
<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">
<H2 className=" ">Our Story</H2>
<P className="mt-4 ">THE TALE OF SACRED ENERGIES OF THE NILE</P>
<PS className="mt-6 ">
Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating authentic, zen, art dahabeya to feel and experience in a unique way the mystical and the deep wisdom of the Nile.
</PS>
<PS className="mt-4 text-white">
<PS className="mt-4 ">
Their dream was to offer a sanctuary for the body, mind, and soul, a safe space to open yourself to new experiences, and allow the sacredness of the Nile to flow through you, to step back in the past, to align with the now helping you to reconnect with your true essence. A sanctuary for the body, mind, and soul, a safe space.
</PS>
@@ -40,7 +46,7 @@ export function Hero3() {
<div className="mt-8 flex justify-start">
<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>