import { ImagePath } from "@/utils/imagePath";
import Image from "next/image";

export function StoryThree() {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      {[...Array(15)].map((_, index) => (
        <div key={index} className="md:mb-10 flex flex-col justify-center items-center">
          <div className="rounded-lg md:w-full overflow-hidden">
          <Image
            className="rounded-lg md:w-full hover:scale-110 transition-all duration-300"
            src={ImagePath.square}
            alt="Square image"
            width={400}  // Adjust based on your design needs
            height={400} // Adjust based on your design needs
            layout="responsive"
          />
          </div>
          <h5 className="my-4 md:my-8 text-xl font-semibold tracking-tight text-black">
            Noteworthy technology acquisitions 2021
          </h5>
          <p className="mb-3 text-lg font-normal text-gray-900">
            Here are the biggest enterprise technology acquisitions of 2021 so
            far, in reverse chronological order.
          </p>
        </div>
      ))}
    </div>
  );
}
