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

export function Hero() {
  return (
    <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-bg-sand pb-12">
      {/* Background Image with opacity to show sand background */}
      <div className="relative overflow-hidden">
        <div className="mx-auto max-w-7xl">
          <img
            alt="App screenshot"
            src="/images/hero.jpg"
            width={1360}
            height={600}
          />
        </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">
            Nile Cruises, Reimagined.
          </h2>
          <p className="mt-4 text-lg/8 text-gray-600 font-extralight leading-tight">
            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>
        </div>
    </div>
  )
}
1