Untitled

<section id="dashboard" className="relative min-h-screen bg-white px-10 py-20">
  {/* Dashboard Heading */}
  <h3 className="text-center font-semibold text-5xl text-black">Dashboard</h3>

  {/* Subheading */}
  <p className="text-3xl font-bold text-black text-center mt-4">
    Your Smart Dashboard, <br /> Your Control Hub
  </p>

  {/* Left Side Content (User Benefits) */}
  <div className="absolute left-10 top-52 w-96 space-y-6">
    {/* For Doctors */}
    <div className="bg-white border border-blue-600 shadow-lg p-4 rounded-2xl">
      <p className="font-bold text-xl text-black">For Doctors:</p>
      <p className="font-semibold text-lg text-gray-700">
        Track patient records, appointments & insights in one place.
      </p>
    </div>

    {/* For Patients */}
    <div className="bg-gray-100 shadow-lg p-4 rounded-2xl">
      <p className="font-bold text-xl text-black">For Patients:</p>
      <p className="font-semibold text-lg text-gray-700">
        View prescriptions, reports & upcoming consultations.
      </p>
    </div>

    {/* For Admins */}
    <div className="bg-gray-100 shadow-lg p-4 rounded-2xl">
      <p className="font-bold text-xl text-black">For Admins:</p>
      <p className="font-semibold text-lg text-gray-700">
        Manage users, workflows & reports with ease.
      </p>
    </div>
  </div>

  {/* Right Side - Illustration & Dashboard */}
  <div className="absolute right-10 top-36 flex flex-col items-center">
    <img src="/doctor-illustration.png" alt="Doctor" className="w-52" />
    <img src="/dashboard-ui.png" alt="Dashboard UI" className="w-[500px] mt-6 shadow-lg" />
  </div>

  {/* CTA Button */}
  <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2">
    <button className="bg-[#8C4BB8] text-white text-xl font-semibold py-3 px-8 rounded-3xl shadow-md hover:bg-[#773AA6]">
      Explore Dashboard
    </button>
  </div>
</section>