import React from "react";
import robotImage from "../../../assets/images/robot-2.png";
import robotImage2 from "../../../assets/images/robot-coin1.png";
const FirstSection = () => {
  return (
    <div
      id="firstSection"
      className=" flex items-center  min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
    >
      <div className="container w-[94%] flex justify-between mx-auto">
        <h1 className="text-white text-5xl font-bold">SGPT for Healthcare</h1>
        <div className=" lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
          <img
            src={robotImage2}
            className="object-cover absolute left-30 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square transition-all duration-500 cursor-pointer filter  hover:border-orange-500"
            alt="robot-ai"
          />

          <img
            src={robotImage}
            className="object-cover absolute top-36 left-[-20%] border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square hover:border-orange-500"
            alt="robot-ai"
          />

          <div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
          <div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
        </div>
      </div>
    </div>
  );
};

export default FirstSection;
