-
This commit is contained in:
197
src/components/Boat.jsx
Normal file
197
src/components/Boat.jsx
Normal file
@@ -0,0 +1,197 @@
|
||||
'use client'
|
||||
|
||||
import * as Headless from '@headlessui/react'
|
||||
import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
|
||||
import { clsx } from 'clsx'
|
||||
import {
|
||||
motion,
|
||||
useMotionValueEvent,
|
||||
useScroll,
|
||||
useSpring,
|
||||
} from 'framer-motion'
|
||||
import { useCallback, useLayoutEffect, useRef, useState } from 'react'
|
||||
import useMeasure from 'react-use-measure'
|
||||
import { Container } from './Container'
|
||||
import { Link } from './link'
|
||||
import { Heading, Subheading } from './text'
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
img: '/images/veda1.jpg',
|
||||
name: '0 - 6 Years Old',
|
||||
title: 'From birth to age 6, we offer ECD programs that change lives forever.',
|
||||
subtitle: 'A beautiful 50-meter dahabiya offering a tranquil and organic platform for personalized cruises.',
|
||||
quote: 'VEDA 1',
|
||||
href: '/phases/phase1',
|
||||
},
|
||||
{
|
||||
img: '/images/veda2.jpg',
|
||||
name: '6 - 15 Years Old',
|
||||
title: 'Unlock the Potential of Youth with transformational learning experiences',
|
||||
subtitle: 'An elegant 45-meter dahabiya, ideal for hosting larger groups, healing retreats, company getaways, and more.',
|
||||
quote: 'VEDA 2',
|
||||
href: '/phases/phase2',
|
||||
},
|
||||
{
|
||||
img: '/images/veda3.jpg',
|
||||
name: '15 - 25 Years Old',
|
||||
title: 'Skills that Earn & Regenerate Vocational paths that equip young people to live with purpose.',
|
||||
subtitle: 'A cozy 18-meter dahabeya offering a serene floating home experience, perfect for private groups seeking tranquility and comfort on the Nile.',
|
||||
quote: 'VEDA 3',
|
||||
href: '/phases/phase3',
|
||||
},
|
||||
{
|
||||
img: '/images/veda4.jpg',
|
||||
name: 'All Ages',
|
||||
title: 'A unique portfolio of impact proven Community-led solutions worth implementing',
|
||||
subtitle: 'A cozy 55-meter dahabeya offering a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.',
|
||||
quote: 'VEDA 4',
|
||||
href: '/phases/phase4',
|
||||
},
|
||||
]
|
||||
|
||||
function TestimonialCard({
|
||||
subtitle,
|
||||
name,
|
||||
title,
|
||||
img,
|
||||
href,
|
||||
children,
|
||||
bounds,
|
||||
scrollX,
|
||||
...props
|
||||
}) {
|
||||
let ref = useRef(null)
|
||||
|
||||
let computeOpacity = useCallback(() => {
|
||||
let element = ref.current
|
||||
if (!element || bounds.width === 0) return 1
|
||||
|
||||
let rect = element.getBoundingClientRect()
|
||||
|
||||
if (rect.left < bounds.left) {
|
||||
let diff = bounds.left - rect.left
|
||||
let percent = diff / rect.width
|
||||
return Math.max(0.5, 1 - percent)
|
||||
} else if (rect.right > bounds.right) {
|
||||
let diff = rect.right - bounds.right
|
||||
let percent = diff / rect.width
|
||||
return Math.max(0.5, 1 - percent)
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
}, [ref, bounds.width, bounds.left, bounds.right])
|
||||
|
||||
let opacity = useSpring(computeOpacity(), {
|
||||
stiffness: 154,
|
||||
damping: 23,
|
||||
})
|
||||
|
||||
useLayoutEffect(() => {
|
||||
opacity.set(computeOpacity())
|
||||
}, [computeOpacity, opacity])
|
||||
|
||||
useMotionValueEvent(scrollX, 'change', () => {
|
||||
opacity.set(computeOpacity())
|
||||
})
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
style={{ opacity }}
|
||||
{...props}
|
||||
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-white rounded-3xl shadow-lg overflow-hidden sm:w-96"
|
||||
>
|
||||
{/* Image Section */}
|
||||
<div className="relative aspect-square overflow-hidden">
|
||||
<img
|
||||
alt=""
|
||||
src={img}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content Section Below Image */}
|
||||
<div className="p-6">
|
||||
<blockquote>
|
||||
<p className="text-2xl font-bold text-gray-900 lg:text-3xl">
|
||||
{children}
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p className="mt-4 text-sm text-gray-600 leading-6">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href={href}
|
||||
className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-gold-600 hover:text-gold-700"
|
||||
>
|
||||
Learn More
|
||||
<ArrowLongRightIcon className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Boat() {
|
||||
let scrollRef = useRef(null)
|
||||
let { scrollX } = useScroll({ container: scrollRef })
|
||||
let [setReferenceWindowRef, bounds] = useMeasure()
|
||||
let [activeIndex, setActiveIndex] = useState(0)
|
||||
|
||||
useMotionValueEvent(scrollX, 'change', (x) => {
|
||||
if (scrollRef.current && scrollRef.current.children[0]) {
|
||||
setActiveIndex(Math.floor(x / scrollRef.current.children[0].clientWidth))
|
||||
}
|
||||
})
|
||||
|
||||
function scrollTo(index) {
|
||||
let gap = 32
|
||||
let width = scrollRef.current.children[0].offsetWidth
|
||||
scrollRef.current.scrollTo({ left: (width + gap) * index })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-12 pb-24">
|
||||
<Container>
|
||||
<div ref={setReferenceWindowRef}>
|
||||
<h2 className="text-base font-semibold leading-7 text-gold-600">OUR OFFERS</h2>
|
||||
<h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
|
||||
VEDA DAHABIYAS
|
||||
</h2>
|
||||
<p className="mt-2 text-lg tracking-wide font-normal leading-8 text-gray-600">
|
||||
Discover peaceful platforms where every detail ensures a truly memorable stay. Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture. Each vessel is carefully maintained and uniquely designed to provide the perfect setting for relaxation, reflection, and genuine connection with the magnificent Nile landscape.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className={clsx([
|
||||
'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8',
|
||||
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
|
||||
'snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth',
|
||||
'pb-8',
|
||||
])}
|
||||
>
|
||||
{testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
|
||||
<TestimonialCard
|
||||
key={testimonialIndex}
|
||||
subtitle={subtitle}
|
||||
name={name}
|
||||
title={title}
|
||||
href={href}
|
||||
img={img}
|
||||
bounds={bounds}
|
||||
scrollX={scrollX}
|
||||
onClick={() => scrollTo(testimonialIndex)}
|
||||
>
|
||||
{quote}
|
||||
</TestimonialCard>
|
||||
))}
|
||||
<div className="w-8 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user