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-22 19:33:22 +02:00
parent 7ab3b60462
commit 3f6c4025b0
19 changed files with 89 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/layout.jsx
View File

@@ -1,4 +1,4 @@
import { Inter, Lexend } from 'next/font/google'
import { Inter, Lexend, Vollkorn } from 'next/font/google'
import clsx from 'clsx'
import '@/styles/tailwind.css'
@@ -24,17 +24,24 @@ const lexend = Lexend({
variable: '--font-lexend',
})
const vollkorn = Vollkorn({
subsets: ['latin'],
display: 'swap',
variable: '--font-vollkorn',
})
export default function RootLayout({ children }) {
return (
<html
lang="en"
className={clsx(
'h-full scroll-smooth bg-sand antialiased',
'h-full scroll-smooth bg-bg-sand antialiased',
inter.variable,
lexend.variable,
vollkorn.variable,
)}
>
<body className="flex h-full flex-col pt-20 bg-sand">{children}</body>
<body className="flex h-full flex-col pt-20 bg-bg-sand">{children}</body>
</html>
)
}

1
src/app/page.jsx
View File

@@ -35,7 +35,6 @@ export default function Home() {
<Route />
<CnnVideo />
<Testimonials />
<CallToAction3 />
</main>
<Footer />
</>

10
src/components/Boat.jsx
View File

@@ -13,7 +13,7 @@ import { useCallback, useLayoutEffect, useRef, useState } from 'react'
import useMeasure from 'react-use-measure'
import { Container } from './Container'
import { Link } from './link'
import { Heading, Subheading, H2, P, PS, H3} from './text'
import { Heading, Subheading, H2, P, PS, H3, H4 } from './text'
import { Button } from './Button'
const testimonials = [
@@ -100,7 +100,7 @@ function TestimonialCard({
<motion.div
ref={ref}
{...props}
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent overflow-hidden sm:w-80 lg:w-96"
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-bg-sand overflow-hidden sm:w-80 lg:w-96"
style={{ aspectRatio: '360/460' }}
>
{/* Image Section */}
@@ -115,9 +115,9 @@ function TestimonialCard({
{/* Content Section Below Image */}
<div className="py-2 px-2" style={{ height: '25%' }}>
<blockquote>
<H3 className="text-sm lg:text-base">
<H4 className="">
{children}
</H3>
</H4>
</blockquote>
<PS className="mt-1 mb-2 text-xs lg:text-sm">
@@ -172,7 +172,7 @@ export function Boat() {
</H2>
<PS className="mt-4">
Discover peaceful platforms where every detail ensures a truly memorable stay.
</PS>
</PS >
<PS className="mt-2 mb-6">
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.
</PS>

14
src/components/CNNVIDEO.jsx
View File

@@ -1,20 +1,22 @@
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import React from 'react'
import { H2, P, PS, H3, PXS, H4 } from '@/components/text'
const CnnVideo = () => {
return (
<Container>
<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">
<div className="bg-bg-sand mx-auto max-w-7xl md:text-center pt-12">
<H2 className="">
VEDA ON CNN
</h2>
<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">
</H2>
<P className="">
CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
</p>
</P>
</div>
<div className="video-container">
<div className="video-container mt-12 bg-bg-sand">
<iframe
src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
width="100%"

2
src/components/CallToAction2.jsx
View File

@@ -7,7 +7,7 @@ export function CallToAction2() {
return (
<section
id="get-started-today"
className="relative overflow-hidden bg-transparent py-40 mt-4 mb-2"
className="relative overflow-hidden bg-bg-sand py-40 mt-4 mb-2"
>
<img
className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"

2
src/components/CallToAction3.jsx
View File

@@ -7,7 +7,7 @@ export function CallToAction3() {
return (
<section
id="get-started-today"
className="relative overflow-hidden bg-transparent py-48 mt-4"
className="relative overflow-hidden bg-bg-sand py-48 mt-4"
>
<img
className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"

8
src/components/CallToAction4.jsx
View File

@@ -1,18 +1,18 @@
import { Container } from '@/components/Container'
import { H3, P } from '@/components/text'
import { H2,H3, P } from '@/components/text'
export function CallToAction4() {
return (
<section
id="about"
className="relative overflow-hidden bg-bg-sand pt-16 pb-12"
className="relative overflow-hidden bg-bg-sand pt-24 pb-12"
>
<Container className="relative">
<div className="mx-auto max-w-6xl text-center">
<H3 className="mb-6">
<H2 className="mb-4">
Transformative Programs on the Nile
</H3>
</H2>
<P className="mb-6">
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>

2
src/components/Carousel.jsx
View File

@@ -85,7 +85,7 @@ const MultiCardCarousel = () => {
{cards.slice(0, 3).map((card, index) => (
<div
key={index}
className="relative overflow-hidden bg-transparent"
className="relative overflow-hidden bg-bg-sand"
>
<div className="aspect-[4/5] overflow-hidden">
<img

2
src/components/Container.jsx
View File

@@ -3,7 +3,7 @@ import clsx from 'clsx'
export function Container({ className, ...props }) {
return (
<div
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
className={clsx('mx-auto bg-bg-sand max-w-7xl px-4 sm:px-6 lg:px-8', className)}
{...props}
/>
)

8
src/components/Footer.jsx
View File

@@ -3,11 +3,11 @@ import { Logo } from '@/components/Logo'
export function Footer() {
return (
<footer className="bg-bg-clay border-primary-olive border-t-2">
<footer className="bg-bg-sand border-gray-300 border-t-[1px]">
<Container>
<div className="flex items-center justify-between py-8">
<Logo className="h-10 w-auto" />
<p className="text-sm text-primary-olive hover:text-primary-terracotta transition-colors duration-200">
<div className="flex items-center justify-between py-6">
<Logo className="h-8 w-auto" />
<p className="text-sm text-darkbrown hover:text-primary-terracotta transition-colors duration-200">
Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
</p>
</div>

2
src/components/Logo.jsx
View File

@@ -38,7 +38,7 @@ const SvgIcon = (props) => (
export function Logo(props) {
return (
<div className="bg-transparent px-2 py-1 rounded">
<div className="bg-bg-sand px-2 py-1 rounded">
<SvgIcon {...props} />
</div>
);

2
src/components/NavLink.jsx
View File

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
return (
<Link
href={href}
className="inline-block px-2 py-1 text-sm text-nav-dark hover:text-primary-terracotta transition-colors duration-200"
className="inline-block px-2 py-1 text-sm tracking-wide text-nav-dark hover:text-primary-olive transition-colors duration-200"
>
{children}
</Link>

2
src/components/NewFeatures.jsx
View File

@@ -23,7 +23,7 @@ const features = [
export default function NewFeatures() {
return (
<div className="overflow-hidden bg-transparent pb-0 pt-4 lg:pt-24 pb:12">
<div className="overflow-hidden bg-bg-sand 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-10 lg:pb-16">
<p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">

2
src/components/NewFeatures2.jsx
View File

@@ -23,7 +23,7 @@ const features = [
export default function NewFeatures2() {
return (
<div className="overflow-hidden bg-transparent pt-0 lg:pt-12 lg:pb-24 pb-12">
<div className="overflow-hidden bg-bg-sand pt-0 lg:pt-12 lg:pb-24 pb-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div className="lg:order-first">

29
src/components/Route.jsx
View File

@@ -6,43 +6,42 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import clsx from 'clsx'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { H2, P, PS, PXS, H3 , H4 } from '@/components/text'
export default function Route() {
return (
<div className="overflow-hidden bg-transparent pt-6 pb-24 px-6 lg:px-8">
<div className="bg-bg-sand overflow-hidden pt-12 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="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-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-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>
<H2 className="">Itinerary</H2>
<P className="mt-4 ">
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-4">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">
<span className="font-semibold tracking-wide">
Book Now
</span>
</Button>
</div>
<Button href="/contact" variant="link" color="darkgr">
Learn More
</Button>
</div>
</div>
</div>
<div className="sm:px-6 lg:px-0">
<div className="relative overflow-hidden sm:mx-auto sm:max-w-2xl sm:rounded-3xl lg:mx-0 lg:max-w-none">
<div className="relative overflow-hidden sm:mx-auto sm:max-w-2xl lg:mx-0 lg:max-w-none">
<div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<img
alt="trip map"
src="/images/map.png"
width={500}
height={500}
className="w-full max-w-full rounded-tl-xl bg-gray-800 ring-1 ring-white/10"
className="w-full max-w-full bg-gray-800 ring-1 ring-white/10"
/>
</div>
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 sm:rounded-3xl"
className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 "
/>
</div>
</div>

21
src/components/Testimonials.jsx
View File

@@ -1,5 +1,6 @@
import { Container } from '@/components/Container'
import { H2, P, PS, H3, PXS, H4, PXXS } from '@/components/text'
const testimonials = [
[
@@ -25,7 +26,7 @@ const testimonials = [
[
{
content:
"The VEDA trip on the Nile was not only a journey in the geographic sense but really also a journey that my heart and soul took. I was not that happy about going but when I boarded the Veda boat in Luxor, I transformed in a second from a frowning person to a smiling one. The peaceful, serene, majestic nile effects reflect on you. I will never forget the trip and every part of me is begging me to return as soon as possible.",
"The VEDA trip on the Nile was not only a journey in the geographic sense but really also a journey that my heart and soul took. I was not that happy about going but when I boarded the Veda boat in Luxor, I transformed in a second from a frowning person to a smiling one. The peaceful, serene, majestic nile effects reflect on you.",
author: {
name: 'Owen',
role: 'Retreat Guest',
@@ -86,32 +87,32 @@ export function Testimonials() {
<section
id="testimonials"
aria-label="What our customers are saying"
className="bg-transparent lg:pt-24 pt-8 pb-24"
className="bg-bg-sand lg:pt-48 pt-8 pb-24"
>
<Container>
<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">
<H2 className="">
Testimonials
</h2>
<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">
</H2>
<P className="mt-4">
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>
</P>
</div>
<ul
role="list"
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"
className="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-12 lg:max-w-none lg:grid-cols-3"
>
{testimonials.map((column, columnIndex) => (
<li key={columnIndex}>
<ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
{column.map((testimonial, testimonialIndex) => (
<li key={testimonialIndex}>
<figure className="relative rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10">
<figure className="relative rounded-lg bg-white py-6 px-8 shadow-xl shadow-slate-900/10">
<QuoteIcon className="absolute left-6 top-6 fill-slate-100" />
<blockquote className="relative">
<p className="lg:text-base text-sm tracking-tight text-slate-900">
<PXXS >
{testimonial.content}
</p>
</PXXS>
</blockquote>
<figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
<div>

20
src/components/text.jsx
View File

@@ -18,7 +18,7 @@ export function H2({ className, children, ...props }) {
return (
<h2
className={clsx(
'text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
'font-vollkorn text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
className
)}
{...props}
@@ -32,7 +32,7 @@ export function H3({ className, children, ...props }) {
return (
<h3
className={clsx(
'text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
'font-vollkorn text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
className
)}
{...props}
@@ -46,7 +46,7 @@ export function H4({ className, children, ...props }) {
return (
<h4
className={clsx(
'text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
'font-vollkorn text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
className
)}
{...props}
@@ -98,6 +98,20 @@ export function PXS({ className, children, ...props }) {
)
}
export function PXXS({ className, children, ...props }) {
return (
<p
className={clsx(
'text-sm text-gray-700 font-extralight leading-snug',
className
)}
{...props}
>
{children}
</p>
)
}
export function Subheading({ className, children, ...props }) {
return (
<h3

7
src/styles/tailwind.css
View File

@@ -1,3 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html,
body {
@apply bg-bg-sand;
}
}

1
tailwind.config.js
View File

@@ -29,6 +29,7 @@ module.exports = {
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
display: ['Montserrat', 'sans-serif'],
vollkorn: ['var(--font-vollkorn)', 'serif'],
},
maxWidth: {
'2xl': '40rem',