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-21 17:24:42 +02:00
parent 3ab87ff9dc
commit 26922db3e4
12 changed files with 72 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Activities.jsx
View File

@@ -34,7 +34,7 @@ const posts = [
<div className="bg-creme-200 py-12 lg:py-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<p className="mt-2 text-lg leading-8 text-gray-600 italic font-semibold">
<p className="mt-2 text-xl/5 leading-8 text-gray-600 italic font-semibold">
Mind, Body, and Soul: For a Deeper Connection.
</p>
</div>

10
src/components/Boat.jsx
View File

@@ -100,7 +100,7 @@ function TestimonialCard({
ref={ref}
style={{ opacity }}
{...props}
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden lg:w-96"
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden sm:w-80 lg:w-96"
>
{/* Image Section */}
<div className="relative aspect-square overflow-hidden">
@@ -154,13 +154,13 @@ export function Boat() {
}
return (
<div className="pt-24 pb-12">
<div className="pt-16 lg:pt-24 pb-12">
<Container>
<div ref={setReferenceWindowRef}>
<h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Dahabiyas
</h2>
<p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
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.
</p>
</div>
@@ -168,9 +168,9 @@ export function Boat() {
<div
ref={scrollRef}
className={clsx([
'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 ml-12',
'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 lg:ml-12 ml-4',
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
'snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth',
'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
'pb-8',
])}
>

4
src/components/Button.jsx
View File

@@ -3,9 +3,9 @@ import clsx from 'clsx'
const baseStyles = {
solid:
'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
'group inline-flex items-center justify-center rounded-xl py-1.5 px-3 sm:py-2 sm:px-4 text-xs sm:text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
outline:
'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3 sm:py-2 sm:px-4 text-xs sm:text-sm focus:outline-none',
}
const variantStyles = {

14
src/components/CNNVIDEO.jsx
View File

@@ -6,17 +6,12 @@ import React from 'react'
const CnnVideo = () => {
return (
<section
id="testimonials"
aria-label="What our customers are saying"
className="bg-transparent pt-6 pb-24"
>
<Container>
<div className="mx-auto max-w-5xl md:text-center">
<div className="mx-auto max-w-4xl md:text-center">
<h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
VEDA ON CNN
</h2>
<p className="mb-10 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
<p className="mb-6 sm:mb-10 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
</p>
</div>
@@ -24,15 +19,14 @@ const CnnVideo = () => {
<iframe
src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
width="100%"
height="600"
height="300"
frameBorder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
className="rounded-lg w-full max-w-6xl mx-auto"
className="rounded-lg w-full max-w-6xl mx-auto sm:h-[400px] lg:h-[600px]"
></iframe>
</div>
</Container>
</section>
);
};

69
src/components/Carousel.jsx
View File

@@ -1,7 +1,8 @@
"use client"; // <-- This line is crucial
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import clsx from 'clsx';
const cards = [
{
@@ -39,6 +40,7 @@ const cards = [
const MultiCardCarousel = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const [isMobile, setIsMobile] = useState(false); // Start with false, will be updated in useEffect
const scrollRef = useRef(null);
useEffect(() => {
const handleResize = () => {
@@ -69,49 +71,42 @@ const MultiCardCarousel = () => {
const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
return (
<div className="flex items-center justify-center min-h-screen py-6 bg-transparent">
<div className="w-full max-w-7xl">
<div className="text-left mx-auto max-w-7xl px-6 lg:px-8">
<div className="flex items-center justify-center py-16 lg:py-24 bg-transparent px-6 lg:px-8">
<div className="w-full max-w-7xl ">
<div className="text-left mx-auto max-w-7xl ">
<h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Activities
</h2>
<p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr pb-8 sm:pb-12">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr pb-6 sm:pb-8 lg:pb-12">
Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
</p>
</div>
<div className="relative">
<div className={`flex ${isMobile ? 'w-full' : 'space-x-2 overflow-x-auto'}`}>
{displayCards.map((card, index) => (
<div
className={`flex-none ${isMobile ? 'w-full' : 'w-1/3'} relative overflow-hidden rounded-lg`}
key={index}
>
<img
className="h-full w-full object-cover"
src={card.image}
alt={card.title}
/>
<div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-4">
<h3 className="text-lg font-semibold text-white mb-2">{card.title}</h3>
<p className="text-white">{card.description}</p>
</div>
<div
ref={scrollRef}
className={clsx([
'mt-8 flex gap-4 px-6 lg:px-8 mr-6 lg:mr-0',
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
'pb-8',
])}
>
{cards.map((card, index) => (
<div
key={index}
className="w-72 sm:w-80 lg:w-96 shrink-0 snap-start relative overflow-hidden rounded-lg h-80"
>
<img
className="h-full w-full object-cover"
src={card.image}
alt={card.title}
/>
<div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-3 sm:p-4">
<h3 className="text-base sm:text-lg font-semibold text-white mb-1 sm:mb-2">{card.title}</h3>
<p className="text-sm sm:text-base text-white leading-tight">{card.description}</p>
</div>
))}
</div>
<div className="absolute inset-x-0 bottom-1/2 flex justify-between px-6 transform -translate-y-1/2">
<button
className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
onClick={handlePrev}
>
&lt;
</button>
<button
className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
onClick={handleNext}
>
&gt;
</button>
</div>
</div>
))}
<div className="w-8 shrink-0" />
</div>
</div>
</div>

8
src/components/Experiences.jsx
View File

@@ -1,17 +1,17 @@
export function Experiences() {
return (
<div className="pt-16 sm:pt-24 pb-12">
<div className="pt-16 lg:pt-24 pb-12">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<p className="mt-2 max-w-lg text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
<p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Programs
</p>
<p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
</p>
<div className="mt-8 sm:mt-16 grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
<div className="flex p-px lg:col-span-5">
<div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end">
<div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end h-80 lg:h-auto">
<img
alt=""
src="/images/community.jpg"

2
src/components/Footer.jsx
View File

@@ -3,7 +3,7 @@ import { Logo } from '@/components/Logo'
export function Footer() {
return (
<footer className="bg-transparent border-darkgr-950 border-t-4">
<footer className="bg-transparent border-darkgr-950 border-t-2">
<Container>
<div className="flex items-center justify-between py-8">
<Logo className="h-10 w-auto" />

12
src/components/Hero.jsx
View File

@@ -5,14 +5,14 @@ import { Container } from '@/components/Container'
export function Hero() {
return (
<section className="relative w-full h-screen lg:mt-0 mt-0">
<section className="relative w-full lg:h-screen h-[550px] lg:mt-0 mt-0">
{/* Background Video */}
<video
autoPlay
loop
muted
playsInline
className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-[#FEFFF6] opacity-20"
className="absolute top-0 left-0 w-full lg:h-full h-[550px] object-cover z-0 bg-[#FEFFF6] opacity-25"
>
<source src="/videos/hero4.mp4" type="video/mp4" />
Your browser does not support the video tag.
@@ -25,18 +25,18 @@ export function Hero() {
<Image src="/images/logos/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" unoptimized />
</div>
<div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
<h2 className="text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
<h2 className="text-xl/5 font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
</h2>
<h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
<h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
</h2>
</div>
<div className="mx-auto max-w-3xl lg:mx-0">
<p className="mt-4 sm:mt-6 text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
<p className="mt-4 sm:mt-6 text-2xl font-semibold tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-700 lg:text-4xl">
Nile Cruises, Reimagined.
</p>
<Button href="/story" color="blue" className="mt-6 sm:mt-8">
<Button href="/story" color="blue" className="mt-6 lg:mt-8">
<span className="font-semibold tracking-wide">
Read Our Story
</span>

14
src/components/NewFeatures.jsx
View File

@@ -8,9 +8,9 @@ const features = [
icon: SparklesIcon,
},
{
name: 'Your journey, your way.',
name: 'Magical Expeditions',
description:
"Create a travel experience that suits you perfectly, from the length of your stay to a tailored itinerary. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
"Let Veda take you on a journey of a lifetime. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
icon: SparklesIcon,
},
{
@@ -23,13 +23,13 @@ const features = [
export default function NewFeatures() {
return (
<div className="overflow-hidden bg-transparent pb-0 pt-16 pb:12">
<div className="overflow-hidden bg-transparent pb-0 pt-4 lg:pt-24 pb:12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xllg:max-w-7xl pb-16">
<div className="mx-auto max-w-2xllg:max-w-7xl pb-10 lg:pb-16">
<p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Experiences
</p>
<p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
At VEDA, we embrace a transformative journey by aligning with your personal preferences and holistic experiences. Our mission is to offer profound and memorable moments that inspire and uplift, guiding you on a journey within.
</p>
</div>
@@ -44,14 +44,14 @@ export default function NewFeatures() {
</div>
<div className="lg:ml-auto lg:pl-4 lg:pt-0">
<div className="lg:max-w-lg">
<dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
<dl className="lg:mt-10 mt-0 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
{features.map((feature) => (
<div key={feature.name} className="relative pl-9">
<dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">
<feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
{feature.name}
</dt>{' '}
<dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
<dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
</div>
))}
</dl>

2
src/components/NewFeatures2.jsx
View File

@@ -35,7 +35,7 @@ export default function NewFeatures2() {
<feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
{feature.name}
</dt>{' '}
<dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
<dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
</div>
))}
</dl>

10
src/components/Route.jsx
View File

@@ -11,15 +11,15 @@ import { Container } from '@/components/Container'
export default function Route() {
return (
<div className="overflow-hidden bg-transparent pt-6 pb-24">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="overflow-hidden bg-transparent pt-6 pb-24 px-6 lg:px-8">
<div className="mx-auto max-w-7xl ">
<div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
<div className="px-6 lg:px-0 lg:pr-4 lg:pt-4">
<div className="lg:pr-4 lg:pt-4">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
<p className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">Itinerary</p>
<p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
<p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</p>
<p className="my-6 max-w-5xl text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
<p className="my-6 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
</p>
<div className="relative z-10 mt-4 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
<Button href="/contact" color="blue">

8
src/components/Testimonials.jsx
View File

@@ -87,20 +87,20 @@ export function Testimonials() {
<section
id="testimonials"
aria-label="What our customers are saying"
className="bg-transparent pt-12 pb-24"
className="bg-transparent lg:pt-24 pt-8 pb-24"
>
<Container>
<div className="mx-auto max-w-4xl md:text-center">
<div className="mx-auto max-w-5xl md:text-center">
<h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
Testimonials
</h2>
<p className="mb-8 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
<p className="mb-8 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
Discover the heartfelt stories of joy, relaxation, and adventure that make VEDA a cherished choice for travelers seeking unique and sophisticated experiences on the Nile.
</p>
</div>
<ul
role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
>
{testimonials.map((column, columnIndex) => (
<li key={columnIndex}>