export default function Card() { const cards = Array.from({ length: 6 }); // 6 Cards

return ( <div className=" container mx-auto mt-11 lg:px-0 px-8"> {/* Grid layout for responsiveness */} <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 md:gap-6"> {cards.map((_, index) => ( <div key={index} className="rounded-lg overflow-hidden shadow-md bg-white w-full p-2 ">

        {/* Image with aspect ratio fix */}
        <img 
          src="image.png"
          className="w-full aspect-[16/9] object-cover rounded-lg"
        />

        {/* Event Date Box */}
        <div className="flex  ">
        <div className="border -mt-7 ms-4 bg-white flex flex-col text-center w-[32%] h-[145px] pt-2   rounded-md shadow-md ">
            <span className=" text-4xl text-[#6B7280] font-bold ">OCT</span>
            <span className=" text-7xl text-[#3772FF] font-extrabold">9</span>
            <span className="  text-[#6B7280]">MON</span>
          </div>

          {/* Event Details */}
           <div className="flex flex-col justify-start text-start lg:mt-2 mt-4 ms-4 ">
            <span className="  bg-[#3772FF] lg:w-[70%] w-[100%]  p-1 text-white rounded-md  whitespace-nowrap text-[10px] ps-2">
              🤖<span className="text-[10px] ps-1">Technology & Innovation</span>
            </span>
            <span className="block lg:text-[20px] text-[15px] font-semibold lg:pt-4 pt-3 leading-4 text-[#2D2C3C] ">Event title that can go</span>
            <span className="block  lg:text-[20px] text-[15px] font-semibold text-[#2D2C3C]  lg:pt-0">up to two lines</span>
            <span className="inline-flex items-center text-[20px] me-[48%] lg:mb-2 -pt-1 lg:pt-0 whitespace-nowrap">
              📍 <span className="lg:text-[13px] text-[13px] text-[#5A5A5A] whitespace-nowrap">Cultural Centre</span>
            </span>
          </div>
        </div> 

        {/* Ticket Pricing */}
        <div className="text-center pb-1  ">
          <hr className="w-[100%]  " />
          <span className=" text-black font-semibold  ">🎟️ Starting From</span>
          <span className="line-through text-[#888888B5] ">1000 LKR</span>
          <span className=" text-[#3772FF] font-semibold text-2xl">500 LKR</span>
          <p className=" text-[#28A745] text-xs">💰 saved 500 LKR on this ticket</p>
        </div>

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

); }