pok

2025-08-22 15:38:20 +02:00
parent 09e2e22886
commit 63066996a5
11 changed files with 54 additions and 61 deletions
--- a/public/.DS_Store
+++ b/public/.DS_Store
--- a/public/videos/hero.mp4
+++ b/public/videos/hero.mp4
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -29,12 +29,12 @@ export default function RootLayout({ children }) {
    <html
      lang="en"
      className={clsx(
-        'h-full scroll-smooth bg-[#FEFFF6] antialiased',
+        'h-full scroll-smooth bg-sand antialiased',
        inter.variable,
        lexend.variable,
      )}
    >
-      <body className="flex h-full flex-col pt-20">{children}</body>
+      <body className="flex h-full flex-col pt-20 bg-sand">{children}</body>
    </html>
  )
 }
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -3,9 +3,11 @@ import clsx from 'clsx'

 const baseStyles = {
  solid:
-    'group inline-flex items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg: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.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+  solidNoRounded:
+    'group inline-flex items-center justify-center py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
  outline:
-    'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm focus:outline-none',
+    'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none',
 }

 const variantStyles = {
@@ -13,9 +15,14 @@ const variantStyles = {
    slate:
      'bg-gold-900 text-white hover:bg-gold-800 hover:text-slate-100 active:bg-gold-800 active:text-gold-300 focus-visible:outline-gold-900',
    blue: 'bg-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
+    olive: 'bg-primary-olive text-white hover:bg-secondary-gold hover:text-text-dark active:bg-secondary-gold active:text-text-dark focus-visible:outline-primary-olive',
+    terracotta: 'bg-primary-terracotta text-white hover:bg-primary-olive hover:text-white active:bg-primary-olive active:text-white focus-visible:outline-primary-terracotta',
    white:
      'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
  },
+  solidNoRounded: {
+    bookNow: 'bg-darkgr-900 text-white hover:bg-darkgr-800 active:bg-darkgr-700 focus-visible:outline-darkgr-900',
+  },
  outline: {
    slate:
      'ring-slate-200 text-slate-200 hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
@@ -34,7 +41,9 @@ export function Button({ className, ...props }) {
      ? variantStyles.outline[props.color]
      : props.variant === 'solid'
        ? variantStyles.solid[props.color]
-        : undefined,
+        : props.variant === 'solidNoRounded'
+          ? variantStyles.solidNoRounded[props.color]
+          : undefined,
    className,
  )

--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -9,7 +9,7 @@ export function CallToAction() {
  return (
    <section
      id="about"
-      className="relative overflow-hidden bg-gold-900 py-12"
+      className="relative overflow-hidden bg-bg-stone py-12"
    >
      <img
        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
@@ -27,7 +27,7 @@ export function CallToAction() {
          <h2 className="font-display lg:text-3xl text-xl tracking-tight text-white pt-4 lg:pt-6">
          VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew. 
          </h2>
-          <p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-darkgr-300 pb-6">
+          <p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-white pb-6">
          Discover a cruise like no other with us on the Nile.
          </p>
        </div>
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,11 +3,11 @@ import { Logo } from '@/components/Logo'

 export function Footer() {
  return (
-    <footer className="bg-transparent border-darkgr-950 border-t-2">
+    <footer className="bg-bg-clay border-primary-olive border-t-2">
      <Container>
        <div className="flex items-center justify-between py-8">
          <Logo className="h-10 w-auto" />
-          <p className="text-sm text-slate-500">
+          <p className="text-sm text-primary-olive hover:text-primary-terracotta transition-colors duration-200">
            Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
          </p>
        </div>
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -64,7 +64,7 @@ function MobileNavigation() {
      />
      <PopoverPanel
        transition
-        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-[#FEFFF6]  p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-bg-sand  p-4 text-lg tracking-tight text-nav-dark shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
      >
        <MobileNavLink href="/">HOME</MobileNavLink>
        <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -72,7 +72,7 @@ function MobileNavigation() {
        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
        <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
        <hr className="m-2 border-slate-300/40" />
-        <MobileNavLink href="/contact">BOOK NOW</MobileNavLink>
+        <MobileNavLink href="/contact">Book Now</MobileNavLink>
      </PopoverPanel>
    </Popover>
  )
@@ -80,7 +80,7 @@ function MobileNavigation() {

 export function Header() {
  return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-[#FEFFF6] backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4">
      <Container>
        <nav className="relative z-50 flex justify-between">
          <div className="flex items-center md:gap-x-12">
@@ -96,8 +96,8 @@ export function Header() {
            </div>
          </div>
          <div className="flex items-center gap-x-5 md:gap-x-8">
-            <Button href="/contact" color="blue">
-              <span className="font-semibold tracking-wide">
+            <Button href="/contact" variant="solidNoRounded" color="bookNow">
+              <span className="tracking-wide">
                Book Now
              </span>
            </Button>
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,56 +1,26 @@

 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
-import { Logo } from '@/components/Logo'
+import Image from 'next/image'

 export function Hero() {
  return (
-    <section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
-      {/* Background Video */}
-      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-25">
-        <iframe
-          src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1"
-          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-0"
-          allow="autoplay; fullscreen; picture-in-picture"
-          style={{
-            width: '300%',
-            height: '300%',
-            minWidth: '100vw',
-            minHeight: '100vh',
-            objectFit: 'cover',
-            pointerEvents: 'none',
-            border: 'none'
-          }}
-          title="VEDA Background Video"
-        ></iframe>
-      </div>
-
-      {/* Welcome Content Overlay */}
-      <div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
-        <div className="mx-auto max-w-7xl px-6 sm:px-6 lg:px-6">
-          <div className="flex items-start justify-start mb-4">
-            <Logo className="h-8 sm:h-12 w-auto" />
-          </div>
-          <div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
-            <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] 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 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 lg:mt-8">
-              <span className="font-semibold tracking-wide">
-                Read Our Story
-              </span>
-            </Button>
-            </div>
+    <div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10">
+      {/* Background Image with opacity to show sand background */}
+      <div className="relative overflow-hidden pt-16">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <img
+            alt="App screenshot"
+            src="/images/hero.jpg"
+            width={2432}
+            height={1442}
+          />
+          <div aria-hidden="true" className="relative">
+            <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
          </div>
        </div>
-    </section>
+      </div> 
+    </div>
  )
 }
+1
--- a/src/components/NavLink.jsx
+++ b/src/components/NavLink.jsx
@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
  return (
    <Link
      href={href}
-      className="inline-block rounded-lg px-2 py-1 text-sm text-[#245527] hover:bg-[#245527] hover:text-white transition-colors duration-200"
+      className="inline-block px-2 py-1 text-sm text-nav-dark hover:text-primary-terracotta transition-colors duration-200"
    >
      {children}
    </Link>
--- a/src/images/hero.jpg
+++ b/src/images/hero.jpg
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,20 @@ module.exports = {
        '2xl': '40rem',
      },
      colors: {
+        // New Earth Tone Palette
+        'primary-olive': '#7B8D42',
+        'primary-terracotta': '#B54A38',
+        'secondary-sage': '#9BAE73',
+        'secondary-gold': '#C49A5A',
+        'bg-sand': '#F3EEE7',
+        'bg-clay': '#D1CFC5',
+        'bg-stone': '#D8D8CE',
+        'bg-darkbrown': '#3B2A2A',
+        'accent-teal': '#5A7D80',
+        'accent-sky': '#A2B7C7',
+        'text-dark': '#2C2C2C',
+        'nav-dark': '#301d00',
+        // Keep existing colors for backward compatibility
        gold: {
          50: '#FFC876', // Lightest shade
          100: '#F5B74F',