This commit is contained in:
2025-08-22 17:55:31 +02:00
parent f86b25f008
commit 0d4b087601
8 changed files with 105 additions and 34 deletions

View File

@@ -13,7 +13,8 @@ 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'
import { Heading, Subheading, H2, P, PS, H3} from './text'
const testimonials = [
{
@@ -100,7 +101,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 sm:w-80 lg:w-96"
className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent shadow-sm overflow-hidden sm:w-80 lg:w-96"
>
{/* Image Section */}
<div className="relative aspect-square overflow-hidden">
@@ -112,16 +113,16 @@ function TestimonialCard({
</div>
{/* Content Section Below Image */}
<div className="p-6">
<div className="py-2">
<blockquote>
<p className="text-2xl font-bold text-darkgr lg:text-3xl">
<H3 className="">
{children}
</p>
</H3>
</blockquote>
<p className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
<PS className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
{subtitle}
</p>
</PS>
<Link
href={href}
@@ -154,17 +155,17 @@ export function Boat() {
}
return (
<div className="pt-16 lg:pt-24 pb-12">
<div className="pt-12 pb-12 bg-bg-sand">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
{/* Text Content - Left Side */}
<div ref={setReferenceWindowRef} className="lg:col-span-4">
<h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
<H2 className="mt-2">
Dahabiyas
</h2>
<p className="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 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>
</H2>
<PS className="mt-4">
Discover peaceful platforms where every detail ensures a truly memorable stay.
</PS>
</div>
{/* Carousel - Right Side */}

View File

@@ -9,7 +9,7 @@ export function CallToAction() {
return (
<section
id="about"
className="relative overflow-hidden bg-bg-sand py-12"
className="relative overflow-hidden bg-bg-sand py-24"
>
<Container className="relative">
<div className="mx-auto max-w-3xl text-center">

View File

@@ -1,6 +1,9 @@
'use client'
import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { H2 } from '@/components/text'
import { useState } from 'react'
export function ContactHero() {
@@ -46,9 +49,9 @@ export function ContactHero() {
/>
</div>
</div>
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
<H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
Get in Touch
</h2>
</H2>
<p className="mt-6 text-lg/8 text-gray-600">
At VEDA, we welcome your questions, ideas, and collaborations. Whether youre curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, were here to connect. Reach out to us today and lets create transformative experiences along the timeless Nile.
</p>

View File

@@ -1,6 +1,8 @@
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { H2 } from '@/components/text'
import { P } from '@/components/text'
import Image from 'next/image'
export function Hero() {
@@ -18,18 +20,16 @@ export function Hero() {
</div>
</div>
<div className="max-w-7xl ml-3 px-6 lg:px-8 mx-0">
<h2 className="mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl">
<H2 className="mt-8">
Nile Cruises, Reimagined.
</h2>
<p className="mt-4 text-lg/8 text-gray-600 font-extralight leading-tight">
</H2>
<P className="mt-4">
Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.<br/>
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
</p>
<button className="mt-4 text-sm lg:text-sm tracking-wide">
<Button variant="link" color="darkgr">
Learn More
</Button>
</button>
</P>
<button className="mt-6 text-sm lg:text-sm tracking-wide" variant="link" color="darkgr">
Learn More
</button>
</div>
</div>
)

View File

@@ -5,6 +5,17 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import clsx from 'clsx'
import { Container } from '@/components/Container'
import { PhoneFrame } from '@/components/PhoneFrame'
import { AppScreen } from '@/components/AppScreen'
import { H2 } from '@/components/text'
import logoBbc from '@/images/logos/bbc.svg'
import logoCbs from '@/images/logos/cbs.svg'
import logoCnn from '@/images/logos/cnn.svg'
import logoFastCompany from '@/images/logos/fast-company.svg'
import logoForbes from '@/images/logos/forbes.svg'
import logoHuffpost from '@/images/logos/huffpost.svg'
import logoTechcrunch from '@/images/logos/techcrunch.svg'
import logoWired from '@/images/logos/wired.svg'
const features = [
{
@@ -61,9 +72,9 @@ export function PrimaryFeatures() {
/>
<Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
<H2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
What makes VEDA different?
</h2>
</H2>
<p className="mt-6 text-lg tracking-tight text-blue-100">
Well everything you need if you arent that picky about minor
details like tax compliance.

View File

@@ -2,9 +2,8 @@
import { useId } from 'react'
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 } from '@/components/text'
const features = [
{
@@ -264,10 +263,10 @@ export function SecondaryFeatures() {
>
<Container>
<div className="mx-auto max-w-3xl md:text-center">
<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">
<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>
</H2>
<p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
Discover peaceful platforms where every detail ensures a truly memorable stay.
</p>

View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { H2 } from '@/components/text'
const people = [
{
@@ -31,7 +32,7 @@ const people = [
<div className="bg-creme-600 py-12 md:py-32 lg:py-12">
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>
<H2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</H2>
<p className="mt-6 text-lg leading-8 text-gray-600">
We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
</p>

View File

@@ -14,6 +14,62 @@ export function Heading({ as: Component = 'h1', className, children, ...props })
)
}
export function H2({ className, children, ...props }) {
return (
<h2
className={clsx(
'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
className
)}
{...props}
>
{children}
</h2>
)
}
export function H3({ className, children, ...props }) {
return (
<h2
className={clsx(
'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown sm:text-2xl',
className
)}
{...props}
>
{children}
</h2>
)
}
export function P({ className, children, ...props }) {
return (
<p
className={clsx(
'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
className
)}
{...props}
>
{children}
</p>
)
}
export function PS({ className, children, ...props }) {
return (
<p
className={clsx(
'mt-4 text-base text-gray-700 font-extralight leading-snug',
className
)}
{...props}
>
{children}
</p>
)
}
export function Subheading({ className, children, ...props }) {
return (
<h3