[MKT-739]:feat/update banners from temp mail

.github/workflows/slack-notifiaction.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
 
     steps:
       - name: Checkout

next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import "./.next/types/routes.d.ts";
+import './.next/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/components/cloud-object-storage/HeroSection.tsx

@@ -24,7 +24,7 @@ export const HeroSection = ({ textContent }) => {
         </h1>
         <p className="text-base font-normal leading-tight text-gray-55 lg:text-xl">{textContent.description}</p>
         <Link
-          href={'/pricing'}
+          href="/cloud-object-storage/checkout"
           className="z-10 flex h-min w-min items-center justify-center whitespace-nowrap rounded-sm-6 bg-primary px-6 py-4 text-base font-normal text-white hover:bg-primary-dark"
         >
           {textContent.cta}

src/components/temp-email/HeroSection.tsx

@@ -26,7 +26,7 @@ import DOMPurify from 'dompurify';
 import Image from 'next/image';
 import { getImage } from '@/lib/getImage';
 
-export const HeroSection = ({ textContent, lang }) => {
+export const HeroSection = ({ textContent }) => {
   const isFocused = useWindowFocus();
 
   const { state, setUser, setBorderColor, setIsChangeEmailIconAnimated, setMessages, setSelectedMessage } =
@@ -222,25 +222,17 @@ export const HeroSection = ({ textContent, lang }) => {
     await getNewEmail();
   };
 
-  const languageForImage = ['zh', 'zh-tw', 'ru', 'en'].includes(lang) ? 'en' : lang;
-
   return (
     <section className="flex items-start justify-center overflow-hidden  px-6 pb-20 pt-32">
-      <div className="hidden w-full flex-col items-center justify-center ">
+      <div className="flex w-full flex-col items-center justify-center ">
         <Image
-          src={getImage(`/banners/Ban_Internxt_160x600_en.jpg`)}
-          alt="BitDefender Vertical Banner"
+          src={getImage(`/banners/Ban-Intenxt-160x600-en.webp`)}
+          alt=" Internxt Vertical Banner"
           width={180}
           height={180}
           quality={100}
           style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(
-              `https://www.bitdefender.com/pages/consumer/${languageForImage}/new/voucher-ts-ps/?vcampaign=internxt`,
-              '_blank',
-              'noopener noreferrer',
-            )
-          }
+          onClick={() => window.open(`https://internxt.com/`, '_blank', 'noopener noreferrer')}
         />
       </div>
       <div className="flex w-full flex-col items-center justify-center space-y-10  px-2 md:max-w-[720px] ">
@@ -274,21 +266,15 @@ export const HeroSection = ({ textContent, lang }) => {
           </p>
         </div>
       </div>
-      <div className="hidden w-full flex-col items-center justify-center">
+      <div className="flex w-full flex-col items-center justify-center">
         <Image
-          src={getImage(`/banners/Ban_Internxt_160x600_en.jpg`)}
-          alt="BitDefender Vertical Banner"
+          src={getImage(`/banners/Ban-Intenxt-160x600-en.webp`)}
+          alt="Internxt Vertical Banner"
           width={180}
           height={180}
           quality={100}
           style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(
-              `https://www.bitdefender.com/pages/consumer/${languageForImage}/new/voucher-ts-ps/?vcampaign=internxt/`,
-              '_blank',
-              'noopener noreferrer',
-            )
-          }
+          onClick={() => window.open(`https://internxt.com/`, '_blank', 'noopener noreferrer')}
         />
       </div>
     </section>

src/components/temp-email/InfoSection.tsx

@@ -2,10 +2,9 @@ import Image from 'next/image';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 import { Bug, Detective, EyeSlash, Gift, Tray, UserPlus } from '@phosphor-icons/react';
 import { getImage } from '@/lib/getImage';
-import { SIGNUP_DRIVE_WEB } from '@/constants';
 
 export const InfoSection = ({ textContent, bannerText, lang }) => {
-  const infoCards = (lang) => {
+  const infoCards = () => {
     return [
       {
         icon: Bug,
@@ -40,27 +39,19 @@ export const InfoSection = ({ textContent, bannerText, lang }) => {
     ];
   };
 
-  const languageForImage = ['zh', 'zh-tw', 'ru', 'en'].includes(lang) ? 'en' : lang;
-
   return (
     <section className="flex flex-col items-center justify-center overflow-hidden bg-gray-1 px-5 py-16">
       <div className="flex max-w-[1000px] flex-col items-center justify-center">
         <div className="flex flex-col items-center justify-start space-y-16  lg:px-10  lg:pt-6">
-          <div className="flex hidden w-full flex-col items-center justify-center">
+          <div className="flex  w-full flex-col items-center justify-center">
             <Image
-              src={getImage(`/banners/Ban_Internxt_728x90_en.jpg`)}
-              alt="File Arrow Up icon"
+              src={getImage(`/banners/BanInternxt728x90en.webp`)}
+              alt="Internxt Banner"
               width={800}
               height={110}
               quality={100}
               style={{ cursor: 'pointer' }}
-              onClick={() =>
-                window.open(
-                  `https://www.bitdefender.com/pages/consumer/en/new/voucher-ts-ps/?vcampaign=internxt`,
-                  '_blank',
-                  'noopener noreferrer',
-                )
-              }
+              onClick={() => window.open(`https://internxt.com/`, '_blank', 'noopener noreferrer')}
             />
           </div>
           <SignUpBanner textContent={bannerText} lang={lang} />
@@ -81,24 +72,6 @@ export const InfoSection = ({ textContent, bannerText, lang }) => {
               </ul>
             </div>
 
-            <div className=" hidden w-full flex-col items-center justify-center">
-              <Image
-                src={getImage(`/banners/Ban_Internxt_728x90_en.jpg`)}
-                alt="File Arrow Up icon"
-                width={800}
-                height={110}
-                quality={100}
-                style={{ cursor: 'pointer' }}
-                onClick={() =>
-                  window.open(
-                    `https://www.bitdefender.com/pages/consumer/${languageForImage}/new/voucher-ts-ps/?vcampaign=internxt`,
-                    '_blank',
-                    'noopener noreferrer',
-                  )
-                }
-              />
-            </div>
-
             <div className="flex max-w-2xl flex-col space-y-3 text-start">
               <p className="text-3xl font-medium lg:text-2xl">{textContent.whatIsTempMail.title}</p>
               <p className="text-lg text-gray-80 md:max-w-2xl">{textContent.whatIsTempMail.description}</p>
@@ -109,7 +82,7 @@ export const InfoSection = ({ textContent, bannerText, lang }) => {
             </div>
             <div className="flex flex-col space-y-8">
               <div className="grid grid-cols-1 flex-row flex-wrap justify-center gap-8 sm:grid-cols-2">
-                {infoCards(lang).map((card) => (
+                {infoCards().map((card) => (
                   <div
                     key={card.title}
                     className="flex flex-col items-start justify-start rounded-2xl bg-white p-8 sm:p-10 md:max-w-[488px]"
@@ -124,24 +97,6 @@ export const InfoSection = ({ textContent, bannerText, lang }) => {
               </div>
             </div>
 
-            <div className="hidden w-full flex-col items-center justify-center">
-              <Image
-                src={getImage(`/banners/Ban_Internxt_728x90_en.jpg`)}
-                alt="File Arrow Up icon"
-                width={800}
-                height={110}
-                quality={100}
-                style={{ cursor: 'pointer' }}
-                onClick={() =>
-                  window.open(
-                    `https://www.bitdefender.com/pages/consumer/en/new/voucher-ts-ps/?vcampaign=internxt`,
-                    '_blank',
-                    'noopener noreferrer',
-                  )
-                }
-              />
-            </div>
-
             <div className="flex">
               <Image
                 src={getImage('/images/temp-email/cta_general_10_storage_en.webp')}
@@ -161,27 +116,21 @@ export const InfoSection = ({ textContent, bannerText, lang }) => {
               <p className="text-3xl font-medium text-gray-100 lg:text-2xl">{textContent.whenUseTempMail.title}</p>
               <p className="text-lg">{textContent.whenUseTempMail.description}</p>
               <ul className="list-disc space-y-1 pl-5 text-lg text-gray-80 lg:max-w-2xl">
-                {textContent.whenUseTempMail.bulletedList.map((item, index) => (
+                {textContent.whenUseTempMail.bulletedList.map((item) => (
                   <li key={item}>{item}</li>
                 ))}
               </ul>
             </div>
 
-            <div className="flex hidden w-full flex-col items-center justify-center pt-6">
+            <div className="flex  w-full flex-col items-center justify-center pt-6">
               <Image
-                src={getImage(`/banners/Ban_Internxt_728x90_en.jpg`)}
-                alt="File Arrow Up icon"
+                src={getImage(`/banners/BanInternxt728x90en.webp`)}
+                alt="Internxt Banner"
                 width={800}
                 height={110}
                 quality={100}
                 style={{ cursor: 'pointer' }}
-                onClick={() =>
-                  window.open(
-                    `https://www.bitdefender.com/pages/consumer/${languageForImage}/new/voucher-ts-ps/?vcampaign=internxt`,
-                    '_blank',
-                    'noopener noreferrer',
-                  )
-                }
+                onClick={() => window.open(`https://internxt.com/`, '_blank', 'noopener noreferrer')}
               />
             </div>
           </div>

src/pages/temporary-email.tsx

@@ -13,6 +13,7 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import { ActionBanner } from '@/components/temp-email/components/ActionBanner';
 import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import { setup } from '@/lib/csrf';
+import { GetServerSidePropsContext } from 'next';
 
 const TempEmail = ({ lang, metatags, textContent, footerLang, navbarLang, toolsContent, bannerLang }: any) => {
   const dialogAction = useGlobalDialog();
@@ -32,7 +33,7 @@ const TempEmail = ({ lang, metatags, textContent, footerLang, navbarLang, toolsC
       <Layout segmentName="Temporary email" title={metatags[0].title} description={metatags[0].description} lang={lang}>
         <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed />
 
-        <HeroSection textContent={textContent.HeroSection} lang={lang} />
+        <HeroSection textContent={textContent.HeroSection} />
 
         <InfoSection textContent={textContent.InfoSection} bannerText={bannerLang.SignUpTempMailBanner} lang={lang} />
 
@@ -50,7 +51,7 @@ const TempEmail = ({ lang, metatags, textContent, footerLang, navbarLang, toolsC
   );
 };
 
-export const getServerSideProps = setup(async (ctx: any) => {
+export const getServerSideProps = setup(async (ctx: GetServerSidePropsContext) => {
   const lang = ctx.locale || 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
@@ -60,6 +61,7 @@ export const getServerSideProps = setup(async (ctx: any) => {
   const toolsContent = require(`@/assets/lang/${lang}/components/tools/ToolSection.json`);
   const bannerLang = require(`@/assets/lang/${lang}/banners.json`);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const metatags = metatagsDescriptions.filter((desc: any) => desc.id === 'temporary-email');
 
   return {