使用绝对定位时，它会将元素从文档流中拉出。这意味着在源顺序中绝对定位的元素之后的所有内容都将表现为该元素不存在。在您的示例中，这意味着Banner组件的结果高度为0，页面内容从屏幕顶部（Banner显示位置的后面）开始。
因此，为了解决问题，不要在Banner组件中的绝对定位img上设置高度和宽度，而是将高度和宽度放在 Package 的相对定位div上，然后设置绝对定位img以完全填充div的高度和宽度。
为了使文本内容更容易在图像上居中，请使用CSS网格和place-content: center将文本和按钮垂直和水平居中。

下面是工作片段

function AboutUs() {
  return (
    <main className="p-4">
      <h1 className="font-bold text-4xl">About Us</h1>
    </main>
  )
}

function Banner() {
  return (
    <div className="relative h-80 md:h-96">
      <img
        className="object-cover object-center absolute h-full w-full inset-0 brightness-75"
        alt="banner"
        src="https://picsum.photos/id/23/600"
      />
      <div className="absolute bg-white top-2 left-2 md:top-5 md:left-5 bg-transparent border border-solid cursor-default hover:scale-110 transition-all duration-300 hover:opacity-30 border-white">
        <h1 className=" text-sm md:text-xl font-semibold md:px-5 md:py-2 px-2 py-1">
          FAMILY LAW
        </h1>
      </div>
      <div className="absolute inset-0 grid place-content-center text-center">
        <h2 className="text-center font-medium text-white">
          We Always <span className=" text-[#E5912E]">care</span> about our
          client <span className=" text-[#E5912E]">satisfaction</span>
        </h2>
        <br />
        <p className="font-bold text-xl md:text-4xl text-center text-white transition-all duration-300">
          <span className=" text-[#E5912E]">JUSTICE</span> FOR ALL
        </p>
        <br />
        <div className="flex space-x-2 justify-center">
          <div className="bg-[#E5912E] px-3 py-1 rounded-sm cursor-pointer">
            <h2 className="text-white text-sm text-center">Know More</h2>
          </div>
          <div className="bg-transparent border border-solid px-4 py-1 rounded-sm cursor-pointer">
            <h2 className="text-white text-sm text-center">About us</h2>
          </div>
        </div>
      </div>
    </div>
  )
}


function App(){ 
  return (
    <div>
      <Banner />
      <AboutUs />
    </div>
  )
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="root"></div>