web-humas-fe/components/landing/BannerHumas.tsx

import { useTranslations } from "next-intl";
import React from "react";

export default function BannerHumas() {
  const t = useTranslations("Banner");
  return (
    <div className="h-fit relative text-white lg:mt-[-130px]">
      <img
        src="headerbanner1.png"
        alt="humasbanner"
        className="w-full relative h-[33vh] lg:h-auto object-cover"
      />
      <div className="absolute  top-1/2 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
        <p className="text-sm lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
          {t("jumbotron")}
        </p>
        <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>
      </div>
    </div>
  );
}