Bento grid

function BentoGrid() {
  return (
    <section className="flex flex-col justify-center min-h-screen text-white items-center pt-20 lg:pt-0">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-screen-lg h-full p-4 md:p-8">
        {/* Task Management */}
        <div className="bg-background text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
          <img src="/bento-1.png" alt="Task Management Image" className="rounded-lg" />
          <div className="p-4 mb-4">
            <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
              Task Management
            </h2>
            <p className="text-xs md:text-sm mt-2 text-white text-left">
              Foster Collaboration and Productivity with Programming
            </p>
          </div>
        </div>

        {/* File Sharing */}
        <div className="bg-background text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
          <img src="/bento-2.png" alt="File Sharing Image" className="rounded-lg" />
          <div className="p-4 mb-4">
            <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
              File Sharing: AI Feature
            </h2>
            <p className="text-xs md:text-sm mt-2 text-white text-left">
              Collaboration and Productivity Programming
            </p>
          </div>
        </div>

        {/* Chat Management */}
        <div className="bg-background text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
          <img src="/bento-3.png" alt="Chat Management Image" className="rounded-lg" />
          <div className="p-4 mb-4">
            <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
              Chat Management
            </h2>
            <p className="text-xs md:text-sm mt-2 text-white text-left">
              Collaboration and Productivity Programming
            </p>
          </div>
        </div>

        {/* Team Management */}
        <div className="bg-background text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
          <img src="/bento-4.png" alt="Team Management Image" className="rounded-lg" />
          <div className="p-4 mb-4">
            <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
              Team Management
            </h2>
            <p className="text-xs md:text-sm mt-2 text-white text-left">
              Foster Collaboration and Productivity with Programming
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

export default BentoGrid;

return (

{/* Task Management */}

Task Management

Foster Collaboration and Productivity with Programming

    {/* File Sharing */}
    <div className="bg-background col-span-2 text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
      <img src="/bento-2.png" alt="File Sharing Image" className="rounded-lg" />
      <div className="p-4 mb-4">
        <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
          File Sharing: AI Feature
        </h2>
        <p className="text-xs md:text-sm mt-2 text-white text-left">
          Collaboration and Productivity Programming
        </p>
      </div>
    </div>

    {/* Chat Management */}
    <div className="bg-background col-span-3 text-center text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
      <img src="/bento-3.png" alt="Chat Management Image" className="rounded-lg" />
      <div className="p-4 mb-4">
        <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
          Chat Management
        </h2>
        <p className="text-xs md:text-sm mt-2 text-white text-left">
          Collaboration and Productivity Programming
        </p>
      </div>
    </div>

    {/* Team Management */}
    <div className="bg-background text-center col-span-2 text-background rounded-3xl shadow-lg flex flex-col justify-left items-left">
      <img src="/bento-4.png" alt="Team Management Image" className="rounded-lg" />
      <div className="p-4 mb-4">
        <h2 className="text-lg md:text-xl font-bold mt-4 text-left">
          Team Management
        </h2>
        <p className="text-xs md:text-sm mt-2 text-white text-left">
          Foster Collaboration and Productivity with Programming
        </p>
      </div>
    </div>
  </div>
</section>

);
}