45 lines
1.5 KiB
JavaScript
45 lines
1.5 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 HeroJourney() {
|
|
const scrollDown = () => {
|
|
// Scroll to Hero4 (2nd section) - account for Hero3's 90vh height
|
|
window.scrollTo({
|
|
top: window.innerHeight * 0.9,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
return (
|
|
<div className="relative w-full overflow-hidden -mt-40">
|
|
{/* Background Image - Extended to cover header */}
|
|
<img
|
|
src="/images/journeyhero.jpg"
|
|
alt="Hero Story Background"
|
|
className="w-full h-auto object-cover block relative z-0"
|
|
/>
|
|
|
|
{/* Black Overlay */}
|
|
<div className="absolute inset-0 bg-black opacity-50"></div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex items-center justify-center text-center px-4 sm:px-6 z-20">
|
|
<div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
|
|
<H2 className="text-white">
|
|
Discover a path to wellbeing that is uniquely yours...
|
|
</H2>
|
|
{/* Chevron Down Button */}
|
|
<div className="mt-10 flex justify-center">
|
|
<ChevronDownIcon
|
|
onClick={scrollDown}
|
|
className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|