
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() {
  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">
            Nile Cruises, Reimagined.
          </H2>
          <P className="mt-4 mb-6">
            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 href="/story" variant="link" color="darkgr">
            Learn More
            </Button>
        </div>
    </div>
  )
}
1