fix language selector error and change banner background image

Author: christiansamaniego-okta

src/features/common/components/auth0-cta/auth0-cta.module.scss

@@ -192,9 +192,16 @@
   border-radius: .75rem;
   background-size: cover;
   background-position: 50%;
-  background-image: url("/images/en.diagram.png");
   background-repeat: no-repeat;
 
+  :global(html[lang="en"]) & {
+    background-image: url("/images/en.diagram.png");
+  }
+
+  :global(html[lang="ja"]) & {
+    background-image: url("/images/ja.diagram.png");
+  }
+
   @media #{$breakpoint-dimension-md} {
     border-bottom-left-radius: 12rem;
     grid-column: span 6;

src/features/common/components/footer/footer.component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { MouseEvent, useState } from "react";
+import React, { MouseEvent, useEffect, useState } from "react";
 import Select, {
   SingleValue,
   OptionsOrGroups,
@@ -51,6 +51,12 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
   const [modalState, setModalState] = useState<ModalStateValues>(
     ModalStateValues.CLOSED
   );
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPortalTarget(document.body);
+  }, []);
+
   const images = getBrandDictionary(languageCode);
 
   const languagePathPrefix: string =
@@ -199,7 +205,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                     GroupBase<UiLanguageModel>
                   >
                 }
-                menuPortalTarget={document.body}
+                menuPortalTarget={portalTarget}
                 classNamePrefix={"language-select"}
                 isSearchable={false}
                 placeholder={currentLanguage.label}