fix banner images

next.config.js

@@ -4,7 +4,8 @@ const nextConfig = {
   env: {
     PROJECTID: 'pacto-inter-ciudad',
   },
-  output: 'export'
+  output: 'export',
+  images: { unoptimized: true }
 }
 
 module.exports = nextConfig

src/app/[lang]/page.jsx

@@ -4,7 +4,6 @@ import CountriesBanner from "@/app/_components/landing/countries-banner";
 import CountryBanner from "@/app/_components/landing/country-banner";
 import SliderBanner from "@/app/_components/landing/slider-banner";
 import { getDictionary } from "./dictionaries";
-import { BANNER_BACKGROUND } from "@/utils/constants";
 
 export async function generateStaticParams() {
     return ['es','pt'].map((lang) => {
@@ -15,17 +14,11 @@ export async function generateStaticParams() {
 export default async function Landing({ params: { lang } }) {
     const dict = await getDictionary(lang)
 
-    const getRandomBackground =()=>{
-        var randomNumber = Math.random();
-        const index=Math.floor(BANNER_BACKGROUND.length*randomNumber)
-        return BANNER_BACKGROUND[index]
-    }
-
+
 
     return (
         <div className="landing-wrapper">
             <BannerTitle
-                image={`/images/banners/${getRandomBackground()}`}
                 title={dict.bannerTitle.title}
                 linkButton="#banner-interciudad"
                 textButton={dict.bannerTitle.button}

src/app/_components/common/banner-title.jsx

@@ -1,19 +1,38 @@
 import Link from "next/link"
-import Logo from "./logo"
+import ImageRandom from "./image-random";
 
-const BannerTitle = ({ urlAction, title, subtitle, image, linkButton, textButton }) => {
-  return (<div className='hero is-fullheight banner-title is-flex is-justify-content-center is-align-items-flex-start is-flex-direction-column is-relative pt-0'
-    style={{ backgroundImage: `url('${image}')` }}>
-    <div className="is-overlay"></div>
-    <div className="content">
-      <img src="/images/logoSimple.svg" alt="" />
-      <div className="my-3">
-        <p className=' title has-text-brown-dark is-uppercase has-text-weight-bold mb-3 is-size-1 is-size-3-touch'>{title}</p>
-        <p className="has-text-weight-light has-text-brown-dark has-text-weight-bold is-size-4 is-size-5-touch">{subtitle}</p>
-      </div>
-    </div>
-    {textButton && linkButton && <Link href={linkButton} className="button is-white is-rounded px-6 is-uppercase">{textButton}</Link>}
-  </div>)
-}
+const BannerTitle = ({
+    urlAction,
+    title,
+    subtitle,
+    linkButton,
+    textButton,
+}) => {
+    return (
+        <div className="hero is-fullheight banner-title is-flex is-justify-content-center is-align-items-flex-start is-flex-direction-column is-relative pt-0 pb-4">
+            <ImageRandom />
+            <div className="is-overlay"></div>
+            <div className="content">
+                <img src="/images/logoSimple.svg" alt="" />
+                <div className="my-3">
+                    <h1 className=" title has-text-brown-dark is-uppercase has-text-weight-bold mb-3 is-size-1 is-size-3-touch">
+                        {title}
+                    </h1>
+                    <h2 className="has-text-weight-light has-text-brown-dark has-text-weight-bold is-size-4 is-size-5-touch">
+                        {subtitle}
+                    </h2>
+                </div>
+            </div>
+            {textButton && linkButton && (
+                <Link
+                    href={linkButton}
+                    className="button is-white is-rounded px-6 is-uppercase"
+                >
+                    {textButton}
+                </Link>
+            )}
+        </div>
+    );
+};
 
 export default BannerTitle

src/app/_components/common/image-random.jsx

@@ -0,0 +1,47 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+import Logo from "./logo";
+import { BANNER_BACKGROUND } from "@/utils/constants";
+import Image from "next/image";
+
+const ImageRandom = ({
+    urlAction,
+    title,
+    subtitle,
+    linkButton,
+    textButton,
+}) => {
+    const [imageActive, setImageActive] = useState(0);
+
+    const getRandomBackground = () => {
+        setInterval(() => {
+            var randomNumber = Math.random();
+            const index = Math.floor(BANNER_BACKGROUND.length * randomNumber);
+            setImageActive(index);
+        }, 5000);
+    };
+    useEffect(() => {
+        getRandomBackground();
+    }, []);
+    return (
+        <div>
+            {BANNER_BACKGROUND.map((image, idx) => (
+                <Image
+                    key={idx}
+                    src={`/images/banners/${image}`}
+                    alt="imagen país"
+                    width={0}
+                    height={0}
+                    sizes="100vw"
+                    className={`banner-background ${
+                        idx === imageActive ? "active" : ""
+                    }`}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default ImageRandom;

src/static/scss/common.scss

@@ -134,7 +134,24 @@
 .banner-title {
   padding: 13rem 9rem;
   background-size: cover;
-
+  .banner-background{
+    opacity: 0;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.3s;
+    @include tablet{
+      width: auto;
+      max-width: none;
+      left: -50%;
+    }
+    &.active{
+      opacity: 1;
+      transition: opacity 0.3s;
+    }
+  }
   .is-overlay {
     background-color: #ffffff87;
   }
@@ -145,7 +162,8 @@
     width: 75%;
     img{
       width: 30%;
-      filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(1421%) hue-rotate(322deg) brightness(98%) contrast(91%);      @include tablet{
+      filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(1421%) hue-rotate(322deg) brightness(98%) contrast(91%);      
+      @include tablet{
         width: 60%;
       }
     }