질문형 큰 제목과 키 비주얼 패널이 있는 병원 히어로

export default function KneeClinicHero() {
  return (
    <section className="w-full break-keep bg-white py-14 text-[#191f28] md:py-24">
      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-10 px-5 md:flex-row md:items-center md:justify-between md:px-10">
        <div className="flex-1">
          <p className="mb-3 text-[15px] font-semibold text-[#1a77bf]">무릎 전문 동네 정형외과</p>
          <h1 className="text-[36px] leading-[1.15] font-extrabold tracking-[-0.035em] md:text-[56px]">
            무릎이 아프신가요?
            <br />
            편하게 오세요
          </h1>
          <p className="mt-4 max-w-[560px] text-[17px] leading-[1.7] text-[#191f28]/80 md:text-[19px]">
            무릎이 편해야 하루가 편합니다. 어디가 어떻게 불편하신지 천천히 듣고, 쉬운 말로 설명해 드릴게요.
          </p>
          <div className="mt-9 flex flex-wrap gap-3">
            <a href="#contact" className="inline-flex h-14 items-center justify-center rounded-[28px] bg-[#1a77bf] px-7 text-[17px] font-semibold text-white transition hover:brightness-110">
              전화로 예약하기
            </a>
            <a href="#location" className="inline-flex h-14 items-center justify-center rounded-[28px] bg-[#f2f4f6] px-7 text-[17px] font-semibold text-[#191f28] transition hover:bg-[#e5e8eb]">
              오시는 길 보기
            </a>
          </div>
        </div>
        <div className="flex aspect-square w-full max-w-[260px] shrink-0 items-center justify-center rounded-[42px] bg-gradient-to-br from-[#dde9f4] to-[#edf4fa] md:w-[440px] md:max-w-none">
          <img src="https://nnuer.site/media/B8Nq60BXHI8z" alt="무릎 관절 아이콘" className="w-[60%] max-w-[260px]" />
        </div>
      </div>
    </section>
  );
}