SBIT 581 mejorar performance lpc

src/components/DualSection/OneSection.js

@@ -19,7 +19,6 @@ const OneSection = ({ data: { dualSectionPart } }) => {
     <div
       className="one_sec-background"
       style={{
-        backgroundRepeat: "repeat",
         backgroundPosition: "center",
         backgroundImage: `url(${
           theme === "dark" && backgroundImageDark?.url

src/components/videoBackground/VideoBackground.js

@@ -2,8 +2,9 @@ import React, { useEffect, useRef, useState } from "react"
 import "./videoBackground.scss"
 import CustomLink from "../CustomLink/CustomLink"
 import PropTypes from "prop-types"
-import { GatsbyImage, getImage } from "gatsby-plugin-image" 
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
+// ✅ CAMBIO: detectar versión de iOS
 function getIOSVersion() {
   if (typeof window === "undefined" || typeof navigator === "undefined") return null
   const userAgent = navigator.userAgent
@@ -35,20 +36,17 @@ function getVideoContent(
   image,
   posterData
 ) {
-
   const posterUrl = posterData?.url?.startsWith("http")
   ? getImage(posterData.url)
   : getImage(`https://strapi-s3-bitlogic.s3.sa-east-1.amazonaws.com${posterData?.url}`)
   const posterSharp = posterData?.localFile && getImage(posterData.localFile)
 
-
   const url = videoUrl?.replace("watch?v=", "embed/")
   let code = url?.substring(url.lastIndexOf("/") + 1) || ""
   const codeIndex = code.indexOf("?")
   if (codeIndex !== -1) code = code.substring(0, codeIndex)
 
-  const isOldIOS = isIOSPriorTo("17.4")
-
+  const isOldIOS = isIOSPriorTo("17.4") 
   if (isOldIOS && posterSharp) {
     return (
       <GatsbyImage
@@ -71,7 +69,7 @@ function getVideoContent(
         tabIndex={0}
         controls={false}
         autoPlay={isIntersecting}
-        poster={posterUrl || undefined}
+        poster={posterUrl}
         preload="auto"
         onClick={pausePlay}
         onKeyDown={handleKeyDown}
@@ -180,9 +178,6 @@ const VideoBackground = ({ data }) => {
     localStorage.setItem("videoPaused", isVideoPause)
   }, [isVideoPause])
 
-  const backgroundSharp =
-    backgroundImage?.localFile && getImage(backgroundImage.localFile)
-
   const videoContent = getVideoContent(
     video,
     videoRef,
@@ -195,18 +190,15 @@ const VideoBackground = ({ data }) => {
   )
 
   return (
-    <div className="videoBackground-wrapper"> 
-
-      {backgroundSharp && (
-        <GatsbyImage
-          image={backgroundSharp}
-          alt={description || "Video background"}
-          className="videoBackground-bg"
-          loading="eager"
-          fetchpriority="high"
-        />
-      )}
-
+    <div
+      style={{
+        backgroundImage: backgroundImage
+          ? `url(${backgroundImage.url})`
+          : "",
+        backgroundRepeatY: "no-repeat",
+        backgroundPosition: "center",
+      }}
+    >
       <div className="container videoBackground-container">
         <section className="videoBackground">
           {videoContent}
@@ -236,10 +228,7 @@ VideoBackground.propTypes = {
     }),
     videoUrl: PropTypes.string,
     description: PropTypes.string,
-    backgroundImage: PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      localFile: PropTypes.object,
-    }),
+    backgroundImage: PropTypes.shape({ url: PropTypes.string.isRequired }),
     image: PropTypes.shape({
       alternativeText: PropTypes.string,
       localFile: PropTypes.object,

src/components/videoBackground/videoBackground.scss

@@ -1,26 +1,11 @@
 @import "../../styles/global.scss";
 
-.videoBackground-wrapper {
-  position: relative; // ✅ CAMBIO: contenedor padre para fondo
-  overflow: hidden;
-
-  .videoBackground-bg { // ✅ CAMBIO: imagen de fondo (GatsbyImage)
-    position: absolute !important;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    object-fit: cover;
-  }
-}
-
 .videoBackground {
   max-width: 100%;
-  height: fit-content;
 
   &-container {
-    padding-block: 32px;
+    padding-top: 50px;
+    padding-bottom: 50px;
   }
 
   video,
@@ -38,15 +23,13 @@
 
   &-card {
     width: 100%;
-    min-height: 120px;
-    background-color: rgba(232, 232, 232, 0.77);
+    backdrop-filter: blur(14px);
+    color: white;
     border-radius: 5px;
-    color: $grey;
+    background: #e8e8e8c5;
     box-shadow: 0px 0px 3px #00000044;
-    word-wrap: break-word;
+    word-wrap: break-all;
     padding: 15px;
-    z-index: 1; // ✅ CAMBIO: asegurar que quede sobre el fondo
-    position: relative;
   }
 
   .image {
@@ -64,13 +47,16 @@
   h2 {
     font-size: 28px;
     width: 100%;
+    margin-bottom: 8px;
     color: $grey;
-    margin-bottom: 16px;
   }
 
   a {
     @include secondaryBtn;
     color: $grey;
+    display: block;
+    width: max-content;
+    padding: 8px 16px;
   }
 }
 
@@ -82,20 +68,12 @@
       position: absolute;
       bottom: 0;
       max-width: calc(700px - 60px);
-      background-color: rgba(232, 232, 232, 0.77);
+      backdrop-filter: blur(14px);
       border-radius: 5px;
+      background: #e8e8e8c5;
       box-shadow: 0px 0px 3px #00000044;
       margin: 2em;
       padding: 32px;
     }
   }
-}
-
-@media screen and (max-width: $breakpoint-md) {
-  .videoBackground {
-    &-card {
-      backdrop-filter: none;
-      box-shadow: none;
-    }
-  }
-}
+}