Merge pull request #1670 from internxt/update-hero-section-data-centers

[MKT_598]: feat/data center hero section update

Author: jaaaaavier

src/components/data-centers/HeroSection.tsx

@@ -19,16 +19,32 @@ export const HeroSection = ({ textContent }: HeroSectionProps) => {
     >
       <div className="absolute left-8 right-8 top-0 h-[1px] bg-neutral-35 lg:left-32 lg:right-32" />
 
-      <div className="hidden w-full items-center justify-between gap-8 lg:flex">
-        <div className="flex flex-col gap-8 lg:w-1/2">
+      <div className="relative w-full ">
+        <div className="absolute inset-0 z-10 translate-x-96 transform lg:w-full">
+          <Image
+            src={getImage(`/images/datacenters-and-certifications/datacenters-hero.webp`)}
+            alt="Internxt data centers and certifications"
+            width={841}
+            height={200}
+            quality={100}
+            className="h-[393px] w-full"
+          />
+          <Image
+            src={getImage(`/images/datacenters-and-certifications/datacenters.webp`)}
+            alt="Internxt data centers and certifications"
+            width={433}
+            height={200}
+            quality={100}
+            className="absolute right-96 top-2 h-[433px] w-[433px]"
+          />
+        </div>
+        <div className="relative z-10 flex flex-col gap-8 self-start p-4 lg:w-1/2">
           <h1 className="whitespace-pre-line text-30 font-semibold leading-tight text-gray-95 lg:text-5xl">
             <HighlightText text={textContent.title} />
           </h1>
-
           <p className="whitespace-pre-line text-lg font-normal leading-tight text-gray-55 lg:text-xl">
             {textContent.description}
           </p>
-
           <ul className="flex flex-col gap-2">
             {textContent.features.map((feat) => (
               <li key={feat} className="flex items-center gap-2">
@@ -38,19 +54,6 @@ export const HeroSection = ({ textContent }: HeroSectionProps) => {
             ))}
           </ul>
         </div>
-
-        <div className="lg:w-1/2">
-          <Image
-            src={getImage(`/images/datacenters-and-certifications/hero.webp`)}
-            alt="Internxt data centers and certifications"
-            width={500}
-            height={500}
-            quality={100}
-            className="h-auto w-full"
-            priority
-            sizes="(max-width: 1024px) 100vw, 50vw"
-          />
-        </div>
       </div>
 
       <div className="flex flex-col gap-6 lg:hidden">
@@ -63,16 +66,6 @@ export const HeroSection = ({ textContent }: HeroSectionProps) => {
             {textContent.description}
           </p>
         </div>
-
-        <Image
-          src={getImage(`/images/datacenters-and-certifications/hero.webp`)}
-          alt="Internxt data centers and certifications"
-          width={500}
-          height={500}
-          quality={100}
-          className="hidden h-auto w-full lg:flex"
-          sizes="100vw"
-        />
       </div>
     </section>
   );