src/components/HeroOther.tsx

@@ -16,23 +16,17 @@ const shareIcons: Record<string, any> = {
 
 export default function HeroOther({ title, img, createdAt, shareUrl }: HeroOtherProps) {
   return (
-    <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!py-48 relative !h-[30vw]">
+    <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!pt-32 md:!pb-24 relative min-h-[48vh]">
       {/* <!-- Background Shape --> */}
       <div className="bg-shape-1 w-full h-full opacity-50 bg-contain">
-        <Image
-          src={img || "/assets/images/hero-default.webp"}
-          width={1000}
-          height={500}
-          alt=""
-          className="w-screen h-screen object-cover object-center"
-        />
+        <Image src={img || "/assets/images/hero-default.webp"} alt="" fill className="object-cover" />
       </div>
       {/* <!-- End Background Shape --> */}
 
       <div className="container position-relative pt-sm-40 text-center">
         <div className="row">
           <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
-            <h1 className="hs-title-10 mb-10">{title ?? ""}</h1>
+            <h1 className="text-5xl !font-medium mb-10 leading-[1.5]">{title ?? ""}</h1>
             {!!createdAt && (
               <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
                 <div className="flex justify-center items-center">