import { H2, P , PS, PXS, H3, H4 } from "@/components/text";


export function Experiences() {
  return (
    <div className="bg-bg-sand  pb-12">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <div className=" grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
          <div className="flex lg:col-span-5">
            <div className="w-full overflow-hidden">
              <img
                alt=""
                src="/images/community.jpg"
                className="h-80 w-full object-cover object-center"
              />
              <div className="py-4">
                <H4>Community building Space</H4>
                <PXS>Foster connections and meaningful relationships through shared experiences.</PXS>
              </div>
            </div>
          </div>
          <div className="flex lg:col-span-3">
            <div className="w-full overflow-hidden">
              <img
                alt=""
                src="/images/private.jpg"
                className="h-80 w-full object-cover object-center"
              />
              <div className="py-4">
                <H4>Private Retreats</H4>
                <PXS>Exclusive experiences  for intimate groups and families.</PXS>
              </div>
            </div>
          </div>
          <div className="flex lg:col-span-3">
            <div className="w-full overflow-hidden">
              <img
                alt=""
                src="/images/events.jpg"
                className="h-80 w-full object-cover object-center"
              />
              <div className="py-4">
                <H4>Events & Conferences</H4>
                <PXS>Professional gatherings in an inspiring riverside setting.</PXS>
              </div>
            </div>
          </div>
          <div className="flex lg:col-span-5">
            <div className="w-full overflow-hidden">
              <img
                alt=""
                src="/images/nomads.jpg"
                className="h-80 w-full object-cover object-center"
              />
              <div className="py-4">
                <H4>Digital Nomad Hub</H4>
                <PXS>Work remotely while surrounded by the tranquility of the Nile.</PXS>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}