export function Experiences() {
  return (
    <div className=" py-12">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 ">
        <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-[#1f4922] lg:text-4xl">
        Experiences
        </p>
        
        <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.05em] text-[#1f4922] lg:text-3xl">
          From intimate community gatherings to professional retreats, VEDA offers transformative experiences on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
        </p>
        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-8 lg:grid-rows-2">
          <div className="flex p-px lg:col-span-5">
            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
              <div className="h-80 w-full overflow-hidden">
                <img
                  alt=""
                  src="/images/community.jpg"
                  className="h-full w-full object-cover object-center"
                />
              </div>
              <div className="px-8 py-4">
                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Community building Space</p>
              </div>
            </div>
          </div>
          <div className="flex p-px lg:col-span-3">
            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 lg:rounded-tr-4xl">
              <div className="h-80 w-full overflow-hidden">
                <img
                  alt=""
                  src="/images/private.jpg"
                  className="h-full w-full object-cover object-center"
                />
              </div>
              <div className="px-8 py-4">
                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Private Retreats</p>

              </div>
            </div>
          </div>
          <div className="flex p-px lg:col-span-3">
            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 lg:rounded-bl-4xl">
              <div className="h-80 w-full overflow-hidden">
                <img
                  alt=""
                  src="/images/events.jpg"
                  className="h-full w-full object-cover object-center"
                />
              </div>
              <div className="px-8 py-4">
                <p className="mt-2 text-lg lg:text-xl font-semibold tracking-normal text-[#FEFFF6]">Events & Conferences</p>

              </div>
            </div>
          </div>
          <div className="flex p-px lg:col-span-5">
            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl">
              <div className="h-80 w-full overflow-hidden">
                <img
                  alt=""
                  src="/images/nomads.jpg"
                  className="h-full w-full object-cover object-center"
                />
              </div>
              <div className="px-8 py-4">
                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Digital Nomad Hub</p>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}