From b5891942a291b1464df90e6d20d3c5949d899130 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Wed, 26 Jun 2024 18:59:48 +0200
Subject: [PATCH 01/10] feat: add husky

---
 package.json | 2 ++
 yarn.lock    | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/package.json b/package.json
index 7ba8cf43c..9099815b2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preinstall": "node ./scripts/use-yarn.js",
     "find:unused": "next-unused",
     "prebuild": "node ./scripts/check-envs.js",
+    "postinstall": "husky",
     "dev": "yarn && next dev -p 3001",
     "dev:tw": "TAILWIND_MODE=watch tailwindcss -o src/tailwind.css --watch",
     "build": "node ./scripts/check-envs.js && next build",
@@ -73,6 +74,7 @@
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^13.11.0",
     "eslint": "^7.32.0",
+    "husky": "^9.0.11",
     "next-unused": "^0.0.6",
     "postcss": "8.4.31",
     "prettier": "2.7.1",
diff --git a/yarn.lock b/yarn.lock
index 454f6b28a..4cba0cd76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4610,6 +4610,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+husky@^9.0.11:
+  version "9.0.11"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
+  integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==
+
 idb-keyval@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.2.1.tgz#94516d625346d16f56f3b33855da11bfded2db33"

From 9b4ce90378520f1f5bcaf1858af9dadecc2ccf9e Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Wed, 26 Jun 2024 19:19:12 +0200
Subject: [PATCH 02/10] feat: update Action name

---
 .github/workflows/pre-build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pre-build.yml b/.github/workflows/pre-build.yml
index f1bcb2090..cb9815301 100644
--- a/.github/workflows/pre-build.yml
+++ b/.github/workflows/pre-build.yml
@@ -23,5 +23,5 @@ jobs:
 
       - name: Install dependencies
         run: yarn install
-      - name: Build project
+      - name: Build project before deployment
         run: yarn build

From b693cef9bf55c4fbbf0e8cce6aacf3baa92c3181 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Thu, 27 Jun 2024 08:45:08 +0200
Subject: [PATCH 03/10] feat: add pre-commit script (husky)

---
 .husky/pre-commit | 1 +
 package.json      | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100755 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..8f56d750c
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+yarn build
diff --git a/package.json b/package.json
index 9099815b2..ea026143c 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
     "preinstall": "node ./scripts/use-yarn.js",
     "find:unused": "next-unused",
     "prebuild": "node ./scripts/check-envs.js",
-    "postinstall": "husky",
     "dev": "yarn && next dev -p 3001",
     "dev:tw": "TAILWIND_MODE=watch tailwindcss -o src/tailwind.css --watch",
     "build": "node ./scripts/check-envs.js && next build",
@@ -15,7 +14,11 @@
     "prod": "next export",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
-    "lint": "eslint './**/*.{js,ts,tsx}'"
+    "lint": "eslint './**/*.{js,ts,tsx}'",
+    "postinstall": "husky",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable",
+    "prepare": "husky"
   },
   "dependencies": {
     "@coderosh/images-to-pdf": "^2.1.0",

From 345d791ba1396c4432ce176d62bb91bb003c26eb Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 28 Jun 2024 09:32:00 +0200
Subject: [PATCH 04/10] feat: add eslint to the build process

---
 .eslintrc.json                                |   9 +-
 package.json                                  |   3 +
 src/components/Snackbar.tsx                   |   1 -
 .../CtaSection.tsx                            |  12 +-
 .../HeroSection.tsx                           |   4 +-
 src/components/banners/LoginBFBanner.tsx      |   8 +-
 src/components/banners/WheelBanner.tsx        | 113 -------
 .../banners/components/WheelComponent.tsx     | 148 ---------
 src/components/components/Countdown.tsx       |  17 +-
 src/components/dealfuel/PriceCard.tsx         |  23 +-
 src/components/dealfuel/PriceTable.tsx        |   4 -
 src/components/home/InfoSection.tsx           |   2 -
 src/components/home/SocialProofSection.tsx    |   1 -
 src/components/home/TestimonialsSection.tsx   |   9 +-
 src/components/home/ThirdFeaturesSection.tsx  |  22 +-
 src/components/home/components/FileItem.tsx   |  14 +-
 src/components/home/components/Label.tsx      |   7 +-
 .../components/heroSection/TitleAndSignup.tsx |   6 +-
 .../components/heroSection/TitleAndSurvey.tsx |   8 +-
 src/components/layout/BFBanner.tsx            | 113 -------
 src/components/layout/Layout.tsx              |  10 +-
 src/components/layout/ProductsNavigation.tsx  |  12 +-
 .../layout/components/LanguageBox.tsx         |  51 ++-
 .../components/navbar/ItemsNavigation.tsx     | 244 +++++++-------
 src/components/layout/footers/Footer.tsx      |  44 ++-
 .../layout/footers/MinimalFooter.tsx          |   4 +-
 .../layout/navbars/MinimalNavbar.tsx          |   2 +-
 src/components/layout/navbars/Navbar.tsx      |  40 +--
 .../legal/TermsAndConditionsOverview.tsx      |  11 +-
 .../legal/components/SelectSection.tsx        |  14 +-
 src/components/lifetime/CtaSection.tsx        |   2 +-
 src/components/lifetime/HeroSection.tsx       |   4 +-
 .../lifetime/PriceBannerForCampaigns.tsx      |   2 +-
 .../lifetime/celebration/HeroSection.tsx      |   2 +-
 src/components/media-area/KitSection.tsx      |   2 +-
 .../newsletter/MakePrivacySection.tsx         |  44 +--
 .../partner-discount/HeroSection.tsx          |  12 +-
 .../partner-discount/InfoSection.tsx          |  12 +-
 .../partner-discount/PaymentSection.tsx       |   7 +-
 .../partnerships/freemonth/FeatureSection.js  | 121 -------
 .../partnerships/freemonth/HeroSection.js     |  50 ---
 .../partnerships/freemonth/PriceCard.js       | 306 ------------------
 .../partnerships/guru99/FeatureSection.js     | 121 -------
 .../partnerships/guru99/HeroSection.js        |  87 -----
 .../partnerships/guru99/PriceCard.js          | 304 -----------------
 .../password-checker/FeaturesSection.tsx      |  17 +-
 .../password-checker/HeroSection.tsx          |  14 +-
 .../password-generator/HeroSection.tsx        |  11 +-
 .../password-generator/InfoSection.tsx        |  10 +-
 .../components/CheckboxSettings.tsx           |  12 +-
 .../components/PasswordSettings.tsx           |  12 +-
 .../password-generator/utils/index.ts         |   2 +-
 .../prices/CyberAwarenessSpecialCard.tsx      |  16 +-
 src/components/prices/FreePlanCard.tsx        |   6 +-
 src/components/prices/PriceCard.tsx           |  10 +-
 src/components/prices/PriceTable.tsx          |   8 +-
 src/components/prices/SpecialPriceCard.tsx    |   8 +-
 src/components/pricing/BestStorageSection.tsx |   7 +-
 src/components/pricing/CtaSection.tsx         |   8 +-
 src/components/pricing/HeroSection.tsx        |   6 +-
 .../privacy-directory/HeroSection2.tsx        |   5 +-
 .../privacy-directory/SupportNGOsSection.tsx  |   3 +-
 .../privacy/BetterTomorrowSection.tsx         |   7 +-
 src/components/privacy/FeatureSection.tsx     |   8 +-
 src/components/privacy/HeroSection.tsx        |   8 +-
 src/components/privacy/HeroSection2.tsx       |   8 +-
 src/components/privacy/InxtAppsSection.tsx    |   7 +-
 src/components/privacy/ManifestoSection.tsx   |  11 +-
 src/components/privacy/ManifestoSection2.tsx  |  11 +-
 src/components/privacy/SecuritumSection.tsx   |   6 +-
 src/components/services/stripe.service.ts     |   2 +-
 .../shared/CommandTextInputCopy.tsx           |   4 +-
 .../shared/CompanyLogosRecognitions.tsx       |   2 +-
 src/components/shared/DownloadComponent.tsx   |   4 +-
 src/components/shared/DropArea.tsx            |   2 +-
 src/components/shared/FaqSection.tsx          |   2 +-
 src/components/shared/Header.tsx              |  11 +-
 src/components/shared/HeroSectionSafeArea.tsx |  14 +-
 src/components/shared/ProductCard.tsx         |  52 ++-
 src/components/shared/RedirectButton.tsx      |   2 +-
 src/components/shared/RenderDescription.tsx   |   7 +-
 src/components/shared/StarsRate.tsx           |   2 +-
 src/components/shared/ToolsSection.tsx        |   7 +-
 .../specialoffer/MarqueeComponent.tsx         |   2 +-
 .../specialoffer/WhatWeDoSection.tsx          |   2 +-
 .../success-stories/HeroSection.tsx           |   6 +-
 src/components/success-stories/WhatWeDo.tsx   |   7 +-
 .../techradar-discount/HeroSection.tsx        |  16 +-
 .../techradar-discount/InfoSection.tsx        |   7 +-
 .../techradar-discount/PaymentsSection.tsx    |   6 +-
 src/components/temp-email/HeroSection.tsx     |   6 +-
 src/components/temp-email/InfoSection.tsx     |  12 +-
 src/components/temp-email/SignupSection.tsx   |  19 +-
 .../temp-email/components/EmailToolBar.tsx    |  81 +++--
 .../temp-email/components/InboxView.tsx       |   2 +-
 .../temp-email/components/Messages.tsx        |  48 +--
 .../temp-email/services/icon-service.ts       |   2 +-
 .../utils/schema-markup-generator.ts          |   4 +-
 .../virus-scanner/BannersSection.tsx          |  11 +-
 src/components/virus-scanner/CtaSection.tsx   |   7 +-
 .../virus-scanner/FeaturesSection.tsx         |   6 +-
 src/components/virus-scanner/HeroSection.tsx  |   6 +-
 src/components/vpn-extension/HeroSection.tsx  |   8 +-
 .../vpn-extension/SecureVPNSection.tsx        |   2 +-
 src/components/webdav/HowToUseCLISection.tsx  |   2 +-
 .../webdav/WebDAVSupportSection.tsx           |   2 +-
 src/lib/analytics.ts                          |  11 +-
 src/lib/auth.ts                               |   1 +
 src/lib/brave.ts                              |   4 +-
 src/lib/{checker.js => checker.ts}            |  24 +-
 src/lib/{gtag.js => gtag.ts}                  |   0
 src/pages/_app.tsx                            |   2 +-
 src/pages/about.tsx                           |   5 +-
 src/pages/affiliates/[filename].tsx           |  13 +-
 src/pages/affiliates/index.tsx                |  11 +-
 src/pages/annual.tsx                          |   3 +-
 src/pages/b.tsx                               |   3 +-
 src/pages/black-friday.tsx                    |   5 +-
 src/pages/byte-converter.tsx                  |   7 +-
 src/pages/cloud-storage-comparison.tsx        |   7 +-
 src/pages/cloud-storage-for-education.tsx     |   3 +-
 src/pages/cloudwards.tsx                      |  11 +-
 src/pages/cyber-awareness.tsx                 |   7 +-
 src/pages/cyber-security-quiz.tsx             |   9 +-
 src/pages/dealfuel.tsx                        |  17 +-
 src/pages/dealmirror.tsx                      |  17 +-
 src/pages/drive.tsx                           |   7 +-
 src/pages/file-converter/[filename].tsx       |   5 +-
 src/pages/file-converter/index.tsx            |   3 +-
 src/pages/freemonth.tsx                       |  52 ---
 src/pages/index.tsx                           |   3 +-
 src/pages/legal.tsx                           |   3 +-
 src/pages/lifetime/celebration/[filename].tsx |   7 +-
 src/pages/lifetime/index.tsx                  |   9 +-
 src/pages/lifetime_special.tsx                |   5 +-
 src/pages/locker.tsx                          |  11 +-
 src/pages/media-area.tsx                      |  11 +-
 src/pages/mightydeals.tsx                     |  21 +-
 src/pages/newsletter-subscribe.tsx            |  11 +-
 src/pages/open-source.tsx                     |   5 +-
 src/pages/partner-discount.tsx                |  14 +-
 src/pages/password-checker.tsx                |  13 +-
 src/pages/password-generator.tsx              |   7 +-
 src/pages/pccomponentes-products.tsx          |  11 +-
 src/pages/pcloud-alternative.tsx              |   3 +-
 src/pages/pricing.tsx                         |   7 +-
 src/pages/privacy-directory.tsx               |   7 +-
 src/pages/privacy.tsx                         |  11 +-
 src/pages/{sitemap.xml.js => sitemap.xml.ts}  |   0
 src/pages/specialoffer/freeuser.tsx           |   3 +-
 src/pages/stackcommerce.tsx                   |  40 ++-
 src/pages/startpage.tsx                       |  27 +-
 src/pages/techradar-discount.tsx              |  29 +-
 src/pages/temporary-email.tsx                 |   8 +-
 src/pages/virus-scanner.tsx                   |  27 +-
 src/pages/vpn.tsx                             |  22 +-
 src/pages/webdav.tsx                          |  11 +-
 src/pages/what-does-google-know-about-me.tsx  |  15 +-
 tests/redeem-codes.test.ts                    |  25 +-
 yarn.lock                                     |  48 +++
 160 files changed, 1081 insertions(+), 2188 deletions(-)
 delete mode 100644 src/components/banners/WheelBanner.tsx
 delete mode 100644 src/components/banners/components/WheelComponent.tsx
 delete mode 100644 src/components/layout/BFBanner.tsx
 delete mode 100644 src/components/partnerships/freemonth/FeatureSection.js
 delete mode 100644 src/components/partnerships/freemonth/HeroSection.js
 delete mode 100644 src/components/partnerships/freemonth/PriceCard.js
 delete mode 100644 src/components/partnerships/guru99/FeatureSection.js
 delete mode 100644 src/components/partnerships/guru99/HeroSection.js
 delete mode 100644 src/components/partnerships/guru99/PriceCard.js
 rename src/lib/{checker.js => checker.ts} (71%)
 rename src/lib/{gtag.js => gtag.ts} (100%)
 delete mode 100644 src/pages/freemonth.tsx
 rename src/pages/{sitemap.xml.js => sitemap.xml.ts} (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index 5e621e651..95826e251 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,10 +1,15 @@
+// TODO: Add next core-web-vitals. E.g. "extends": ["next/core-web-vitals"]
+
 {
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "rules": {
-    "quotes": ["error", "single"],
+    "quotes": ["warn", "single"],
     "semi": ["error", "always"],
     "linebreak-style": ["error", "unix"],
     "no-console": "off",
-    "max-len": "off"
+    "max-len": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "no-async-promise-executor": "warn"
   }
 }
diff --git a/package.json b/package.json
index 73edf782b..63c41c884 100644
--- a/package.json
+++ b/package.json
@@ -77,10 +77,13 @@
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^13.12.0",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
     "next-unused": "^0.0.6",
     "postcss": "8.4.31",
     "prettier": "2.7.1",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "0.1.13",
     "reset-css": "5.0.1",
     "sass": "1.41.0",
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 3a684dbc8..40af755d1 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
diff --git a/src/components/annual-plans-for-affiliates/CtaSection.tsx b/src/components/annual-plans-for-affiliates/CtaSection.tsx
index 8facc216b..e77363af5 100644
--- a/src/components/annual-plans-for-affiliates/CtaSection.tsx
+++ b/src/components/annual-plans-for-affiliates/CtaSection.tsx
@@ -2,10 +2,12 @@ const PRICE_TABLE_ID = 'pricing-table';
 
 const CtaSection = ({ textContent }: { textContent: any }) => {
   function redirectToPricingTable() {
-    window.scrollTo({
-      top: document?.getElementById(PRICE_TABLE_ID)?.offsetTop! + 500,
-      behavior: 'smooth',
-    });
+    if (document.getElementById(PRICE_TABLE_ID)) {
+      window.scrollTo({
+        top: document.getElementById(PRICE_TABLE_ID)!.offsetTop + 500,
+        behavior: 'smooth',
+      });
+    }
   }
 
   return (
@@ -16,7 +18,7 @@ const CtaSection = ({ textContent }: { textContent: any }) => {
       className="overflow-hidden bg-primary bg-cover px-5 py-14"
     >
       <div className="flex flex-col items-center justify-center space-y-8 text-center">
-        <div className={`flex flex-col items-center space-y-4 text-center text-white`}>
+        <div className={'flex flex-col items-center space-y-4 text-center text-white'}>
           <p className="text-4xl font-semibold">{textContent.title}</p>
           <p className="w-full max-w-[573px] text-xl font-normal">{textContent.description}</p>
         </div>
diff --git a/src/components/annual-plans-for-affiliates/HeroSection.tsx b/src/components/annual-plans-for-affiliates/HeroSection.tsx
index 662e958b3..851aa5e14 100644
--- a/src/components/annual-plans-for-affiliates/HeroSection.tsx
+++ b/src/components/annual-plans-for-affiliates/HeroSection.tsx
@@ -17,7 +17,7 @@ const StartPageLabel = () => {
       <Image
         loading="lazy"
         className="select-none"
-        src={`../../logos/internxt/cool-gray-90.svg`}
+        src={'../../logos/internxt/cool-gray-90.svg'}
         alt="Internxt logo"
         width={130}
         height={16}
@@ -29,7 +29,7 @@ const StartPageLabel = () => {
 const HeroSection: React.FC<HeroSectionProps> = ({ textContent, InfoTextComponent, isStartPage }) => {
   function redirectToPricingTable() {
     window.scrollTo({
-      top: document?.getElementById('payment')?.offsetTop! + 500,
+      top: document?.getElementById('payment')!.offsetTop + 500,
       behavior: 'smooth',
     });
   }
diff --git a/src/components/banners/LoginBFBanner.tsx b/src/components/banners/LoginBFBanner.tsx
index 00ff6604b..32e7fce65 100644
--- a/src/components/banners/LoginBFBanner.tsx
+++ b/src/components/banners/LoginBFBanner.tsx
@@ -60,7 +60,7 @@ const LoginBFBanner = () => {
     if (showBanner) {
       window.dispatchEvent(new Event('CloseSquare'));
     }
-    if (Boolean(hideBanner)) {
+    if (hideBanner) {
       setShowBanner(false);
     }
     window.addEventListener('unload', function (e) {
@@ -133,9 +133,11 @@ const LoginBFBanner = () => {
   };
 
   return showBanner ? (
-    <div className={`fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10`}>
+    <div className={'fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10'}>
       <div
-        className={`fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary`}
+        className={
+          'fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary'
+        }
       >
         <button className="absolute right-0 m-7 flex text-white" onClick={handleClose}>
           <X size={32} />
diff --git a/src/components/banners/WheelBanner.tsx b/src/components/banners/WheelBanner.tsx
deleted file mode 100644
index 3514e8af6..000000000
--- a/src/components/banners/WheelBanner.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
-import WheelComponent from '@/components/banners/components/WheelComponent';
-import { Info, X } from '@phosphor-icons/react';
-import TextInput from '@/components/components/TextInput';
-import { notificationService } from '@/components/Snackbar';
-import { stripeService } from '@/components/services/stripe.service';
-import { CouponType } from '@/lib/types';
-
-const SHOW_WHEEL_BANNER = 'showWheelBanner';
-
-type views = 'wheel' | 'congratulations';
-
-const COUPON_CODES = {
-  '10% OFF': 'Wheel10',
-  '15% OFF': 'Wheel15',
-  '25% OFF': 'Wheel20',
-  '30% OFF': 'Wheel30',
-  '45% OFF': 'Wheel45',
-  '50% OFF': 'Wheel50',
-};
-
-const WheelBanner = () => {
-  const globalDialogs = useGlobalDialog();
-
-  const [bannerVisible, setBannerVisible] = useState(false);
-  const [view, setView] = useState<views>('wheel');
-  const [result, setResult] = useState('');
-  const [coupon, setCoupon] = useState('');
-
-  useEffect(() => {
-    const getSquareBannerLS = sessionStorage.getItem(SHOW_WHEEL_BANNER);
-    if (getSquareBannerLS) setBannerVisible(false);
-    else setBannerVisible(true);
-  }, []);
-
-  useEffect(() => {
-    if (result) {
-      stripeService
-        .getCoupon(CouponType[COUPON_CODES[result]])
-        .then((res) => {
-          setCoupon(res);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    }
-  }, [result]);
-
-  function handleOnClose() {
-    setBannerVisible(false);
-    sessionStorage.setItem(SHOW_WHEEL_BANNER, 'false');
-    globalDialogs.closeDialog(GlobalDialog.Wheel);
-  }
-
-  function handleOnCopy() {
-    navigator.clipboard.writeText(coupon);
-    notificationService.openSuccessToast('Copied to clipboard');
-  }
-
-  return (
-    <section
-      className={`${
-        bannerVisible || globalDialogs.dialogIsOpen(GlobalDialog.Wheel) ? 'flex' : 'hidden'
-      }  fixed top-0 left-0 right-0 bottom-0 z-50 h-screen bg-black bg-opacity-50 px-10 lg:px-0`}
-    >
-      <div
-        className={`${
-          bannerVisible || globalDialogs.dialogIsOpen(GlobalDialog.Wheel) ? 'flex' : 'hidden'
-        } absolute top-1/2 left-1/2
-        flex w-full max-w-[1000px] -translate-y-1/2 -translate-x-1/2 transform flex-col bg-white text-neutral-900 lg:rounded-2xl`}
-      >
-        <button className="absolute right-0 m-7 flex w-auto text-black" onClick={handleOnClose}>
-          <X size={32} />
-        </button>
-        {view === 'wheel' ? (
-          <WheelComponent onViewChange={() => setView('congratulations')} setResult={setResult} />
-        ) : view === 'congratulations' ? (
-          <div className="flex min-h-screen flex-col items-center justify-center space-y-7 px-5 lg:min-h-full lg:pt-20 lg:pb-10">
-            <div className="flex w-full flex-col items-center space-y-5 text-center">
-              <p className="text-4xl font-bold text-primary lg:text-7xl">Congratulations!</p>
-              <p className="text-xl font-semibold text-gray-100">Choose your plan and activate your offer with code:</p>
-            </div>
-            <div className="flex w-full max-w-[520px] flex-col items-center space-y-8 rounded-2xl border-2 border-primary/7 bg-primary/2 p-9">
-              <div className="w-full">
-                <TextInput
-                  value={coupon}
-                  className="items-center text-center"
-                  disabledText="disabled:text-gray-100 text-gray-100 font-medium"
-                  readonly
-                />
-              </div>
-              <button
-                onClick={handleOnCopy}
-                className="flex w-max flex-col items-center rounded-lg bg-primary py-2.5 px-11 text-lg font-medium text-white"
-              >
-                Get your discount
-              </button>
-            </div>
-            <div className="flex flex-row space-x-4 pt-6">
-              <Info size={20} className="text-primary" />
-              <p className="text-sm font-semibold text-gray-100">
-                Go to the pricing page and choose your subscription to activate your discount.
-              </p>
-            </div>
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default WheelBanner;
diff --git a/src/components/banners/components/WheelComponent.tsx b/src/components/banners/components/WheelComponent.tsx
deleted file mode 100644
index a66f5db88..000000000
--- a/src/components/banners/components/WheelComponent.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { LockKey, WarningCircle } from '@phosphor-icons/react';
-import TextInput from '@/components/components/TextInput';
-import CheckboxItem from '@/components/shared/CheckboxItem';
-import { useEffect, useState } from 'react';
-import { Roulette, useRoulette } from 'react-hook-roulette';
-import axios, { AxiosError } from 'axios';
-
-const WheelComponent = ({ onViewChange, setResult }) => {
-  const [email, setEmail] = useState('');
-  const [firstCheckbox, setFirstCheckbox] = useState(false);
-  const [error, setError] = useState(false);
-
-  const items = [
-    { name: '10% OFF', bg: '#001D6C' },
-    { name: '15% OFF', bg: '#002D9C' },
-    { name: '25% OFF', bg: '#0043CE' },
-    { name: '30% OFF', bg: '#0066FF' },
-    { name: '45% OFF', bg: '#4589FF' },
-    { name: '50% OFF', bg: '#78A9FF' },
-  ];
-  const { roulette, onStart, onStop, result } = useRoulette({
-    items,
-    options: {
-      size: 300,
-      style: {
-        label: {
-          defaultColor: '#fff',
-        },
-      },
-    },
-  });
-
-  // Stop the roulette after random seconds between 4 and 6 seconds
-  useEffect(() => {
-    setTimeout(() => {
-      onStop();
-    }, Math.floor(Math.random() * 2000) + 4000);
-  }, [onStart]);
-
-  useEffect(() => {
-    if (result) {
-      setResult(result);
-      onViewChange('congratulations');
-    }
-  }, [result]);
-
-  useEffect(() => {
-    if (error) {
-      setTimeout(() => {
-        setError(false);
-      }, 3000);
-    }
-  }, [error]);
-
-  const onEmailInputChange = (e) => {
-    setEmail(e.target.value);
-  };
-
-  const onCheckboxChange = () => {
-    setFirstCheckbox(!firstCheckbox);
-  };
-
-  const handleOnButtonClick = (e) => {
-    e.preventDefault();
-    axios
-      .post('/api/authenticate', {
-        userEmail: email,
-      })
-      .then(() => {
-        setError(true);
-      })
-      .catch((error: AxiosError) => {
-        if (error.response?.status === 404 || error.response?.status === 403) {
-          onStart();
-        } else {
-          console.error('[ERROR]: ', 'You are not authorized to access this resource');
-        }
-      });
-  };
-
-  return (
-    <div className="flex flex-row justify-between">
-      <div className="hidden w-full max-w-[500px] flex-col items-center justify-end space-y-5 rounded-l-2xl bg-[url('/images/banners/wheel-banner-bg.webp')] bg-cover bg-no-repeat px-10 pb-14 lg:flex">
-        {/* Icon */}
-        <div className="flex w-max rounded-[20px] bg-white p-3">
-          <LockKey weight="fill" size={42} className="text-primary" />
-        </div>
-        {/* Text */}
-        <div className="flex w-full flex-col space-y-5 text-center text-white">
-          <p className="text-6xl font-bold">Safer Internet Day!</p>
-          <p className="text-xl font-semibold">Subscribe, spin, and save on a subscription of your choice!*</p>
-        </div>
-        <div className="flex flex-col pt-20 text-white">
-          <p className="text-sm font-semibold">*Offer is for free accounts or new customers</p>
-        </div>
-      </div>
-      {/* Wheel and mobile view */}
-      <div className="flex h-screen w-full max-w-[500px] flex-col items-center justify-center space-y-10 py-11 lg:h-full">
-        {/* Title */}
-        <div className="flex w-full flex-col space-y-5 text-center lg:hidden">
-          <p className="text-4xl font-bold text-primary">Safer Internet Day!</p>
-          <p className="text-xl font-semibold text-gray-80">Spin, save, and secure your data!</p>
-        </div>
-        <div className="flex flex-col">
-          <Roulette roulette={roulette} />
-        </div>
-        {/* Text input and button */}
-        <form className="flex w-full max-w-[240px] flex-col space-y-2" onSubmit={handleOnButtonClick}>
-          <TextInput
-            placeholder="Email Address"
-            value={email}
-            passwordError={error}
-            type="email"
-            className="w-full"
-            onChange={onEmailInputChange}
-          />
-          {error && (
-            <div className="flex flex-row items-center space-x-1 text-sm text-red">
-              <WarningCircle size={13} weight="fill" />
-              <p className="">Offer unavailable for paid users</p>
-            </div>
-          )}
-          <button
-            disabled={email === ''}
-            className={`rounded-lg ${email === '' ? 'bg-gray-30' : 'bg-primary'}  w-full py-2.5 text-white`}
-            type="submit"
-          >
-            Spin to win
-          </button>
-        </form>
-        {/* Checkbox and privacy policy */}
-        <div className="flex flex-col space-y-6 text-center">
-          <CheckboxItem
-            checked={firstCheckbox}
-            setCheckbox={onCheckboxChange}
-            textColor="text-gray-100"
-            label={'By subscribing, you agree to our [privacy policy](https://internxt.com/legal).'}
-          />
-          <div className="flex flex-col text-gray-100 lg:hidden">
-            <p className="text-sm font-semibold">*Offer is for free accounts or new customers</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default WheelComponent;
diff --git a/src/components/components/Countdown.tsx b/src/components/components/Countdown.tsx
index 5059db0bb..d808fbf23 100644
--- a/src/components/components/Countdown.tsx
+++ b/src/components/components/Countdown.tsx
@@ -28,7 +28,6 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
     const minute = second * 60;
     const hour = minute * 60;
     const day = hour * 24;
-    let timer: NodeJS.Timeout;
 
     const showRemaining = () => {
       const now = new Date();
@@ -48,7 +47,7 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
       setSeconds(seconds);
     };
 
-    timer = setInterval(showRemaining, 1000);
+    const timer = setInterval(showRemaining, 1000);
     return () => clearInterval(timer);
   };
 
@@ -81,19 +80,19 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
   return (
     <div className={`flex text-${textColor}`}>
       <div className="flex flex-row items-end space-x-2 text-4xl lg:text-2xl">
-        <div className={`days delay-350 font-semibold transition-colors duration-150`}>
+        <div className={'days delay-350 font-semibold transition-colors duration-150'}>
           {days < 10 ? `0${days}` : days}
         </div>
-        <p className={`font-semibold`}> : </p>
-        <div className={`hours delay-350 font-semibold transition-colors duration-150`}>
+        <p className={'font-semibold'}> : </p>
+        <div className={'hours delay-350 font-semibold transition-colors duration-150'}>
           {hours < 10 ? `0${hours}` : hours}
         </div>
-        <p className={`font-semibold`}>:</p>
-        <div className={`minutes delay-350 font-semibold transition-colors duration-150`}>
+        <p className={'font-semibold'}>:</p>
+        <div className={'minutes delay-350 font-semibold transition-colors duration-150'}>
           {minutes < 10 ? `0${minutes}` : minutes}
         </div>
-        <p className={`font-semibold`}>:</p>
-        <div className={`seconds delay-350 font-semibold transition-colors duration-150`}>
+        <p className={'font-semibold'}>:</p>
+        <div className={'seconds delay-350 font-semibold transition-colors duration-150'}>
           {seconds < 10 ? `0${seconds}` : seconds}
         </div>
       </div>
diff --git a/src/components/dealfuel/PriceCard.tsx b/src/components/dealfuel/PriceCard.tsx
index 73844cf63..15ffb469b 100644
--- a/src/components/dealfuel/PriceCard.tsx
+++ b/src/components/dealfuel/PriceCard.tsx
@@ -1,11 +1,12 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-nested-ternary */
-import React from 'react';
+interface PriceCardProps {
+  planType: string;
+  storage: string;
+  price: number;
+  country: string;
+  popular: boolean;
+}
 
-const PriceCard = ({ planType, storage, price, cta, country, popular }) => {
+const PriceCard = ({ planType, storage, price, country, popular }: PriceCardProps): JSX.Element => {
   const currency = () => {
     switch (country) {
       case 'US':
@@ -17,7 +18,7 @@ const PriceCard = ({ planType, storage, price, cta, country, popular }) => {
     }
   };
 
-  const contentText = require(`../../assets/lang/en/priceCard.json`);
+  const contentText = require('../../assets/lang/en/priceCard.json');
 
   return (
     <div
@@ -33,7 +34,7 @@ const PriceCard = ({ planType, storage, price, cta, country, popular }) => {
         {contentText.mostPopularPlan}
       </div>
 
-      <div className={`info flex flex-col items-center justify-center bg-white p-6 `}>
+      <div className={'info flex flex-col items-center justify-center bg-white p-6 '}>
         <div
           className={`storage flex max-w-min flex-row whitespace-nowrap rounded-full ${
             popular ? 'text-primary' : 'text-gray-50'
@@ -42,12 +43,12 @@ const PriceCard = ({ planType, storage, price, cta, country, popular }) => {
           <p>{storage}</p>
         </div>
 
-        <div className={`planPrice flex flex-col items-center justify-center p-5`}>
+        <div className={'planPrice flex flex-col items-center justify-center p-5'}>
           <div
             className={`priceBreakdown flex flex-col items-center
             `}
           >
-            <p className={`flex flex-row items-start space-x-0.5 font-semibold text-black`}>
+            <p className={'flex flex-row items-start space-x-0.5 font-semibold text-black'}>
               <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency()}</span>
               <span className="price text-4xl font-semibold">{price}</span>
             </p>
diff --git a/src/components/dealfuel/PriceTable.tsx b/src/components/dealfuel/PriceTable.tsx
index 141433037..dcaa376eb 100644
--- a/src/components/dealfuel/PriceTable.tsx
+++ b/src/components/dealfuel/PriceTable.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import PriceCard from './PriceCard';
 import { Coin, CreditCard, Detective } from '@phosphor-icons/react';
 
@@ -89,7 +88,6 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB2.storage}
           price={billingPrice(prices.TB2.price)}
-          cta={['checkout', 'lifetime2TB']}
           popular={prices.TB2.popular}
           country={country}
         />
@@ -97,7 +95,6 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB5.storage}
           price={billingPrice(prices.TB5.price)}
-          cta={['checkout', 'lifetime5TB']}
           popular={prices.TB5.popular}
           country={country}
         />
@@ -105,7 +102,6 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB10.storage}
           price={billingPrice(prices.TB10.price)}
-          cta={['checkout', 'lifetime10TB']}
           popular={prices.TB10.popular}
           country={country}
         />
diff --git a/src/components/home/InfoSection.tsx b/src/components/home/InfoSection.tsx
index 383594507..0ade83ba4 100644
--- a/src/components/home/InfoSection.tsx
+++ b/src/components/home/InfoSection.tsx
@@ -1,11 +1,9 @@
-import React from 'react';
 import RevealY from '@/components/components/RevealY';
 import { CaretRight, Eye, Fingerprint, LockKey, ShieldCheck } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 
 const InfoSection = ({
   textContent,
-  lang,
   withoutCta,
   backgroundColor,
   redirect,
diff --git a/src/components/home/SocialProofSection.tsx b/src/components/home/SocialProofSection.tsx
index 68b623f60..3d1e9cc72 100644
--- a/src/components/home/SocialProofSection.tsx
+++ b/src/components/home/SocialProofSection.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-target-blank */
 import { getImage } from '@/lib/getImage';
 import Image from 'next/image';
 
diff --git a/src/components/home/TestimonialsSection.tsx b/src/components/home/TestimonialsSection.tsx
index 97cd40383..7f358dcda 100644
--- a/src/components/home/TestimonialsSection.tsx
+++ b/src/components/home/TestimonialsSection.tsx
@@ -2,7 +2,12 @@ import { getImage } from '@/lib/getImage';
 import Image from 'next/image';
 import { FiveStars } from '../shared/StarsRate';
 
-const AvatarAndText = ({ testimonial }) => (
+interface TestimonialsSectionProps {
+  textContent: Record<string, any>;
+  bgColor?: string;
+}
+
+const AvatarAndText = ({ testimonial }): JSX.Element => (
   <div className="flex flex-row items-center gap-3">
     <div className="flex h-10 w-10 rounded-full">
       <Image src={testimonial.testimonialImage} width={40} height={40} alt="FixThePhoto Avatar" />
@@ -14,7 +19,7 @@ const AvatarAndText = ({ testimonial }) => (
   </div>
 );
 
-const TestimonialsSection = ({ textContent, bgColor }: { textContent: any; bgColor?: string }) => {
+const TestimonialsSection = ({ textContent, bgColor }: TestimonialsSectionProps): JSX.Element => {
   const testimonials = [
     {
       review: textContent.cards[0].review,
diff --git a/src/components/home/ThirdFeaturesSection.tsx b/src/components/home/ThirdFeaturesSection.tsx
index 6d08071f9..2f5260ef5 100644
--- a/src/components/home/ThirdFeaturesSection.tsx
+++ b/src/components/home/ThirdFeaturesSection.tsx
@@ -1,15 +1,21 @@
 import Image from 'next/legacy/image';
 import { Gift } from '@phosphor-icons/react';
-import React from 'react';
 import RevealX from '@/components/components/RevealX';
+import { getImage } from '@/lib/getImage';
+import Link from 'next/link';
+import { SIGNUP_DRIVE_WEB } from '@/constants';
 
-const ThirdFeaturesSection = ({ textContent }) => {
+interface ThirdFeaturesSectionProps {
+  textContent: Record<string, any>;
+}
+
+const ThirdFeaturesSection = ({ textContent }: ThirdFeaturesSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden bg-gray-1">
       <div className="flex flex-col-reverse items-center justify-center px-5 pt-16 pb-20 text-center md:flex-row md:space-y-0 md:space-x-24 md:text-start">
         <RevealX direction="right" className="flex flex-col rounded-3xl pt-10 md:pt-0">
           <Image
-            src="/images/home/Online-privacy-services.webp"
+            src={getImage('/images/home/Online-privacy-services.webp')}
             width={496}
             height={520}
             quality={100}
@@ -27,14 +33,14 @@ const ThirdFeaturesSection = ({ textContent }) => {
           <p className="mb-6 text-4xl font-semibold sm:text-5xl sm:leading-tight">{textContent.title}</p>
           <p className="text-xl">{textContent.description}</p>
           <div>
-            <button
+            <Link
+              href={SIGNUP_DRIVE_WEB}
+              target="_blank"
+              rel="noopener noreferrer"
               className="rounded-lg bg-primary px-5 py-3 text-white hover:bg-primary-dark"
-              onClick={() => {
-                window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
-              }}
             >
               {textContent.cta}
-            </button>
+            </Link>
           </div>
         </RevealX>
       </div>
diff --git a/src/components/home/components/FileItem.tsx b/src/components/home/components/FileItem.tsx
index 707283f88..adb1f9bf3 100644
--- a/src/components/home/components/FileItem.tsx
+++ b/src/components/home/components/FileItem.tsx
@@ -1,23 +1,19 @@
 import { DotsThree } from '@phosphor-icons/react';
 import moment from 'moment';
-import React from 'react';
 
-const FileItem = ({
-  encrypted,
-  className,
-  title,
-  ItemImg,
-}: {
+interface FileItemProps {
   title: string;
   className: string;
   ItemImg: any;
   encrypted?: boolean;
-}) => {
+}
+
+const FileItem = ({ encrypted, className, title, ItemImg }: FileItemProps): JSX.Element => {
   const fileYear = moment().year();
 
   return (
     <div className={`${className} flex w-[375px] flex-row bg-white px-4 py-3`}>
-      <div className={`flex w-full flex-row items-center justify-between space-x-2`}>
+      <div className={'flex w-full flex-row items-center justify-between space-x-2'}>
         <div className="flex flex-row space-x-2">
           <ItemImg className={`h-10 w-10 ${encrypted && 'opacity-40'}`} />
           <div className="flex flex-col">
diff --git a/src/components/home/components/Label.tsx b/src/components/home/components/Label.tsx
index 3ff91a1e5..46b534de3 100644
--- a/src/components/home/components/Label.tsx
+++ b/src/components/home/components/Label.tsx
@@ -1,7 +1,12 @@
 import { CaretRight } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 
-export const Label = ({ label, path }) => {
+interface LabelProps {
+  label: string;
+  path: string;
+}
+
+export const Label = ({ label, path }: LabelProps): JSX.Element => {
   const router = useRouter();
 
   return (
diff --git a/src/components/home/components/heroSection/TitleAndSignup.tsx b/src/components/home/components/heroSection/TitleAndSignup.tsx
index 09ce36539..a2d5bc546 100644
--- a/src/components/home/components/heroSection/TitleAndSignup.tsx
+++ b/src/components/home/components/heroSection/TitleAndSignup.tsx
@@ -2,7 +2,11 @@ import SignUpInline from '@/components/auth/SignUpInline';
 import Header from '@/components/shared/Header';
 import { goToSignUpURL } from '@/lib/auth';
 
-export const TitleAndSignup = ({ textContent }) => {
+interface TitleAndSignupProps {
+  textContent: Record<string, any>;
+}
+
+export const TitleAndSignup = ({ textContent }: TitleAndSignupProps): JSX.Element => {
   return (
     <div className="z-10 flex flex-col md:max-w-lg">
       <Header maxWidth="max-w-[485px]" className="text-gray-100">
diff --git a/src/components/home/components/heroSection/TitleAndSurvey.tsx b/src/components/home/components/heroSection/TitleAndSurvey.tsx
index ca37cdb88..552a560f2 100644
--- a/src/components/home/components/heroSection/TitleAndSurvey.tsx
+++ b/src/components/home/components/heroSection/TitleAndSurvey.tsx
@@ -3,7 +3,11 @@ import Header from '@/components/shared/Header';
 import { FiveStars } from '@/components/shared/StarsRate';
 import { useRouter } from 'next/router';
 
-export const TitleAndSurvey = ({ textContent }) => {
+interface TitleAndSurveyProps {
+  textContent: Record<string, any>;
+}
+
+export const TitleAndSurvey = ({ textContent }: TitleAndSurveyProps): JSX.Element => {
   const router = useRouter();
 
   const handleOnPlanButtonClicked = () => {
@@ -39,7 +43,7 @@ export const TitleAndSurvey = ({ textContent }) => {
           {/* // TODO: Manage the buttons logic */}
           <div className="flex flex-wrap gap-4 lg:flex-row">
             {textContent.buttonLabel.map((label) => (
-              <div className="flex w-full lg:w-max">
+              <div className="flex w-full lg:w-max" key={label}>
                 <Button className="!w-full lg:w-max" text={label} onClick={handleOnPlanButtonClicked} />
               </div>
             ))}
diff --git a/src/components/layout/BFBanner.tsx b/src/components/layout/BFBanner.tsx
deleted file mode 100644
index 2b66d0ae3..000000000
--- a/src/components/layout/BFBanner.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { CircleWavyCheck, X } from '@phosphor-icons/react';
-import { useState, useEffect } from 'react';
-import styles from '../black-friday/BF-HeroSection.module.scss';
-import { useRouter } from 'next/router';
-import { buttonDeal, buttonLink, BFBannerText } from '../TextWithoutJson';
-
-const BFBanner = () => {
-  const [showBanner, setShowBanner] = useState(false);
-  const router = useRouter();
-  const lang = router.locale;
-
-  const handleClose = () => {
-    localStorage.setItem('hideBanner', 'true');
-    setShowBanner(false);
-  };
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (router.pathname !== '/black-friday') {
-        setShowBanner(true);
-      }
-    }, 20000);
-  }, []);
-
-  useEffect(() => {
-    const hideBanner = localStorage.getItem('hideBanner');
-    if (showBanner) {
-      window.dispatchEvent(new Event('CloseSquare'));
-    }
-    if (hideBanner) {
-      setShowBanner(false);
-    }
-    window.addEventListener('unload', function (e) {
-      e.preventDefault();
-      localStorage.removeItem('hideBanner');
-    });
-    return () => {
-      window.removeEventListener('unload', () => {});
-    };
-  }, [showBanner]);
-
-  const cards = [
-    {
-      title: BFBannerText[lang].cards.title1,
-    },
-    {
-      title: BFBannerText[lang].cards.title2,
-    },
-    {
-      title: BFBannerText[lang].cards.title3,
-    },
-    {
-      title: BFBannerText[lang].cards.title4,
-    },
-    {
-      title: BFBannerText[lang].cards.title5,
-    },
-    {
-      title: BFBannerText[lang].cards.title6,
-    },
-  ];
-
-  return (
-    showBanner && (
-      //Background
-      <div className={`fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50`}>
-        {/* Banner */}
-        <div
-          className={`fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl`}
-        >
-          <button className="absolute  right-0 m-7 flex text-white" onClick={handleClose}>
-            <X size={32} />
-          </button>
-          <div className="flex w-auto flex-col p-14 lg:flex-row lg:p-20">
-            <div className="flex flex-col items-center justify-center text-center lg:items-start lg:justify-between lg:pr-20 lg:text-start">
-              <div className="flex flex-col lg:w-72">
-                <p className="text-3xl font-semibold text-white">{BFBannerText[lang].head}</p>
-                <p className="pt-5 text-5xl font-bold text-white">{BFBannerText[lang].title}</p>
-              </div>
-              <div className="flex pt-7 lg:pt-10">
-                <button
-                  className="relative flex h-14 w-48 flex-row items-center justify-center space-x-4 rounded-4xl bg-primary px-8 text-base text-white transition duration-100 focus:outline-none focus-visible:bg-primary-dark active:bg-primary-dark sm:text-lg"
-                  onClick={() => {
-                    window.location.replace(buttonLink[lang]);
-                  }}
-                >
-                  {buttonDeal[lang]}
-                </button>
-              </div>
-            </div>
-            <div className="hidden items-center lg:flex">
-              <div className="flex w-[340px] flex-col">
-                <div className="flex flex-col">
-                  {cards.map((card) => (
-                    <div className="flex flex-row pb-5 last:pb-0" key={card.title}>
-                      <CircleWavyCheck size={32} weight="fill" className="mr-4 text-primary" />
-                      <p className="text-xl font-semibold text-white">{card.title}</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className={`absolute top-0 left-0 -z-10 flex h-full w-full px-5 ${styles.neonBlur} pointer-events-none origin-center`}
-          />
-        </div>
-      </div>
-    )
-  );
-};
-
-export default BFBanner;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 35a31c248..3c231b3c5 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
@@ -33,7 +33,6 @@ interface LayoutProps {
   readonly segmentName?: string | null;
   readonly disableMailerlite?: boolean;
   readonly disableDrift?: boolean;
-  readonly isProduction?: boolean;
   readonly specialOffer?: string;
   readonly isBannerFixed?: boolean;
   readonly lang?: string;
@@ -50,7 +49,6 @@ export default function Layout({
   specialOffer,
   disableDrift = true,
   isBannerFixed,
-  isProduction = process.env.NODE_ENV === 'production',
 }: // lang
 LayoutProps) {
   const pageURL = segmentName === 'home' ? '' : segmentName;
@@ -179,7 +177,7 @@ LayoutProps) {
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <meta name="description" content={description} />
         <meta name="thumbnail" content={`${INTERNXT_URL}/images/previewLink/LifetimeGoogleSearch.png`} />
-        <meta name="apple-itunes-app" content={`app-id=1465869889`} />
+        <meta name="apple-itunes-app" content={'app-id=1465869889'} />
         <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
         <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials" />
@@ -193,7 +191,7 @@ LayoutProps) {
         <script src="/js/cookiebanner.script.js"></script>
         <script
           dangerouslySetInnerHTML={{
-            __html: `window.varify = window.varify || {}; window.varify.iid = 2329;`,
+            __html: 'window.varify = window.varify || {}; window.varify.iid = 2329;',
           }}
         />
         <script src="https://app.varify.io/varify.js"></script>
@@ -255,7 +253,7 @@ LayoutProps) {
         {!disableDrift && <Script defer src="/js/drift.js" />}
       </Head>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema" type="application/ld+json" strategy="beforeInteractive">
         {`{
           "@context": "https://schema.org",
           "@type": "Organization",
diff --git a/src/components/layout/ProductsNavigation.tsx b/src/components/layout/ProductsNavigation.tsx
index b8af15158..4e95f8e95 100644
--- a/src/components/layout/ProductsNavigation.tsx
+++ b/src/components/layout/ProductsNavigation.tsx
@@ -1,14 +1,22 @@
 import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import Link from 'next/link';
 
-const ProductsNavigation = ({ textContent, selectedItem, lang }) => {
+interface ProductsNavigationProps {
+  textContent: Record<string, any>;
+  selectedItem: string;
+  lang: string;
+}
+
+const ProductsNavigation = ({ textContent, selectedItem, lang }: ProductsNavigationProps): JSX.Element => {
   const { dialogIsOpen } = useGlobalDialog();
   const isTopBannerDialogOpen = dialogIsOpen(GlobalDialog.TopBanner);
 
   const paddingTop = isTopBannerDialogOpen ? 'lg:top-[120px]' : 'lg:top-[64px]';
 
   return (
-    <div className="absolute z-10 hidden h-14 w-full flex-row items-center justify-start overflow-x-auto bg-cool-gray-5 px-6 sm:justify-center lg:top-[120px] lg:flex">
+    <div
+      className={`absolute z-10 hidden h-14 w-full flex-row items-center justify-start overflow-x-auto bg-cool-gray-5 px-6 sm:justify-center ${paddingTop} lg:flex`}
+    >
       <div className="mx-auto space-x-8 sm:space-x-6">
         <Link
           href="/drive"
diff --git a/src/components/layout/components/LanguageBox.tsx b/src/components/layout/components/LanguageBox.tsx
index 4d317effa..442c1da2c 100644
--- a/src/components/layout/components/LanguageBox.tsx
+++ b/src/components/layout/components/LanguageBox.tsx
@@ -4,6 +4,11 @@ import Link from 'next/link';
 import { useState } from 'react';
 import cookies from '@/lib/cookies';
 
+interface LanguageBoxProps {
+  darkMode?: boolean;
+  isBlackFriday?: boolean;
+}
+
 const currentLang = {
   es: 'Español (ES)',
   fr: 'Français (FR)',
@@ -26,7 +31,7 @@ const selectedLang = {
   'zh-tw': 'TW',
 };
 
-export default function LanguageBox({ darkMode, isBlackFriday }) {
+export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProps): JSX.Element {
   const router = useRouter();
 
   const [currentLangText, setCurrentLangText] = useState<string>(selectedLang[router.locale as string]);
@@ -38,7 +43,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
 
   return (
     <div
-      className={`group relative flex cursor-default space-x-1 rounded-lg py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out`}
+      className={
+        'group relative flex cursor-default space-x-1 rounded-lg py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out'
+      }
     >
       <Globe size={24} className={darkMode ? 'text-white' : 'text-gray-60'} />
       <p className={darkMode ? 'text-white' : 'text-gray-60'}>{currentLangText}</p>
@@ -57,7 +64,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="en"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('en')}
               >
                 {currentLang.en}
@@ -65,7 +74,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="fr"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('fr')}
               >
                 {currentLang.fr}
@@ -76,7 +87,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="en"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('en')}
               >
                 {currentLang.en}
@@ -85,7 +98,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="es"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('es')}
               >
                 {currentLang.es}
@@ -94,7 +109,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="fr"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('fr')}
               >
                 {currentLang.fr}
@@ -102,7 +119,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="de"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
+                }
                 onClick={() => changeLang('de')}
               >
                 {currentLang.de}
@@ -110,7 +129,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="it"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
+                }
                 onClick={() => changeLang('it')}
               >
                 {currentLang.it}
@@ -118,7 +139,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="zh"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
+                }
                 onClick={() => changeLang('zh')}
               >
                 {currentLang.zh}
@@ -126,7 +149,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="ru"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
+                }
                 onClick={() => changeLang('ru')}
               >
                 {currentLang.ru}
@@ -134,7 +159,9 @@ export default function LanguageBox({ darkMode, isBlackFriday }) {
               <Link
                 href={router.pathname}
                 locale="zh-tw"
-                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
+                className={
+                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
+                }
                 onClick={() => changeLang('zh-tw')}
               >
                 {currentLang['zh-tw']}
diff --git a/src/components/layout/components/navbar/ItemsNavigation.tsx b/src/components/layout/components/navbar/ItemsNavigation.tsx
index b0d705dee..f94aec4bd 100644
--- a/src/components/layout/components/navbar/ItemsNavigation.tsx
+++ b/src/components/layout/components/navbar/ItemsNavigation.tsx
@@ -1,151 +1,155 @@
 import Link from 'next/link';
 import { CaretDown } from '@phosphor-icons/react';
+import { usePathname } from 'next/navigation';
+
+interface ItemsNavigationProps {
+  textContent: Record<string, any>;
+  getTitles: Record<string, any>;
+  lang: string | undefined;
+  darkMode: boolean | undefined;
+  isQuizSection: boolean | undefined;
+}
 
 export const ItemsNavigation = ({
   lang,
-  menuState,
   darkMode,
   isQuizSection,
-  shouldHideItems,
   getTitles,
   textContent,
-  router,
-}) => {
+}: ItemsNavigationProps): JSX.Element => {
+  const pathname = usePathname();
   return (
     <>
       {/* Desktop links */}
-      {!shouldHideItems ? (
-        <div className="links">
-          <div className="hidden space-x-2 lg:inline-flex">
-            <Link
-              href="/pricing"
-              locale={lang}
-              className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
-                darkMode || isQuizSection
-                  ? `text-white hover:text-cool-gray-20 ${
-                      router.pathname.split('/')[1] === getTitles.links.pricing.trim().toLowerCase() && 'text-primary'
-                    }`
-                  : router.pathname.split('/')[1] === getTitles.links.pricing.trim().toLowerCase()
-                  ? 'text-primary'
-                  : 'text-gray-60 hover:text-primary'
-              }  text-base font-medium`}
-            >
-              {textContent.links.pricing}
-            </Link>
+      <div className="links">
+        <div className="hidden space-x-2 lg:inline-flex">
+          <Link
+            href="/pricing"
+            locale={lang}
+            className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
+              darkMode || isQuizSection
+                ? `text-white hover:text-cool-gray-20 ${
+                    pathname?.split('/')[1] === getTitles.links.pricing.trim().toLowerCase() && 'text-primary'
+                  }`
+                : pathname?.split('/')[1] === getTitles.links.pricing.trim().toLowerCase()
+                ? 'text-primary'
+                : 'text-gray-60 hover:text-primary'
+            }  text-base font-medium`}
+          >
+            {textContent.links.pricing}
+          </Link>
 
-            <div
-              className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
-                darkMode || isQuizSection
-                  ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-cool-gray-20'
-                  : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
-              } cursor-default rounded-lg`}
-            >
-              <span>{textContent.links.products}</span>
-              <CaretDown
-                size={20}
-                className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-gray-30"
-              />
+          <div
+            className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
+              darkMode || isQuizSection
+                ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-cool-gray-20'
+                : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
+            } cursor-default rounded-lg`}
+          >
+            <span>{textContent.links.products}</span>
+            <CaretDown
+              size={20}
+              className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-gray-30"
+            />
 
-              {/* Menu items */}
-              <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
-                <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
+            {/* Menu items */}
+            <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
+              <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
 
-                <div className="relative grid gap-0 whitespace-nowrap lg:grid-cols-1">
-                  <Link
-                    href="/drive"
-                    locale={lang}
-                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                    }`}
-                  >
-                    {textContent.products.drive}
-                  </Link>
+              <div className="relative grid gap-0 whitespace-nowrap lg:grid-cols-1">
+                <Link
+                  href="/drive"
+                  locale={lang}
+                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                  }`}
+                >
+                  {textContent.products.drive}
+                </Link>
 
-                  <a
-                    href="https://send.internxt.com"
-                    target="_blank"
-                    rel="noreferrer"
-                    className={`flex flex-row items-center justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                    }`}
-                  >
-                    <span>{textContent.products.send}</span>
-                  </a>
+                <a
+                  href="https://send.internxt.com"
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`flex flex-row items-center justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                  }`}
+                >
+                  <span>{textContent.products.send}</span>
+                </a>
 
-                  <Link
-                    href="/vpn"
-                    locale={lang}
-                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                    }`}
-                  >
-                    {textContent.products.vpn}
-                  </Link>
-                </div>
+                <Link
+                  href="/vpn"
+                  locale={lang}
+                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                  }`}
+                >
+                  {textContent.products.vpn}
+                </Link>
               </div>
             </div>
+          </div>
 
-            <div
-              className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
-                darkMode || isQuizSection
-                  ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-gray-20'
-                  : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
-              } cursor-default rounded-lg`}
-            >
-              <span>{textContent.links.ourValues}</span>
-              <CaretDown
-                size={20}
-                className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-cool-gray-30"
-              />
+          <div
+            className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
+              darkMode || isQuizSection
+                ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-gray-20'
+                : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
+            } cursor-default rounded-lg`}
+          >
+            <span>{textContent.links.ourValues}</span>
+            <CaretDown
+              size={20}
+              className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-cool-gray-30"
+            />
 
-              {/* Menu items */}
-              <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
-                <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
+            {/* Menu items */}
+            <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
+              <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
 
-                <div className="relative grid gap-0 lg:grid-cols-1">
-                  <Link
-                    href="/privacy"
-                    locale={lang}
-                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                    }`}
-                  >
-                    {textContent.ourValues.privacy}
-                  </Link>
+              <div className="relative grid gap-0 lg:grid-cols-1">
+                <Link
+                  href="/privacy"
+                  locale={lang}
+                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                  }`}
+                >
+                  {textContent.ourValues.privacy}
+                </Link>
 
-                  <Link
-                    href="/open-source"
-                    locale={lang}
-                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                    }`}
-                  >
-                    {textContent.ourValues.openSource}
-                  </Link>
-                </div>
+                <Link
+                  href="/open-source"
+                  locale={lang}
+                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                  }`}
+                >
+                  {textContent.ourValues.openSource}
+                </Link>
               </div>
             </div>
+          </div>
 
-            <Link
-              href="/about"
-              locale={lang}
-              className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
-                darkMode || isQuizSection
-                  ? `text-white hover:text-gray-20 ${
-                      router.pathname.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase() &&
-                      'text-primary'
-                    }`
-                  : router.pathname.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase()
-                  ? 'text-primary'
-                  : 'text-gray-60 hover:text-primary'
-              }
+          <Link
+            href="/about"
+            locale={lang}
+            className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
+              darkMode || isQuizSection
+                ? `text-white hover:text-gray-20 ${
+                    pathname?.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase() && 'text-primary'
+                  }`
+                : pathname?.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase()
+                ? 'text-primary'
+                : 'text-gray-60 hover:text-primary'
+            }
                   } text-base font-medium`}
-            >
-              {textContent.links.about}
-            </Link>
-          </div>
+          >
+            {textContent.links.about}
+          </Link>
         </div>
-      ) : null}
+      </div>
     </>
   );
 };
diff --git a/src/components/layout/footers/Footer.tsx b/src/components/layout/footers/Footer.tsx
index 8d3445ee8..fff15340a 100644
--- a/src/components/layout/footers/Footer.tsx
+++ b/src/components/layout/footers/Footer.tsx
@@ -8,18 +8,16 @@ import Image from 'next/legacy/image';
 import axios from 'axios';
 import { CaretDown, CaretUp, HardDrives, PaperPlaneTilt } from '@phosphor-icons/react';
 import moment from 'moment';
+import { GetServerSidePropsContext } from 'next';
 
-export default function Footer({
-  textContent,
-  lang,
-  hideNewsletter,
-  darkMode,
-}: Readonly<{
+interface FooterProps {
   textContent: any;
   lang: string;
   hideNewsletter?: boolean;
   darkMode?: boolean;
-}>) {
+}
+
+export default function Footer({ textContent, lang, hideNewsletter, darkMode }: Readonly<FooterProps>): JSX.Element {
   const [platforms, setPlatforms] = useState<any>();
   const year = moment().format('YYYY');
 
@@ -276,7 +274,7 @@ export default function Footer({
                     </a>
 
                     <a
-                      href={`/whitepaper/internxt-white-paper.pdf`}
+                      href={'/whitepaper/internxt-white-paper.pdf'}
                       target="_blank"
                       rel="noreferrer"
                       download={true}
@@ -425,7 +423,7 @@ export default function Footer({
                   <img
                     loading="lazy"
                     className="h-3.5"
-                    src={`/icons/social/X_logo.svg`}
+                    src={'/icons/social/X_logo.svg'}
                     draggable="false"
                     alt="twitter icon"
                   />
@@ -634,23 +632,23 @@ export default function Footer({
                         darkMode ? 'bg-black text-gray-30' : 'text-gray-60'
                       } space-y-8 p-4`}
                     >
-                      <a href="/newsletter-subscribe" target="_top" className="hover:text-primary">
+                      <Link href="/newsletter-subscribe" target="_top" className="hover:text-primary">
                         {textContent.FooterSection.sections.join.newsletter}
-                      </a>
-                      <a href="https://drive.internxt.com/new" target="_blank">
+                      </Link>
+                      <Link href="https://drive.internxt.com/new" target="_blank">
                         {textContent.FooterSection.sections.join.signup}
-                      </a>
+                      </Link>
 
-                      <a href="https://drive.internxt.com/login" target="_blank">
+                      <Link href="https://drive.internxt.com/login" target="_blank">
                         {textContent.FooterSection.sections.join.login}
-                      </a>
+                      </Link>
 
-                      <a href="https://github.com/internxt" target="_blank" rel="noreferrer">
+                      <Link href="https://github.com/internxt" target="_blank" rel="noreferrer">
                         {textContent.FooterSection.sections.join.github}
-                      </a>
-                      <a href="/whitepaper/internxt-white-paper.pdf" download={true} className="hover:text-primary">
+                      </Link>
+                      <Link href="/whitepaper/internxt-white-paper.pdf" download={true} className="hover:text-primary">
                         {textContent.FooterSection.sections.join.whitePaper}
-                      </a>
+                      </Link>
                       <Link href="/affiliates" target="_blank" legacyBehavior>
                         {textContent.FooterSection.sections.join.affiliates}
                       </Link>
@@ -678,14 +676,14 @@ export default function Footer({
                         darkMode ? 'bg-black text-gray-30' : 'text-gray-60'
                       } space-y-8 p-4`}
                     >
-                      <a
+                      <Link
                         href={`https://blog.internxt.com/${lang === 'es' ? 'es/' : ''}`}
                         target="_blank"
                         rel="noreferrer"
                         className="hover:text-primary"
                       >
                         {textContent.FooterSection.sections.resources.blog}
-                      </a>
+                      </Link>
                       <Link
                         href="/cloud-storage-comparison"
                         locale={lang}
@@ -789,7 +787,7 @@ export default function Footer({
                   <img
                     loading="lazy"
                     className="h-4"
-                    src={`/icons/social/X_logo.svg`}
+                    src={'/icons/social/X_logo.svg'}
                     draggable="false"
                     alt="twitter icon"
                   />
@@ -866,7 +864,7 @@ export default function Footer({
   );
 }
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   return {
diff --git a/src/components/layout/footers/MinimalFooter.tsx b/src/components/layout/footers/MinimalFooter.tsx
index 61e861b75..cc8f4cd09 100644
--- a/src/components/layout/footers/MinimalFooter.tsx
+++ b/src/components/layout/footers/MinimalFooter.tsx
@@ -13,9 +13,9 @@ export const MinimalFooter = ({ lang, footerLang, bgColor }: MinimalFooterProps)
   return (
     <div className={`flex w-full flex-col md:flex-row ${bgColor} items-center justify-center gap-4 py-16`}>
       <Link href="/" locale={lang} className="flex flex-shrink-0">
-        <img loading="lazy" src={`../../logos/internxt/cool-gray-90.svg`} alt="Internxt logo" />
+        <img loading="lazy" src={'../../logos/internxt/cool-gray-90.svg'} alt="Internxt logo" />
       </Link>
-      <p className={`text-xs text-cool-gray-60`}>{footerLang.copyright.line1 + year + footerLang.copyright.line2}</p>
+      <p className={'text-xs text-cool-gray-60'}>{footerLang.copyright.line1 + year + footerLang.copyright.line2}</p>
     </div>
   );
 };
diff --git a/src/components/layout/navbars/MinimalNavbar.tsx b/src/components/layout/navbars/MinimalNavbar.tsx
index 973621ddf..45fca67f4 100644
--- a/src/components/layout/navbars/MinimalNavbar.tsx
+++ b/src/components/layout/navbars/MinimalNavbar.tsx
@@ -24,7 +24,7 @@ export const MinimalNavbar = ({ lang }) => {
           <img
             loading="lazy"
             className="select-none"
-            src={getImage(`/logos/internxt/cool-gray-90.svg`)}
+            src={getImage('/logos/internxt/cool-gray-90.svg')}
             alt="Internxt logo"
           />
         </Link>
diff --git a/src/components/layout/navbars/Navbar.tsx b/src/components/layout/navbars/Navbar.tsx
index 93eb729bb..173eb6659 100644
--- a/src/components/layout/navbars/Navbar.tsx
+++ b/src/components/layout/navbars/Navbar.tsx
@@ -24,33 +24,16 @@ export interface NavbarProps {
   mode?: 'subscription' | 'payment';
 }
 
-const EXCLUDED_PATHS_FOR_RIBBON = [
-  '/pricing',
-  '/lifetime',
-  '/partner-discount',
-  '/techradar-discount',
-  '/stackcommerce',
-  '/dealfuel',
-  '/mightydeals',
-  '/temporary-email',
-  '/locker',
-  '/startpage',
-  '/oystervpn',
-  '/pccomponentes-products',
-  '/lifetime_special',
-  '/lifetime/celebration',
-];
-
 const DRIVE_WEB_URL = 'https://drive.internxt.com';
 
-export default function Navbar(props: Readonly<NavbarProps>) {
+export default function Navbar(props: Readonly<NavbarProps>): JSX.Element {
   const [menuState, setMenuState] = useState(false);
   const [scrolled, setScrolled] = useState(true);
   const [isRibbonHidden, setIsRibbonHidden] = useState<boolean>();
 
   const router = useRouter();
   const lang = router.locale;
-  const getTitles = require(`@/assets/lang/en/navbar.json`);
+  const getTitles = require('@/assets/lang/en/navbar.json');
 
   const shouldModifyRibbonStyle = isRibbonHidden;
   const shouldHideRibbon = true;
@@ -116,16 +99,15 @@ export default function Navbar(props: Readonly<NavbarProps>) {
                 />
               </Link>
             </div>
-            <ItemsNavigation
-              darkMode={props.darkMode}
-              getTitles={getTitles}
-              isQuizSection={props.isQuizSection}
-              shouldHideItems={props.isLinksHidden}
-              lang={lang}
-              menuState={menuState}
-              router={router}
-              textContent={props.textContent}
-            />
+            {props.isLinksHidden ? undefined : (
+              <ItemsNavigation
+                darkMode={props.darkMode}
+                getTitles={getTitles}
+                isQuizSection={props.isQuizSection}
+                lang={lang}
+                textContent={props.textContent}
+              />
+            )}
           </div>
 
           {/* Left side of navbar: Logo / Hamburguer menu */}
diff --git a/src/components/legal/TermsAndConditionsOverview.tsx b/src/components/legal/TermsAndConditionsOverview.tsx
index 1eb04692a..86f8b37a5 100644
--- a/src/components/legal/TermsAndConditionsOverview.tsx
+++ b/src/components/legal/TermsAndConditionsOverview.tsx
@@ -6,8 +6,12 @@ import MainSection from './MainSection';
 import { CalendarBlank } from '@phosphor-icons/react';
 import { isMobile } from 'react-device-detect';
 
-const TermsAndConditionsOverview = ({ textContent }) => {
-  const [itemSelected, setItemSelected] = useState();
+interface TermsAndConditionsOverviewProps {
+  textContent: Record<string, any>;
+}
+
+const TermsAndConditionsOverview = ({ textContent }: TermsAndConditionsOverviewProps): JSX.Element => {
+  const [itemSelected, setItemSelected] = useState<string>();
 
   // Set the scroll at center of the screen with anchor tag
   useEffect(() => {
@@ -44,9 +48,6 @@ const TermsAndConditionsOverview = ({ textContent }) => {
 
       {/* Mobile view */}
       <div className="flex flex-col overflow-hidden pt-16 lg:hidden">
-        {/* <div className="flex flex-col items-center justify-center bg-gradient-to-b from-primary to-primary-dark py-20 text-center">
-          <h1 className="mb-8 select-none text-6xl font-semibold text-white">{textContent.HeroSection.title}</h1>
-        </div> */}
         <div className="flex flex-col space-y-8 py-10 px-5">
           <div className="flex flex-row items-center space-x-2 text-base text-gray-80">
             <CalendarBlank size={17} />
diff --git a/src/components/legal/components/SelectSection.tsx b/src/components/legal/components/SelectSection.tsx
index cd735ce4b..82d63d432 100644
--- a/src/components/legal/components/SelectSection.tsx
+++ b/src/components/legal/components/SelectSection.tsx
@@ -3,11 +3,17 @@ import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { CaretDown } from '@phosphor-icons/react';
 
-const SelectSection = ({ textContent, itemSelected, setItemSelected }) => {
+interface SelectSectionProps {
+  textContent: Record<string, any>;
+  itemSelected?: string;
+  setItemSelected: (itemSelected: string) => void;
+}
+
+const SelectSection = ({ textContent, itemSelected, setItemSelected }: SelectSectionProps): JSX.Element => {
   function linkTitles() {
-    let titles: string[] = [];
-    for (let key in textContent) {
-      if (textContent.hasOwnProperty(key) && key.startsWith('title')) {
+    const titles: string[] = [];
+    for (const key in textContent) {
+      if (key.startsWith('title')) {
         titles.push(textContent[key]);
       }
     }
diff --git a/src/components/lifetime/CtaSection.tsx b/src/components/lifetime/CtaSection.tsx
index d978b91a0..15627444d 100644
--- a/src/components/lifetime/CtaSection.tsx
+++ b/src/components/lifetime/CtaSection.tsx
@@ -8,7 +8,7 @@ const CtaSection = ({ textContent }) => {
         </div>
         <button
           onClick={() => {
-            window.location.href = `#payment`;
+            window.location.href = '#payment';
           }}
           className="flex max-w-[260px] cursor-pointer flex-col items-center rounded-lg bg-white text-center hover:bg-blue-10"
         >
diff --git a/src/components/lifetime/HeroSection.tsx b/src/components/lifetime/HeroSection.tsx
index 0dcd2c4ed..5f4eee325 100644
--- a/src/components/lifetime/HeroSection.tsx
+++ b/src/components/lifetime/HeroSection.tsx
@@ -26,7 +26,7 @@ const HeroSection = ({
 }: HeroSectionProps) => {
   return (
     <section
-      className={`overflow-hidden bg-cover bg-no-repeat py-20`}
+      className={'overflow-hidden bg-cover bg-no-repeat py-20'}
       style={{
         backgroundImage: `url('${bgImage}')`,
       }}
@@ -58,7 +58,7 @@ const HeroSection = ({
               </div>
               <button
                 onClick={() => {
-                  window.location.href = `#payment`;
+                  window.location.href = '#payment';
                 }}
                 className="flex  cursor-pointer flex-col items-center rounded-lg bg-primary text-center hover:bg-primary-dark"
               >
diff --git a/src/components/lifetime/PriceBannerForCampaigns.tsx b/src/components/lifetime/PriceBannerForCampaigns.tsx
index 4c3386e82..b06fef8df 100644
--- a/src/components/lifetime/PriceBannerForCampaigns.tsx
+++ b/src/components/lifetime/PriceBannerForCampaigns.tsx
@@ -11,7 +11,7 @@ export const PriceBannerForCampaigns = ({ textContent }) => {
   return (
     <div className={`${shouldShowBanner ? 'flex' : 'hidden'} flex-col overflow-hidden px-5`}>
       <div
-        className={`flex flex-col  justify-between rounded-[32px] bg-white lg:w-full lg:flex-row`}
+        className={'flex flex-col  justify-between rounded-[32px] bg-white lg:w-full lg:flex-row'}
         style={{
           backgroundImage: `url(${getImage('/images/campaigns/euro/grass.webp')})`,
         }}
diff --git a/src/components/lifetime/celebration/HeroSection.tsx b/src/components/lifetime/celebration/HeroSection.tsx
index 3476eb988..bdb1b1614 100644
--- a/src/components/lifetime/celebration/HeroSection.tsx
+++ b/src/components/lifetime/celebration/HeroSection.tsx
@@ -39,7 +39,7 @@ const HeroSection = ({ textContent, hideTimer }: HeroSectionProps) => {
               </div>
               <button
                 onClick={() => {
-                  window.location.href = `#payment`;
+                  window.location.href = '#payment';
                 }}
                 className="flex  cursor-pointer flex-col items-center rounded-lg bg-primary text-center hover:bg-primary-dark"
               >
diff --git a/src/components/media-area/KitSection.tsx b/src/components/media-area/KitSection.tsx
index 407274bde..7c8691d6d 100644
--- a/src/components/media-area/KitSection.tsx
+++ b/src/components/media-area/KitSection.tsx
@@ -25,7 +25,7 @@ const KitSection = ({ textContent }) => {
         </div>
         <div className="flex flex-row flex-wrap items-stretch gap-10">
           <KitCard
-            downloadImagesLink={`https://internxt.com/media-area/internxt-logo-set.zip`}
+            downloadImagesLink={'https://internxt.com/media-area/internxt-logo-set.zip'}
             image={getImage('/images/media-area/inxt-logo-set.svg')}
             textContent={textContent.firstSection}
           />
diff --git a/src/components/newsletter/MakePrivacySection.tsx b/src/components/newsletter/MakePrivacySection.tsx
index db6055cfc..b1cd72608 100644
--- a/src/components/newsletter/MakePrivacySection.tsx
+++ b/src/components/newsletter/MakePrivacySection.tsx
@@ -1,25 +1,25 @@
-const MakePrivacySection = ({ textContent }) => {
-  return (
-    <section className="overflow-hidden ">
-      <div className="flex w-full flex-col items-center justify-center space-y-12 bg-gray-1 py-20 px-5">
-        <div className="flex flex-col items-center justify-center space-y-6 text-center">
-          <h2 className="text-5xl font-semibold text-gray-100">{textContent.title}</h2>
-          <p className="max-w-[774px] text-xl text-gray-80">{textContent.description}</p>
-          <button className="flex w-full justify-center rounded-lg bg-primary px-5 py-3 font-medium text-white lg:w-max">
-            {textContent.cta}
-          </button>
-        </div>
-        <picture className="max-w-[774px]">
-          <source srcSet="/images/home/internxt_secure_cloud_storage.webp" type="image/webp" />
-          <img
-            src="/images/home/internxt_secure_cloud_storage.webp"
-            alt="Internxt secure cloud storage"
-            draggable={false}
-          />
-        </picture>
+import { getImage } from '@/lib/getImage';
+
+const MakePrivacySection = ({ textContent }): JSX.Element => (
+  <section className="overflow-hidden ">
+    <div className="flex w-full flex-col items-center justify-center space-y-12 bg-gray-1 py-20 px-5">
+      <div className="flex flex-col items-center justify-center space-y-6 text-center">
+        <h2 className="text-5xl font-semibold text-gray-100">{textContent.title}</h2>
+        <p className="max-w-[774px] text-xl text-gray-80">{textContent.description}</p>
+        <button className="flex w-full justify-center rounded-lg bg-primary px-5 py-3 font-medium text-white lg:w-max">
+          {textContent.cta}
+        </button>
       </div>
-    </section>
-  );
-};
+      <picture className="max-w-[774px]">
+        <source srcSet="/images/home/internxt_secure_cloud_storage.webp" type="image/webp" />
+        <img
+          src={getImage('/images/home/internxt_secure_cloud_storage.webp')}
+          alt="Internxt secure cloud storage"
+          draggable={false}
+        />
+      </picture>
+    </div>
+  </section>
+);
 
 export default MakePrivacySection;
diff --git a/src/components/partner-discount/HeroSection.tsx b/src/components/partner-discount/HeroSection.tsx
index 0301cdc3e..1d37edc42 100644
--- a/src/components/partner-discount/HeroSection.tsx
+++ b/src/components/partner-discount/HeroSection.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
 import Image from 'next/legacy/image';
 import { notificationService } from '@/components/Snackbar';
+import { getImage } from '@/lib/getImage';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const description = {
     part1: textContent.description.split('SPECIAL15')[0],
     special15: textContent.description.substring(
@@ -58,7 +62,7 @@ const HeroSection = ({ textContent }) => {
           <div className="hidden flex-col rounded-3xl lg:flex">
             <Image
               alt="Woman with laptop"
-              src="/images/partners-discount/Internxt_partners_discount.webp"
+              src={getImage('/images/partners-discount/Internxt_partners_discount.webp')}
               className=" rounded-3xl"
               width={588}
               height={560}
@@ -70,7 +74,7 @@ const HeroSection = ({ textContent }) => {
           <div className="flex flex-col rounded-3xl shadow-2xl lg:hidden">
             <Image
               alt="Woman with laptop"
-              src="/images/partners-discount/Internxt_partners_discount_mobile.webp"
+              src={getImage('/images/partners-discount/Internxt_partners_discount_mobile.webp')}
               className=" rounded-3xl"
               width={588}
               height={660}
diff --git a/src/components/partner-discount/InfoSection.tsx b/src/components/partner-discount/InfoSection.tsx
index 90fe04fcc..ee6f72513 100644
--- a/src/components/partner-discount/InfoSection.tsx
+++ b/src/components/partner-discount/InfoSection.tsx
@@ -1,7 +1,10 @@
 import { ShieldCheck, LockKey, Scales, Fingerprint } from '@phosphor-icons/react';
-import React from 'react';
 
-const InfoSection = ({ textContent }) => {
+interface InfoSectionProps {
+  textContent: Record<string, any>;
+}
+
+const InfoSection = ({ textContent }: InfoSectionProps): JSX.Element => {
   const cards = [
     {
       id: 1,
@@ -40,7 +43,10 @@ const InfoSection = ({ textContent }) => {
           <div className="grid grid-cols-1 flex-row flex-wrap justify-center gap-8 sm:grid-cols-2">
             {cards.map((card) => {
               return (
-                <div className="flex flex-col items-start justify-start space-y-6 rounded-2xl bg-cool-gray-5 p-8 sm:p-10 md:max-w-[488px]">
+                <div
+                  className="flex flex-col items-start justify-start space-y-6 rounded-2xl bg-cool-gray-5 p-8 sm:p-10 md:max-w-[488px]"
+                  key={card.title}
+                >
                   <card.icon className="text-4xl text-primary" />
                   <h4 className="text-2xl font-medium">{card.title}</h4>
                   <h5 className="text-lg text-cool-gray-80 sm:text-base">{card.description}</h5>
diff --git a/src/components/partner-discount/PaymentSection.tsx b/src/components/partner-discount/PaymentSection.tsx
index 0d7299ed4..8911cef79 100644
--- a/src/components/partner-discount/PaymentSection.tsx
+++ b/src/components/partner-discount/PaymentSection.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
 import { Coin, CreditCard, Detective } from '@phosphor-icons/react';
 import PriceTable from './PriceTable';
 
-const PaymentSection = ({ lang, textContent }) => {
+interface PaymentSectionProps {
+  textContent: Record<string, any>;
+}
+
+const PaymentSection = ({ textContent }: PaymentSectionProps): JSX.Element => {
   return (
     <section id="payment" className="overflow-hidden bg-gray-1 py-20">
       <div className="flex flex-col space-y-8 lg:pt-0">
diff --git a/src/components/partnerships/freemonth/FeatureSection.js b/src/components/partnerships/freemonth/FeatureSection.js
deleted file mode 100644
index 99c837b4e..000000000
--- a/src/components/partnerships/freemonth/FeatureSection.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import { UilEyeSlash, UilTachometerFast, UilLock, UilDesktop, UilChatBubbleUser } from '@iconscout/react-unicons';
-
-const FeatureSection = ({ textContent }) => (
-  <section>
-    <div className="flex flex-col items-center py-16">
-      <div className="flex flex-col items-center text-center mb-10 lg:mb-16 font-medium px-6">
-        <h2 className="eyebrow text-4xl">
-          {textContent.title.line1}
-          <br className="hidden sm:inline-flex" /> {textContent.title.line2}
-        </h2>
-      </div>
-
-      <div className="flex flex-row flex-wrap justify-center w-full max-w-7xl">
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilEyeSlash className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.privacy.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.privacy.description.line1} {textContent.features.privacy.description.line2}{' '}
-              {textContent.features.privacy.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilTachometerFast className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.speed.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.speed.description.line1} {textContent.features.speed.description.line2}{' '}
-              {textContent.features.speed.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilLock className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.security.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.security.description.line1} {textContent.features.security.description.line2}{' '}
-              {textContent.features.security.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilDesktop className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.multiplatform.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.multiplatform.description.line1}{' '}
-              {textContent.features.multiplatform.description.line2}{' '}
-              {textContent.features.multiplatform.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilChatBubbleUser className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.support.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.support.description.line1} {textContent.features.support.description.line2}{' '}
-              {textContent.features.support.description.line3}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div className="relative">
-      <div className="absolute top-0 left-0 w-full h-full z-0" />
-
-      <div className="relative flex flex-col items-center py-20 z-20">
-        <div className="flex flex-col items-center text-center mb-8 px-6">
-          <h3 className="text-4xl font-medium mb-4">
-            {textContent.buyNowSection.title.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.title.line2}
-          </h3>
-
-          <h4 className="text-lg lg:text-xl text-cool-gray-80">
-            {textContent.buyNowSection.description.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line3}
-          </h4>
-        </div>
-
-        <a
-          href="#buy"
-          className="flex justify-center sm:inline-flex px-6 py-2 mb-16 border border-transparent rounded-full text-base font-medium text-white bg-primary active:bg-primary-dark focus:bg-primary-dark outline-none transition-all duration-75"
-        >
-          <span className="whitespace-nowrap">{textContent.buyNowSection.freemonth}</span>
-        </a>
-
-        <div className="flex flex-col px-6">
-          <img
-            className="max-h-96"
-            loading="lazy"
-            src="../../images/partnerships/devices.png"
-            alt="Eye slash"
-            draggable="false"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-);
-
-export default FeatureSection;
diff --git a/src/components/partnerships/freemonth/HeroSection.js b/src/components/partnerships/freemonth/HeroSection.js
deleted file mode 100644
index 80733c45d..000000000
--- a/src/components/partnerships/freemonth/HeroSection.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable prefer-const */
-import React from 'react';
-import PriceCard from './PriceCard';
-
-const HeroSection = ({ textContent, lang }) => {
-  const pricings = {
-    TB2: {
-      storage: '2TB',
-      price: '9.99',
-    },
-  };
-
-  return (
-    <section
-      id="buy"
-      className="relative flex w-full flex-col bg-gradient-to-b from-white via-neutral-10 to-white pt-16"
-    >
-      <div className="flex flex-col items-center justify-center space-y-20 px-8 py-20 lg:px-32 xl:flex-row xl:space-y-0 xl:space-x-40 xl:py-24">
-        {/* Main title */}
-        <div className="flex flex-shrink-0 flex-col text-left">
-          <h1 className="mb-4 text-5xl font-medium sm:mb-8 md:text-6xl">
-            {textContent.title.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.title.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.title.line3}
-            <br className="hidden sm:inline-flex" /> {textContent.title.line4}
-          </h1>
-
-          <h2 className="text-lg text-cool-gray-80 sm:text-xl">
-            {textContent.description.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.description.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.description.line3}
-          </h2>
-        </div>
-
-        {/* Features grid */}
-        <PriceCard
-          planType="individual"
-          storage={pricings.TB2.storage}
-          price={pricings.TB2.price}
-          billingFrequency={1}
-          cta={['checkout', 'TB21']}
-          lang={'en'}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default HeroSection;
diff --git a/src/components/partnerships/freemonth/PriceCard.js b/src/components/partnerships/freemonth/PriceCard.js
deleted file mode 100644
index 12cb50c29..000000000
--- a/src/components/partnerships/freemonth/PriceCard.js
+++ /dev/null
@@ -1,306 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { checkout } from '../../../lib/auth';
-
-const PriceCard = ({
-  planType,
-  storage,
-  price,
-  priceBefore,
-  billingFrequency,
-  cta,
-  setUsers,
-  getUsers,
-  popular,
-  lang,
-}) => {
-  const [stripeObject, setStripeObject] = useState({});
-
-  const billingFrequencyList = {
-    1: 'monthly',
-    6: 'semiannually',
-    12: 'annually',
-  };
-
-  const totalBilled = Math.abs(price * billingFrequency).toFixed(2);
-  const teamsBilled = (totalBilled * getUsers).toFixed(2);
-  const MAX_USERS = 200;
-  const contentText = require(`../../../assets/lang/${lang}/priceCard.json`);
-
-  useEffect(() => {
-    if (cta[0] === 'checkout') {
-      const stripeObj = { product: cta[1] };
-      setStripeObject(stripeObj);
-    }
-  }, [cta]);
-
-  return (
-    <div
-      className={`priceCard card ${
-        popular ? 'bg-primary shadow-lg ring-2 ring-primary' : ''
-      } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl sm:m-4`}
-    >
-      <div
-        className={`mostPopular ${
-          popular ? '' : 'hidden'
-        } flex flex-col items-center justify-center py-2 text-xs font-medium text-white`}
-      >
-        {contentText.mostPopular}
-      </div>
-
-      <div className={`info flex flex-col items-center justify-center bg-white p-6 ${popular ? 'rounded-t-2xl' : ''}`}>
-        <div
-          className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
-            popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
-          } rounded-full font-medium`}
-        >
-          <p>
-            {storage}
-            <span className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-sm`}>
-              {contentText.perUserSlash}
-            </span>
-          </p>
-        </div>
-
-        <div
-          className={`planPrice flex flex-col items-center justify-center py-8 ${
-            priceBefore ? 'space-y-1' : 'space-y-2'
-          }`}
-        >
-          <div className="flex flex-col items-center">
-            <div
-              className={`priceBreakdown flex ${
-                planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
-              }`}
-            >
-              <span
-                className={`perUser ${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-xs font-medium`}
-              >
-                {contentText.perUser}
-              </span>
-
-              <p className="flex flex-row items-start space-x-0.5 font-medium text-green-old-50">
-                <span className={`currency ${price <= 0 ? 'hidden' : ''} text-2xl`}>€</span>
-                <span className="price text-5xl font-bold">0.00</span>
-                <span className={`currency ${price <= 0 ? 'hidden' : ''} pointer-events-none text-2xl opacity-0`}>
-                  €
-                </span>
-              </p>
-            </div>
-
-            <p className="text-lg font-medium text-cool-gray-100">{contentText.firstMonth}</p>
-          </div>
-
-          <span
-            className={`priceBefore ${
-              priceBefore ? 'flex' : 'hidden'
-            } text-base font-medium text-neutral-80 line-through`}
-          >
-            €{priceBefore}
-          </span>
-
-          <div
-            className={`totalBilling ${
-              planType.toLowerCase() === 'individual' ? 'flex' : 'hidden'
-            } flex-row text-xs text-neutral-80`}
-          >
-            <p className={`${price <= 0 ? 'hidden' : ''}`}>
-              <span className={`totalBilled ${billingFrequency < 0 ? 'hidden' : ''}`}>
-                <span className="currency text-supporting-2">€</span>
-                {totalBilled}{' '}
-              </span>
-
-              <span className="billingFrequency">
-                {contentText.billingFrequencyLabel[billingFrequencyList[billingFrequency]]}{' '}
-                {contentText.billingFrequencyLabel.afterMonth}
-              </span>
-            </p>
-
-            <p className={`${price <= 0 ? '' : 'hidden'}`}>{contentText.price.free}</p>
-          </div>
-        </div>
-
-        <div
-          className={`businessUserCount ${
-            planType.toLowerCase() === 'individual' ? 'hidden' : 'flex'
-          } mb-4 w-full flex-col rounded-lg bg-neutral-10 p-4 ring-1 ring-neutral-20`}
-        >
-          <div className="input relative flex flex-row justify-between rounded-lg bg-white ring-1 ring-neutral-30">
-            <button
-              type="button"
-              onClick={() => {
-                if (getUsers >= 3) {
-                  setUsers(parseInt(getUsers, 10) - 1);
-                } else setUsers(2);
-              }}
-              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
-                getUsers > 2
-                  ? 'bg-primary text-white active:bg-primary-dark'
-                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
-              } sm:duration-50 z-10 select-none rounded-l-lg text-2xl font-light transition-all`}
-            >
-              <span className="mb-1">-</span>
-            </button>
-
-            <button
-              type="button"
-              onClick={() => {
-                if (getUsers <= MAX_USERS - 1) {
-                  setUsers(parseInt(getUsers, 10) + 1);
-                } else setUsers(MAX_USERS);
-              }}
-              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
-                getUsers < MAX_USERS
-                  ? 'bg-primary text-white active:bg-primary-dark'
-                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
-              } sm:duration-50 z-10 select-none rounded-r-lg text-2xl font-light transition-all`}
-            >
-              <span className="mb-1">+</span>
-            </button>
-
-            <label
-              htmlFor={`users_${storage}`}
-              className="absolute top-0 left-0 flex h-full w-full cursor-text flex-row items-center justify-center text-xl font-medium sm:text-base"
-            >
-              <div className="relative flex h-full flex-row items-center">
-                <span
-                  className={`pointer-events-none ${
-                    Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? '' : 'opacity-0'
-                  }`}
-                >
-                  {Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? 0 : getUsers}
-                </span>
-
-                {/* eslint-disable-next-line no-unused-expressions */}
-                <input
-                  id={`users_${storage}`}
-                  type="number"
-                  inputMode="numeric"
-                  min="2"
-                  max={MAX_USERS}
-                  step="1"
-                  value={getUsers}
-                  onChange={(e) => {
-                    e.target.value.toString().startsWith('0')
-                      ? (e.target.value = e.target.value.toString().slice(1, e.target.value.toString().length))
-                      : setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value);
-                  }}
-                  onBlur={(e) => {
-                    setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value < 2 ? 2 : e.target.value);
-                  }}
-                  className="absolute left-0 w-14 min-w-full appearance-none bg-transparent font-medium outline-none"
-                />
-              </div>
-
-              <span className="ml-1 select-none">{contentText.users}</span>
-            </label>
-          </div>
-
-          <div className="mt-4 flex w-full flex-row justify-between text-neutral-700">
-            <span className="font-medium">Total:</span>
-
-            <div className="flex flex-row items-end">
-              <div className="flex flex-row items-start">
-                <span className="mt-0.5 mr-0.5 text-xs">€</span>
-
-                <span>{teamsBilled}</span>
-              </div>
-
-              <span className="mb-1 ml-0.5 text-xs text-neutral-100">
-                {contentText.billingFrequencyLabelSmall[billingFrequencyList[billingFrequency]]}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div
-          tabIndex={0}
-          // eslint-disable-next-line no-unused-expressions
-          // onClick={() => {
-          //   cta[0] === 'checkout'
-          //     ? checkout({
-          //         priceId: cta[1],
-          //       })
-          //     : (location.href = cta[1]);
-          // }}
-          className="flex w-full flex-col items-center text-center"
-        >
-          <div className="subscribePlan flex w-full origin-center cursor-pointer select-none items-center justify-center rounded-lg border border-transparent bg-primary px-6 py-2 text-lg  font-medium text-white transition-all duration-75 focus:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-blue-20 focus:ring-offset-2 active:translate-y-0.5 active:bg-primary-dark sm:text-base">
-            <p className={`${price <= 0 ? 'hidden' : ''} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
-              {contentText.cta.freemonth}
-            </p>
-
-            <p className={`${price <= 0 ? '' : 'hidden'} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
-              {contentText.cta.signUpNow}
-            </p>
-
-            <p className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''}`}>{contentText.cta.getStarted}</p>
-          </div>
-
-          <p className="mt-2 text-xs text-cool-gray-40">{contentText.onlyForNewClients}</p>
-        </div>
-      </div>
-
-      <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
-        <div className="flex flex-col space-y-2">
-          <div className="flex flex-row items-start space-x-2 font-medium">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span className={`${price <= 0 ? 'hidden' : 'flex'}`}>
-              {billingFrequency < 0
-                ? `${contentText.features.enjoyForever.enjoy} ${storage} ${contentText.features.enjoyForever.forever}`
-                : `${contentText.features.moneyBack}`}
-            </span>
-
-            <span className={`${price <= 0 ? 'flex' : 'hidden'}`}>
-              {contentText.features.enjoyForever.enjoy} {storage} {contentText.features.enjoyForever.forever}
-            </span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.encryptedFiles}</span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.accessFromAnywhere}</span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.allServices}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PriceCard;
diff --git a/src/components/partnerships/guru99/FeatureSection.js b/src/components/partnerships/guru99/FeatureSection.js
deleted file mode 100644
index 3e4f8e1e3..000000000
--- a/src/components/partnerships/guru99/FeatureSection.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import { UilEyeSlash, UilTachometerFast, UilLock, UilDesktop, UilChatBubbleUser } from '@iconscout/react-unicons';
-
-const FeatureSection = ({ textContent }) => (
-  <section>
-    <div className="flex flex-col items-center py-16">
-      <div className="flex flex-col items-center text-center mb-10 lg:mb-16 font-medium px-6">
-        <h2 className="eyebrow text-4xl">
-          {textContent.title.line1}
-          <br className="hidden sm:inline-flex" /> {textContent.title.line2}
-        </h2>
-      </div>
-
-      <div className="flex flex-row flex-wrap justify-center w-full max-w-7xl">
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilEyeSlash className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.privacy.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.privacy.description.line1} {textContent.features.privacy.description.line2}{' '}
-              {textContent.features.privacy.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilTachometerFast className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.speed.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.speed.description.line1} {textContent.features.speed.description.line2}{' '}
-              {textContent.features.speed.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilLock className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.security.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.security.description.line1} {textContent.features.security.description.line2}{' '}
-              {textContent.features.security.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilDesktop className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.multiplatform.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.multiplatform.description.line1}{' '}
-              {textContent.features.multiplatform.description.line2}{' '}
-              {textContent.features.multiplatform.description.line3}
-            </span>
-          </div>
-        </div>
-
-        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
-          <UilChatBubbleUser className="w-12 h-12 text-blue-50" />
-
-          <div className="flex flex-col items-center text-center space-y-3">
-            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.support.title}</span>
-
-            <span className="text-cool-gray-80">
-              {textContent.features.support.description.line1} {textContent.features.support.description.line2}{' '}
-              {textContent.features.support.description.line3}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div className="relative">
-      <div className="absolute top-0 left-0 w-full h-full z-0" />
-
-      <div className="relative flex flex-col items-center py-20 z-20">
-        <div className="flex flex-col items-center text-center mb-8 px-6">
-          <h3 className="text-4xl font-medium mb-4">
-            {textContent.buyNowSection.title.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.title.line2}
-          </h3>
-
-          <h4 className="text-lg lg:text-xl text-cool-gray-80">
-            {textContent.buyNowSection.description.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line3}
-          </h4>
-        </div>
-
-        <a
-          href="#buy"
-          className="flex justify-center sm:inline-flex px-6 py-2 mb-16 border border-transparent rounded-full text-base font-medium text-white bg-primary active:bg-primary-dark focus:bg-primary-dark outline-none transition-all duration-75"
-        >
-          <span className="whitespace-nowrap">{textContent.buyNowSection.cta}</span>
-        </a>
-
-        <div className="flex flex-col px-6">
-          <img
-            className="max-h-96"
-            loading="lazy"
-            src="../../images/partnerships/devices.png"
-            alt="Eye slash"
-            draggable="false"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-);
-
-export default FeatureSection;
diff --git a/src/components/partnerships/guru99/HeroSection.js b/src/components/partnerships/guru99/HeroSection.js
deleted file mode 100644
index 5368d775c..000000000
--- a/src/components/partnerships/guru99/HeroSection.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable prefer-const */
-import React, { useState, useEffect } from 'react';
-import Image from "next/legacy/image";
-import PriceCard from './PriceCard';
-
-const HeroSection = ({ textContent, lang }) => {
-  const pricings = {
-    TB2: {
-      storage: '2TB',
-      price: '9.99',
-      stripeID: 'TB2_Free_30_Days_Guru99_Monthly',
-    },
-  };
-  const [showCoupon, setShowCoupon] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShowCoupon(true);
-    }, 350);
-  }, []);
-
-  return (
-    <section
-      id="buy"
-      className="relative flex w-full flex-col bg-gradient-to-b from-white via-neutral-10 to-white pt-16"
-    >
-      <div
-        className={`flex flex-row items-center justify-center p-6 text-center sm:h-16 sm:p-0 ${
-          showCoupon ? 'bg-primary text-blue-20' : 'bg-white text-blue-40'
-        } select-all transition-colors duration-1000 ease-in-out`}
-      >
-        <div>
-          <span className="select-none">{textContent.coupon.before}</span>
-          <span
-            className={`${
-              showCoupon ? 'text-white' : 'text-blue-50'
-            } duration-650 select-all px-1.5 font-bold tracking-wide underline transition-colors ease-in-out`}
-          >
-            GURU99
-          </span>
-          <span className="select-none">{textContent.coupon.after}</span>
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center justify-center space-y-20 px-8 py-20 lg:px-32 xl:flex-row xl:space-y-0 xl:space-x-40 xl:py-24">
-        {/* Main title */}
-        <div className="flex flex-shrink-0 flex-col text-left">
-          <div className="mb-4 flex h-10 flex-row items-center justify-center self-start rounded-lg bg-cool-gray-10 px-5">
-            <p className="mr-2 text-base font-medium text-cool-gray-80">{textContent.partnershipWith}</p>
-            <Image
-              src="/images/partnerships/guru99/logo.webp"
-              width={61.5}
-              height={16}
-              className="pointer-events-none"
-              alt="Logo image"
-            />
-          </div>
-
-          <h1 className="mb-4 text-5xl font-medium leading-tight sm:mb-8 md:text-6xl">
-            {textContent.title.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.title.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.title.line3}
-          </h1>
-
-          <h2 className="text-lg text-cool-gray-80 sm:text-xl">
-            {textContent.description.line1}
-            <br className="hidden sm:inline-flex" /> {textContent.description.line2}
-            <br className="hidden sm:inline-flex" /> {textContent.description.line3}
-          </h2>
-        </div>
-
-        {/* Features grid */}
-        <PriceCard
-          planType="individual"
-          storage={pricings.TB2.storage}
-          price={pricings.TB2.price}
-          billingFrequency={1}
-          cta={['checkout', `${pricings.TB2.stripeID}`]}
-          lang={lang}
-        />
-      </div>
-    </section>
-  );
-};
-
-export default HeroSection;
diff --git a/src/components/partnerships/guru99/PriceCard.js b/src/components/partnerships/guru99/PriceCard.js
deleted file mode 100644
index ca336f43f..000000000
--- a/src/components/partnerships/guru99/PriceCard.js
+++ /dev/null
@@ -1,304 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable prefer-destructuring */
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-nested-ternary */
-import React, { useEffect, useState } from 'react';
-
-const PriceCard = ({
-  planType,
-  storage,
-  price,
-  priceBefore,
-  billingFrequency,
-  cta,
-  setUsers,
-  getUsers,
-  popular,
-  lang,
-}) => {
-  const [stripeObject, setStripeObject] = useState({});
-
-  const billingFrequencyList = {
-    1: 'monthly',
-    6: 'semiannually',
-    12: 'annually',
-  };
-
-  const totalBilled = Math.abs(price * billingFrequency).toFixed(2);
-  const teamsBilled = (totalBilled * getUsers).toFixed(2);
-  const MAX_USERS = 200;
-  const contentText = require(`../../../assets/lang/${lang}/priceCard.json`);
-
-  useEffect(() => {
-    if (cta[0] === 'checkout') {
-      const stripeObj = { product: cta[1] };
-      setStripeObject(stripeObj);
-    }
-  }, [cta]);
-
-  return (
-    <div
-      className={`priceCard card ${
-        popular ? 'bg-primary shadow-lg ring-2 ring-primary' : ''
-      } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl sm:m-4`}
-    >
-      <div
-        className={`mostPopular ${
-          popular ? '' : 'hidden'
-        } flex flex-col items-center justify-center py-2 text-xs font-medium text-white`}
-      >
-        {contentText.mostPopular}
-      </div>
-
-      <div className={`info flex flex-col items-center justify-center bg-white p-6 ${popular ? 'rounded-t-2xl' : ''}`}>
-        <div
-          className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
-            popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
-          } rounded-full font-medium`}
-        >
-          <p>
-            {storage}
-            <span className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-sm`}>
-              {contentText.perUserSlash}
-            </span>
-          </p>
-        </div>
-
-        <div
-          className={`planPrice flex flex-col items-center justify-center py-8 ${
-            priceBefore ? 'space-y-1' : 'space-y-2'
-          }`}
-        >
-          <div className="flex flex-col items-center">
-            <div
-              className={`priceBreakdown flex ${
-                planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
-              }`}
-            >
-              <span
-                className={`perUser ${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-xs font-medium`}
-              >
-                {contentText.perUser}
-              </span>
-
-              <p className="flex flex-row items-start space-x-0.5 font-medium text-green-old-50">
-                <span className={`currency ${price <= 0 ? 'hidden' : ''} text-2xl`}>€</span>
-                <span className="price text-5xl font-bold">0.00</span>
-                <span className={`currency ${price <= 0 ? 'hidden' : ''} pointer-events-none text-2xl opacity-0`}>
-                  €
-                </span>
-              </p>
-            </div>
-
-            <p className="text-lg font-medium text-cool-gray-100">{contentText.firstMonth}</p>
-          </div>
-
-          <span
-            className={`priceBefore ${
-              priceBefore ? 'flex' : 'hidden'
-            } text-base font-medium text-neutral-80 line-through`}
-          >
-            €{priceBefore}
-          </span>
-
-          <div
-            className={`totalBilling ${
-              planType.toLowerCase() === 'individual' ? 'flex' : 'hidden'
-            } flex-row text-xs text-neutral-80`}
-          >
-            <p className={`${price <= 0 ? 'hidden' : ''}`}>
-              <span className={`totalBilled ${billingFrequency < 0 ? 'hidden' : ''}`}>
-                <span className="currency text-supporting-2">€</span>
-                {totalBilled}{' '}
-              </span>
-
-              <span className="billingFrequency">
-                {contentText.billingFrequencyLabel[billingFrequencyList[billingFrequency]]}{' '}
-                {contentText.billingFrequencyLabel.afterMonth}
-              </span>
-            </p>
-
-            <p className={`${price <= 0 ? '' : 'hidden'}`}>{contentText.price.free}</p>
-          </div>
-        </div>
-
-        <div
-          className={`businessUserCount ${
-            planType.toLowerCase() === 'individual' ? 'hidden' : 'flex'
-          } mb-4 w-full flex-col rounded-lg bg-neutral-10 p-4 ring-1 ring-neutral-20`}
-        >
-          <div className="input relative flex flex-row justify-between rounded-lg bg-white ring-1 ring-neutral-30">
-            <button
-              type="button"
-              onClick={() => {
-                if (getUsers >= 3) {
-                  setUsers(parseInt(getUsers, 10) - 1);
-                } else setUsers(2);
-              }}
-              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
-                getUsers > 2
-                  ? 'bg-primary text-white active:bg-primary-dark'
-                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
-              } sm:duration-50 z-10 select-none rounded-l-lg text-2xl font-light transition-all`}
-            >
-              <span className="mb-1">-</span>
-            </button>
-
-            <button
-              type="button"
-              onClick={() => {
-                if (getUsers <= MAX_USERS - 1) {
-                  setUsers(parseInt(getUsers, 10) + 1);
-                } else setUsers(MAX_USERS);
-              }}
-              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
-                getUsers < MAX_USERS
-                  ? 'bg-primary text-white active:bg-primary-dark'
-                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
-              } sm:duration-50 z-10 select-none rounded-r-lg text-2xl font-light transition-all`}
-            >
-              <span className="mb-1">+</span>
-            </button>
-
-            <label
-              htmlFor={`users_${storage}`}
-              className="absolute top-0 left-0 flex h-full w-full cursor-text flex-row items-center justify-center text-xl font-medium sm:text-base"
-            >
-              <div className="relative flex h-full flex-row items-center">
-                <span
-                  className={`pointer-events-none ${
-                    Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? '' : 'opacity-0'
-                  }`}
-                >
-                  {Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? 0 : getUsers}
-                </span>
-
-                {/* eslint-disable-next-line no-unused-expressions */}
-                <input
-                  id={`users_${storage}`}
-                  type="number"
-                  inputMode="numeric"
-                  min="2"
-                  max={MAX_USERS}
-                  step="1"
-                  value={getUsers}
-                  onChange={(e) => {
-                    e.target.value.toString().startsWith('0')
-                      ? (e.target.value = e.target.value.toString().slice(1, e.target.value.toString().length))
-                      : setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value);
-                  }}
-                  onBlur={(e) => {
-                    setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value < 2 ? 2 : e.target.value);
-                  }}
-                  className="absolute left-0 w-14 min-w-full appearance-none bg-transparent font-medium outline-none"
-                />
-              </div>
-
-              <span className="ml-1 select-none">{contentText.users}</span>
-            </label>
-          </div>
-
-          <div className="mt-4 flex w-full flex-row justify-between text-neutral-700">
-            <span className="font-medium">Total:</span>
-
-            <div className="flex flex-row items-end">
-              <div className="flex flex-row items-start">
-                <span className="mt-0.5 mr-0.5 text-xs">€</span>
-
-                <span>{teamsBilled}</span>
-              </div>
-
-              <span className="mb-1 ml-0.5 text-xs text-neutral-100">
-                {contentText.billingFrequencyLabelSmall[billingFrequencyList[billingFrequency]]}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div
-          tabIndex={0}
-          // eslint-disable-next-line no-unused-expressions
-
-          className="flex w-full flex-col items-center text-center"
-        >
-          <div className="subscribePlan flex w-full origin-center cursor-pointer select-none items-center justify-center rounded-lg border border-transparent bg-primary px-6 py-2 text-lg  font-medium text-white transition-all duration-75 focus:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-blue-20 focus:ring-offset-2 active:translate-y-0.5 active:bg-primary-dark sm:text-base">
-            <p className={`${price <= 0 ? 'hidden' : ''} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
-              {contentText.cta.claimTheDeal}
-            </p>
-
-            <p className={`${price <= 0 ? '' : 'hidden'} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
-              {contentText.cta.signUpNow}
-            </p>
-
-            <p className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''}`}>{contentText.cta.getStarted}</p>
-          </div>
-
-          <p className="mt-2 text-xs text-cool-gray-40">{contentText.onlyForNewClients}</p>
-        </div>
-      </div>
-
-      <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
-        <div className="flex flex-col space-y-2">
-          <div className="flex flex-row items-start space-x-2 font-medium">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span className={`${price <= 0 ? 'hidden' : 'flex'}`}>
-              {billingFrequency < 0
-                ? `${contentText.features.enjoyForever.enjoy} ${storage} ${contentText.features.enjoyForever.forever}`
-                : `${contentText.features.moneyBack}`}
-            </span>
-
-            <span className={`${price <= 0 ? 'flex' : 'hidden'}`}>
-              {contentText.features.enjoyForever.enjoy} {storage} {contentText.features.enjoyForever.forever}
-            </span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.encryptedFiles}</span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.accessFromAnywhere}</span>
-          </div>
-
-          <div className="flex flex-row items-start space-x-2">
-            <img
-              loading="lazy"
-              className="mt-0.5 translate-y-px select-none"
-              src="/icons/checkNeutral500.svg"
-              draggable="false"
-              alt="check icon"
-            />
-
-            <span>{contentText.features.allServices}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PriceCard;
diff --git a/src/components/password-checker/FeaturesSection.tsx b/src/components/password-checker/FeaturesSection.tsx
index e71a1ba0d..63c881a7b 100644
--- a/src/components/password-checker/FeaturesSection.tsx
+++ b/src/components/password-checker/FeaturesSection.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
 import { Ruler, TextT, TextAa, NumberCircleThree, Hash, CirclesThree } from '@phosphor-icons/react';
 import Image from 'next/legacy/image';
 import RenderDescription from '@/components/shared/RenderDescription';
+import { getImage } from '@/lib/getImage';
 
-const FeaturesSection = ({ textContent, bannerText, lang }) => {
+interface FeaturesSectionProps {
+  textContent: Record<string, any>;
+  lang?: string;
+}
+
+const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Element => {
   const iconSize = 32;
   const tipIcons = [
     <Ruler size={iconSize} key={0} />,
@@ -74,7 +79,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
             <div className="flex cursor-pointer">
               {lang === 'es' ? (
                 <Image
-                  src="/images/password-checker/virus-scanner-es.webp"
+                  src={getImage('/images/password-checker/virus-scanner-es.webp')}
                   width={897}
                   height={350}
                   layout="intrinsic"
@@ -84,7 +89,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
                 />
               ) : (
                 <Image
-                  src="/images/password-checker/virus-scanner.webp"
+                  src={getImage('/images/password-checker/virus-scanner.webp')}
                   width={897}
                   height={350}
                   layout="intrinsic"
@@ -115,7 +120,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
           <div className="flex cursor-pointer">
             {lang === 'es' ? (
               <Image
-                src="/images/password-checker/byte-converter-es.webp"
+                src={getImage('/images/password-checker/byte-converter-es.webp')}
                 width={897}
                 height={350}
                 layout="intrinsic"
@@ -125,7 +130,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
               />
             ) : (
               <Image
-                src="/images/password-checker/byte-converter.webp"
+                src={getImage('/images/password-checker/byte-converter.webp')}
                 width={897}
                 height={350}
                 layout="intrinsic"
diff --git a/src/components/password-checker/HeroSection.tsx b/src/components/password-checker/HeroSection.tsx
index e224551cb..71d31ccdd 100644
--- a/src/components/password-checker/HeroSection.tsx
+++ b/src/components/password-checker/HeroSection.tsx
@@ -1,12 +1,14 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState } from 'react';
+import { useState } from 'react';
 import zxcvbn from 'zxcvbn';
 import { Info, Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react';
 import pwnedpasswords from '@/lib/checker';
 import Header from '@/components/shared/Header';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const [inputTypePassword, setInputTypePassword] = useState(true);
   const [passwordLength, setPasswordLength] = useState(0);
   const [pwned, setPwned] = useState('-');
@@ -133,7 +135,7 @@ const HeroSection = ({ textContent }) => {
       <div className="flex w-full flex-col items-stretch space-y-4 lg:h-48 lg:w-auto lg:flex-row lg:space-y-0 lg:space-x-5">
         <div className="relative flex h-40 w-full flex-col space-y-1 rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
           <span className="text-sm text-gray-50">{textContent.result.feedback.title}</span>
-          <span className={`text-2xl font-semibold text-gray-80`}>{crackFeedback}</span>
+          <span className={'text-2xl font-semibold text-gray-80'}>{crackFeedback}</span>
         </div>
 
         <div className="relative flex h-40 w-full flex-col rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
@@ -156,7 +158,7 @@ const HeroSection = ({ textContent }) => {
         <div className="flex h-40 w-full flex-col rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
           <div className="flex h-full flex-col space-y-1">
             <span className="text-sm text-gray-50">{textContent.result.crack.title}</span>
-            <span className={`text-2xl font-semibold text-gray-80`}>{crackTime}</span>
+            <span className={'text-2xl font-semibold text-gray-80'}>{crackTime}</span>
           </div>
 
           <span className="text-sm text-gray-50">{textContent.result.crack.subtitle}</span>
diff --git a/src/components/password-generator/HeroSection.tsx b/src/components/password-generator/HeroSection.tsx
index d1b3ea556..785aef772 100644
--- a/src/components/password-generator/HeroSection.tsx
+++ b/src/components/password-generator/HeroSection.tsx
@@ -5,7 +5,12 @@ import PasswordSettings from './components/PasswordSettings';
 import PassphraseSettings from './components/PassphraseSettings';
 import Header from '@/components/shared/Header';
 
-const CheckboxButton = ({ checked, id }) => (
+interface CheckboxButtonProps {
+  checked: boolean;
+  id: string;
+}
+
+const CheckboxButton = ({ checked, id }: CheckboxButtonProps): JSX.Element => (
   <>
     <div
       className={`relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded-full
@@ -89,7 +94,7 @@ const HeroSection = ({ textContent }) => {
                     notificationService.openSuccessToast('Password copied to clipboard');
                   }}
                 >
-                  <Copy className={`hidden h-5 w-5 text-center text-white md:flex`} />
+                  <Copy className={'hidden h-5 w-5 text-center text-white md:flex'} />
                   <p className="font-medium text-white">{textContent.copy}</p>
                 </button>
                 <button
@@ -98,7 +103,7 @@ const HeroSection = ({ textContent }) => {
                     setRegenerate(!regenerate);
                   }}
                 >
-                  <ArrowsClockwise className={`hidden h-5 w-5 text-center md:flex`} />
+                  <ArrowsClockwise className={'hidden h-5 w-5 text-center md:flex'} />
                   <p className="font-medium">{textContent.generate}</p>
                 </button>
               </div>
diff --git a/src/components/password-generator/InfoSection.tsx b/src/components/password-generator/InfoSection.tsx
index 1ed1ab2c2..b25d468db 100644
--- a/src/components/password-generator/InfoSection.tsx
+++ b/src/components/password-generator/InfoSection.tsx
@@ -6,15 +6,13 @@ import RenderDescription from '@/components/shared/RenderDescription';
 
 const allowedLangForImage = ['en', 'es', 'ru'];
 
-const InfoSection = ({
-  textContent,
-  bannerText,
-  hideLast2Sections,
-}: {
+interface InfoSectionProps {
   textContent: any;
   bannerText: any;
   hideLast2Sections?: boolean;
-}): JSX.Element => {
+}
+
+const InfoSection = ({ textContent, bannerText, hideLast2Sections }: InfoSectionProps): JSX.Element => {
   const router = useRouter();
   const lang = router.locale;
 
diff --git a/src/components/password-generator/components/CheckboxSettings.tsx b/src/components/password-generator/components/CheckboxSettings.tsx
index c55a68f69..e5a8aab66 100644
--- a/src/components/password-generator/components/CheckboxSettings.tsx
+++ b/src/components/password-generator/components/CheckboxSettings.tsx
@@ -1,18 +1,14 @@
 import { Check } from '@phosphor-icons/react';
 
-const CheckboxSettings = ({
-  id,
-  checked,
-  onClick,
-  required,
-  className,
-}: {
+interface CheckboxSettingsProps {
   id: string;
   checked: boolean;
   onClick?: React.DOMAttributes<HTMLLabelElement>['onClick'];
   required?: boolean;
   className?: string;
-}) => {
+}
+
+const CheckboxSettings = ({ id, checked, onClick, required, className }: CheckboxSettingsProps): JSX.Element => {
   return (
     <label className={`relative h-5 w-5 rounded focus-within:outline-primary ${className}`} onClick={onClick}>
       <div
diff --git a/src/components/password-generator/components/PasswordSettings.tsx b/src/components/password-generator/components/PasswordSettings.tsx
index c464f5059..7e3a4f21a 100644
--- a/src/components/password-generator/components/PasswordSettings.tsx
+++ b/src/components/password-generator/components/PasswordSettings.tsx
@@ -25,12 +25,12 @@ const PasswordSettings = ({ textContent, setPassword, setCrackScore, regenerate
   }, [passwordProperties, regenerate]);
 
   const generateRandomPassword = () => {
-    const length: number = Number(passwordProperties.length);
-    let characters: string = '';
-    let uppercase: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    let lowercase: string = 'abcdefghijklmnopqrstuvwxyz';
-    let numbers: string = '0123456789';
-    let symbols: string = '!@#$%^&*()<>,.?/[]{}-=_+|/';
+    const length = Number(passwordProperties.length);
+    let characters = '';
+    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+    const numbers = '0123456789';
+    const symbols = '!@#$%^&*()<>,.?/[]{}-=_+|/';
 
     if (passwordProperties.uppercase) {
       characters += uppercase;
diff --git a/src/components/password-generator/utils/index.ts b/src/components/password-generator/utils/index.ts
index 0b994da43..0df48b6f0 100644
--- a/src/components/password-generator/utils/index.ts
+++ b/src/components/password-generator/utils/index.ts
@@ -1,6 +1,6 @@
 import zxcvbn from 'zxcvbn';
 
-export const getRandomInteger = (min, max) => {
+export const getRandomInteger = (min: number, max: number) => {
   const randomWords = new Uint32Array(1);
   window.crypto.getRandomValues(randomWords);
   min = Math.ceil(min);
diff --git a/src/components/prices/CyberAwarenessSpecialCard.tsx b/src/components/prices/CyberAwarenessSpecialCard.tsx
index f7411ca12..e7a4939dc 100644
--- a/src/components/prices/CyberAwarenessSpecialCard.tsx
+++ b/src/components/prices/CyberAwarenessSpecialCard.tsx
@@ -14,7 +14,7 @@ export default function SpecialPriceCard({
   popular,
   lang,
   currency,
-}: PriceCardProps) {
+}: PriceCardProps): JSX.Element {
   const [coupon, setCoupon] = React.useState<string>();
   const billingFrequencyList = {
     lifetime: 'lifetime',
@@ -67,7 +67,7 @@ export default function SpecialPriceCard({
         {contentText.cta.discount}
       </div>
 
-      <div className={`info flex flex-col items-center justify-center  bg-white p-4 pt-6`}>
+      <div className={'info flex flex-col items-center justify-center  bg-white p-4 pt-6'}>
         <div
           className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
             popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
@@ -88,8 +88,8 @@ export default function SpecialPriceCard({
         >
           {price <= 0 ? (
             <>
-              <p className={` flex flex-row items-start space-x-0.5 font-bold text-black`}>
-                <p className={` flex flex-row items-start space-x-0.5 font-medium`}>
+              <p className={' flex flex-row items-start space-x-0.5 font-bold text-black'}>
+                <p className={' flex flex-row items-start space-x-0.5 font-medium'}>
                   <span className="price text-4xl font-semibold">
                     {price <= 0 ? `${contentText.freePlan}` : price.toFixed(2)}
                   </span>
@@ -100,13 +100,13 @@ export default function SpecialPriceCard({
                   planType.toLowerCase() === 'individual' ? 'flex-row space-x-px' : 'flex-col items-center'
                 }`}
               >
-                <span className={`currency`}>{currency}</span>
+                <span className={'currency'}>{currency}</span>
                 <span className="price text-2xl font-semibold">{Math.abs((price * 20) / 100).toFixed(2)[0]}</span>
               </div>
             </>
           ) : (
             <>
-              <p className={` flex flex-row items-start space-x-0.5 font-bold text-black`}>
+              <p className={' flex flex-row items-start space-x-0.5 font-bold text-black'}>
                 <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
                 <span className="price text-4xl font-semibold">{Math.abs((price * 20) / 100).toFixed(2)}</span>
               </p>
@@ -115,7 +115,7 @@ export default function SpecialPriceCard({
                   planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
                 }`}
               >
-                <p className={` flex flex-row items-start space-x-0.5 font-medium `}>
+                <p className={' flex flex-row items-start space-x-0.5 font-medium '}>
                   <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
                   <span className="price text-2xl font-semibold line-through">
                     {price <= 0 ? `${contentText.freePlan}` : price.toFixed(2)}
@@ -165,7 +165,7 @@ export default function SpecialPriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
         <div className="flex flex-col space-y-2 text-sm">
           {billingFrequency === 'lifetime' && (
-            <div className={`flex flex-row items-start space-x-2 font-semibold`}>
+            <div className={'flex flex-row items-start space-x-2 font-semibold'}>
               <img
                 loading="lazy"
                 className="mt-0.5 translate-y-px select-none"
diff --git a/src/components/prices/FreePlanCard.tsx b/src/components/prices/FreePlanCard.tsx
index 92d912797..b135ea84a 100644
--- a/src/components/prices/FreePlanCard.tsx
+++ b/src/components/prices/FreePlanCard.tsx
@@ -1,6 +1,10 @@
 import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 
-const FreePlanCard = ({ textContent }) => {
+interface FreePlanCardProps {
+  textContent: Record<string, any>;
+}
+
+const FreePlanCard = ({ textContent }: FreePlanCardProps): JSX.Element => {
   const { openDialog } = useGlobalDialog();
   return (
     <div className="flex w-full flex-col items-center justify-center gap-5 rounded-2xl border border-gray-10 px-5 py-9 md:flex-row md:justify-between">
diff --git a/src/components/prices/PriceCard.tsx b/src/components/prices/PriceCard.tsx
index cedde98b5..4a3c6bcfb 100644
--- a/src/components/prices/PriceCard.tsx
+++ b/src/components/prices/PriceCard.tsx
@@ -46,7 +46,7 @@ export default function PriceCard({
   isLifetimePage,
   lifetimeMode,
   onButtonClicked,
-}: Readonly<PriceCardProps>) {
+}: Readonly<PriceCardProps>): JSX.Element {
   const billingFrequencyList = {
     lifetime: 'lifetime',
     month: 'monthly',
@@ -113,7 +113,7 @@ export default function PriceCard({
         popular ? 'border-primary/50 ring-[3px]' : 'ring-1 ring-gray-10'
       } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl xs:w-72`}
     >
-      <div className={`info flex flex-col items-center justify-center space-y-6 rounded-t-2xl bg-white p-6 pt-6`}>
+      <div className={'info flex flex-col items-center justify-center space-y-6 rounded-t-2xl bg-white p-6 pt-6'}>
         <div className="flex flex-col items-center justify-center space-y-4">
           {popular ? (
             <div className="flex flex-row items-center justify-center space-x-2 rounded-full bg-primary px-3 py-1">
@@ -133,7 +133,7 @@ export default function PriceCard({
               items-end space-x-px text-neutral-700
             `}
           >
-            <p className={` flex flex-row items-start space-x-1 whitespace-nowrap font-medium text-gray-100`}>
+            <p className={' flex flex-row items-start space-x-1 whitespace-nowrap font-medium text-gray-100'}>
               <span className={`currency ${isFreePlan ? 'hidden' : ''}`}>{currency}</span>
               <span className="price text-4xl font-bold">
                 {isFreePlan ? `${contentText.freePlan}` : formattedPrice}
@@ -148,7 +148,7 @@ export default function PriceCard({
               priceBefore ? 'flex' : 'hidden'
             } flex-row items-start space-x-1 whitespace-nowrap font-semibold text-gray-50 line-through`}
           >
-            <span className={`text-sm`}>{currency}</span>
+            <span className={'text-sm'}>{currency}</span>
             <span className="price text-2xl font-medium">{priceBefore}</span>
           </p>
 
@@ -171,7 +171,7 @@ export default function PriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 pb-6 text-sm text-gray-80">
         {isOffer ? (
           <div className="flex w-full flex-col space-y-4 bg-gray-100 p-6">
-            <p className={`} font-bold text-yellow`}>{contentText.productFeatures.starWarsFeatures.title}</p>
+            <p className={'} font-bold text-yellow'}>{contentText.productFeatures.starWarsFeatures.title}</p>
             {contentText.productFeatures.starWarsFeatures[storage].map((feature) => (
               <div
                 className={`${
diff --git a/src/components/prices/PriceTable.tsx b/src/components/prices/PriceTable.tsx
index cd765118e..7dda91070 100644
--- a/src/components/prices/PriceTable.tsx
+++ b/src/components/prices/PriceTable.tsx
@@ -48,7 +48,7 @@ export default function PriceTable({
   useSameCouponForAllPlans,
   hideFreeCard,
   couponCode,
-}: Readonly<PriceTableProps>) {
+}: Readonly<PriceTableProps>): JSX.Element {
   const contentText = require(`@/assets/lang/${lang}/priceCard.json`);
   const CampaignContent = require(`@/assets/lang/${lang}/pricing.json`);
   const banner = require('@/assets/lang/en/banners.json');
@@ -113,7 +113,7 @@ export default function PriceTable({
         </div>
 
         <div className="flex flex-col items-center space-y-9">
-          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
+          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
           <div id="billingButtons" className="flex flex-row rounded-lg bg-cool-gray-10 p-0.5">
             <button
               type="button"
@@ -133,7 +133,7 @@ export default function PriceTable({
               onClick={() => {
                 setActiveSwitchPlan('Lifetime');
                 setBillingFrequency(Interval.Lifetime);
-                setSegmentPageName(`Pricing Individuals Lifetime`);
+                setSegmentPageName('Pricing Individuals Lifetime');
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Lifetime' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
@@ -145,7 +145,7 @@ export default function PriceTable({
               type="button"
               onClick={() => {
                 setActiveSwitchPlan('Business');
-                setSegmentPageName(`Pricing Business`);
+                setSegmentPageName('Pricing Business');
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Business' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
diff --git a/src/components/prices/SpecialPriceCard.tsx b/src/components/prices/SpecialPriceCard.tsx
index 25d564c20..739169d40 100644
--- a/src/components/prices/SpecialPriceCard.tsx
+++ b/src/components/prices/SpecialPriceCard.tsx
@@ -14,7 +14,7 @@ export default function SpecialPriceCard({
   popular,
   lang,
   currency,
-}: PriceCardProps) {
+}: PriceCardProps): JSX.Element {
   const [coupon, setCoupon] = React.useState<string>();
   const isPopularYearly = popular && billingFrequency === Interval.Year;
   const billingFrequencyList = {
@@ -88,7 +88,7 @@ export default function SpecialPriceCard({
           className={`planPrice flex flex-col items-center justify-center space-y-2
             py-8`}
         >
-          <p className={` flex flex-row items-start space-x-0.5 font-bold text-white`}>
+          <p className={' flex flex-row items-start space-x-0.5 font-bold text-white'}>
             <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
             <span className="price text-4xl font-semibold">
               {
@@ -104,7 +104,7 @@ export default function SpecialPriceCard({
               planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
             }`}
           >
-            <p className={` flex flex-row items-start space-x-0.5 font-medium `}>
+            <p className={' flex flex-row items-start space-x-0.5 font-medium '}>
               <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
               <span className="price text-2xl font-semibold line-through">
                 {price <= 0 ? `${contentText.freePlan}` : price}
@@ -151,7 +151,7 @@ export default function SpecialPriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
         <div className="flex flex-col space-y-2 text-sm">
           {billingFrequency === 'lifetime' && (
-            <div className={`flex flex-row items-start space-x-2 font-semibold`}>
+            <div className={'flex flex-row items-start space-x-2 font-semibold'}>
               <img
                 loading="lazy"
                 className="mt-0.5 translate-y-px select-none"
diff --git a/src/components/pricing/BestStorageSection.tsx b/src/components/pricing/BestStorageSection.tsx
index 97dfce444..89f6fdd23 100644
--- a/src/components/pricing/BestStorageSection.tsx
+++ b/src/components/pricing/BestStorageSection.tsx
@@ -1,7 +1,10 @@
 import { CircleWavyCheck, Database, Eye, Key, Recycle } from '@phosphor-icons/react';
-import React from 'react';
 
-const BestStorageSection = ({ textContent }) => {
+interface BestStorageSectionProps {
+  textContent: Record<string, any>;
+}
+
+const BestStorageSection = ({ textContent }: BestStorageSectionProps): JSX.Element => {
   const features = [
     {
       icon: Database,
diff --git a/src/components/pricing/CtaSection.tsx b/src/components/pricing/CtaSection.tsx
index 20638e8ab..91b805417 100644
--- a/src/components/pricing/CtaSection.tsx
+++ b/src/components/pricing/CtaSection.tsx
@@ -1,7 +1,11 @@
-import React from 'react';
 import { goToSignUpURL } from '@/lib/auth';
 
-const CtaSection = ({ textContent, freePlan }: { textContent: any; freePlan?: boolean }) => {
+interface CtaSectionProps {
+  textContent: any;
+  freePlan?: boolean;
+}
+
+const CtaSection = ({ textContent, freePlan }: CtaSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden bg-primary py-14">
       <div className="flex flex-col items-center justify-center space-y-8 px-5 text-center">
diff --git a/src/components/pricing/HeroSection.tsx b/src/components/pricing/HeroSection.tsx
index 2eb050f2e..acaf49ee1 100644
--- a/src/components/pricing/HeroSection.tsx
+++ b/src/components/pricing/HeroSection.tsx
@@ -2,7 +2,11 @@ import Image from 'next/legacy/image';
 import { Alarm, Coin, CreditCard, Detective } from '@phosphor-icons/react';
 import Countdown from '@/components/components/Countdown';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const feeds = [
     {
       icon: Coin,
diff --git a/src/components/privacy-directory/HeroSection2.tsx b/src/components/privacy-directory/HeroSection2.tsx
index 91af519a4..292dd92bc 100644
--- a/src/components/privacy-directory/HeroSection2.tsx
+++ b/src/components/privacy-directory/HeroSection2.tsx
@@ -1,6 +1,7 @@
 import { CaretRight } from '@phosphor-icons/react';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 import Header from '@/components/shared/Header';
+import Link from 'next/link';
 
 const HeroSection2 = ({ textContent, lang, bannerText }) => {
   return (
@@ -14,14 +15,14 @@ const HeroSection2 = ({ textContent, lang, bannerText }) => {
             <p className=" text-2xl font-medium">{textContent.title}</p>
             <p className="text-xl font-normal">{textContent.description}</p>
           </div>
-          <a
+          <Link
             href="/privacy"
             target={'_blank'}
             className="flex cursor-pointer flex-row items-center justify-center space-x-1"
           >
             <p className="text-lg font-semibold text-primary">{textContent.cta}</p>
             <CaretRight size={14} weight="bold" className="text-primary" />
-          </a>
+          </Link>
         </div>
         <SignUpBanner textContent={bannerText} lang={lang} />
       </div>
diff --git a/src/components/privacy-directory/SupportNGOsSection.tsx b/src/components/privacy-directory/SupportNGOsSection.tsx
index 5eda1cc52..b7fe55446 100644
--- a/src/components/privacy-directory/SupportNGOsSection.tsx
+++ b/src/components/privacy-directory/SupportNGOsSection.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { CaretRight } from '@phosphor-icons/react';
-import Image from "next/legacy/image";
+import Image from 'next/legacy/image';
 
 const SupportNGOsSection = ({ textContent }) => (
   <section className="relative flex flex-col items-center bg-white px-6">
diff --git a/src/components/privacy/BetterTomorrowSection.tsx b/src/components/privacy/BetterTomorrowSection.tsx
index bbc345960..d375725ca 100644
--- a/src/components/privacy/BetterTomorrowSection.tsx
+++ b/src/components/privacy/BetterTomorrowSection.tsx
@@ -2,7 +2,12 @@ import Image from 'next/legacy/image';
 import { CaretRight, ShieldStar } from '@phosphor-icons/react';
 import RevealX from '@/components/components/RevealX';
 
-const BetterTomorrowSection = ({ textContent, lang }) => {
+interface BetterTomorrowSectionProps {
+  textContent: Record<string, any>;
+  lang?: string;
+}
+
+const BetterTomorrowSection = ({ textContent, lang }: BetterTomorrowSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col-reverse items-center justify-center px-5 pt-16 pb-20 text-center md:flex-row md:space-y-0 md:space-x-24 md:text-start">
diff --git a/src/components/privacy/FeatureSection.tsx b/src/components/privacy/FeatureSection.tsx
index 0af4b230a..0c98df589 100644
--- a/src/components/privacy/FeatureSection.tsx
+++ b/src/components/privacy/FeatureSection.tsx
@@ -1,7 +1,11 @@
 import { Eye, Fingerprint, Globe, LockKey, ShieldCheck, UserCircle } from '@phosphor-icons/react';
 import RevealY from '@/components/components/RevealY';
 
-const FeatureSection = ({ textContent }) => {
+interface FeatureSectionProps {
+  textContent: Record<string, any>;
+}
+
+const FeatureSection = ({ textContent }: FeatureSectionProps): JSX.Element => {
   const cards = [
     {
       icon: Eye,
@@ -46,7 +50,7 @@ const FeatureSection = ({ textContent }) => {
           {cards.map((card) => (
             <div
               key={card.title}
-              className={`flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]`}
+              className={'flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]'}
             >
               <card.icon className="mb-6 text-4xl text-primary" size={32} />
               <div className="flex w-full max-w-[408px] flex-col">
diff --git a/src/components/privacy/HeroSection.tsx b/src/components/privacy/HeroSection.tsx
index c08809a5d..d13bf55ea 100644
--- a/src/components/privacy/HeroSection.tsx
+++ b/src/components/privacy/HeroSection.tsx
@@ -1,9 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import YoutubeEmbed from '@/components/utils/youtube';
 import { CaretRight } from '@phosphor-icons/react';
 import Header from '@/components/shared/Header';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/src/components/privacy/HeroSection2.tsx b/src/components/privacy/HeroSection2.tsx
index 449ff8fd8..47e1fa141 100644
--- a/src/components/privacy/HeroSection2.tsx
+++ b/src/components/privacy/HeroSection2.tsx
@@ -1,10 +1,14 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { UilPlayCircle } from '@iconscout/react-unicons';
 import YoutubeEmbed from '@/components/utils/youtube';
 import styles from './HeroSection.module.scss';
 import Header from '@/components/shared/Header';
 
-const HeroSection2 = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection2 = ({ textContent }: HeroSectionProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/src/components/privacy/InxtAppsSection.tsx b/src/components/privacy/InxtAppsSection.tsx
index add574603..beb4caeef 100644
--- a/src/components/privacy/InxtAppsSection.tsx
+++ b/src/components/privacy/InxtAppsSection.tsx
@@ -1,6 +1,11 @@
 import ProductCard from '@/components/shared/ProductCard';
 
-const InxtAppsSection = ({ textContent, lang }) => {
+interface InxtAppsSectionProps {
+  textContent: Record<string, any>;
+  lang: string;
+}
+
+const InxtAppsSection = ({ textContent, lang }: InxtAppsSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden">
       <div className="z-10 flex flex-col items-center space-y-16 bg-gray-1 px-5 pt-20 text-gray-100 ">
diff --git a/src/components/privacy/ManifestoSection.tsx b/src/components/privacy/ManifestoSection.tsx
index c440e436e..1b23d5f6a 100644
--- a/src/components/privacy/ManifestoSection.tsx
+++ b/src/components/privacy/ManifestoSection.tsx
@@ -1,7 +1,10 @@
-/* eslint-disable max-len */
-import React from 'react';
+import { getImage } from '@/lib/getImage';
 
-const ManifestoSection = ({ textContent }) => (
+interface ManifestoSectionProps {
+  textContent: Record<string, any>;
+}
+
+const ManifestoSection = ({ textContent }: ManifestoSectionProps): JSX.Element => (
   <section className="relative flex w-full flex-col bg-gray-1">
     {/* Why privacy is so important */}
     <div className="z-10 flex flex-col items-center py-20 ">
@@ -19,7 +22,7 @@ const ManifestoSection = ({ textContent }) => (
           <img
             loading="lazy"
             className="w-24 select-none"
-            src="/images/privacy/signature.webp"
+            src={getImage('/images/privacy/signature.webp')}
             draggable="false"
             alt="Fran's signature"
           />
diff --git a/src/components/privacy/ManifestoSection2.tsx b/src/components/privacy/ManifestoSection2.tsx
index a08073c8d..cbed5e471 100644
--- a/src/components/privacy/ManifestoSection2.tsx
+++ b/src/components/privacy/ManifestoSection2.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
 import FAQSection from '@/components/shared/FaqSection';
 import { ArrowUpRight } from '@phosphor-icons/react';
 import ProductCard from '@/components/shared/ProductCard';
+import { getImage } from '@/lib/getImage';
 
-const ManifestoSection2 = ({ textContent, lang }) => (
+interface ManifestoSectionProps {
+  textContent: Record<string, any>;
+  lang: string;
+}
+
+const ManifestoSection2 = ({ textContent, lang }: ManifestoSectionProps): JSX.Element => (
   <section className="relative flex w-full flex-col">
     {/* Why privacy is so important */}
     <div className="z-10 flex flex-col items-center py-20 ">
@@ -24,7 +29,7 @@ const ManifestoSection2 = ({ textContent, lang }) => (
           <img
             loading="lazy"
             className="w-24 select-none"
-            src="/images/privacy/signature.webp"
+            src={getImage('/images/privacy/signature.webp')}
             draggable="false"
             alt="Fran's signature"
           />
diff --git a/src/components/privacy/SecuritumSection.tsx b/src/components/privacy/SecuritumSection.tsx
index 8b3c3c3f9..52771cc05 100644
--- a/src/components/privacy/SecuritumSection.tsx
+++ b/src/components/privacy/SecuritumSection.tsx
@@ -1,6 +1,10 @@
 import { CaretRight } from '@phosphor-icons/react';
 
-const SecuritumSection = ({ textContent }) => {
+interface SecuritumSectionProps {
+  textContent: Record<string, any>;
+}
+
+const SecuritumSection = ({ textContent }: SecuritumSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden">
       <div className="bg- flex flex-col bg-gray-1 py-20">
diff --git a/src/components/services/stripe.service.ts b/src/components/services/stripe.service.ts
index bde41a2c3..8ee0cbd1f 100644
--- a/src/components/services/stripe.service.ts
+++ b/src/components/services/stripe.service.ts
@@ -9,7 +9,7 @@ export enum Interval {
 }
 
 export interface ProductsProps {
-  individuals: {} | undefined;
+  individuals: Record<string, any> | undefined;
 }
 
 export enum Products {
diff --git a/src/components/shared/CommandTextInputCopy.tsx b/src/components/shared/CommandTextInputCopy.tsx
index be27cd8ad..25c3921b9 100644
--- a/src/components/shared/CommandTextInputCopy.tsx
+++ b/src/components/shared/CommandTextInputCopy.tsx
@@ -13,7 +13,9 @@ export const CommandTextInputCopy = ({ text, isCommandCard }: CopyTextInputProps
 
   return (
     <button
-      className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl border border-gray-10 bg-white px-4 py-3 text-gray-80 shadow-sm`}
+      className={
+        'flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl border border-gray-10 bg-white px-4 py-3 text-gray-80 shadow-sm'
+      }
       onClick={onCopy}
     >
       <p
diff --git a/src/components/shared/CompanyLogosRecognitions.tsx b/src/components/shared/CompanyLogosRecognitions.tsx
index 23d238dd3..8a0bab0e2 100644
--- a/src/components/shared/CompanyLogosRecognitions.tsx
+++ b/src/components/shared/CompanyLogosRecognitions.tsx
@@ -7,7 +7,7 @@ export const CompanyLogosRecognitions = () => (
     <div className="flex flex-auto flex-shrink-0 pb-12 sm:p-0 sm:px-12">
       <div className="flex flex-shrink-0 flex-col items-center space-y-3">
         <Image
-          src={getImage(`/images/about/logos/forbes.webp`)}
+          src={getImage('/images/about/logos/forbes.webp')}
           width={125}
           height={32}
           loading={'lazy'}
diff --git a/src/components/shared/DownloadComponent.tsx b/src/components/shared/DownloadComponent.tsx
index 042d5d3db..b2f710dc8 100644
--- a/src/components/shared/DownloadComponent.tsx
+++ b/src/components/shared/DownloadComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 
 import { ArrowCircleDown, CaretRight } from '@phosphor-icons/react';
@@ -161,7 +161,7 @@ const DownloadComponent = ({ textContent, lang, download }) => {
         )}
 
         {/* Download for mobile */}
-        <div className={`flex flex-1 flex-grow flex-row justify-center text-lg lg:justify-start`}>
+        <div className={'flex flex-1 flex-grow flex-row justify-center text-lg lg:justify-start'}>
           {isMobile && (
             <a
               className="flex w-full flex-col"
diff --git a/src/components/shared/DropArea.tsx b/src/components/shared/DropArea.tsx
index 2a07be757..273e2b0e8 100644
--- a/src/components/shared/DropArea.tsx
+++ b/src/components/shared/DropArea.tsx
@@ -40,7 +40,7 @@ const DropArea = ({
 
   return (
     <div
-      className={`flex h-full w-full items-center justify-center`}
+      className={'flex h-full w-full items-center justify-center'}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
diff --git a/src/components/shared/FaqSection.tsx b/src/components/shared/FaqSection.tsx
index b9c13e01a..e82273319 100644
--- a/src/components/shared/FaqSection.tsx
+++ b/src/components/shared/FaqSection.tsx
@@ -6,7 +6,7 @@ interface FAQSectionProps {
   cardColor?: string;
 }
 
-const FAQSection = ({ textContent, bgColor, cardColor }: FAQSectionProps) => {
+const FAQSection = ({ textContent, bgColor, cardColor }: FAQSectionProps): JSX.Element => {
   return (
     <section className={`overflow-hidden ${bgColor ?? 'bg-white'}`}>
       <div className="flex flex-col items-center justify-center space-y-10 px-10 pb-16 pt-10 lg:py-20">
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
index bb88c046f..55d6ed360 100644
--- a/src/components/shared/Header.tsx
+++ b/src/components/shared/Header.tsx
@@ -1,14 +1,11 @@
-const Header = ({
-  children,
-  maxWidth = 'max-w-[796px]',
-  className,
-  isToolsPage,
-}: {
+interface HeaderProps {
   children: React.ReactNode;
   maxWidth?: string;
   className?: string;
   isToolsPage?: boolean;
-}) => {
+}
+
+const Header = ({ children, maxWidth = 'max-w-[796px]', className }: HeaderProps) => {
   return (
     <h1
       className={`${maxWidth} ${className} whitespace-normal text-4xl font-semibold leading-tight sm:text-5xl sm:leading-tight`}
diff --git a/src/components/shared/HeroSectionSafeArea.tsx b/src/components/shared/HeroSectionSafeArea.tsx
index 599de8038..ac0cbccf6 100644
--- a/src/components/shared/HeroSectionSafeArea.tsx
+++ b/src/components/shared/HeroSectionSafeArea.tsx
@@ -1,11 +1,9 @@
-const HeroSectionSafeArea = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="w-full items-center justify-center px-4 lg:px-10 xl:px-32">
-      <div className="mx-auto flex w-full max-w-screen-xl flex-col space-y-10 px-5 py-20 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:px-0">
-        {children}
-      </div>
+const HeroSectionSafeArea = ({ children }: { children: React.ReactNode }): JSX.Element => (
+  <div className="w-full items-center justify-center px-4 lg:px-10 xl:px-32">
+    <div className="mx-auto flex w-full max-w-screen-xl flex-col space-y-10 px-5 py-20 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:px-0">
+      {children}
     </div>
-  );
-};
+  </div>
+);
 
 export default HeroSectionSafeArea;
diff --git a/src/components/shared/ProductCard.tsx b/src/components/shared/ProductCard.tsx
index 9a72567c8..19850a74a 100644
--- a/src/components/shared/ProductCard.tsx
+++ b/src/components/shared/ProductCard.tsx
@@ -11,35 +11,33 @@ interface ProductCard {
   imageUrl: string;
 }
 
-const ProductCard = ({ animationDirection, redirect, textContent, lang, imageUrl }: ProductCard) => {
-  return (
-    <RevealX
-      direction={animationDirection}
-      className={`flex overflow-hidden rounded-2xl bg-gray-100 lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-0`}
-    >
-      <div className="flex h-full flex-col items-center justify-center p-7 text-center lg:items-start lg:pl-20 lg:text-start">
-        <h4 className="mb-10 max-w-xs text-4xl font-semibold text-white lg:text-4xl">{textContent.title}</h4>
-        <h5 className="mb-4 max-w-[340px] text-xl text-white">{textContent.description}</h5>
-        <div className="flex justify-start">
-          <Link
-            href={redirect}
-            target="_blank"
-            locale={lang}
-            className="flex flex-row items-center space-x-1 text-lg text-blue-50 hover:underline"
-          >
-            <span>{textContent.cta}</span>
-            <CaretRight size={16} />
-          </Link>
-        </div>
+const ProductCard = ({ animationDirection, redirect, textContent, lang, imageUrl }: ProductCard): JSX.Element => (
+  <RevealX
+    direction={animationDirection}
+    className={'flex overflow-hidden rounded-2xl bg-gray-100 lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-0'}
+  >
+    <div className="flex h-full flex-col items-center justify-center p-7 text-center lg:items-start lg:pl-20 lg:text-start">
+      <h4 className="mb-10 max-w-xs text-4xl font-semibold text-white lg:text-4xl">{textContent.title}</h4>
+      <h5 className="mb-4 max-w-[340px] text-xl text-white">{textContent.description}</h5>
+      <div className="flex justify-start">
+        <Link
+          href={redirect}
+          target="_blank"
+          locale={lang}
+          className="flex flex-row items-center space-x-1 text-lg text-blue-50 hover:underline"
+        >
+          <span>{textContent.cta}</span>
+          <CaretRight size={16} />
+        </Link>
       </div>
+    </div>
 
-      <div className="lg:pl-15 relative mt-16 flex self-stretch  lg:mt-0">
-        <div className="hidden lg:flex lg:max-w-[480px]">
-          <Image src={imageUrl} loading="lazy" width={480} height={480} alt="Internxt Drive" draggable={false} />
-        </div>
+    <div className="lg:pl-15 relative mt-16 flex self-stretch  lg:mt-0">
+      <div className="hidden lg:flex lg:max-w-[480px]">
+        <Image src={imageUrl} loading="lazy" width={480} height={480} alt="Internxt Drive" draggable={false} />
       </div>
-    </RevealX>
-  );
-};
+    </div>
+  </RevealX>
+);
 
 export default ProductCard;
diff --git a/src/components/shared/RedirectButton.tsx b/src/components/shared/RedirectButton.tsx
index e1c1a9598..61343bd5f 100644
--- a/src/components/shared/RedirectButton.tsx
+++ b/src/components/shared/RedirectButton.tsx
@@ -9,7 +9,7 @@ interface RedirectButtonProps {
 }
 
 export const RedirectButton = ({ url, className, target = '_blank', rel, children }: RedirectButtonProps) => (
-  <Link id={`redirect-button-id`} href={url} target={target} rel={rel} className={className}>
+  <Link id={'redirect-button-id'} href={url} target={target} rel={rel} className={className}>
     {children}
   </Link>
 );
diff --git a/src/components/shared/RenderDescription.tsx b/src/components/shared/RenderDescription.tsx
index b23b89082..97149684e 100644
--- a/src/components/shared/RenderDescription.tsx
+++ b/src/components/shared/RenderDescription.tsx
@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-const RenderDescription = ({ description, fontSize }: { description: string[]; fontSize?: string }) => {
+interface RenderDescriptionProps {
+  description: string[];
+  fontSize?: string;
+}
+
+const RenderDescription = ({ description, fontSize }: RenderDescriptionProps): JSX.Element => {
   useEffect(() => {
     const renderDescriptionComponent = document.querySelector('#render-description-section');
     const links = document.querySelectorAll('a');
diff --git a/src/components/shared/StarsRate.tsx b/src/components/shared/StarsRate.tsx
index 4e19f2c3a..d52cbcf37 100644
--- a/src/components/shared/StarsRate.tsx
+++ b/src/components/shared/StarsRate.tsx
@@ -4,7 +4,7 @@ interface FiveStarsProps {
   totalStars: number;
 }
 
-export const FiveStars = ({ totalStars }: FiveStarsProps) => (
+export const FiveStars = ({ totalStars }: FiveStarsProps): JSX.Element => (
   <div className="flex flex-row gap-1.5">
     {new Array(totalStars).fill(0).map((_, index) => (
       <Star className="text-yellow" weight="fill" size={18} key={index} />
diff --git a/src/components/shared/ToolsSection.tsx b/src/components/shared/ToolsSection.tsx
index 2bf2ab1c6..82381d6a6 100644
--- a/src/components/shared/ToolsSection.tsx
+++ b/src/components/shared/ToolsSection.tsx
@@ -11,7 +11,12 @@ import {
 } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 
-export const ToolsSection = ({ textContent, lang }: { textContent: any; lang: string }) => {
+interface ToolsSectionProps {
+  textContent: any;
+  lang: string;
+}
+
+export const ToolsSection = ({ textContent, lang }: ToolsSectionProps): JSX.Element => {
   const router = useRouter();
   const pathname = router.pathname;
 
diff --git a/src/components/specialoffer/MarqueeComponent.tsx b/src/components/specialoffer/MarqueeComponent.tsx
index 98b545b21..975dd7f59 100644
--- a/src/components/specialoffer/MarqueeComponent.tsx
+++ b/src/components/specialoffer/MarqueeComponent.tsx
@@ -9,7 +9,7 @@ interface MarqueeComponentProps {
 
 export const MarqueeComponent = ({ label, bgColor = 'bg-color-1' }: MarqueeComponentProps) => {
   return (
-    <div className={`relative left-1/2 z-10 w-screen -translate-x-1/2`}>
+    <div className={'relative left-1/2 z-10 w-screen -translate-x-1/2'}>
       <div className={'flex xl:hidden'}>
         <Marquee gradientColor={[255, 255, 255]} className={bgColor} gradientWidth="32px" speed={30}>
           <div className="featured flex w-full flex-row space-x-10 p-6">
diff --git a/src/components/specialoffer/WhatWeDoSection.tsx b/src/components/specialoffer/WhatWeDoSection.tsx
index 543f38394..4b0cea5f1 100644
--- a/src/components/specialoffer/WhatWeDoSection.tsx
+++ b/src/components/specialoffer/WhatWeDoSection.tsx
@@ -29,7 +29,7 @@ export const WhatWeDoSectionForSpecialOffer = ({
           <div className="flex h-full flex-col items-center justify-center gap-8 p-7 text-center lg:items-start lg:pl-14 lg:text-start">
             <div className="flex max-w-[500px] flex-col gap-6 text-lg text-black lg:text-xl">
               {textContent.card.features.map((feature) => (
-                <div className="flex flex-row gap-2">
+                <div className="flex flex-row gap-2" key={feature}>
                   <CheckCircle className="mt-0.5 h-6 w-6 text-primary lg:mt-0 lg:h-8 lg:w-8" size={32} />
                   <p className="text-left font-semibold text-gray-80">{feature}</p>
                 </div>
diff --git a/src/components/success-stories/HeroSection.tsx b/src/components/success-stories/HeroSection.tsx
index b7fc357ad..c0dc3d867 100644
--- a/src/components/success-stories/HeroSection.tsx
+++ b/src/components/success-stories/HeroSection.tsx
@@ -1,7 +1,11 @@
 import Image from 'next/legacy/image';
 import Header from '@/components/shared/Header';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden pt-14">
       <div className="w-full lg:mx-4">
diff --git a/src/components/success-stories/WhatWeDo.tsx b/src/components/success-stories/WhatWeDo.tsx
index 2e3d39de9..0064f9407 100644
--- a/src/components/success-stories/WhatWeDo.tsx
+++ b/src/components/success-stories/WhatWeDo.tsx
@@ -2,7 +2,12 @@ import { ListMagnifyingGlass, MagicWand, SketchLogo } from '@phosphor-icons/reac
 import RenderDescription from '@/components/shared/RenderDescription';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 
-const WhatWeDo = ({ textContent, bannerLang }) => {
+interface WhatWeDoProps {
+  textContent: Record<string, any>;
+  bannerLang: string;
+}
+
+const WhatWeDo = ({ textContent, bannerLang }: WhatWeDoProps): JSX.Element => {
   return (
     <section id={'whatWeDo'} className="overflow-hidden bg-gray-1">
       <div className="flex flex-col items-center space-y-16 py-20 px-5">
diff --git a/src/components/techradar-discount/HeroSection.tsx b/src/components/techradar-discount/HeroSection.tsx
index b01931a25..43da99eec 100644
--- a/src/components/techradar-discount/HeroSection.tsx
+++ b/src/components/techradar-discount/HeroSection.tsx
@@ -1,9 +1,13 @@
 import { Globe, SketchLogo, CloudCheck, FileArrowUp, ClockCounterClockwise } from '@phosphor-icons/react';
-import React from 'react';
 import styles from './Background.module.scss';
 import { toast } from 'react-toastify';
+import Link from 'next/link';
 
-const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const open = () => toast.success('Copied to clipboard!');
 
   const subtitleTechradar = textContent.subtitle1.split('TECHRADAR')[0];
@@ -63,11 +67,9 @@ const HeroSection = ({ textContent }) => {
               }
             </p>
             <div className="flex rounded-lg bg-white px-9 py-4">
-              <a href="#pricing">
-                <button className="text-lg font-normal text-primary" onClick={() => {}}>
-                  {textContent.cta}
-                </button>
-              </a>
+              <Link href="#pricing" className="cursor-pointer">
+                <p className="text-lg font-normal text-primary">{textContent.cta}</p>
+              </Link>
             </div>
           </div>
           <div className="relative px-10 pt-20 lg:px-0 lg:pt-10">
diff --git a/src/components/techradar-discount/InfoSection.tsx b/src/components/techradar-discount/InfoSection.tsx
index 97d4815f6..54666139f 100644
--- a/src/components/techradar-discount/InfoSection.tsx
+++ b/src/components/techradar-discount/InfoSection.tsx
@@ -1,7 +1,10 @@
 import { ShieldCheck, LockKey, Scales, Fingerprint } from '@phosphor-icons/react';
-import React from 'react';
 
-const InfoSection = ({ textContent }) => {
+interface InfoSectionProps {
+  textContent: Record<string, any>;
+}
+
+const InfoSection = ({ textContent }: InfoSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col py-20">
diff --git a/src/components/techradar-discount/PaymentsSection.tsx b/src/components/techradar-discount/PaymentsSection.tsx
index 344c50332..b4219dcfe 100644
--- a/src/components/techradar-discount/PaymentsSection.tsx
+++ b/src/components/techradar-discount/PaymentsSection.tsx
@@ -2,7 +2,11 @@ import CardSkeleton from '@/components/components/CardSkeleton';
 import PriceCard from './PriceCard';
 import usePricing from '@/hooks/usePricing';
 
-const PaymentsSection = ({ textContent }) => {
+interface PaymentSectionProps {
+  textContent: Record<string, any>;
+}
+
+const PaymentsSection = ({ textContent }: PaymentSectionProps): JSX.Element => {
   const { products, currency, loadingCards } = usePricing();
 
   return (
diff --git a/src/components/temp-email/HeroSection.tsx b/src/components/temp-email/HeroSection.tsx
index 716271513..c8aff6ccf 100644
--- a/src/components/temp-email/HeroSection.tsx
+++ b/src/components/temp-email/HeroSection.tsx
@@ -27,7 +27,11 @@ import { useTempMailReducer } from './hooks/useTempMailReducer';
 import copyToClipboard from '../utils/copy-to-clipboard';
 import useWindowFocus from '@/hooks/useWindowFocus';
 
-export const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+export const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const isFocused = useWindowFocus();
 
   const { state, setUser, setBorderColor, setIsChangeEmailIconAnimated, setMessages, setSelectedMessage } =
diff --git a/src/components/temp-email/InfoSection.tsx b/src/components/temp-email/InfoSection.tsx
index 33c77335c..7d9538408 100644
--- a/src/components/temp-email/InfoSection.tsx
+++ b/src/components/temp-email/InfoSection.tsx
@@ -2,8 +2,14 @@ import Image from 'next/legacy/image';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 import { Bug, Detective, EyeSlash, Gift, Tray, UserPlus } from '@phosphor-icons/react';
 
-export const InfoSection = ({ textContent, bannerText, lang }) => {
-  const infoCards = (lang) => {
+interface InfoSectionProps {
+  textContent: Record<string, any>;
+  bannerText: Record<string, any>;
+  lang: string;
+}
+
+export const InfoSection = ({ textContent, bannerText, lang }: InfoSectionProps): JSX.Element => {
+  const infoCards = () => {
     return [
       {
         icon: Bug,
@@ -72,7 +78,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]"
diff --git a/src/components/temp-email/SignupSection.tsx b/src/components/temp-email/SignupSection.tsx
index 2a04beec8..cdcb19da0 100644
--- a/src/components/temp-email/SignupSection.tsx
+++ b/src/components/temp-email/SignupSection.tsx
@@ -1,21 +1,26 @@
-import React from 'react';
 import styles from '../../components/techradar-discount/Background.module.scss';
+import Link from 'next/link';
+import { SIGNUP_DRIVE_WEB } from '@/constants';
 
-export const SignupSection = ({ textContent }) => (
+interface SignupSectionProps {
+  textContent: Record<string, any>;
+}
+
+export const SignupSection = ({ textContent }: SignupSectionProps) => (
   <section className="overflow-hidden">
     <div className="flex flex-col items-center justify-center space-y-8 px-4 py-14 text-white">
       <div className="flex max-w-[595px] flex-col space-y-4 text-center">
         <p className="text-4xl font-semibold">{textContent.title}</p>
         <p className="text-xl font-normal">{textContent.description}</p>
       </div>
-      <button
+      <Link
+        href={SIGNUP_DRIVE_WEB}
+        target="_blank"
+        rel="noopener noreferrer"
         className="flex cursor-pointer rounded-lg bg-white px-6 py-2 hover:bg-blue-10"
-        onClick={() => {
-          window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
-        }}
       >
         <p className="text-base font-semibold text-primary">{textContent.createAccount}</p>
-      </button>
+      </Link>
     </div>
     <div
       className={`absolute top-0 left-0 -z-10 flex h-full w-full ${styles.partnerHeroSection} pointer-events-none origin-center`}
diff --git a/src/components/temp-email/components/EmailToolBar.tsx b/src/components/temp-email/components/EmailToolBar.tsx
index d6f621bad..bef276349 100644
--- a/src/components/temp-email/components/EmailToolBar.tsx
+++ b/src/components/temp-email/components/EmailToolBar.tsx
@@ -5,64 +5,57 @@ interface EmailToolBarProps {
   email: string | undefined;
   borderColor: boolean;
   isChangeEmailIconAnimated: boolean;
-  textContent: {
-    generatingEmail: string;
-    copyEmail: string;
-    deleteEmail: string;
-    expireEmail: string;
-  };
+  textContent: Record<string, any>;
   onCopy: () => void;
   onDelete: () => void;
 }
 
-function EmailToolbar({
+const EmailToolbar = ({
   email,
   borderColor,
   isChangeEmailIconAnimated,
   onCopy,
   onDelete,
   textContent,
-}: Readonly<EmailToolBarProps>) {
-  return (
-    <div className="flex w-full max-w-3xl flex-col items-center rounded-2xl border-4 border-primary/7 bg-primary/2 p-9">
-      <div className="flex w-full flex-col items-center justify-center gap-3 md:flex-row">
-        <div
-          className={`flex h-full w-full items-center justify-center rounded-xl md:w-screen md:max-w-[500px] ${
-            borderColor ? 'ring ring-primary ring-opacity-15' : 'border border-gray-20'
-          }`}
-        >
-          <button
-            className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl bg-white text-gray-80 shadow-sm ${
-              borderColor ? 'border border-primary' : ''
-            } px-4 py-3`}
-            onClick={onCopy}
-          >
-            <p>{email ?? textContent.generatingEmail}</p>
-            <Tooltip
-              variant="light"
-              id="copy-to-clipboard"
-              delayShow={700}
-              className="z-40 rounded-lg bg-white drop-shadow-md"
-            >
-              <p className="break-word text-center text-gray-80">{textContent.copyEmail}</p>
-            </Tooltip>
-            <Copy
-              data-tooltip-id="copy-to-clipboard"
-              size={24}
-              className={`${borderColor ? 'text-primary' : 'text-gray-50'}`}
-            />
-          </button>
-        </div>
+}: Readonly<EmailToolBarProps>): JSX.Element => (
+  <div className="flex w-full max-w-3xl flex-col items-center rounded-2xl border-4 border-primary/7 bg-primary/2 p-9">
+    <div className="flex w-full flex-col items-center justify-center gap-3 md:flex-row">
+      <div
+        className={`flex h-full w-full items-center justify-center rounded-xl md:w-screen md:max-w-[500px] ${
+          borderColor ? 'ring ring-primary ring-opacity-15' : 'border border-gray-20'
+        }`}
+      >
         <button
-          className="flex w-full flex-row items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-20 bg-gray-5 px-5 py-2.5 text-gray-80 shadow-sm hover:bg-gray-5 active:bg-gray-10"
-          onClick={onDelete}
+          className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl bg-white text-gray-80 shadow-sm ${
+            borderColor ? 'border border-primary' : ''
+          } px-4 py-3`}
+          onClick={onCopy}
         >
-          <ArrowClockwise size={24} className={`${isChangeEmailIconAnimated ? 'animate-spin-refresh' : ''}`} />
-          <p>{textContent.deleteEmail}</p>
+          <p>{email ?? textContent.generatingEmail}</p>
+          <Tooltip
+            variant="light"
+            id="copy-to-clipboard"
+            delayShow={700}
+            className="z-40 rounded-lg bg-white drop-shadow-md"
+          >
+            <p className="break-word text-center text-gray-80">{textContent.copyEmail}</p>
+          </Tooltip>
+          <Copy
+            data-tooltip-id="copy-to-clipboard"
+            size={24}
+            className={`${borderColor ? 'text-primary' : 'text-gray-50'}`}
+          />
         </button>
       </div>
+      <button
+        className="flex w-full flex-row items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-20 bg-gray-5 px-5 py-2.5 text-gray-80 shadow-sm hover:bg-gray-5 active:bg-gray-10"
+        onClick={onDelete}
+      >
+        <ArrowClockwise size={24} className={`${isChangeEmailIconAnimated ? 'animate-spin-refresh' : ''}`} />
+        <p>{textContent.deleteEmail}</p>
+      </button>
     </div>
-  );
-}
+  </div>
+);
 
 export default EmailToolbar;
diff --git a/src/components/temp-email/components/InboxView.tsx b/src/components/temp-email/components/InboxView.tsx
index 945a260fe..205b0baf0 100644
--- a/src/components/temp-email/components/InboxView.tsx
+++ b/src/components/temp-email/components/InboxView.tsx
@@ -23,7 +23,7 @@ export const Inbox = ({
   messages,
   onMessageSelected,
   selectedMessage,
-}: InboxProps) => {
+}: InboxProps): JSX.Element => {
   return (
     <div className="relative px-52">
       <div className="hidden w-full justify-center md:flex">
diff --git a/src/components/temp-email/components/Messages.tsx b/src/components/temp-email/components/Messages.tsx
index b4134f04e..229fc6adf 100644
--- a/src/components/temp-email/components/Messages.tsx
+++ b/src/components/temp-email/components/Messages.tsx
@@ -1,36 +1,24 @@
-import { ArrowClockwise } from '@phosphor-icons/react';
-import moment from 'moment';
-import Image from 'next/image';
 import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import moment from 'moment';
+import { ArrowClockwise } from '@phosphor-icons/react';
 
-const Loader = (): JSX.Element => {
-  return (
-    <svg
-      width="96"
-      height="86"
-      className="animate-spin-slow"
-      viewBox="0 0 96 86"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M18.121 73.1269C10.4218 65.3992 5.99857 55.166 5.6659 44.3107L5.63002 43.1355L1.65554 46.7803L0 44.9615L7.68021 37.9148L14.7003 45.6241L12.8875 47.2864L9.26009 43.3025L9.32858 44.7933C9.77475 54.4955 13.8105 63.6426 20.6917 70.5492C24.8586 74.7309 30.0027 77.9456 35.5688 79.8462C52.0427 85.4716 70.3658 79.3146 80.1275 64.8735L81.1477 63.3643L84.1548 65.4117L83.1353 66.9201C72.4584 82.7159 52.4177 89.4503 34.3998 83.2979C28.3099 81.2185 22.6819 77.7007 18.1236 73.1255L18.121 73.1269ZM12.9678 19.0766C23.644 3.28149 43.6899 -3.45164 61.7143 2.70272C67.801 4.78079 73.4264 8.29663 77.9828 12.8698C85.8058 20.7219 90.2323 31.1221 90.4483 42.1554L90.4717 43.3489L94.3438 39.7978L96.0007 41.6166L88.3204 48.6626L81.301 40.9533L83.1138 39.291L86.828 43.3699L86.7882 41.9204C86.5142 31.9385 82.4706 22.5341 75.4016 15.439C71.2412 11.2632 66.1043 8.05307 60.5454 6.15505C44.0637 0.527741 25.7359 6.68275 15.9742 21.1232L14.954 22.6323L11.9476 20.585L12.9678 19.0766Z"
-        fill="#0066FF"
-        fillOpacity="0.15"
-      />
-    </svg>
-  );
-};
+interface NoMessageSelectedProps {
+  messagesLength: number;
+  textContent: any;
+  onRefreshButtonClicked: () => void;
+}
+
+interface MessageSelectedProps {
+  item: Record<string, any>;
+  textContent: any;
+}
 
 export const NoMessageSelected = ({
   messagesLength,
   textContent,
   onRefreshButtonClicked,
-}: {
-  messagesLength: number;
-  textContent: any;
-  onRefreshButtonClicked: () => void;
-}): JSX.Element => {
+}: NoMessageSelectedProps): JSX.Element => {
   const [isRefreshIconAnimated, setIsRefreshIconAnimated] = useState<boolean>(false);
   const withoutMessagesSentence = `${textContent.withoutMessages.youHave} ${messagesLength} ${textContent.withoutMessages.newMessages}`;
   const withMessagesSentence = `${textContent.withMessages}`;
@@ -72,13 +60,7 @@ export const NoMessageSelected = ({
   );
 };
 
-export const MessageSelected = ({
-  item,
-  textContent,
-}: {
-  item: Record<string, any>;
-  textContent: any;
-}): JSX.Element => {
+export const MessageSelected = ({ item, textContent }: MessageSelectedProps): JSX.Element => {
   const date = moment(item.date).format('dddd DD, MMMM YYYY [at] HH:mm');
   const name = item.from?.charAt().toUpperCase();
 
diff --git a/src/components/temp-email/services/icon-service.ts b/src/components/temp-email/services/icon-service.ts
index 16ffd71d8..500fca079 100644
--- a/src/components/temp-email/services/icon-service.ts
+++ b/src/components/temp-email/services/icon-service.ts
@@ -1,4 +1,5 @@
 import { FunctionComponent, SVGProps } from 'react';
+import fileExtensionGroups from '../types/types';
 
 import LightFolder from '../public/icons/file-types/folder.svg';
 import DefaultFile from '../public/icons/file-types/default.svg';
@@ -14,7 +15,6 @@ import WordFile from '../public/icons/file-types/word.svg';
 import XlsFile from '../public/icons/file-types/excel.svg';
 import CsvFile from '../public/icons/file-types/csv.svg';
 import ZipFile from '../public/icons/file-types/zip.svg';
-import fileExtensionGroups from '../types/types';
 
 export enum FileExtensionGroup {
   Audio,
diff --git a/src/components/utils/schema-markup-generator.ts b/src/components/utils/schema-markup-generator.ts
index 8cb111425..e970e551f 100644
--- a/src/components/utils/schema-markup-generator.ts
+++ b/src/components/utils/schema-markup-generator.ts
@@ -29,7 +29,7 @@ export const sm_faq = (faq) => {
       }}`;
     if (i + 1 < arr.length) data += ',';
   });
-  data += `]}`;
+  data += ']}';
   return data;
 };
 
@@ -53,4 +53,4 @@ export const sm_breadcrumb = (name, url) => {
           "item": "https://internxt.com/${url}"
         }
       ]}`;
-};
\ No newline at end of file
+};
diff --git a/src/components/virus-scanner/BannersSection.tsx b/src/components/virus-scanner/BannersSection.tsx
index 1b94e8df0..b0ebca49b 100644
--- a/src/components/virus-scanner/BannersSection.tsx
+++ b/src/components/virus-scanner/BannersSection.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
 import Image from 'next/legacy/image';
 import { CaretRight } from '@phosphor-icons/react';
+import { getImage } from '@/lib/getImage';
 
-const BannersSection = ({ textContent, lang }) => {
+interface BannersSectionProps {
+  textContent: Record<string, any>;
+  lang: string;
+}
+
+const BannersSection = ({ textContent, lang }: BannersSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col items-center justify-center space-y-16 px-5 py-20">
@@ -33,7 +38,7 @@ const BannersSection = ({ textContent, lang }) => {
           </div>
           <div className="flex w-screen max-w-xs flex-col items-center justify-center space-y-6 rounded-2xl bg-gray-1 p-10 text-center">
             <Image
-              src="/images/temp-email/byte-converter.svg"
+              src={getImage('/images/temp-email/byte-converter.svg')}
               quality={100}
               width={95}
               height={70}
diff --git a/src/components/virus-scanner/CtaSection.tsx b/src/components/virus-scanner/CtaSection.tsx
index ff590473b..cbec82f98 100644
--- a/src/components/virus-scanner/CtaSection.tsx
+++ b/src/components/virus-scanner/CtaSection.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
 import styles from '../../components/techradar-discount/Background.module.scss';
 
-const CtaSection = ({ textContent }) => {
+interface CtaSectionProps {
+  textContent: Record<string, any>;
+}
+
+const CtaSection = ({ textContent }: CtaSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden py-12">
       <div className="flex flex-col items-center justify-center pt-12 lg:px-20">
diff --git a/src/components/virus-scanner/FeaturesSection.tsx b/src/components/virus-scanner/FeaturesSection.tsx
index 0683a85a8..7feae6396 100644
--- a/src/components/virus-scanner/FeaturesSection.tsx
+++ b/src/components/virus-scanner/FeaturesSection.tsx
@@ -32,7 +32,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
               </div>
               <div className="flex">
                 <Image
-                  src={`/images/virus-scanner/virus_scanner.webp`}
+                  src={'/images/virus-scanner/virus_scanner.webp'}
                   width={573}
                   height={390}
                   alt="Viruses Hate Privacy"
@@ -44,7 +44,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
             <div className="flex flex-col-reverse items-center md:flex-row md:space-x-16">
               <div className="flex">
                 <Image
-                  src={`/images/virus-scanner/malware.webp`}
+                  src={'/images/virus-scanner/malware.webp'}
                   width={573}
                   height={390}
                   alt="Stop malware image"
@@ -82,7 +82,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
               </div>
               <div className="flex">
                 <Image
-                  src={`/images/virus-scanner/phishing.webp`}
+                  src={'/images/virus-scanner/phishing.webp'}
                   width={573}
                   height={390}
                   alt="Scan files image"
diff --git a/src/components/virus-scanner/HeroSection.tsx b/src/components/virus-scanner/HeroSection.tsx
index c0853e76a..464619c24 100644
--- a/src/components/virus-scanner/HeroSection.tsx
+++ b/src/components/virus-scanner/HeroSection.tsx
@@ -41,7 +41,7 @@ const HeroSection = ({ textContent }) => {
       body: formdata,
     };
 
-    fetch(`https://clamav.internxt.com/filescan`, requestOptions)
+    fetch('https://clamav.internxt.com/filescan', requestOptions)
       .then(async (res) => {
         if (res.status === 200) {
           const data = await res.json();
@@ -212,7 +212,7 @@ const HeroSection = ({ textContent }) => {
                             ) : (
                               <div className="flex flex-row gap-2">
                                 <CheckCircle weight="fill" size={24} className="text-green" />
-                                <span className={`text-lg font-semibold text-green-dark`}>
+                                <span className={'text-lg font-semibold text-green-dark'}>
                                   {textContent.table.noVirusDetected}
                                 </span>
                               </div>
@@ -414,7 +414,7 @@ const HeroSection = ({ textContent }) => {
                   <>
                     {/* Default state */}
                     <div className=" flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-xl">
-                      <div className={`flex flex-row items-center lg:space-x-0 xl:space-x-20`}>
+                      <div className={'flex flex-row items-center lg:space-x-0 xl:space-x-20'}>
                         <div className="hidden lg:flex">
                           <Image
                             src="/images/virus-scanner/upload_file.webp"
diff --git a/src/components/vpn-extension/HeroSection.tsx b/src/components/vpn-extension/HeroSection.tsx
index 7b5d8396e..a7bcb99d2 100644
--- a/src/components/vpn-extension/HeroSection.tsx
+++ b/src/components/vpn-extension/HeroSection.tsx
@@ -4,7 +4,11 @@ import HeroSectionSafeArea from '../shared/HeroSectionSafeArea';
 import { RedirectButton } from '../shared/RedirectButton';
 import { VPN_CHROME_WEB_STORE } from '@/constants';
 
-export const HeroSection = ({ textContent }) => {
+interface HeroSectionProps {
+  textContent: Record<string, any>;
+}
+
+export const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   return (
     <section className="overflow-hidden pt-8">
       <HeroSectionSafeArea>
@@ -42,7 +46,7 @@ export const HeroSection = ({ textContent }) => {
               <Image
                 src={'/images/vpn-extension/vpn-hero.svg'}
                 alt="VPN Hero"
-                className={`top-10 left-0 -translate-x-72 rounded-lg lg:absolute`}
+                className={'top-10 left-0 -translate-x-72 rounded-lg lg:absolute'}
                 width={328}
                 height={385}
                 draggable={false}
diff --git a/src/components/vpn-extension/SecureVPNSection.tsx b/src/components/vpn-extension/SecureVPNSection.tsx
index eb03bc9e8..ee94b2421 100644
--- a/src/components/vpn-extension/SecureVPNSection.tsx
+++ b/src/components/vpn-extension/SecureVPNSection.tsx
@@ -37,7 +37,7 @@ export const SecureVPNSection = ({ textContent }) => {
           {cards.map((card) => (
             <div
               key={card.title}
-              className={`flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]`}
+              className={'flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]'}
             >
               <card.icon className="mb-6 text-4xl text-primary" size={32} />
               <div className="flex w-full max-w-[400px] flex-col">
diff --git a/src/components/webdav/HowToUseCLISection.tsx b/src/components/webdav/HowToUseCLISection.tsx
index 1ba770074..3c431adc0 100644
--- a/src/components/webdav/HowToUseCLISection.tsx
+++ b/src/components/webdav/HowToUseCLISection.tsx
@@ -32,7 +32,7 @@ export const HowToUseCLISection = ({ textContent }) => {
         </div>
         <div className="flex w-full flex-row flex-wrap justify-center gap-8">
           {cards.map((card) => (
-            <div className="flex w-full max-w-[350px] flex-col rounded-2xl bg-gray-1 p-10">
+            <div className="flex w-full max-w-[350px] flex-col rounded-2xl bg-gray-1 p-10" key={card.title}>
               <div className="flex flex-col  gap-6">
                 <p className="text-2xl font-medium text-gray-100">{card.title}</p>
                 <p className="text-lg text-gray-80">{card.description}</p>
diff --git a/src/components/webdav/WebDAVSupportSection.tsx b/src/components/webdav/WebDAVSupportSection.tsx
index bd062f075..4737b2eb5 100644
--- a/src/components/webdav/WebDAVSupportSection.tsx
+++ b/src/components/webdav/WebDAVSupportSection.tsx
@@ -19,7 +19,7 @@ export const WebDAVSupportSection = ({ textContent }) => {
             </p>
             <div className="flex flex-col gap-3">
               {textContent.howToInstall.steps.map((steps) => (
-                <div className="flex flex-row items-start gap-3 md:items-center">
+                <div className="flex flex-row items-start gap-3 md:items-center" key={steps.step}>
                   <div className="flex whitespace-nowrap rounded-lg bg-gray-5 px-4 py-2">
                     <p className="text-lg font-semibold text-gray-80">{steps.step}</p>
                   </div>
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
index c89dea216..818aa64b3 100644
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -1,10 +1,8 @@
-import _ from 'lodash';
-
 export function getCheckoutSessionData(session) {
   const conversionData = {
     coupon: {},
     properties: {},
-    traits: {}
+    traits: {},
   };
   const amount = session.amount_total * 0.01;
   const { discounts } = session.total_details.breakdown;
@@ -14,7 +12,7 @@ export function getCheckoutSessionData(session) {
     conversionData.coupon = {
       discount_id: discount.id,
       coupon_id: discount.coupon.id,
-      coupon_name: discount.coupon.name.toLowerCase()
+      coupon_name: discount.coupon.name.toLowerCase(),
     };
   }
 
@@ -31,7 +29,7 @@ export function getCheckoutSessionData(session) {
     plan_name: session.metadata.name,
     impact_value: amount === 0 ? 5 : amount,
     subscription_id: session.subscription,
-    payment_intent: session.payment_intent
+    payment_intent: session.payment_intent,
   };
 
   conversionData.traits = {
@@ -41,13 +39,12 @@ export function getCheckoutSessionData(session) {
     storage_limit: session.metadata.maxSpaceBytes,
     plan_name: session.metadata.name,
     subscription_id: session.subscription,
-    payment_intent: session.payment_intent
+    payment_intent: session.payment_intent,
   };
 
   return conversionData;
 }
 
-// eslint-disable-next-line import/prefer-default-export
 export async function trackPayment({ session, user }) {
   /*  if (user.registerCompleted && session.payment_status === 'paid') {
      const conversionData = getCheckoutSessionData(session);
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 0aa7e240e..5c358cdc9 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -4,6 +4,7 @@ const AUTH_FLOW_URL = 'https://drive.internxt.com';
 
 export const openAuthDialog = (view: 'login' | 'signup' | 'recover'): void => {
   if (view === 'login') {
+    //
   } else if (view === 'signup') {
     window.top?.postMessage({ action: 'openDialogSignup' }, window.location.origin);
   }
diff --git a/src/lib/brave.ts b/src/lib/brave.ts
index 783bcf7e9..b96a7449b 100644
--- a/src/lib/brave.ts
+++ b/src/lib/brave.ts
@@ -1,5 +1,5 @@
 export default function isBrave() {
   const maybeBrave = (window.navigator as { brave?: any }).brave;
 
-  return maybeBrave != undefined && maybeBrave.isBrave.name == "isBrave";
-}
\ No newline at end of file
+  return maybeBrave != undefined && maybeBrave.isBrave.name == 'isBrave';
+}
diff --git a/src/lib/checker.js b/src/lib/checker.ts
similarity index 71%
rename from src/lib/checker.js
rename to src/lib/checker.ts
index dcc520bac..d3f37a0b4 100644
--- a/src/lib/checker.js
+++ b/src/lib/checker.ts
@@ -4,8 +4,6 @@ const crypto = require('crypto');
 const PREFIX_LENGTH = 5;
 const API_URL = 'https://api.pwnedpasswords.com/range/';
 const API_TIMEOUT = 5000;
-const HTTP_STATUS_OK = 200;
-const HTTP_STATUS_NOT_FOUND = 404;
 
 function hash(password) {
   const shasum = crypto.createHash('sha1');
@@ -14,15 +12,10 @@ function hash(password) {
 }
 
 function get(hashedPasswordPrefix) {
-  const opts = {
-    timeout: API_TIMEOUT,
-  };
-
-  return fetch(API_URL + hashedPasswordPrefix, opts)
-    .then((res) => res.text());
+  return fetch(API_URL + hashedPasswordPrefix).then((res) => res.text());
 }
 
-export default function pwnedpasswords(password, cb) {
+export default function pwnedpasswords(password, cb?) {
   const hasCallback = typeof cb === 'function';
 
   if (typeof password !== 'string') {
@@ -36,12 +29,13 @@ export default function pwnedpasswords(password, cb) {
 
   return get(hashedPasswordPrefix)
     .then((res) => {
-      const found = res
-        .split('\n')
-        .map((line) => line.split(':'))
-        .filter((filtered) => filtered[0].toLowerCase() === hashedPasswordSuffix)
-        .map((mapped) => Number(mapped[1]))
-        .shift() || 0;
+      const found =
+        res
+          .split('\n')
+          .map((line) => line.split(':'))
+          .filter((filtered) => filtered[0].toLowerCase() === hashedPasswordSuffix)
+          .map((mapped) => Number(mapped[1]))
+          .shift() || 0;
 
       return hasCallback ? cb(null, found) : found;
     })
diff --git a/src/lib/gtag.js b/src/lib/gtag.ts
similarity index 100%
rename from src/lib/gtag.js
rename to src/lib/gtag.ts
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 02589f7af..86bf8cc62 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -43,7 +43,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     };
   }, [router.events]);
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
   return (
     <LiveChatLoaderProvider provider="intercom" providerKey="ta2ffq6n">
       <GlobalUIManager
@@ -92,6 +91,7 @@ function MyApp({ Component, pageProps }: AppProps) {
                 src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
               />
               <Script
+                id="gtag-manager"
                 strategy="afterInteractive"
                 dangerouslySetInnerHTML={{
                   __html: `
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 4a65e94cb..1fc6ac20d 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -12,6 +12,7 @@ import { sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import CtaSection from '@/components/shared/CtaSection';
 import CompanySection from '@/components/about/CompanySection';
 import HeroSection2 from '@/components/about/HeroSection2';
+import { GetServerSidePropsContext } from 'next';
 
 const CTA_URL = 'https://internxt.com/pricing';
 
@@ -22,7 +23,7 @@ const AboutUs = ({ lang, textContent, footerLang, navbarLang, metatagsDescriptio
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcumb-about" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('About', 'about')}
       </Script>
 
@@ -52,7 +53,7 @@ const AboutUs = ({ lang, textContent, footerLang, navbarLang, metatagsDescriptio
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const footerLang = require(`@/assets/lang/${lang}/footer.json`);
diff --git a/src/pages/affiliates/[filename].tsx b/src/pages/affiliates/[filename].tsx
index 57f03f406..75805a5d9 100644
--- a/src/pages/affiliates/[filename].tsx
+++ b/src/pages/affiliates/[filename].tsx
@@ -7,6 +7,7 @@ import Layout from '@/components/layout/Layout';
 import { MinimalNavbar } from '@/components/layout/navbars/MinimalNavbar';
 import { HeroSectionForPartner } from '@/components/affiliates/affiliates-partners-template/HeroSection';
 import { CouponType } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 const SecondFeaturesSection = dynamic(
   () => import('@/components/home/SecondFeaturesSection').then((mod) => mod.default),
@@ -190,14 +191,14 @@ const AffiliateTemplates = ({ langJson, homeJson, lang, metatagsDescriptions, fo
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = 'en';
-  const pathname = ctx.params.filename;
+  const pathname = ctx.params?.filename;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/affiliates-partners-template.json`);
-  const homeJson = require(`@/assets/lang/en/home.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/affiliates-partners-template.json');
+  const homeJson = require('@/assets/lang/en/home.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/affiliates/index.tsx b/src/pages/affiliates/index.tsx
index b3c6e913d..e0524d277 100644
--- a/src/pages/affiliates/index.tsx
+++ b/src/pages/affiliates/index.tsx
@@ -9,6 +9,7 @@ import Footer from '@/components/layout/footers/Footer';
 import Layout from '@/components/layout/Layout';
 import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/shared/CtaSection';
+import { GetServerSidePropsContext } from 'next';
 
 const Affiliates = ({ langJson, lang, metatagsDescriptions, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((item) => item.id === 'affiliates');
@@ -43,13 +44,13 @@ const Affiliates = ({ langJson, lang, metatagsDescriptions, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/affiliates.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/affiliates.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/annual.tsx b/src/pages/annual.tsx
index af61690ae..87eee62fa 100644
--- a/src/pages/annual.tsx
+++ b/src/pages/annual.tsx
@@ -6,6 +6,7 @@ import PaymentSection from '@/components/annual/PaymentSection';
 import FeatureSection from '@/components/annual/FeatureSection';
 import InfoSection from '@/components/home/InfoSection';
 import CtaSection from '@/components/pricing/CtaSection';
+import { GetServerSidePropsContext } from 'next';
 
 const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSectionLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -31,7 +32,7 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/b.tsx b/src/pages/b.tsx
index 517a7a796..63607a6f3 100644
--- a/src/pages/b.tsx
+++ b/src/pages/b.tsx
@@ -9,6 +9,7 @@ import CtaSection from '@/components/shared/CtaSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { MarqueeComponent } from '@/components/specialoffer/MarqueeComponent';
 import cookies from '@/lib/cookies';
+import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
 
 const HomePageV2 = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
@@ -51,7 +52,7 @@ const HomePageV2 = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/black-friday.tsx b/src/pages/black-friday.tsx
index 073e4be7e..beedabaf5 100644
--- a/src/pages/black-friday.tsx
+++ b/src/pages/black-friday.tsx
@@ -12,6 +12,7 @@ import FaqSection from '@/components/black-friday/FAQSection';
 import BestStorageSection from '@/components/black-friday/BestStorageSection';
 import LoginBFBanner from '@/components/banners/LoginBFBanner';
 import FooterSection from '@/components/black-friday/FooterSection';
+import { GetServerSidePropsContext } from 'next';
 
 const BLACK_FRIDAY_METATAG_ID = 'black-friday';
 
@@ -53,8 +54,8 @@ const BlackFriday = ({ lang, metatagsDescriptions, langJson, navbarLang }) => {
   );
 };
 
-export async function getServerSideProps(ctx) {
-  const language = ctx.locale;
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+  const language = ctx.locale as string;
 
   const allowedLanguages = ['en', 'fr'];
 
diff --git a/src/pages/byte-converter.tsx b/src/pages/byte-converter.tsx
index 875508d57..df1bbba01 100644
--- a/src/pages/byte-converter.tsx
+++ b/src/pages/byte-converter.tsx
@@ -13,6 +13,7 @@ import TryInternxtBanner from '@/components/banners/TryInternxtBanner';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import { ToolsSection } from '@/components/shared/ToolsSection';
+import { GetServerSidePropsContext } from 'next';
 
 const CONVERTER_TOOL_METATAG_ID = 'converter-tool';
 
@@ -21,11 +22,11 @@ const ConverterTool = ({ lang, metatagsDescriptions, navbarLang, langJson, tools
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-byte-converter" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-byte-converter" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Byte Converter', 'byte-converter')}
       </Script>
 
@@ -65,7 +66,7 @@ const ConverterTool = ({ lang, metatagsDescriptions, navbarLang, langJson, tools
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloud-storage-comparison.tsx b/src/pages/cloud-storage-comparison.tsx
index 37c11b158..8c5e5b623 100644
--- a/src/pages/cloud-storage-comparison.tsx
+++ b/src/pages/cloud-storage-comparison.tsx
@@ -15,6 +15,7 @@ import ThirdFeaturesSection from '@/components/home/ThirdFeaturesSection';
 import CtaSection from '@/components/shared/CtaSection';
 import { ComparisonHeader } from '@/components/comparison/ComparisonHeader';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
+import { GetServerSidePropsContext } from 'next';
 
 const URL_REDIRECT = 'https://drive.internxt.com/new';
 
@@ -23,11 +24,11 @@ const CloudStorageComparison = ({ metatagsDescriptions, langJson, navbarLang, fo
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-drive" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-drive" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Cloud Storage Comparison', 'comparison')}
       </Script>
 
@@ -61,7 +62,7 @@ const CloudStorageComparison = ({ metatagsDescriptions, langJson, navbarLang, fo
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloud-storage-for-education.tsx b/src/pages/cloud-storage-for-education.tsx
index a05ae23a6..a7bb12831 100644
--- a/src/pages/cloud-storage-for-education.tsx
+++ b/src/pages/cloud-storage-for-education.tsx
@@ -11,6 +11,7 @@ import BenefitsOfInternxtSection from '@/components/cloud-storage-for-education/
 import WhyChooseInternxtSection from '@/components/cloud-storage-for-education/WhyChooseInternxtSection';
 import ClaimYourDiscountSection from '@/components/cloud-storage-for-education/ClaimYourDiscountSection';
 import IntercomTicketCreatedBanner from '@/components/banners/IntercomTicketCreatedBanner';
+import { GetServerSidePropsContext } from 'next';
 
 const CloudStorageForEducation = ({ lang, metatagsDescriptions, navbar, textContent, footer }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cloud-storage-for-education');
@@ -53,7 +54,7 @@ const CloudStorageForEducation = ({ lang, metatagsDescriptions, navbar, textCont
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale || ctx.defaultLocale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloudwards.tsx b/src/pages/cloudwards.tsx
index 96173716f..f69884db6 100644
--- a/src/pages/cloudwards.tsx
+++ b/src/pages/cloudwards.tsx
@@ -8,6 +8,7 @@ import TestimonialsSection from '@/components/home/TestimonialsSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
 import { CtaSection } from '@/components/affiliates/affiliates-partners-template/CtaSection';
 import { CouponType } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 export type CardsType = 'all' | 'one';
 
@@ -76,13 +77,13 @@ const Cloudwards = ({ langJson, homeJson, lang, metatagsDescriptions, footerLang
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/affiliates-partners-template.json`);
-  const homeJson = require(`@/assets/lang/en/home.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/affiliates-partners-template.json');
+  const homeJson = require('@/assets/lang/en/home.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/cyber-awareness.tsx b/src/pages/cyber-awareness.tsx
index dfa3fdba0..23feae293 100644
--- a/src/pages/cyber-awareness.tsx
+++ b/src/pages/cyber-awareness.tsx
@@ -17,17 +17,18 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import FileParallaxSection from '@/components/home/FileParallaxSection';
 import FeatureSection from '@/components/cyber-awareness/FeatureSection';
 import QuizSection from '@/components/cyber-awareness/QuizSection';
+import { GetServerSidePropsContext } from 'next';
 
 const CyberAwareness = ({ metatagsDescriptions, textContent, footerLang, navbarLang, lang, bannerText }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cyber-awareness');
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-cyber-awareness" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.FaqSection.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-cyber-awareness" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Cyber Awareness', 'cyber-awareness')}
       </Script>
 
@@ -80,7 +81,7 @@ const CyberAwareness = ({ metatagsDescriptions, textContent, footerLang, navbarL
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cyber-security-quiz.tsx b/src/pages/cyber-security-quiz.tsx
index bde450b6c..e29401590 100644
--- a/src/pages/cyber-security-quiz.tsx
+++ b/src/pages/cyber-security-quiz.tsx
@@ -3,6 +3,7 @@ import Layout from '@/components/layout/Layout';
 import Navbar from '@/components/layout/navbars/Navbar';
 import QuizSection from '@/components/CybersecurityQuiz/QuizSection';
 import { CyberSecurityQuizViews } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 const CyberSecurityQuiz = ({ metatagsDescriptions, navbarLang, textContent, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cyber-security-quiz');
@@ -36,12 +37,12 @@ const CyberSecurityQuiz = ({ metatagsDescriptions, navbarLang, textContent, lang
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const textContent = require(`@/assets/lang/en/cyber-security-quiz.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const textContent = require('@/assets/lang/en/cyber-security-quiz.json');
 
   return {
     props: {
diff --git a/src/pages/dealfuel.tsx b/src/pages/dealfuel.tsx
index cfc650c6a..1339b9900 100644
--- a/src/pages/dealfuel.tsx
+++ b/src/pages/dealfuel.tsx
@@ -13,6 +13,7 @@ import PaymentSection from '@/components/lifetime/PaymentSection';
 import moment from 'moment';
 import HeroSection from '@/components/lifetime/HeroSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
+import { GetServerSidePropsContext } from 'next';
 
 const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
@@ -30,15 +31,15 @@ const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang
       description={metatags[0].description}
       segmentName="DealFuel"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       {openDialog ? (
-        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
+        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="TECHCULT" />
           </div>
         </div>
@@ -66,13 +67,13 @@ const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/techcult.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/techcult.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/dealmirror.tsx b/src/pages/dealmirror.tsx
index 466f28a07..8bcf64e5a 100644
--- a/src/pages/dealmirror.tsx
+++ b/src/pages/dealmirror.tsx
@@ -13,6 +13,7 @@ import SignUp from '@/components/auth/SignUp';
 import { X } from '@phosphor-icons/react';
 import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
+import { GetServerSidePropsContext } from 'next';
 
 const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
@@ -37,15 +38,15 @@ const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLa
       description={metatags[0].description}
       segmentName="DealMirror"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       {openDialog ? (
-        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
+        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="DEALMIRROR" />
           </div>
         </div>
@@ -68,14 +69,14 @@ const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLa
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/techcult.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/techcult.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/drive.tsx b/src/pages/drive.tsx
index 6b4402719..ca36db63c 100644
--- a/src/pages/drive.tsx
+++ b/src/pages/drive.tsx
@@ -16,17 +16,18 @@ import { downloadDriveLinks } from '@/lib/get-download-url';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import { CliCard } from '@/components/drive/CliCard';
+import { GetServerSidePropsContext } from 'next';
 
 const Drive = ({ metatagsDescriptions, download, langJson, navbarLang, footerLang, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'drive');
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-drive" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-drive" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Drive', 'drive')}
       </Script>
 
@@ -59,7 +60,7 @@ const Drive = ({ metatagsDescriptions, download, langJson, navbarLang, footerLan
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const download = await downloadDriveLinks();
   const lang = ctx.locale;
 
diff --git a/src/pages/file-converter/[filename].tsx b/src/pages/file-converter/[filename].tsx
index bf77b82ac..7925137a8 100644
--- a/src/pages/file-converter/[filename].tsx
+++ b/src/pages/file-converter/[filename].tsx
@@ -7,6 +7,7 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import { ConverterSection } from '@/components/file-converter/ConverterSection';
 import { FeaturesSection } from '@/components/file-converter/FeaturesSection';
 import CtaSection from '@/components/shared/CtaSection';
+import { GetServerSidePropsContext } from 'next';
 
 const FileConverter = ({
   metatagsDescriptions,
@@ -43,10 +44,10 @@ const FileConverter = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const textLang = lang === 'es' ? lang : 'en';
-  const pathname = ctx.params.filename;
+  const pathname = ctx.params?.filename;
 
   const metatagsDescriptions = require(`@/assets/lang/${textLang}/metatags-descriptions.json`);
   const navbarLang = require(`@/assets/lang/${textLang}/navbar.json`);
diff --git a/src/pages/file-converter/index.tsx b/src/pages/file-converter/index.tsx
index 52a6aa8f3..0a98e7027 100644
--- a/src/pages/file-converter/index.tsx
+++ b/src/pages/file-converter/index.tsx
@@ -8,6 +8,7 @@ import { FeaturesSection } from '@/components/file-converter/main-state/Features
 import CtaSection from '@/components/shared/CtaSection';
 import QASection from '@/components/shared/FaqSection';
 import Footer from '@/components/layout/footers/Footer';
+import { GetServerSidePropsContext } from 'next';
 
 const FileConverter = ({
   metatagsDescriptions,
@@ -45,7 +46,7 @@ const FileConverter = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const textLang = lang === 'es' ? lang : 'en';
 
diff --git a/src/pages/freemonth.tsx b/src/pages/freemonth.tsx
deleted file mode 100644
index c6a92c2c3..000000000
--- a/src/pages/freemonth.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import HeroSection from '@/components/partnerships/freemonth/HeroSection';
-import FeatureSection from '@/components/partnerships/freemonth/FeatureSection';
-import Footer from '@/components/layout/footers/Footer';
-import Navbar from '@/components/layout/navbars/Navbar';
-import Layout from '@/components/layout/Layout';
-import cookies from '@/lib/cookies';
-
-const SpecialOffer = ({ metatagsDescriptions, langJson, navbarLang, footerLang, deviceLang, lang }) => {
-  const metatags = metatagsDescriptions.filter((desc) => desc.id === 'freemonth');
-
-  return (
-    <Layout
-      title={metatags[0].title}
-      description={metatags[0].description}
-      segmentName="Freemonth Partnership"
-      lang={lang}
-    >
-      <Navbar textContent={navbarLang} lang={deviceLang} cta={['default']} fixed darkMode={false} />
-
-      <HeroSection textContent={langJson.template.HeroSection} lang={lang} />
-
-      <FeatureSection textContent={langJson.template.FeatureSection} />
-
-      <Footer textContent={footerLang} lang={deviceLang} darkMode={false} />
-    </Layout>
-  );
-};
-
-export async function getServerSideProps(ctx) {
-  const lang = ctx.locale;
-  const deviceLang = ctx.locale;
-
-  const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/${lang}/partnerships.json`);
-  const navbarLang = require(`@/assets/lang/${lang}/navbar.json`);
-  const footerLang = require(`@/assets/lang/${lang}/footer.json`);
-
-  cookies.setReferralCookie(ctx);
-
-  return {
-    props: {
-      lang,
-      deviceLang,
-      metatagsDescriptions,
-      langJson,
-      navbarLang,
-      footerLang,
-    },
-  };
-}
-
-export default SpecialOffer;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7ec1deda7..5a21daa3a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,6 +16,7 @@ import { CouponType } from '@/lib/types';
 import FirstWhatWeDoSection from '@/components/home/FirstWhatWeDoSection';
 import SecondWhatWeDoSection from '@/components/home/SecondWhatWeDoSection';
 import { useRouter } from 'next/router';
+import { GetServerSidePropsContext } from 'next';
 
 const Home = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'home');
@@ -71,7 +72,7 @@ const Home = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang })
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/legal.tsx b/src/pages/legal.tsx
index d1242dafd..ee004c620 100644
--- a/src/pages/legal.tsx
+++ b/src/pages/legal.tsx
@@ -3,6 +3,7 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import Layout from '@/components/layout/Layout';
 import cookies from '@/lib/cookies';
 import TermsAndConditionsOverview from '@/components/legal/TermsAndConditionsOverview';
+import { GetServerSidePropsContext } from 'next';
 
 const Legal = ({ lang, metatagsDescriptions, textContent, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'legal');
@@ -18,7 +19,7 @@ const Legal = ({ lang, metatagsDescriptions, textContent, navbarLang, footerLang
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/lifetime/celebration/[filename].tsx b/src/pages/lifetime/celebration/[filename].tsx
index 5fdf11890..c269d634f 100644
--- a/src/pages/lifetime/celebration/[filename].tsx
+++ b/src/pages/lifetime/celebration/[filename].tsx
@@ -12,6 +12,7 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import Navbar from '@/components/layout/navbars/Navbar';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
+import { GetServerSidePropsContext } from 'next';
 
 const ALLOWED_PATHS = ['canada', 'usa', 'france', 'belgium'];
 
@@ -66,7 +67,7 @@ const LifetimeCelebrationTemplate = ({
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -100,9 +101,9 @@ const LifetimeCelebrationTemplate = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   let lang = 'en';
-  const pathname = ctx.params.filename;
+  const pathname = ctx.params?.filename as string;
 
   if (['france', 'belgium'].includes(pathname)) {
     lang = 'fr';
diff --git a/src/pages/lifetime/index.tsx b/src/pages/lifetime/index.tsx
index fb0792ad2..98514e595 100644
--- a/src/pages/lifetime/index.tsx
+++ b/src/pages/lifetime/index.tsx
@@ -8,8 +8,9 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/lifetime/CtaSection';
 import TestimonialsSection from '@/components/home/TestimonialsSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
+import { GetServerSidePropsContext } from 'next';
 
-const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, footerLang, deviceLang, navbarLang }) => {
+const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, footerLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
   const discount = 0.25;
 
@@ -19,7 +20,7 @@ const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, foot
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -51,9 +52,8 @@ const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, foot
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
-  const deviceLang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const langJson = require(`@/assets/lang/${lang}/lifetime.json`);
@@ -66,7 +66,6 @@ export async function getServerSideProps(ctx) {
   return {
     props: {
       lang,
-      deviceLang,
       metatagsDescriptions,
       langJson,
       testimonialsJson,
diff --git a/src/pages/lifetime_special.tsx b/src/pages/lifetime_special.tsx
index 014ed5df0..687a080e2 100644
--- a/src/pages/lifetime_special.tsx
+++ b/src/pages/lifetime_special.tsx
@@ -9,6 +9,7 @@ import CtaSection from '@/components/lifetime/CtaSection';
 import TestimonialsSection from '@/components/home/TestimonialsSection';
 import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
+import { GetServerSidePropsContext } from 'next';
 
 const LifetimeSpecial = ({
   lang,
@@ -28,7 +29,7 @@ const LifetimeSpecial = ({
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -54,7 +55,7 @@ const LifetimeSpecial = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
diff --git a/src/pages/locker.tsx b/src/pages/locker.tsx
index 41f068799..09ac1e67d 100644
--- a/src/pages/locker.tsx
+++ b/src/pages/locker.tsx
@@ -10,6 +10,7 @@ import PriceTable from '@/components/annual-plans-for-affiliates/components/Pric
 import { checkout } from '@/lib/auth';
 import { CouponType } from '@/lib/types';
 import usePricing from '@/hooks/usePricing';
+import { GetServerSidePropsContext } from 'next';
 
 export default function Locker({ metatagsDescriptions, navbarLang, footerLang, lang, textContent }) {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -48,12 +49,12 @@ export default function Locker({ metatagsDescriptions, navbarLang, footerLang, l
   );
 }
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const textContent = require(`@/assets/lang/en/locker.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const textContent = require('@/assets/lang/en/locker.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
 
   return {
     props: {
diff --git a/src/pages/media-area.tsx b/src/pages/media-area.tsx
index ef8accce9..a27bd22fc 100644
--- a/src/pages/media-area.tsx
+++ b/src/pages/media-area.tsx
@@ -10,6 +10,7 @@ import SocialProofSection from '@/components/home/SocialProofSection';
 import ThirdFeaturesSection from '@/components/media-area/FeatureSection';
 import InternxtInTheNews from '@/components/media-area/InternxtInTheNews';
 import AnalysisSection from '@/components/media-area/AnalysisSection';
+import { GetServerSidePropsContext } from 'next';
 
 const MediaArea = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang, downloadURL }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'media-area');
@@ -43,13 +44,13 @@ const MediaArea = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLan
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/media-area.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/media-area.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/mightydeals.tsx b/src/pages/mightydeals.tsx
index e09661684..fc6c34faf 100644
--- a/src/pages/mightydeals.tsx
+++ b/src/pages/mightydeals.tsx
@@ -13,6 +13,7 @@ import SignUp from '@/components/auth/SignUp';
 import { X } from '@phosphor-icons/react';
 import Link from 'next/link';
 import moment from 'moment';
+import { GetServerSidePropsContext } from 'next';
 
 const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
   const [openDialog, setOpenDialog] = useState(false);
@@ -30,15 +31,15 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
       description={metatags[0].description}
       segmentName="MightyDeals"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       {openDialog ? (
-        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
+        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="MIGHTYDEALS" />
           </div>
         </div>
@@ -63,9 +64,9 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
 
       <div className="flex w-full flex-row items-center justify-center space-x-4 py-16">
         <Link href="/" locale={lang} className="flex flex-shrink-0">
-          <img loading="lazy" src={`../../logos/internxt/cool-gray-90.svg`} alt="Internxt logo" />
+          <img loading="lazy" src={'../../logos/internxt/cool-gray-90.svg'} alt="Internxt logo" />
         </Link>
-        <p className={`text-xs text-cool-gray-60`}>
+        <p className={'text-xs text-cool-gray-60'}>
           {footerLang.FooterSection.copyright.line1 + year + footerLang.FooterSection.copyright.line2}
         </p>
       </div>
@@ -73,14 +74,14 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/techcult.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/techcult.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/newsletter-subscribe.tsx b/src/pages/newsletter-subscribe.tsx
index d6ecc6e92..6f29db108 100644
--- a/src/pages/newsletter-subscribe.tsx
+++ b/src/pages/newsletter-subscribe.tsx
@@ -6,6 +6,7 @@ import FileParallaxSection from '@/components/home/FileParallaxSection';
 import MakePrivacySection from '@/components/newsletter/MakePrivacySection';
 import WhatGetSection from '@/components/newsletter/WhatGetSection';
 import CtaSection from '@/components/shared/CtaSection';
+import { GetServerSidePropsContext } from 'next';
 
 const Newsletter = ({ lang, metatagsDescriptions, textContent, navbar, footer }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'newsletter-subscribe');
@@ -28,13 +29,13 @@ const Newsletter = ({ lang, metatagsDescriptions, textContent, navbar, footer })
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const navbar = require(`@/assets/lang/en/navbar.json`);
-  const textContent = require(`@/assets/lang/en/newsletter.json`);
-  const footer = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const navbar = require('@/assets/lang/en/navbar.json');
+  const textContent = require('@/assets/lang/en/newsletter.json');
+  const footer = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/open-source.tsx b/src/pages/open-source.tsx
index fa7088a3a..0df6855c9 100644
--- a/src/pages/open-source.tsx
+++ b/src/pages/open-source.tsx
@@ -10,8 +10,9 @@ import WhatAreTheBenefits from '@/components/open-source/WhatAreTheBenefits';
 import WhatIsOSS from '@/components/open-source/WhatIsOSS';
 import CtaSection from '@/components/shared/CtaSection';
 import { downloadDriveLinks } from '@/lib/get-download-url';
+import { GetServerSidePropsContext } from 'next';
 
-const CTA_SIGNUP_URL = `https://drive.internxt.com/new`;
+const CTA_SIGNUP_URL = 'https://drive.internxt.com/new';
 
 const GITHUB_URL = 'https://github.com/internxt';
 
@@ -46,7 +47,7 @@ const OpenSource = ({ lang, metatagsDescriptions, langJson, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const download = await downloadDriveLinks();
 
diff --git a/src/pages/partner-discount.tsx b/src/pages/partner-discount.tsx
index a9483e0b2..ac594f5f5 100644
--- a/src/pages/partner-discount.tsx
+++ b/src/pages/partner-discount.tsx
@@ -18,7 +18,7 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
 
       <HeroSection textContent={langJson.HeroSection} />
 
-      <PaymentSection textContent={langJson.PaymentSection} lang={lang} />
+      <PaymentSection textContent={langJson.PaymentSection} />
 
       <FeatureSection textContent={langJson.FeatureSection} />
 
@@ -31,12 +31,12 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
   );
 };
 
-export async function getServerSideProps(ctx) {
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/partner-discount.json`);
-  const infoSectionLang = require(`@/assets/lang/en/home.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+export async function getServerSideProps() {
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/partner-discount.json');
+  const infoSectionLang = require('@/assets/lang/en/home.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   return {
     props: {
diff --git a/src/pages/password-checker.tsx b/src/pages/password-checker.tsx
index 638df665d..3ec3100b7 100644
--- a/src/pages/password-checker.tsx
+++ b/src/pages/password-checker.tsx
@@ -12,6 +12,7 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import { ToolsSection } from '@/components/shared/ToolsSection';
 import CtaSection from '@/components/shared/CtaSection';
 import InfoSection from '@/components/password-generator/InfoSection';
+import { GetServerSidePropsContext } from 'next';
 
 const PasswordChecker = ({
   metatagsDescriptions,
@@ -26,11 +27,11 @@ const PasswordChecker = ({
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-pass-checker" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-pass-checker" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Password Checker', 'password-checker')}
       </Script>
 
@@ -61,11 +62,7 @@ const PasswordChecker = ({
 
         <CtaSection textContent={langJson.CtaSection} url="https://drive.internxt.com/new" maxWidth="max-w-lg" />
 
-        <FeaturesSection
-          textContent={langJson.FeaturesSection}
-          bannerText={bannerLang.SignUpPwdCheckerBanner}
-          lang={lang}
-        />
+        <FeaturesSection textContent={langJson.FeaturesSection} lang={lang} />
 
         <ToolsSection textContent={toolsContent} lang={lang} />
 
@@ -79,7 +76,7 @@ const PasswordChecker = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/password-generator.tsx b/src/pages/password-generator.tsx
index 841f8297a..6c330aa59 100644
--- a/src/pages/password-generator.tsx
+++ b/src/pages/password-generator.tsx
@@ -10,6 +10,7 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { sm_breadcrumb, sm_faq } from '@/components/utils/schema-markup-generator';
 import Script from 'next/script';
+import { GetServerSidePropsContext } from 'next';
 
 const DRIVE_URL = 'https://drive.internxt.com/new';
 
@@ -26,11 +27,11 @@ const PasswordGenerator = ({
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-pass-generator" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-pass-generator" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Password Generator', 'password-generator')}
       </Script>
 
@@ -60,7 +61,7 @@ const PasswordGenerator = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const downloadURL = await downloadDriveLinks();
 
   const lang = ctx.locale;
diff --git a/src/pages/pccomponentes-products.tsx b/src/pages/pccomponentes-products.tsx
index 14c2bbb01..056bb00d5 100644
--- a/src/pages/pccomponentes-products.tsx
+++ b/src/pages/pccomponentes-products.tsx
@@ -8,6 +8,7 @@ import CardSkeleton from '@/components/components/CardSkeleton';
 import PriceCard from '@/components/prices/PriceCard';
 import usePricing from '@/hooks/usePricing';
 import { CouponType } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -42,7 +43,7 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
     <Layout segmentName={pageName} title={metatags[0].title} description={metatags[0].description} lang={lang}>
       <div className="flex flex-col space-y-10">
         <div className="flex flex-col items-center space-y-9">
-          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
+          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
           <div id="billingButtons" className="flex flex-row rounded-lg bg-cool-gray-10 p-0.5">
             <button
               type="button"
@@ -62,7 +63,7 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
               onClick={() => {
                 setActiveSwitchPlan('Lifetime');
                 setBillingFrequency(Interval.Lifetime);
-                setPageName(`Pricing Individuals Lifetime`);
+                setPageName('Pricing Individuals Lifetime');
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Lifetime' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
@@ -189,10 +190,10 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = 'es';
-  const metatagsDescriptions = require(`@/assets/lang/es/metatags-descriptions.json`);
-  const textContent = require(`@/assets/lang/es/priceCard.json`);
+  const metatagsDescriptions = require('@/assets/lang/es/metatags-descriptions.json');
+  const textContent = require('@/assets/lang/es/priceCard.json');
 
   return {
     props: {
diff --git a/src/pages/pcloud-alternative.tsx b/src/pages/pcloud-alternative.tsx
index 1b2e19a8a..854525a22 100644
--- a/src/pages/pcloud-alternative.tsx
+++ b/src/pages/pcloud-alternative.tsx
@@ -10,6 +10,7 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/shared/CtaSection';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
 import cookies from '@/lib/cookies';
+import { GetServerSidePropsContext } from 'next';
 
 const pCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pcloud-alternative');
@@ -37,7 +38,7 @@ const pCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, fo
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 0cae686d9..224394575 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -15,6 +15,7 @@ import BestStorageSection from '@/components/pricing/BestStorageSection';
 import FileParallaxSection from '@/components/home/FileParallaxSection';
 import InfoSection from '@/components/home/InfoSection';
 import { CouponType } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textContent, homeComponentsLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -22,11 +23,11 @@ const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textConte
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-pricing" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-pricing" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Pricing', 'pricing')}
       </Script>
 
@@ -66,7 +67,7 @@ const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textConte
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const textContent = require(`@/assets/lang/${lang}/pricing.json`);
diff --git a/src/pages/privacy-directory.tsx b/src/pages/privacy-directory.tsx
index eb597e1cd..cf5605e27 100644
--- a/src/pages/privacy-directory.tsx
+++ b/src/pages/privacy-directory.tsx
@@ -12,6 +12,7 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import HeroSection2 from '@/components/privacy-directory/HeroSection2';
 import CtaSection from '@/components/shared/CtaSection';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
+import { GetServerSidePropsContext } from 'next';
 
 const PrivacyDirectory = ({
   metatagsDescriptions,
@@ -26,11 +27,11 @@ const PrivacyDirectory = ({
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.FaqSection.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Privacy Directory', 'privacy-directory')}
       </Script>
 
@@ -78,7 +79,7 @@ const PrivacyDirectory = ({
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const navbarLang = require(`@/assets/lang/${lang}/navbar.json`);
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index dc61a19c9..dc711ad9a 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -16,6 +16,7 @@ import BetterTomorrowSection from '@/components/privacy/BetterTomorrowSection';
 import FeatureSection from '@/components/privacy/FeatureSection';
 import HeroSection2 from '@/components/privacy/HeroSection2';
 import ManifestoSection2 from '@/components/privacy/ManifestoSection2';
+import { GetServerSidePropsContext } from 'next';
 
 const newDesignLang = ['en', 'es', 'zh-tw'];
 
@@ -28,21 +29,21 @@ const Privacy = ({ metatagsDescriptions, langJson, navbarLang, footerLang, lang
     <>
       {newDesignLang.includes(lang) ? (
         <>
-          <Script type="application/ld+json" strategy="beforeInteractive">
+          <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
             {sm_faq(langJson.FaqSection.faq)}
           </Script>
 
-          <Script type="application/ld+json" strategy="beforeInteractive">
+          <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
             {sm_breadcrumb('Privacy', 'privacy')}
           </Script>
         </>
       ) : (
         <>
-          <Script type="application/ld+json" strategy="beforeInteractive">
+          <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
             {sm_faq(langJson.ManifestoSection.FaqSection.faq)}
           </Script>
 
-          <Script type="application/ld+json" strategy="beforeInteractive">
+          <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
             {sm_breadcrumb('Privacy', 'privacy')}
           </Script>
         </>
@@ -83,7 +84,7 @@ const Privacy = ({ metatagsDescriptions, langJson, navbarLang, footerLang, lang
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/sitemap.xml.js b/src/pages/sitemap.xml.ts
similarity index 100%
rename from src/pages/sitemap.xml.js
rename to src/pages/sitemap.xml.ts
diff --git a/src/pages/specialoffer/freeuser.tsx b/src/pages/specialoffer/freeuser.tsx
index 67736f9e6..fa448a3b7 100644
--- a/src/pages/specialoffer/freeuser.tsx
+++ b/src/pages/specialoffer/freeuser.tsx
@@ -9,6 +9,7 @@ import { HeroSectionForSpecialOffer } from '@/components/specialoffer/HeroSectio
 import { InxtFeaturesSection } from '@/components/specialoffer/InxtFeaturesSection';
 import { WhatWeDoSectionForSpecialOffer } from '@/components/specialoffer/WhatWeDoSection';
 import { CouponType } from '@/lib/types';
+import { GetServerSidePropsContext } from 'next';
 
 const FreeUserPage = ({ metatagsDescriptions, footerLang, navbarLang, lang, textContent }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'free-user')[0];
@@ -51,7 +52,7 @@ const FreeUserPage = ({ metatagsDescriptions, footerLang, navbarLang, lang, text
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const textContent = require(`@/assets/lang/${lang}/specialoffer/free-user.json`);
diff --git a/src/pages/stackcommerce.tsx b/src/pages/stackcommerce.tsx
index c1c6ace21..61fc437c6 100644
--- a/src/pages/stackcommerce.tsx
+++ b/src/pages/stackcommerce.tsx
@@ -1,4 +1,7 @@
 import { useEffect, useState } from 'react';
+import { GetServerSidePropsContext } from 'next';
+import moment from 'moment';
+import { X } from '@phosphor-icons/react';
 
 import HeroSection from '@/components/lifetime/HeroSection';
 import FeatureSection from '@/components/lifetime/FeatureSection';
@@ -8,13 +11,24 @@ import cookies from '@/lib/cookies';
 import PaymentSection from '@/components/lifetime/PaymentSection';
 import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/lifetime/CtaSection';
-
 import SignUp from '@/components/auth/SignUp';
-import { X } from '@phosphor-icons/react';
-import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
 
-const StackCommerce = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
+interface StackCommerceProps {
+  langJson: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  lang: string;
+}
+
+const StackCommerce = ({
+  lang,
+  metatagsDescriptions,
+  langJson,
+  footerLang,
+  navbarLang,
+}: StackCommerceProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
   const year = moment().format('YYYY');
 
@@ -43,15 +57,15 @@ const StackCommerce = ({ lang, metatagsDescriptions, langJson, footerLang, devic
       description={metatags[0].description}
       segmentName="StackCommerce"
       lang={lang}
-      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
+      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
     >
       {openDialog ? (
-        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
+        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="STACKCOMMERCE" />
           </div>
         </div>
@@ -79,21 +93,19 @@ const StackCommerce = ({ lang, metatagsDescriptions, langJson, footerLang, devic
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
-  const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/techcult.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/techcult.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   cookies.setReferralCookie(ctx);
 
   return {
     props: {
       lang,
-      deviceLang,
       metatagsDescriptions,
       langJson,
       navbarLang,
diff --git a/src/pages/startpage.tsx b/src/pages/startpage.tsx
index 25fe9d218..b741838c4 100644
--- a/src/pages/startpage.tsx
+++ b/src/pages/startpage.tsx
@@ -11,8 +11,23 @@ import { checkout } from '@/lib/auth';
 
 import { CouponType } from '@/lib/types';
 import usePricing from '@/hooks/usePricing';
+import { GetServerSidePropsContext } from 'next';
 
-export default function Startpage({ metatagsDescriptions, navbarLang, footerLang, lang, textContent }) {
+interface StartpageProps {
+  textContent: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  lang: string;
+}
+
+export default function Startpage({
+  metatagsDescriptions,
+  navbarLang,
+  footerLang,
+  lang,
+  textContent,
+}: StartpageProps): JSX.Element {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
   const { currencyValue } = usePricing({});
   const offerDiscount = 25;
@@ -61,12 +76,12 @@ export default function Startpage({ metatagsDescriptions, navbarLang, footerLang
   );
 }
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const textContent = require(`@/assets/lang/en/startpage.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const textContent = require('@/assets/lang/en/startpage.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
 
   return {
     props: {
diff --git a/src/pages/techradar-discount.tsx b/src/pages/techradar-discount.tsx
index aed1676c6..04b01e9fb 100644
--- a/src/pages/techradar-discount.tsx
+++ b/src/pages/techradar-discount.tsx
@@ -5,8 +5,25 @@ import HeroSection from '@/components/techradar-discount/HeroSection';
 import PaymentsSection from '@/components/techradar-discount/PaymentsSection';
 import InfoSection from '@/components/techradar-discount/InfoSection';
 import Footer from '@/components/layout/footers/Footer';
+import { GetServerSidePropsContext } from 'next';
 
-const PartnerDiscount = ({ lang, metatagsDescriptions, navbarLang, langJson, footerLang }) => {
+interface PartnerDiscountProps {
+  langJson: Record<string, any>;
+  toolsContent: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  bannerLang: Record<string, any>;
+  lang: string;
+}
+
+const PartnerDiscount = ({
+  lang,
+  metatagsDescriptions,
+  navbarLang,
+  langJson,
+  footerLang,
+}: PartnerDiscountProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'techradar-discount');
 
   return (
@@ -24,13 +41,13 @@ const PartnerDiscount = ({ lang, metatagsDescriptions, navbarLang, langJson, foo
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
-  const langJson = require(`@/assets/lang/en/techradar-discount.json`);
-  const navbarLang = require(`@/assets/lang/en/navbar.json`);
-  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
+  const langJson = require('@/assets/lang/en/techradar-discount.json');
+  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const footerLang = require('@/assets/lang/en/footer.json');
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/temporary-email.tsx b/src/pages/temporary-email.tsx
index d38d20e78..1ca9f3b46 100644
--- a/src/pages/temporary-email.tsx
+++ b/src/pages/temporary-email.tsx
@@ -15,7 +15,7 @@ import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import { setup } from '@/lib/csrf';
 import { useRouter } from 'next/router';
 
-const TempEmail = () => {
+const TempEmail = (): JSX.Element => {
   const dialogAction = useGlobalDialog();
   const { locale: lang } = useRouter() as { locale: string };
 
@@ -30,11 +30,11 @@ const TempEmail = () => {
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-temp-mail" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-temp-mail" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Temporary Email', 'temporary-email')}
       </Script>
 
@@ -61,7 +61,7 @@ const TempEmail = () => {
   );
 };
 
-export const getServerSideProps = setup(async (req, res) => {
+export const getServerSideProps = setup(async () => {
   return { props: {} };
 });
 
diff --git a/src/pages/virus-scanner.tsx b/src/pages/virus-scanner.tsx
index eceb966bc..5969800de 100644
--- a/src/pages/virus-scanner.tsx
+++ b/src/pages/virus-scanner.tsx
@@ -11,17 +11,36 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import TryInternxtBanner from '@/components/banners/TryInternxtBanner';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
+import { GetServerSidePropsContext } from 'next';
+
+interface VirusScannerProps {
+  langJson: Record<string, any>;
+  toolsContent: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  bannerLang: Record<string, any>;
+  lang: string;
+}
 
-const Scan = ({ metatagsDescriptions, langJson, toolsContent, navbarLang, footerLang, lang, bannerLang }) => {
+const Scan = ({
+  metatagsDescriptions,
+  langJson,
+  toolsContent,
+  navbarLang,
+  footerLang,
+  lang,
+  bannerLang,
+}: VirusScannerProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'virus-scanner');
 
   return (
     <>
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="schema-virus-scanner" type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script type="application/ld+json" strategy="beforeInteractive">
+      <Script id="breadcrumb-virus-scanner" type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Virus Scanner', 'virus-scanner')}
       </Script>
 
@@ -53,7 +72,7 @@ const Scan = ({ metatagsDescriptions, langJson, toolsContent, navbarLang, footer
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/vpn.tsx b/src/pages/vpn.tsx
index 9c5f881b6..c7ba55a7e 100644
--- a/src/pages/vpn.tsx
+++ b/src/pages/vpn.tsx
@@ -11,7 +11,25 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { VPN_CHROME_WEB_STORE } from '@/constants';
 
-const VPN = ({ metatagsDescriptions, langJson, toolsContent, bannerJson, lang, navbarLang, footerLang }) => {
+interface VPNProps {
+  langJson: Record<string, any>;
+  toolsContent: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  bannerJson: Record<string, any>;
+  lang: string;
+}
+
+const VPN = ({
+  metatagsDescriptions,
+  langJson,
+  toolsContent,
+  bannerJson,
+  lang,
+  navbarLang,
+  footerLang,
+}: VPNProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'vpn-extension');
 
   return (
@@ -41,7 +59,7 @@ const VPN = ({ metatagsDescriptions, langJson, toolsContent, bannerJson, lang, n
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps() {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/webdav.tsx b/src/pages/webdav.tsx
index 60a83e10a..1112cab02 100644
--- a/src/pages/webdav.tsx
+++ b/src/pages/webdav.tsx
@@ -9,7 +9,14 @@ import Footer from '@/components/layout/footers/Footer';
 import { SIGNUP_DRIVE_WEB } from '../constants';
 import FAQSection from '@/components/shared/FaqSection';
 
-const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }) => {
+interface WebDAVProps {
+  langJson: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+}
+
+const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }: WebDAVProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'webDAV');
 
   return (
@@ -35,7 +42,7 @@ const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }) => {
   );
 };
 
-export async function getServerSideProps(ctx) {
+export async function getServerSideProps() {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/what-does-google-know-about-me.tsx b/src/pages/what-does-google-know-about-me.tsx
index 60f87ca61..a42a34ccd 100644
--- a/src/pages/what-does-google-know-about-me.tsx
+++ b/src/pages/what-does-google-know-about-me.tsx
@@ -6,9 +6,20 @@ import HeroSection from '@/components/what-does-google-know-about-me/HeroSection
 import ManageGoogleDataSection from '@/components/what-does-google-know-about-me/ManageGoogleDataSection';
 import { ToolsSection } from '@/components/shared/ToolsSection';
 import WhatGoogleKnowsSection from '@/components/what-does-google-know-about-me/WhatGoogleKnowsSection';
+import { GetServerSidePropsContext } from 'next';
 
 const URL_REDIRECT = 'https://drive.internxt.com/new';
 
+interface WhatDoesGoogleKnowAboutMeProps {
+  langJson: Record<string, any>;
+  toolsContent: Record<string, any>;
+  metatagsDescriptions: Record<string, any>;
+  navbarLang: Record<string, any>;
+  footerLang: Record<string, any>;
+  bannerLang: Record<string, any>;
+  lang: string;
+}
+
 const WhatDoesGoogleKnowAboutMe = ({
   lang,
   langJson,
@@ -17,7 +28,7 @@ const WhatDoesGoogleKnowAboutMe = ({
   navbarLang,
   footerLang,
   bannerLang,
-}) => {
+}: WhatDoesGoogleKnowAboutMeProps): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'what-google-knows');
 
   return (
@@ -47,7 +58,7 @@ const WhatDoesGoogleKnowAboutMe = ({
   );
 };
 
-export async function getServerSideProps(ctx: any) {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/tests/redeem-codes.test.ts b/tests/redeem-codes.test.ts
index 8d58f4191..02894539c 100644
--- a/tests/redeem-codes.test.ts
+++ b/tests/redeem-codes.test.ts
@@ -1,15 +1,14 @@
-// Tests that a valid GET request with correct code and provider parameters returns the expected response
-import axios from 'axios';
-import handler from '../pages/api/check_code';
-import { expect } from '@jest/globals';
+// // Tests that a valid GET request with correct code and provider parameters returns the expected response
+// import axios from 'axios';
+// import { expect } from '@jest/globals';
 
-test('test_valid_coupon', async () => {
-  const apiCall = await axios.get('http://localhost:3000/api/check_code', {
-    params: {
-      code: '2tb_code_redeem',
-      provider: 'TECHCULT',
-    },
-  });
+// test('test_valid_coupon', async () => {
+//   const apiCall = await axios.get('http://localhost:3000/api/check_code', {
+//     params: {
+//       code: '2tb_code_redeem',
+//       provider: 'TECHCULT',
+//     },
+//   });
 
-  expect(apiCall.status).toBe(404);
-});
+//   expect(apiCall.status).toBe(404);
+// });
diff --git a/yarn.lock b/yarn.lock
index afc08ccf5..4ff213b17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1735,6 +1735,11 @@
   resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.1.5.tgz#762c368778a4040d52c5532b8af1692b66e16783"
   integrity sha512-B7vRm/w+P/+eavWZP5CB5Ul0ffK4Y7fpd/auWKuGvm+8pVgAJzbOK8O0s+DqzR+TwWkh5pHtJTuoAtaSvgCPzg==
 
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
+
 "@popperjs/core@^2.8.6":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
@@ -3785,6 +3790,11 @@ eslint-config-next@13:
     eslint-plugin-react "^7.33.2"
     eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
 
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -3859,6 +3869,14 @@ eslint-plugin-jsx-a11y@^6.7.1:
     object.entries "^1.1.7"
     object.fromentries "^2.0.7"
 
+eslint-plugin-prettier@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
+  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.6"
+
 "eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
@@ -4081,6 +4099,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -6226,6 +6249,18 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier-plugin-organize-imports@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz#77967f69d335e9c8e6e5d224074609309c62845e"
+  integrity sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==
+
 prettier-plugin-tailwindcss@0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
@@ -7277,6 +7312,14 @@ swc-plugin-coverage-instrument@^0.0.20:
   resolved "https://registry.yarnpkg.com/swc-plugin-coverage-instrument/-/swc-plugin-coverage-instrument-0.0.20.tgz#fdbd4b176e405c826c0e5146453ac7a6f1ba1cfa"
   integrity sha512-WXTGILCZE2hW61yrmxi6doN/UB4RT2K1JJSQVPn9JMJ6X4WJpZsesHi4lHy6qRKVsNIlHZvTWofkpuRi/WQUig==
 
+synckit@^0.8.6:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
+  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
 table@^6.0.9:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
@@ -7470,6 +7513,11 @@ tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"

From c9537694c5cbc10b4d29b810706c5ed4afd3c84b Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 28 Jun 2024 09:37:03 +0200
Subject: [PATCH 05/10] Revert "feat: add eslint to the build process"

This reverts commit 345d791ba1396c4432ce176d62bb91bb003c26eb.
---
 .eslintrc.json                                |   9 +-
 package.json                                  |   3 -
 src/components/Snackbar.tsx                   |   1 +
 .../CtaSection.tsx                            |  12 +-
 .../HeroSection.tsx                           |   4 +-
 src/components/banners/LoginBFBanner.tsx      |   8 +-
 src/components/banners/WheelBanner.tsx        | 113 +++++++
 .../banners/components/WheelComponent.tsx     | 148 +++++++++
 src/components/components/Countdown.tsx       |  17 +-
 src/components/dealfuel/PriceCard.tsx         |  23 +-
 src/components/dealfuel/PriceTable.tsx        |   4 +
 src/components/home/InfoSection.tsx           |   2 +
 src/components/home/SocialProofSection.tsx    |   1 +
 src/components/home/TestimonialsSection.tsx   |   9 +-
 src/components/home/ThirdFeaturesSection.tsx  |  22 +-
 src/components/home/components/FileItem.tsx   |  14 +-
 src/components/home/components/Label.tsx      |   7 +-
 .../components/heroSection/TitleAndSignup.tsx |   6 +-
 .../components/heroSection/TitleAndSurvey.tsx |   8 +-
 src/components/layout/BFBanner.tsx            | 113 +++++++
 src/components/layout/Layout.tsx              |  10 +-
 src/components/layout/ProductsNavigation.tsx  |  12 +-
 .../layout/components/LanguageBox.tsx         |  51 +--
 .../components/navbar/ItemsNavigation.tsx     | 244 +++++++-------
 src/components/layout/footers/Footer.tsx      |  44 +--
 .../layout/footers/MinimalFooter.tsx          |   4 +-
 .../layout/navbars/MinimalNavbar.tsx          |   2 +-
 src/components/layout/navbars/Navbar.tsx      |  40 ++-
 .../legal/TermsAndConditionsOverview.tsx      |  11 +-
 .../legal/components/SelectSection.tsx        |  14 +-
 src/components/lifetime/CtaSection.tsx        |   2 +-
 src/components/lifetime/HeroSection.tsx       |   4 +-
 .../lifetime/PriceBannerForCampaigns.tsx      |   2 +-
 .../lifetime/celebration/HeroSection.tsx      |   2 +-
 src/components/media-area/KitSection.tsx      |   2 +-
 .../newsletter/MakePrivacySection.tsx         |  44 +--
 .../partner-discount/HeroSection.tsx          |  12 +-
 .../partner-discount/InfoSection.tsx          |  12 +-
 .../partner-discount/PaymentSection.tsx       |   7 +-
 .../partnerships/freemonth/FeatureSection.js  | 121 +++++++
 .../partnerships/freemonth/HeroSection.js     |  50 +++
 .../partnerships/freemonth/PriceCard.js       | 306 ++++++++++++++++++
 .../partnerships/guru99/FeatureSection.js     | 121 +++++++
 .../partnerships/guru99/HeroSection.js        |  87 +++++
 .../partnerships/guru99/PriceCard.js          | 304 +++++++++++++++++
 .../password-checker/FeaturesSection.tsx      |  17 +-
 .../password-checker/HeroSection.tsx          |  14 +-
 .../password-generator/HeroSection.tsx        |  11 +-
 .../password-generator/InfoSection.tsx        |  10 +-
 .../components/CheckboxSettings.tsx           |  12 +-
 .../components/PasswordSettings.tsx           |  12 +-
 .../password-generator/utils/index.ts         |   2 +-
 .../prices/CyberAwarenessSpecialCard.tsx      |  16 +-
 src/components/prices/FreePlanCard.tsx        |   6 +-
 src/components/prices/PriceCard.tsx           |  10 +-
 src/components/prices/PriceTable.tsx          |   8 +-
 src/components/prices/SpecialPriceCard.tsx    |   8 +-
 src/components/pricing/BestStorageSection.tsx |   7 +-
 src/components/pricing/CtaSection.tsx         |   8 +-
 src/components/pricing/HeroSection.tsx        |   6 +-
 .../privacy-directory/HeroSection2.tsx        |   5 +-
 .../privacy-directory/SupportNGOsSection.tsx  |   3 +-
 .../privacy/BetterTomorrowSection.tsx         |   7 +-
 src/components/privacy/FeatureSection.tsx     |   8 +-
 src/components/privacy/HeroSection.tsx        |   8 +-
 src/components/privacy/HeroSection2.tsx       |   8 +-
 src/components/privacy/InxtAppsSection.tsx    |   7 +-
 src/components/privacy/ManifestoSection.tsx   |  11 +-
 src/components/privacy/ManifestoSection2.tsx  |  11 +-
 src/components/privacy/SecuritumSection.tsx   |   6 +-
 src/components/services/stripe.service.ts     |   2 +-
 .../shared/CommandTextInputCopy.tsx           |   4 +-
 .../shared/CompanyLogosRecognitions.tsx       |   2 +-
 src/components/shared/DownloadComponent.tsx   |   4 +-
 src/components/shared/DropArea.tsx            |   2 +-
 src/components/shared/FaqSection.tsx          |   2 +-
 src/components/shared/Header.tsx              |  11 +-
 src/components/shared/HeroSectionSafeArea.tsx |  14 +-
 src/components/shared/ProductCard.tsx         |  52 +--
 src/components/shared/RedirectButton.tsx      |   2 +-
 src/components/shared/RenderDescription.tsx   |   7 +-
 src/components/shared/StarsRate.tsx           |   2 +-
 src/components/shared/ToolsSection.tsx        |   7 +-
 .../specialoffer/MarqueeComponent.tsx         |   2 +-
 .../specialoffer/WhatWeDoSection.tsx          |   2 +-
 .../success-stories/HeroSection.tsx           |   6 +-
 src/components/success-stories/WhatWeDo.tsx   |   7 +-
 .../techradar-discount/HeroSection.tsx        |  16 +-
 .../techradar-discount/InfoSection.tsx        |   7 +-
 .../techradar-discount/PaymentsSection.tsx    |   6 +-
 src/components/temp-email/HeroSection.tsx     |   6 +-
 src/components/temp-email/InfoSection.tsx     |  12 +-
 src/components/temp-email/SignupSection.tsx   |  19 +-
 .../temp-email/components/EmailToolBar.tsx    |  81 ++---
 .../temp-email/components/InboxView.tsx       |   2 +-
 .../temp-email/components/Messages.tsx        |  48 ++-
 .../temp-email/services/icon-service.ts       |   2 +-
 .../utils/schema-markup-generator.ts          |   4 +-
 .../virus-scanner/BannersSection.tsx          |  11 +-
 src/components/virus-scanner/CtaSection.tsx   |   7 +-
 .../virus-scanner/FeaturesSection.tsx         |   6 +-
 src/components/virus-scanner/HeroSection.tsx  |   6 +-
 src/components/vpn-extension/HeroSection.tsx  |   8 +-
 .../vpn-extension/SecureVPNSection.tsx        |   2 +-
 src/components/webdav/HowToUseCLISection.tsx  |   2 +-
 .../webdav/WebDAVSupportSection.tsx           |   2 +-
 src/lib/analytics.ts                          |  11 +-
 src/lib/auth.ts                               |   1 -
 src/lib/brave.ts                              |   4 +-
 src/lib/{checker.ts => checker.js}            |  24 +-
 src/lib/{gtag.ts => gtag.js}                  |   0
 src/pages/_app.tsx                            |   2 +-
 src/pages/about.tsx                           |   5 +-
 src/pages/affiliates/[filename].tsx           |  13 +-
 src/pages/affiliates/index.tsx                |  11 +-
 src/pages/annual.tsx                          |   3 +-
 src/pages/b.tsx                               |   3 +-
 src/pages/black-friday.tsx                    |   5 +-
 src/pages/byte-converter.tsx                  |   7 +-
 src/pages/cloud-storage-comparison.tsx        |   7 +-
 src/pages/cloud-storage-for-education.tsx     |   3 +-
 src/pages/cloudwards.tsx                      |  11 +-
 src/pages/cyber-awareness.tsx                 |   7 +-
 src/pages/cyber-security-quiz.tsx             |   9 +-
 src/pages/dealfuel.tsx                        |  17 +-
 src/pages/dealmirror.tsx                      |  17 +-
 src/pages/drive.tsx                           |   7 +-
 src/pages/file-converter/[filename].tsx       |   5 +-
 src/pages/file-converter/index.tsx            |   3 +-
 src/pages/freemonth.tsx                       |  52 +++
 src/pages/index.tsx                           |   3 +-
 src/pages/legal.tsx                           |   3 +-
 src/pages/lifetime/celebration/[filename].tsx |   7 +-
 src/pages/lifetime/index.tsx                  |   9 +-
 src/pages/lifetime_special.tsx                |   5 +-
 src/pages/locker.tsx                          |  11 +-
 src/pages/media-area.tsx                      |  11 +-
 src/pages/mightydeals.tsx                     |  21 +-
 src/pages/newsletter-subscribe.tsx            |  11 +-
 src/pages/open-source.tsx                     |   5 +-
 src/pages/partner-discount.tsx                |  14 +-
 src/pages/password-checker.tsx                |  13 +-
 src/pages/password-generator.tsx              |   7 +-
 src/pages/pccomponentes-products.tsx          |  11 +-
 src/pages/pcloud-alternative.tsx              |   3 +-
 src/pages/pricing.tsx                         |   7 +-
 src/pages/privacy-directory.tsx               |   7 +-
 src/pages/privacy.tsx                         |  11 +-
 src/pages/{sitemap.xml.ts => sitemap.xml.js}  |   0
 src/pages/specialoffer/freeuser.tsx           |   3 +-
 src/pages/stackcommerce.tsx                   |  40 +--
 src/pages/startpage.tsx                       |  27 +-
 src/pages/techradar-discount.tsx              |  29 +-
 src/pages/temporary-email.tsx                 |   8 +-
 src/pages/virus-scanner.tsx                   |  27 +-
 src/pages/vpn.tsx                             |  22 +-
 src/pages/webdav.tsx                          |  11 +-
 src/pages/what-does-google-know-about-me.tsx  |  15 +-
 tests/redeem-codes.test.ts                    |  25 +-
 yarn.lock                                     |  48 ---
 160 files changed, 2188 insertions(+), 1081 deletions(-)
 create mode 100644 src/components/banners/WheelBanner.tsx
 create mode 100644 src/components/banners/components/WheelComponent.tsx
 create mode 100644 src/components/layout/BFBanner.tsx
 create mode 100644 src/components/partnerships/freemonth/FeatureSection.js
 create mode 100644 src/components/partnerships/freemonth/HeroSection.js
 create mode 100644 src/components/partnerships/freemonth/PriceCard.js
 create mode 100644 src/components/partnerships/guru99/FeatureSection.js
 create mode 100644 src/components/partnerships/guru99/HeroSection.js
 create mode 100644 src/components/partnerships/guru99/PriceCard.js
 rename src/lib/{checker.ts => checker.js} (71%)
 rename src/lib/{gtag.ts => gtag.js} (100%)
 create mode 100644 src/pages/freemonth.tsx
 rename src/pages/{sitemap.xml.ts => sitemap.xml.js} (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index 95826e251..5e621e651 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,15 +1,10 @@
-// TODO: Add next core-web-vitals. E.g. "extends": ["next/core-web-vitals"]
-
 {
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "rules": {
-    "quotes": ["warn", "single"],
+    "quotes": ["error", "single"],
     "semi": ["error", "always"],
     "linebreak-style": ["error", "unix"],
     "no-console": "off",
-    "max-len": "off",
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "no-async-promise-executor": "warn"
+    "max-len": "off"
   }
 }
diff --git a/package.json b/package.json
index 63c41c884..73edf782b 100644
--- a/package.json
+++ b/package.json
@@ -77,13 +77,10 @@
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^13.12.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
     "next-unused": "^0.0.6",
     "postcss": "8.4.31",
     "prettier": "2.7.1",
-    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "0.1.13",
     "reset-css": "5.0.1",
     "sass": "1.41.0",
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 40af755d1..3a684dbc8 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
diff --git a/src/components/annual-plans-for-affiliates/CtaSection.tsx b/src/components/annual-plans-for-affiliates/CtaSection.tsx
index e77363af5..8facc216b 100644
--- a/src/components/annual-plans-for-affiliates/CtaSection.tsx
+++ b/src/components/annual-plans-for-affiliates/CtaSection.tsx
@@ -2,12 +2,10 @@ const PRICE_TABLE_ID = 'pricing-table';
 
 const CtaSection = ({ textContent }: { textContent: any }) => {
   function redirectToPricingTable() {
-    if (document.getElementById(PRICE_TABLE_ID)) {
-      window.scrollTo({
-        top: document.getElementById(PRICE_TABLE_ID)!.offsetTop + 500,
-        behavior: 'smooth',
-      });
-    }
+    window.scrollTo({
+      top: document?.getElementById(PRICE_TABLE_ID)?.offsetTop! + 500,
+      behavior: 'smooth',
+    });
   }
 
   return (
@@ -18,7 +16,7 @@ const CtaSection = ({ textContent }: { textContent: any }) => {
       className="overflow-hidden bg-primary bg-cover px-5 py-14"
     >
       <div className="flex flex-col items-center justify-center space-y-8 text-center">
-        <div className={'flex flex-col items-center space-y-4 text-center text-white'}>
+        <div className={`flex flex-col items-center space-y-4 text-center text-white`}>
           <p className="text-4xl font-semibold">{textContent.title}</p>
           <p className="w-full max-w-[573px] text-xl font-normal">{textContent.description}</p>
         </div>
diff --git a/src/components/annual-plans-for-affiliates/HeroSection.tsx b/src/components/annual-plans-for-affiliates/HeroSection.tsx
index 851aa5e14..662e958b3 100644
--- a/src/components/annual-plans-for-affiliates/HeroSection.tsx
+++ b/src/components/annual-plans-for-affiliates/HeroSection.tsx
@@ -17,7 +17,7 @@ const StartPageLabel = () => {
       <Image
         loading="lazy"
         className="select-none"
-        src={'../../logos/internxt/cool-gray-90.svg'}
+        src={`../../logos/internxt/cool-gray-90.svg`}
         alt="Internxt logo"
         width={130}
         height={16}
@@ -29,7 +29,7 @@ const StartPageLabel = () => {
 const HeroSection: React.FC<HeroSectionProps> = ({ textContent, InfoTextComponent, isStartPage }) => {
   function redirectToPricingTable() {
     window.scrollTo({
-      top: document?.getElementById('payment')!.offsetTop + 500,
+      top: document?.getElementById('payment')?.offsetTop! + 500,
       behavior: 'smooth',
     });
   }
diff --git a/src/components/banners/LoginBFBanner.tsx b/src/components/banners/LoginBFBanner.tsx
index 32e7fce65..00ff6604b 100644
--- a/src/components/banners/LoginBFBanner.tsx
+++ b/src/components/banners/LoginBFBanner.tsx
@@ -60,7 +60,7 @@ const LoginBFBanner = () => {
     if (showBanner) {
       window.dispatchEvent(new Event('CloseSquare'));
     }
-    if (hideBanner) {
+    if (Boolean(hideBanner)) {
       setShowBanner(false);
     }
     window.addEventListener('unload', function (e) {
@@ -133,11 +133,9 @@ const LoginBFBanner = () => {
   };
 
   return showBanner ? (
-    <div className={'fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10'}>
+    <div className={`fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50 px-10`}>
       <div
-        className={
-          'fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary'
-        }
+        className={`fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl bg-gradient-to-r from-black to-primary`}
       >
         <button className="absolute right-0 m-7 flex text-white" onClick={handleClose}>
           <X size={32} />
diff --git a/src/components/banners/WheelBanner.tsx b/src/components/banners/WheelBanner.tsx
new file mode 100644
index 000000000..3514e8af6
--- /dev/null
+++ b/src/components/banners/WheelBanner.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
+import WheelComponent from '@/components/banners/components/WheelComponent';
+import { Info, X } from '@phosphor-icons/react';
+import TextInput from '@/components/components/TextInput';
+import { notificationService } from '@/components/Snackbar';
+import { stripeService } from '@/components/services/stripe.service';
+import { CouponType } from '@/lib/types';
+
+const SHOW_WHEEL_BANNER = 'showWheelBanner';
+
+type views = 'wheel' | 'congratulations';
+
+const COUPON_CODES = {
+  '10% OFF': 'Wheel10',
+  '15% OFF': 'Wheel15',
+  '25% OFF': 'Wheel20',
+  '30% OFF': 'Wheel30',
+  '45% OFF': 'Wheel45',
+  '50% OFF': 'Wheel50',
+};
+
+const WheelBanner = () => {
+  const globalDialogs = useGlobalDialog();
+
+  const [bannerVisible, setBannerVisible] = useState(false);
+  const [view, setView] = useState<views>('wheel');
+  const [result, setResult] = useState('');
+  const [coupon, setCoupon] = useState('');
+
+  useEffect(() => {
+    const getSquareBannerLS = sessionStorage.getItem(SHOW_WHEEL_BANNER);
+    if (getSquareBannerLS) setBannerVisible(false);
+    else setBannerVisible(true);
+  }, []);
+
+  useEffect(() => {
+    if (result) {
+      stripeService
+        .getCoupon(CouponType[COUPON_CODES[result]])
+        .then((res) => {
+          setCoupon(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, [result]);
+
+  function handleOnClose() {
+    setBannerVisible(false);
+    sessionStorage.setItem(SHOW_WHEEL_BANNER, 'false');
+    globalDialogs.closeDialog(GlobalDialog.Wheel);
+  }
+
+  function handleOnCopy() {
+    navigator.clipboard.writeText(coupon);
+    notificationService.openSuccessToast('Copied to clipboard');
+  }
+
+  return (
+    <section
+      className={`${
+        bannerVisible || globalDialogs.dialogIsOpen(GlobalDialog.Wheel) ? 'flex' : 'hidden'
+      }  fixed top-0 left-0 right-0 bottom-0 z-50 h-screen bg-black bg-opacity-50 px-10 lg:px-0`}
+    >
+      <div
+        className={`${
+          bannerVisible || globalDialogs.dialogIsOpen(GlobalDialog.Wheel) ? 'flex' : 'hidden'
+        } absolute top-1/2 left-1/2
+        flex w-full max-w-[1000px] -translate-y-1/2 -translate-x-1/2 transform flex-col bg-white text-neutral-900 lg:rounded-2xl`}
+      >
+        <button className="absolute right-0 m-7 flex w-auto text-black" onClick={handleOnClose}>
+          <X size={32} />
+        </button>
+        {view === 'wheel' ? (
+          <WheelComponent onViewChange={() => setView('congratulations')} setResult={setResult} />
+        ) : view === 'congratulations' ? (
+          <div className="flex min-h-screen flex-col items-center justify-center space-y-7 px-5 lg:min-h-full lg:pt-20 lg:pb-10">
+            <div className="flex w-full flex-col items-center space-y-5 text-center">
+              <p className="text-4xl font-bold text-primary lg:text-7xl">Congratulations!</p>
+              <p className="text-xl font-semibold text-gray-100">Choose your plan and activate your offer with code:</p>
+            </div>
+            <div className="flex w-full max-w-[520px] flex-col items-center space-y-8 rounded-2xl border-2 border-primary/7 bg-primary/2 p-9">
+              <div className="w-full">
+                <TextInput
+                  value={coupon}
+                  className="items-center text-center"
+                  disabledText="disabled:text-gray-100 text-gray-100 font-medium"
+                  readonly
+                />
+              </div>
+              <button
+                onClick={handleOnCopy}
+                className="flex w-max flex-col items-center rounded-lg bg-primary py-2.5 px-11 text-lg font-medium text-white"
+              >
+                Get your discount
+              </button>
+            </div>
+            <div className="flex flex-row space-x-4 pt-6">
+              <Info size={20} className="text-primary" />
+              <p className="text-sm font-semibold text-gray-100">
+                Go to the pricing page and choose your subscription to activate your discount.
+              </p>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default WheelBanner;
diff --git a/src/components/banners/components/WheelComponent.tsx b/src/components/banners/components/WheelComponent.tsx
new file mode 100644
index 000000000..a66f5db88
--- /dev/null
+++ b/src/components/banners/components/WheelComponent.tsx
@@ -0,0 +1,148 @@
+import { LockKey, WarningCircle } from '@phosphor-icons/react';
+import TextInput from '@/components/components/TextInput';
+import CheckboxItem from '@/components/shared/CheckboxItem';
+import { useEffect, useState } from 'react';
+import { Roulette, useRoulette } from 'react-hook-roulette';
+import axios, { AxiosError } from 'axios';
+
+const WheelComponent = ({ onViewChange, setResult }) => {
+  const [email, setEmail] = useState('');
+  const [firstCheckbox, setFirstCheckbox] = useState(false);
+  const [error, setError] = useState(false);
+
+  const items = [
+    { name: '10% OFF', bg: '#001D6C' },
+    { name: '15% OFF', bg: '#002D9C' },
+    { name: '25% OFF', bg: '#0043CE' },
+    { name: '30% OFF', bg: '#0066FF' },
+    { name: '45% OFF', bg: '#4589FF' },
+    { name: '50% OFF', bg: '#78A9FF' },
+  ];
+  const { roulette, onStart, onStop, result } = useRoulette({
+    items,
+    options: {
+      size: 300,
+      style: {
+        label: {
+          defaultColor: '#fff',
+        },
+      },
+    },
+  });
+
+  // Stop the roulette after random seconds between 4 and 6 seconds
+  useEffect(() => {
+    setTimeout(() => {
+      onStop();
+    }, Math.floor(Math.random() * 2000) + 4000);
+  }, [onStart]);
+
+  useEffect(() => {
+    if (result) {
+      setResult(result);
+      onViewChange('congratulations');
+    }
+  }, [result]);
+
+  useEffect(() => {
+    if (error) {
+      setTimeout(() => {
+        setError(false);
+      }, 3000);
+    }
+  }, [error]);
+
+  const onEmailInputChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  const onCheckboxChange = () => {
+    setFirstCheckbox(!firstCheckbox);
+  };
+
+  const handleOnButtonClick = (e) => {
+    e.preventDefault();
+    axios
+      .post('/api/authenticate', {
+        userEmail: email,
+      })
+      .then(() => {
+        setError(true);
+      })
+      .catch((error: AxiosError) => {
+        if (error.response?.status === 404 || error.response?.status === 403) {
+          onStart();
+        } else {
+          console.error('[ERROR]: ', 'You are not authorized to access this resource');
+        }
+      });
+  };
+
+  return (
+    <div className="flex flex-row justify-between">
+      <div className="hidden w-full max-w-[500px] flex-col items-center justify-end space-y-5 rounded-l-2xl bg-[url('/images/banners/wheel-banner-bg.webp')] bg-cover bg-no-repeat px-10 pb-14 lg:flex">
+        {/* Icon */}
+        <div className="flex w-max rounded-[20px] bg-white p-3">
+          <LockKey weight="fill" size={42} className="text-primary" />
+        </div>
+        {/* Text */}
+        <div className="flex w-full flex-col space-y-5 text-center text-white">
+          <p className="text-6xl font-bold">Safer Internet Day!</p>
+          <p className="text-xl font-semibold">Subscribe, spin, and save on a subscription of your choice!*</p>
+        </div>
+        <div className="flex flex-col pt-20 text-white">
+          <p className="text-sm font-semibold">*Offer is for free accounts or new customers</p>
+        </div>
+      </div>
+      {/* Wheel and mobile view */}
+      <div className="flex h-screen w-full max-w-[500px] flex-col items-center justify-center space-y-10 py-11 lg:h-full">
+        {/* Title */}
+        <div className="flex w-full flex-col space-y-5 text-center lg:hidden">
+          <p className="text-4xl font-bold text-primary">Safer Internet Day!</p>
+          <p className="text-xl font-semibold text-gray-80">Spin, save, and secure your data!</p>
+        </div>
+        <div className="flex flex-col">
+          <Roulette roulette={roulette} />
+        </div>
+        {/* Text input and button */}
+        <form className="flex w-full max-w-[240px] flex-col space-y-2" onSubmit={handleOnButtonClick}>
+          <TextInput
+            placeholder="Email Address"
+            value={email}
+            passwordError={error}
+            type="email"
+            className="w-full"
+            onChange={onEmailInputChange}
+          />
+          {error && (
+            <div className="flex flex-row items-center space-x-1 text-sm text-red">
+              <WarningCircle size={13} weight="fill" />
+              <p className="">Offer unavailable for paid users</p>
+            </div>
+          )}
+          <button
+            disabled={email === ''}
+            className={`rounded-lg ${email === '' ? 'bg-gray-30' : 'bg-primary'}  w-full py-2.5 text-white`}
+            type="submit"
+          >
+            Spin to win
+          </button>
+        </form>
+        {/* Checkbox and privacy policy */}
+        <div className="flex flex-col space-y-6 text-center">
+          <CheckboxItem
+            checked={firstCheckbox}
+            setCheckbox={onCheckboxChange}
+            textColor="text-gray-100"
+            label={'By subscribing, you agree to our [privacy policy](https://internxt.com/legal).'}
+          />
+          <div className="flex flex-col text-gray-100 lg:hidden">
+            <p className="text-sm font-semibold">*Offer is for free accounts or new customers</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WheelComponent;
diff --git a/src/components/components/Countdown.tsx b/src/components/components/Countdown.tsx
index d808fbf23..5059db0bb 100644
--- a/src/components/components/Countdown.tsx
+++ b/src/components/components/Countdown.tsx
@@ -28,6 +28,7 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
     const minute = second * 60;
     const hour = minute * 60;
     const day = hour * 24;
+    let timer: NodeJS.Timeout;
 
     const showRemaining = () => {
       const now = new Date();
@@ -47,7 +48,7 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
       setSeconds(seconds);
     };
 
-    const timer = setInterval(showRemaining, 1000);
+    timer = setInterval(showRemaining, 1000);
     return () => clearInterval(timer);
   };
 
@@ -80,19 +81,19 @@ const Countdown: React.FC<CountdownProps> = ({ textColor, dt }) => {
   return (
     <div className={`flex text-${textColor}`}>
       <div className="flex flex-row items-end space-x-2 text-4xl lg:text-2xl">
-        <div className={'days delay-350 font-semibold transition-colors duration-150'}>
+        <div className={`days delay-350 font-semibold transition-colors duration-150`}>
           {days < 10 ? `0${days}` : days}
         </div>
-        <p className={'font-semibold'}> : </p>
-        <div className={'hours delay-350 font-semibold transition-colors duration-150'}>
+        <p className={`font-semibold`}> : </p>
+        <div className={`hours delay-350 font-semibold transition-colors duration-150`}>
           {hours < 10 ? `0${hours}` : hours}
         </div>
-        <p className={'font-semibold'}>:</p>
-        <div className={'minutes delay-350 font-semibold transition-colors duration-150'}>
+        <p className={`font-semibold`}>:</p>
+        <div className={`minutes delay-350 font-semibold transition-colors duration-150`}>
           {minutes < 10 ? `0${minutes}` : minutes}
         </div>
-        <p className={'font-semibold'}>:</p>
-        <div className={'seconds delay-350 font-semibold transition-colors duration-150'}>
+        <p className={`font-semibold`}>:</p>
+        <div className={`seconds delay-350 font-semibold transition-colors duration-150`}>
           {seconds < 10 ? `0${seconds}` : seconds}
         </div>
       </div>
diff --git a/src/components/dealfuel/PriceCard.tsx b/src/components/dealfuel/PriceCard.tsx
index 15ffb469b..73844cf63 100644
--- a/src/components/dealfuel/PriceCard.tsx
+++ b/src/components/dealfuel/PriceCard.tsx
@@ -1,12 +1,11 @@
-interface PriceCardProps {
-  planType: string;
-  storage: string;
-  price: number;
-  country: string;
-  popular: boolean;
-}
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-nested-ternary */
+import React from 'react';
 
-const PriceCard = ({ planType, storage, price, country, popular }: PriceCardProps): JSX.Element => {
+const PriceCard = ({ planType, storage, price, cta, country, popular }) => {
   const currency = () => {
     switch (country) {
       case 'US':
@@ -18,7 +17,7 @@ const PriceCard = ({ planType, storage, price, country, popular }: PriceCardProp
     }
   };
 
-  const contentText = require('../../assets/lang/en/priceCard.json');
+  const contentText = require(`../../assets/lang/en/priceCard.json`);
 
   return (
     <div
@@ -34,7 +33,7 @@ const PriceCard = ({ planType, storage, price, country, popular }: PriceCardProp
         {contentText.mostPopularPlan}
       </div>
 
-      <div className={'info flex flex-col items-center justify-center bg-white p-6 '}>
+      <div className={`info flex flex-col items-center justify-center bg-white p-6 `}>
         <div
           className={`storage flex max-w-min flex-row whitespace-nowrap rounded-full ${
             popular ? 'text-primary' : 'text-gray-50'
@@ -43,12 +42,12 @@ const PriceCard = ({ planType, storage, price, country, popular }: PriceCardProp
           <p>{storage}</p>
         </div>
 
-        <div className={'planPrice flex flex-col items-center justify-center p-5'}>
+        <div className={`planPrice flex flex-col items-center justify-center p-5`}>
           <div
             className={`priceBreakdown flex flex-col items-center
             `}
           >
-            <p className={'flex flex-row items-start space-x-0.5 font-semibold text-black'}>
+            <p className={`flex flex-row items-start space-x-0.5 font-semibold text-black`}>
               <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency()}</span>
               <span className="price text-4xl font-semibold">{price}</span>
             </p>
diff --git a/src/components/dealfuel/PriceTable.tsx b/src/components/dealfuel/PriceTable.tsx
index dcaa376eb..141433037 100644
--- a/src/components/dealfuel/PriceTable.tsx
+++ b/src/components/dealfuel/PriceTable.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import PriceCard from './PriceCard';
 import { Coin, CreditCard, Detective } from '@phosphor-icons/react';
 
@@ -88,6 +89,7 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB2.storage}
           price={billingPrice(prices.TB2.price)}
+          cta={['checkout', 'lifetime2TB']}
           popular={prices.TB2.popular}
           country={country}
         />
@@ -95,6 +97,7 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB5.storage}
           price={billingPrice(prices.TB5.price)}
+          cta={['checkout', 'lifetime5TB']}
           popular={prices.TB5.popular}
           country={country}
         />
@@ -102,6 +105,7 @@ const PriceTable = ({ lang, country, textContent }) => {
           planType="individual"
           storage={prices.TB10.storage}
           price={billingPrice(prices.TB10.price)}
+          cta={['checkout', 'lifetime10TB']}
           popular={prices.TB10.popular}
           country={country}
         />
diff --git a/src/components/home/InfoSection.tsx b/src/components/home/InfoSection.tsx
index 0ade83ba4..383594507 100644
--- a/src/components/home/InfoSection.tsx
+++ b/src/components/home/InfoSection.tsx
@@ -1,9 +1,11 @@
+import React from 'react';
 import RevealY from '@/components/components/RevealY';
 import { CaretRight, Eye, Fingerprint, LockKey, ShieldCheck } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 
 const InfoSection = ({
   textContent,
+  lang,
   withoutCta,
   backgroundColor,
   redirect,
diff --git a/src/components/home/SocialProofSection.tsx b/src/components/home/SocialProofSection.tsx
index 3d1e9cc72..68b623f60 100644
--- a/src/components/home/SocialProofSection.tsx
+++ b/src/components/home/SocialProofSection.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 import { getImage } from '@/lib/getImage';
 import Image from 'next/image';
 
diff --git a/src/components/home/TestimonialsSection.tsx b/src/components/home/TestimonialsSection.tsx
index 7f358dcda..97cd40383 100644
--- a/src/components/home/TestimonialsSection.tsx
+++ b/src/components/home/TestimonialsSection.tsx
@@ -2,12 +2,7 @@ import { getImage } from '@/lib/getImage';
 import Image from 'next/image';
 import { FiveStars } from '../shared/StarsRate';
 
-interface TestimonialsSectionProps {
-  textContent: Record<string, any>;
-  bgColor?: string;
-}
-
-const AvatarAndText = ({ testimonial }): JSX.Element => (
+const AvatarAndText = ({ testimonial }) => (
   <div className="flex flex-row items-center gap-3">
     <div className="flex h-10 w-10 rounded-full">
       <Image src={testimonial.testimonialImage} width={40} height={40} alt="FixThePhoto Avatar" />
@@ -19,7 +14,7 @@ const AvatarAndText = ({ testimonial }): JSX.Element => (
   </div>
 );
 
-const TestimonialsSection = ({ textContent, bgColor }: TestimonialsSectionProps): JSX.Element => {
+const TestimonialsSection = ({ textContent, bgColor }: { textContent: any; bgColor?: string }) => {
   const testimonials = [
     {
       review: textContent.cards[0].review,
diff --git a/src/components/home/ThirdFeaturesSection.tsx b/src/components/home/ThirdFeaturesSection.tsx
index 2f5260ef5..6d08071f9 100644
--- a/src/components/home/ThirdFeaturesSection.tsx
+++ b/src/components/home/ThirdFeaturesSection.tsx
@@ -1,21 +1,15 @@
 import Image from 'next/legacy/image';
 import { Gift } from '@phosphor-icons/react';
+import React from 'react';
 import RevealX from '@/components/components/RevealX';
-import { getImage } from '@/lib/getImage';
-import Link from 'next/link';
-import { SIGNUP_DRIVE_WEB } from '@/constants';
 
-interface ThirdFeaturesSectionProps {
-  textContent: Record<string, any>;
-}
-
-const ThirdFeaturesSection = ({ textContent }: ThirdFeaturesSectionProps): JSX.Element => {
+const ThirdFeaturesSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden bg-gray-1">
       <div className="flex flex-col-reverse items-center justify-center px-5 pt-16 pb-20 text-center md:flex-row md:space-y-0 md:space-x-24 md:text-start">
         <RevealX direction="right" className="flex flex-col rounded-3xl pt-10 md:pt-0">
           <Image
-            src={getImage('/images/home/Online-privacy-services.webp')}
+            src="/images/home/Online-privacy-services.webp"
             width={496}
             height={520}
             quality={100}
@@ -33,14 +27,14 @@ const ThirdFeaturesSection = ({ textContent }: ThirdFeaturesSectionProps): JSX.E
           <p className="mb-6 text-4xl font-semibold sm:text-5xl sm:leading-tight">{textContent.title}</p>
           <p className="text-xl">{textContent.description}</p>
           <div>
-            <Link
-              href={SIGNUP_DRIVE_WEB}
-              target="_blank"
-              rel="noopener noreferrer"
+            <button
               className="rounded-lg bg-primary px-5 py-3 text-white hover:bg-primary-dark"
+              onClick={() => {
+                window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+              }}
             >
               {textContent.cta}
-            </Link>
+            </button>
           </div>
         </RevealX>
       </div>
diff --git a/src/components/home/components/FileItem.tsx b/src/components/home/components/FileItem.tsx
index adb1f9bf3..707283f88 100644
--- a/src/components/home/components/FileItem.tsx
+++ b/src/components/home/components/FileItem.tsx
@@ -1,19 +1,23 @@
 import { DotsThree } from '@phosphor-icons/react';
 import moment from 'moment';
+import React from 'react';
 
-interface FileItemProps {
+const FileItem = ({
+  encrypted,
+  className,
+  title,
+  ItemImg,
+}: {
   title: string;
   className: string;
   ItemImg: any;
   encrypted?: boolean;
-}
-
-const FileItem = ({ encrypted, className, title, ItemImg }: FileItemProps): JSX.Element => {
+}) => {
   const fileYear = moment().year();
 
   return (
     <div className={`${className} flex w-[375px] flex-row bg-white px-4 py-3`}>
-      <div className={'flex w-full flex-row items-center justify-between space-x-2'}>
+      <div className={`flex w-full flex-row items-center justify-between space-x-2`}>
         <div className="flex flex-row space-x-2">
           <ItemImg className={`h-10 w-10 ${encrypted && 'opacity-40'}`} />
           <div className="flex flex-col">
diff --git a/src/components/home/components/Label.tsx b/src/components/home/components/Label.tsx
index 46b534de3..3ff91a1e5 100644
--- a/src/components/home/components/Label.tsx
+++ b/src/components/home/components/Label.tsx
@@ -1,12 +1,7 @@
 import { CaretRight } from '@phosphor-icons/react';
 import { useRouter } from 'next/navigation';
 
-interface LabelProps {
-  label: string;
-  path: string;
-}
-
-export const Label = ({ label, path }: LabelProps): JSX.Element => {
+export const Label = ({ label, path }) => {
   const router = useRouter();
 
   return (
diff --git a/src/components/home/components/heroSection/TitleAndSignup.tsx b/src/components/home/components/heroSection/TitleAndSignup.tsx
index a2d5bc546..09ce36539 100644
--- a/src/components/home/components/heroSection/TitleAndSignup.tsx
+++ b/src/components/home/components/heroSection/TitleAndSignup.tsx
@@ -2,11 +2,7 @@ import SignUpInline from '@/components/auth/SignUpInline';
 import Header from '@/components/shared/Header';
 import { goToSignUpURL } from '@/lib/auth';
 
-interface TitleAndSignupProps {
-  textContent: Record<string, any>;
-}
-
-export const TitleAndSignup = ({ textContent }: TitleAndSignupProps): JSX.Element => {
+export const TitleAndSignup = ({ textContent }) => {
   return (
     <div className="z-10 flex flex-col md:max-w-lg">
       <Header maxWidth="max-w-[485px]" className="text-gray-100">
diff --git a/src/components/home/components/heroSection/TitleAndSurvey.tsx b/src/components/home/components/heroSection/TitleAndSurvey.tsx
index 552a560f2..ca37cdb88 100644
--- a/src/components/home/components/heroSection/TitleAndSurvey.tsx
+++ b/src/components/home/components/heroSection/TitleAndSurvey.tsx
@@ -3,11 +3,7 @@ import Header from '@/components/shared/Header';
 import { FiveStars } from '@/components/shared/StarsRate';
 import { useRouter } from 'next/router';
 
-interface TitleAndSurveyProps {
-  textContent: Record<string, any>;
-}
-
-export const TitleAndSurvey = ({ textContent }: TitleAndSurveyProps): JSX.Element => {
+export const TitleAndSurvey = ({ textContent }) => {
   const router = useRouter();
 
   const handleOnPlanButtonClicked = () => {
@@ -43,7 +39,7 @@ export const TitleAndSurvey = ({ textContent }: TitleAndSurveyProps): JSX.Elemen
           {/* // TODO: Manage the buttons logic */}
           <div className="flex flex-wrap gap-4 lg:flex-row">
             {textContent.buttonLabel.map((label) => (
-              <div className="flex w-full lg:w-max" key={label}>
+              <div className="flex w-full lg:w-max">
                 <Button className="!w-full lg:w-max" text={label} onClick={handleOnPlanButtonClicked} />
               </div>
             ))}
diff --git a/src/components/layout/BFBanner.tsx b/src/components/layout/BFBanner.tsx
new file mode 100644
index 000000000..2b66d0ae3
--- /dev/null
+++ b/src/components/layout/BFBanner.tsx
@@ -0,0 +1,113 @@
+import { CircleWavyCheck, X } from '@phosphor-icons/react';
+import { useState, useEffect } from 'react';
+import styles from '../black-friday/BF-HeroSection.module.scss';
+import { useRouter } from 'next/router';
+import { buttonDeal, buttonLink, BFBannerText } from '../TextWithoutJson';
+
+const BFBanner = () => {
+  const [showBanner, setShowBanner] = useState(false);
+  const router = useRouter();
+  const lang = router.locale;
+
+  const handleClose = () => {
+    localStorage.setItem('hideBanner', 'true');
+    setShowBanner(false);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (router.pathname !== '/black-friday') {
+        setShowBanner(true);
+      }
+    }, 20000);
+  }, []);
+
+  useEffect(() => {
+    const hideBanner = localStorage.getItem('hideBanner');
+    if (showBanner) {
+      window.dispatchEvent(new Event('CloseSquare'));
+    }
+    if (hideBanner) {
+      setShowBanner(false);
+    }
+    window.addEventListener('unload', function (e) {
+      e.preventDefault();
+      localStorage.removeItem('hideBanner');
+    });
+    return () => {
+      window.removeEventListener('unload', () => {});
+    };
+  }, [showBanner]);
+
+  const cards = [
+    {
+      title: BFBannerText[lang].cards.title1,
+    },
+    {
+      title: BFBannerText[lang].cards.title2,
+    },
+    {
+      title: BFBannerText[lang].cards.title3,
+    },
+    {
+      title: BFBannerText[lang].cards.title4,
+    },
+    {
+      title: BFBannerText[lang].cards.title5,
+    },
+    {
+      title: BFBannerText[lang].cards.title6,
+    },
+  ];
+
+  return (
+    showBanner && (
+      //Background
+      <div className={`fixed top-0 left-0 right-0 bottom-0 z-50 flex bg-black bg-opacity-50`}>
+        {/* Banner */}
+        <div
+          className={`fixed top-1/2 left-1/2 flex h-auto -translate-y-[50%] -translate-x-[50%] flex-col overflow-hidden rounded-2xl`}
+        >
+          <button className="absolute  right-0 m-7 flex text-white" onClick={handleClose}>
+            <X size={32} />
+          </button>
+          <div className="flex w-auto flex-col p-14 lg:flex-row lg:p-20">
+            <div className="flex flex-col items-center justify-center text-center lg:items-start lg:justify-between lg:pr-20 lg:text-start">
+              <div className="flex flex-col lg:w-72">
+                <p className="text-3xl font-semibold text-white">{BFBannerText[lang].head}</p>
+                <p className="pt-5 text-5xl font-bold text-white">{BFBannerText[lang].title}</p>
+              </div>
+              <div className="flex pt-7 lg:pt-10">
+                <button
+                  className="relative flex h-14 w-48 flex-row items-center justify-center space-x-4 rounded-4xl bg-primary px-8 text-base text-white transition duration-100 focus:outline-none focus-visible:bg-primary-dark active:bg-primary-dark sm:text-lg"
+                  onClick={() => {
+                    window.location.replace(buttonLink[lang]);
+                  }}
+                >
+                  {buttonDeal[lang]}
+                </button>
+              </div>
+            </div>
+            <div className="hidden items-center lg:flex">
+              <div className="flex w-[340px] flex-col">
+                <div className="flex flex-col">
+                  {cards.map((card) => (
+                    <div className="flex flex-row pb-5 last:pb-0" key={card.title}>
+                      <CircleWavyCheck size={32} weight="fill" className="mr-4 text-primary" />
+                      <p className="text-xl font-semibold text-white">{card.title}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className={`absolute top-0 left-0 -z-10 flex h-full w-full px-5 ${styles.neonBlur} pointer-events-none origin-center`}
+          />
+        </div>
+      </div>
+    )
+  );
+};
+
+export default BFBanner;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 3c231b3c5..35a31c248 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
@@ -33,6 +33,7 @@ interface LayoutProps {
   readonly segmentName?: string | null;
   readonly disableMailerlite?: boolean;
   readonly disableDrift?: boolean;
+  readonly isProduction?: boolean;
   readonly specialOffer?: string;
   readonly isBannerFixed?: boolean;
   readonly lang?: string;
@@ -49,6 +50,7 @@ export default function Layout({
   specialOffer,
   disableDrift = true,
   isBannerFixed,
+  isProduction = process.env.NODE_ENV === 'production',
 }: // lang
 LayoutProps) {
   const pageURL = segmentName === 'home' ? '' : segmentName;
@@ -177,7 +179,7 @@ LayoutProps) {
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <meta name="description" content={description} />
         <meta name="thumbnail" content={`${INTERNXT_URL}/images/previewLink/LifetimeGoogleSearch.png`} />
-        <meta name="apple-itunes-app" content={'app-id=1465869889'} />
+        <meta name="apple-itunes-app" content={`app-id=1465869889`} />
         <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
         <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials" />
@@ -191,7 +193,7 @@ LayoutProps) {
         <script src="/js/cookiebanner.script.js"></script>
         <script
           dangerouslySetInnerHTML={{
-            __html: 'window.varify = window.varify || {}; window.varify.iid = 2329;',
+            __html: `window.varify = window.varify || {}; window.varify.iid = 2329;`,
           }}
         />
         <script src="https://app.varify.io/varify.js"></script>
@@ -253,7 +255,7 @@ LayoutProps) {
         {!disableDrift && <Script defer src="/js/drift.js" />}
       </Head>
 
-      <Script id="schema" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {`{
           "@context": "https://schema.org",
           "@type": "Organization",
diff --git a/src/components/layout/ProductsNavigation.tsx b/src/components/layout/ProductsNavigation.tsx
index 4e95f8e95..b8af15158 100644
--- a/src/components/layout/ProductsNavigation.tsx
+++ b/src/components/layout/ProductsNavigation.tsx
@@ -1,22 +1,14 @@
 import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import Link from 'next/link';
 
-interface ProductsNavigationProps {
-  textContent: Record<string, any>;
-  selectedItem: string;
-  lang: string;
-}
-
-const ProductsNavigation = ({ textContent, selectedItem, lang }: ProductsNavigationProps): JSX.Element => {
+const ProductsNavigation = ({ textContent, selectedItem, lang }) => {
   const { dialogIsOpen } = useGlobalDialog();
   const isTopBannerDialogOpen = dialogIsOpen(GlobalDialog.TopBanner);
 
   const paddingTop = isTopBannerDialogOpen ? 'lg:top-[120px]' : 'lg:top-[64px]';
 
   return (
-    <div
-      className={`absolute z-10 hidden h-14 w-full flex-row items-center justify-start overflow-x-auto bg-cool-gray-5 px-6 sm:justify-center ${paddingTop} lg:flex`}
-    >
+    <div className="absolute z-10 hidden h-14 w-full flex-row items-center justify-start overflow-x-auto bg-cool-gray-5 px-6 sm:justify-center lg:top-[120px] lg:flex">
       <div className="mx-auto space-x-8 sm:space-x-6">
         <Link
           href="/drive"
diff --git a/src/components/layout/components/LanguageBox.tsx b/src/components/layout/components/LanguageBox.tsx
index 442c1da2c..4d317effa 100644
--- a/src/components/layout/components/LanguageBox.tsx
+++ b/src/components/layout/components/LanguageBox.tsx
@@ -4,11 +4,6 @@ import Link from 'next/link';
 import { useState } from 'react';
 import cookies from '@/lib/cookies';
 
-interface LanguageBoxProps {
-  darkMode?: boolean;
-  isBlackFriday?: boolean;
-}
-
 const currentLang = {
   es: 'Español (ES)',
   fr: 'Français (FR)',
@@ -31,7 +26,7 @@ const selectedLang = {
   'zh-tw': 'TW',
 };
 
-export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProps): JSX.Element {
+export default function LanguageBox({ darkMode, isBlackFriday }) {
   const router = useRouter();
 
   const [currentLangText, setCurrentLangText] = useState<string>(selectedLang[router.locale as string]);
@@ -43,9 +38,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
 
   return (
     <div
-      className={
-        'group relative flex cursor-default space-x-1 rounded-lg py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out'
-      }
+      className={`group relative flex cursor-default space-x-1 rounded-lg py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out`}
     >
       <Globe size={24} className={darkMode ? 'text-white' : 'text-gray-60'} />
       <p className={darkMode ? 'text-white' : 'text-gray-60'}>{currentLangText}</p>
@@ -64,9 +57,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="en"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('en')}
               >
                 {currentLang.en}
@@ -74,9 +65,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="fr"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('fr')}
               >
                 {currentLang.fr}
@@ -87,9 +76,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="en"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('en')}
               >
                 {currentLang.en}
@@ -98,9 +85,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="es"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('es')}
               >
                 {currentLang.es}
@@ -109,9 +94,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="fr"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('fr')}
               >
                 {currentLang.fr}
@@ -119,9 +102,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="de"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1'
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1`}
                 onClick={() => changeLang('de')}
               >
                 {currentLang.de}
@@ -129,9 +110,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="it"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
                 onClick={() => changeLang('it')}
               >
                 {currentLang.it}
@@ -139,9 +118,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="zh"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
                 onClick={() => changeLang('zh')}
               >
                 {currentLang.zh}
@@ -149,9 +126,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="ru"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
                 onClick={() => changeLang('ru')}
               >
                 {currentLang.ru}
@@ -159,9 +134,7 @@ export default function LanguageBox({ darkMode, isBlackFriday }: LanguageBoxProp
               <Link
                 href={router.pathname}
                 locale="zh-tw"
-                className={
-                  'flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 '
-                }
+                className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80  hover:bg-gray-1 `}
                 onClick={() => changeLang('zh-tw')}
               >
                 {currentLang['zh-tw']}
diff --git a/src/components/layout/components/navbar/ItemsNavigation.tsx b/src/components/layout/components/navbar/ItemsNavigation.tsx
index f94aec4bd..b0d705dee 100644
--- a/src/components/layout/components/navbar/ItemsNavigation.tsx
+++ b/src/components/layout/components/navbar/ItemsNavigation.tsx
@@ -1,155 +1,151 @@
 import Link from 'next/link';
 import { CaretDown } from '@phosphor-icons/react';
-import { usePathname } from 'next/navigation';
-
-interface ItemsNavigationProps {
-  textContent: Record<string, any>;
-  getTitles: Record<string, any>;
-  lang: string | undefined;
-  darkMode: boolean | undefined;
-  isQuizSection: boolean | undefined;
-}
 
 export const ItemsNavigation = ({
   lang,
+  menuState,
   darkMode,
   isQuizSection,
+  shouldHideItems,
   getTitles,
   textContent,
-}: ItemsNavigationProps): JSX.Element => {
-  const pathname = usePathname();
+  router,
+}) => {
   return (
     <>
       {/* Desktop links */}
-      <div className="links">
-        <div className="hidden space-x-2 lg:inline-flex">
-          <Link
-            href="/pricing"
-            locale={lang}
-            className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
-              darkMode || isQuizSection
-                ? `text-white hover:text-cool-gray-20 ${
-                    pathname?.split('/')[1] === getTitles.links.pricing.trim().toLowerCase() && 'text-primary'
-                  }`
-                : pathname?.split('/')[1] === getTitles.links.pricing.trim().toLowerCase()
-                ? 'text-primary'
-                : 'text-gray-60 hover:text-primary'
-            }  text-base font-medium`}
-          >
-            {textContent.links.pricing}
-          </Link>
+      {!shouldHideItems ? (
+        <div className="links">
+          <div className="hidden space-x-2 lg:inline-flex">
+            <Link
+              href="/pricing"
+              locale={lang}
+              className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
+                darkMode || isQuizSection
+                  ? `text-white hover:text-cool-gray-20 ${
+                      router.pathname.split('/')[1] === getTitles.links.pricing.trim().toLowerCase() && 'text-primary'
+                    }`
+                  : router.pathname.split('/')[1] === getTitles.links.pricing.trim().toLowerCase()
+                  ? 'text-primary'
+                  : 'text-gray-60 hover:text-primary'
+              }  text-base font-medium`}
+            >
+              {textContent.links.pricing}
+            </Link>
 
-          <div
-            className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
-              darkMode || isQuizSection
-                ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-cool-gray-20'
-                : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
-            } cursor-default rounded-lg`}
-          >
-            <span>{textContent.links.products}</span>
-            <CaretDown
-              size={20}
-              className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-gray-30"
-            />
+            <div
+              className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
+                darkMode || isQuizSection
+                  ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-cool-gray-20'
+                  : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
+              } cursor-default rounded-lg`}
+            >
+              <span>{textContent.links.products}</span>
+              <CaretDown
+                size={20}
+                className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-gray-30"
+              />
 
-            {/* Menu items */}
-            <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
-              <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
+              {/* Menu items */}
+              <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
+                <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
 
-              <div className="relative grid gap-0 whitespace-nowrap lg:grid-cols-1">
-                <Link
-                  href="/drive"
-                  locale={lang}
-                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                  }`}
-                >
-                  {textContent.products.drive}
-                </Link>
+                <div className="relative grid gap-0 whitespace-nowrap lg:grid-cols-1">
+                  <Link
+                    href="/drive"
+                    locale={lang}
+                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                    }`}
+                  >
+                    {textContent.products.drive}
+                  </Link>
 
-                <a
-                  href="https://send.internxt.com"
-                  target="_blank"
-                  rel="noreferrer"
-                  className={`flex flex-row items-center justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                  }`}
-                >
-                  <span>{textContent.products.send}</span>
-                </a>
+                  <a
+                    href="https://send.internxt.com"
+                    target="_blank"
+                    rel="noreferrer"
+                    className={`flex flex-row items-center justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                    }`}
+                  >
+                    <span>{textContent.products.send}</span>
+                  </a>
 
-                <Link
-                  href="/vpn"
-                  locale={lang}
-                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                  }`}
-                >
-                  {textContent.products.vpn}
-                </Link>
+                  <Link
+                    href="/vpn"
+                    locale={lang}
+                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                    }`}
+                  >
+                    {textContent.products.vpn}
+                  </Link>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
-              darkMode || isQuizSection
-                ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-gray-20'
-                : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
-            } cursor-default rounded-lg`}
-          >
-            <span>{textContent.links.ourValues}</span>
-            <CaretDown
-              size={20}
-              className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-cool-gray-30"
-            />
+            <div
+              className={`group relative flex space-x-1 py-1.5 px-4 pr-2 font-medium transition duration-150 ease-in-out ${
+                darkMode || isQuizSection
+                  ? 'text-white hover:bg-white hover:bg-opacity-10 hover:text-gray-20'
+                  : 'text-gray-60 hover:bg-gray-100 hover:bg-opacity-5 hover:text-primary'
+              } cursor-default rounded-lg`}
+            >
+              <span>{textContent.links.ourValues}</span>
+              <CaretDown
+                size={20}
+                className="translate-y-px text-gray-40 transition duration-150 ease-in-out group-hover:text-cool-gray-30"
+              />
 
-            {/* Menu items */}
-            <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
-              <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
+              {/* Menu items */}
+              <div className="pointer-events-none absolute top-full left-1/2 z-50 w-52 -translate-x-1/2 translate-y-0 rounded-xl border border-black border-opacity-5 bg-white p-1.5 opacity-0 shadow-subtle transition duration-150 ease-in-out group-hover:pointer-events-auto group-hover:translate-y-1 group-hover:opacity-100">
+                <div className="absolute -top-4 left-1/2 h-4 w-4/5 -translate-x-1/2" />
 
-              <div className="relative grid gap-0 lg:grid-cols-1">
-                <Link
-                  href="/privacy"
-                  locale={lang}
-                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                  }`}
-                >
-                  {textContent.ourValues.privacy}
-                </Link>
+                <div className="relative grid gap-0 lg:grid-cols-1">
+                  <Link
+                    href="/privacy"
+                    locale={lang}
+                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                    }`}
+                  >
+                    {textContent.ourValues.privacy}
+                  </Link>
 
-                <Link
-                  href="/open-source"
-                  locale={lang}
-                  className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
-                    darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
-                  }`}
-                >
-                  {textContent.ourValues.openSource}
-                </Link>
+                  <Link
+                    href="/open-source"
+                    locale={lang}
+                    className={`flex flex-row justify-start rounded-lg py-2 px-4 text-base font-medium text-cool-gray-80 ${
+                      darkMode || isQuizSection ? 'hover:bg-gray-10' : 'hover:bg-gray-5'
+                    }`}
+                  >
+                    {textContent.ourValues.openSource}
+                  </Link>
+                </div>
               </div>
             </div>
-          </div>
 
-          <Link
-            href="/about"
-            locale={lang}
-            className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
-              darkMode || isQuizSection
-                ? `text-white hover:text-gray-20 ${
-                    pathname?.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase() && 'text-primary'
-                  }`
-                : pathname?.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase()
-                ? 'text-primary'
-                : 'text-gray-60 hover:text-primary'
-            }
+            <Link
+              href="/about"
+              locale={lang}
+              className={`whitespace-nowrap py-1.5 px-4 transition duration-150 ease-in-out ${
+                darkMode || isQuizSection
+                  ? `text-white hover:text-gray-20 ${
+                      router.pathname.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase() &&
+                      'text-primary'
+                    }`
+                  : router.pathname.split('/')[1] === getTitles.links.about.split(' ')[0].toLowerCase()
+                  ? 'text-primary'
+                  : 'text-gray-60 hover:text-primary'
+              }
                   } text-base font-medium`}
-          >
-            {textContent.links.about}
-          </Link>
+            >
+              {textContent.links.about}
+            </Link>
+          </div>
         </div>
-      </div>
+      ) : null}
     </>
   );
 };
diff --git a/src/components/layout/footers/Footer.tsx b/src/components/layout/footers/Footer.tsx
index fff15340a..8d3445ee8 100644
--- a/src/components/layout/footers/Footer.tsx
+++ b/src/components/layout/footers/Footer.tsx
@@ -8,16 +8,18 @@ import Image from 'next/legacy/image';
 import axios from 'axios';
 import { CaretDown, CaretUp, HardDrives, PaperPlaneTilt } from '@phosphor-icons/react';
 import moment from 'moment';
-import { GetServerSidePropsContext } from 'next';
 
-interface FooterProps {
+export default function Footer({
+  textContent,
+  lang,
+  hideNewsletter,
+  darkMode,
+}: Readonly<{
   textContent: any;
   lang: string;
   hideNewsletter?: boolean;
   darkMode?: boolean;
-}
-
-export default function Footer({ textContent, lang, hideNewsletter, darkMode }: Readonly<FooterProps>): JSX.Element {
+}>) {
   const [platforms, setPlatforms] = useState<any>();
   const year = moment().format('YYYY');
 
@@ -274,7 +276,7 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
                     </a>
 
                     <a
-                      href={'/whitepaper/internxt-white-paper.pdf'}
+                      href={`/whitepaper/internxt-white-paper.pdf`}
                       target="_blank"
                       rel="noreferrer"
                       download={true}
@@ -423,7 +425,7 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
                   <img
                     loading="lazy"
                     className="h-3.5"
-                    src={'/icons/social/X_logo.svg'}
+                    src={`/icons/social/X_logo.svg`}
                     draggable="false"
                     alt="twitter icon"
                   />
@@ -632,23 +634,23 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
                         darkMode ? 'bg-black text-gray-30' : 'text-gray-60'
                       } space-y-8 p-4`}
                     >
-                      <Link href="/newsletter-subscribe" target="_top" className="hover:text-primary">
+                      <a href="/newsletter-subscribe" target="_top" className="hover:text-primary">
                         {textContent.FooterSection.sections.join.newsletter}
-                      </Link>
-                      <Link href="https://drive.internxt.com/new" target="_blank">
+                      </a>
+                      <a href="https://drive.internxt.com/new" target="_blank">
                         {textContent.FooterSection.sections.join.signup}
-                      </Link>
+                      </a>
 
-                      <Link href="https://drive.internxt.com/login" target="_blank">
+                      <a href="https://drive.internxt.com/login" target="_blank">
                         {textContent.FooterSection.sections.join.login}
-                      </Link>
+                      </a>
 
-                      <Link href="https://github.com/internxt" target="_blank" rel="noreferrer">
+                      <a href="https://github.com/internxt" target="_blank" rel="noreferrer">
                         {textContent.FooterSection.sections.join.github}
-                      </Link>
-                      <Link href="/whitepaper/internxt-white-paper.pdf" download={true} className="hover:text-primary">
+                      </a>
+                      <a href="/whitepaper/internxt-white-paper.pdf" download={true} className="hover:text-primary">
                         {textContent.FooterSection.sections.join.whitePaper}
-                      </Link>
+                      </a>
                       <Link href="/affiliates" target="_blank" legacyBehavior>
                         {textContent.FooterSection.sections.join.affiliates}
                       </Link>
@@ -676,14 +678,14 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
                         darkMode ? 'bg-black text-gray-30' : 'text-gray-60'
                       } space-y-8 p-4`}
                     >
-                      <Link
+                      <a
                         href={`https://blog.internxt.com/${lang === 'es' ? 'es/' : ''}`}
                         target="_blank"
                         rel="noreferrer"
                         className="hover:text-primary"
                       >
                         {textContent.FooterSection.sections.resources.blog}
-                      </Link>
+                      </a>
                       <Link
                         href="/cloud-storage-comparison"
                         locale={lang}
@@ -787,7 +789,7 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
                   <img
                     loading="lazy"
                     className="h-4"
-                    src={'/icons/social/X_logo.svg'}
+                    src={`/icons/social/X_logo.svg`}
                     draggable="false"
                     alt="twitter icon"
                   />
@@ -864,7 +866,7 @@ export default function Footer({ textContent, lang, hideNewsletter, darkMode }:
   );
 }
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   return {
diff --git a/src/components/layout/footers/MinimalFooter.tsx b/src/components/layout/footers/MinimalFooter.tsx
index cc8f4cd09..61e861b75 100644
--- a/src/components/layout/footers/MinimalFooter.tsx
+++ b/src/components/layout/footers/MinimalFooter.tsx
@@ -13,9 +13,9 @@ export const MinimalFooter = ({ lang, footerLang, bgColor }: MinimalFooterProps)
   return (
     <div className={`flex w-full flex-col md:flex-row ${bgColor} items-center justify-center gap-4 py-16`}>
       <Link href="/" locale={lang} className="flex flex-shrink-0">
-        <img loading="lazy" src={'../../logos/internxt/cool-gray-90.svg'} alt="Internxt logo" />
+        <img loading="lazy" src={`../../logos/internxt/cool-gray-90.svg`} alt="Internxt logo" />
       </Link>
-      <p className={'text-xs text-cool-gray-60'}>{footerLang.copyright.line1 + year + footerLang.copyright.line2}</p>
+      <p className={`text-xs text-cool-gray-60`}>{footerLang.copyright.line1 + year + footerLang.copyright.line2}</p>
     </div>
   );
 };
diff --git a/src/components/layout/navbars/MinimalNavbar.tsx b/src/components/layout/navbars/MinimalNavbar.tsx
index 45fca67f4..973621ddf 100644
--- a/src/components/layout/navbars/MinimalNavbar.tsx
+++ b/src/components/layout/navbars/MinimalNavbar.tsx
@@ -24,7 +24,7 @@ export const MinimalNavbar = ({ lang }) => {
           <img
             loading="lazy"
             className="select-none"
-            src={getImage('/logos/internxt/cool-gray-90.svg')}
+            src={getImage(`/logos/internxt/cool-gray-90.svg`)}
             alt="Internxt logo"
           />
         </Link>
diff --git a/src/components/layout/navbars/Navbar.tsx b/src/components/layout/navbars/Navbar.tsx
index 173eb6659..93eb729bb 100644
--- a/src/components/layout/navbars/Navbar.tsx
+++ b/src/components/layout/navbars/Navbar.tsx
@@ -24,16 +24,33 @@ export interface NavbarProps {
   mode?: 'subscription' | 'payment';
 }
 
+const EXCLUDED_PATHS_FOR_RIBBON = [
+  '/pricing',
+  '/lifetime',
+  '/partner-discount',
+  '/techradar-discount',
+  '/stackcommerce',
+  '/dealfuel',
+  '/mightydeals',
+  '/temporary-email',
+  '/locker',
+  '/startpage',
+  '/oystervpn',
+  '/pccomponentes-products',
+  '/lifetime_special',
+  '/lifetime/celebration',
+];
+
 const DRIVE_WEB_URL = 'https://drive.internxt.com';
 
-export default function Navbar(props: Readonly<NavbarProps>): JSX.Element {
+export default function Navbar(props: Readonly<NavbarProps>) {
   const [menuState, setMenuState] = useState(false);
   const [scrolled, setScrolled] = useState(true);
   const [isRibbonHidden, setIsRibbonHidden] = useState<boolean>();
 
   const router = useRouter();
   const lang = router.locale;
-  const getTitles = require('@/assets/lang/en/navbar.json');
+  const getTitles = require(`@/assets/lang/en/navbar.json`);
 
   const shouldModifyRibbonStyle = isRibbonHidden;
   const shouldHideRibbon = true;
@@ -99,15 +116,16 @@ export default function Navbar(props: Readonly<NavbarProps>): JSX.Element {
                 />
               </Link>
             </div>
-            {props.isLinksHidden ? undefined : (
-              <ItemsNavigation
-                darkMode={props.darkMode}
-                getTitles={getTitles}
-                isQuizSection={props.isQuizSection}
-                lang={lang}
-                textContent={props.textContent}
-              />
-            )}
+            <ItemsNavigation
+              darkMode={props.darkMode}
+              getTitles={getTitles}
+              isQuizSection={props.isQuizSection}
+              shouldHideItems={props.isLinksHidden}
+              lang={lang}
+              menuState={menuState}
+              router={router}
+              textContent={props.textContent}
+            />
           </div>
 
           {/* Left side of navbar: Logo / Hamburguer menu */}
diff --git a/src/components/legal/TermsAndConditionsOverview.tsx b/src/components/legal/TermsAndConditionsOverview.tsx
index 86f8b37a5..1eb04692a 100644
--- a/src/components/legal/TermsAndConditionsOverview.tsx
+++ b/src/components/legal/TermsAndConditionsOverview.tsx
@@ -6,12 +6,8 @@ import MainSection from './MainSection';
 import { CalendarBlank } from '@phosphor-icons/react';
 import { isMobile } from 'react-device-detect';
 
-interface TermsAndConditionsOverviewProps {
-  textContent: Record<string, any>;
-}
-
-const TermsAndConditionsOverview = ({ textContent }: TermsAndConditionsOverviewProps): JSX.Element => {
-  const [itemSelected, setItemSelected] = useState<string>();
+const TermsAndConditionsOverview = ({ textContent }) => {
+  const [itemSelected, setItemSelected] = useState();
 
   // Set the scroll at center of the screen with anchor tag
   useEffect(() => {
@@ -48,6 +44,9 @@ const TermsAndConditionsOverview = ({ textContent }: TermsAndConditionsOverviewP
 
       {/* Mobile view */}
       <div className="flex flex-col overflow-hidden pt-16 lg:hidden">
+        {/* <div className="flex flex-col items-center justify-center bg-gradient-to-b from-primary to-primary-dark py-20 text-center">
+          <h1 className="mb-8 select-none text-6xl font-semibold text-white">{textContent.HeroSection.title}</h1>
+        </div> */}
         <div className="flex flex-col space-y-8 py-10 px-5">
           <div className="flex flex-row items-center space-x-2 text-base text-gray-80">
             <CalendarBlank size={17} />
diff --git a/src/components/legal/components/SelectSection.tsx b/src/components/legal/components/SelectSection.tsx
index 82d63d432..cd735ce4b 100644
--- a/src/components/legal/components/SelectSection.tsx
+++ b/src/components/legal/components/SelectSection.tsx
@@ -3,17 +3,11 @@ import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { CaretDown } from '@phosphor-icons/react';
 
-interface SelectSectionProps {
-  textContent: Record<string, any>;
-  itemSelected?: string;
-  setItemSelected: (itemSelected: string) => void;
-}
-
-const SelectSection = ({ textContent, itemSelected, setItemSelected }: SelectSectionProps): JSX.Element => {
+const SelectSection = ({ textContent, itemSelected, setItemSelected }) => {
   function linkTitles() {
-    const titles: string[] = [];
-    for (const key in textContent) {
-      if (key.startsWith('title')) {
+    let titles: string[] = [];
+    for (let key in textContent) {
+      if (textContent.hasOwnProperty(key) && key.startsWith('title')) {
         titles.push(textContent[key]);
       }
     }
diff --git a/src/components/lifetime/CtaSection.tsx b/src/components/lifetime/CtaSection.tsx
index 15627444d..d978b91a0 100644
--- a/src/components/lifetime/CtaSection.tsx
+++ b/src/components/lifetime/CtaSection.tsx
@@ -8,7 +8,7 @@ const CtaSection = ({ textContent }) => {
         </div>
         <button
           onClick={() => {
-            window.location.href = '#payment';
+            window.location.href = `#payment`;
           }}
           className="flex max-w-[260px] cursor-pointer flex-col items-center rounded-lg bg-white text-center hover:bg-blue-10"
         >
diff --git a/src/components/lifetime/HeroSection.tsx b/src/components/lifetime/HeroSection.tsx
index 5f4eee325..0dcd2c4ed 100644
--- a/src/components/lifetime/HeroSection.tsx
+++ b/src/components/lifetime/HeroSection.tsx
@@ -26,7 +26,7 @@ const HeroSection = ({
 }: HeroSectionProps) => {
   return (
     <section
-      className={'overflow-hidden bg-cover bg-no-repeat py-20'}
+      className={`overflow-hidden bg-cover bg-no-repeat py-20`}
       style={{
         backgroundImage: `url('${bgImage}')`,
       }}
@@ -58,7 +58,7 @@ const HeroSection = ({
               </div>
               <button
                 onClick={() => {
-                  window.location.href = '#payment';
+                  window.location.href = `#payment`;
                 }}
                 className="flex  cursor-pointer flex-col items-center rounded-lg bg-primary text-center hover:bg-primary-dark"
               >
diff --git a/src/components/lifetime/PriceBannerForCampaigns.tsx b/src/components/lifetime/PriceBannerForCampaigns.tsx
index b06fef8df..4c3386e82 100644
--- a/src/components/lifetime/PriceBannerForCampaigns.tsx
+++ b/src/components/lifetime/PriceBannerForCampaigns.tsx
@@ -11,7 +11,7 @@ export const PriceBannerForCampaigns = ({ textContent }) => {
   return (
     <div className={`${shouldShowBanner ? 'flex' : 'hidden'} flex-col overflow-hidden px-5`}>
       <div
-        className={'flex flex-col  justify-between rounded-[32px] bg-white lg:w-full lg:flex-row'}
+        className={`flex flex-col  justify-between rounded-[32px] bg-white lg:w-full lg:flex-row`}
         style={{
           backgroundImage: `url(${getImage('/images/campaigns/euro/grass.webp')})`,
         }}
diff --git a/src/components/lifetime/celebration/HeroSection.tsx b/src/components/lifetime/celebration/HeroSection.tsx
index bdb1b1614..3476eb988 100644
--- a/src/components/lifetime/celebration/HeroSection.tsx
+++ b/src/components/lifetime/celebration/HeroSection.tsx
@@ -39,7 +39,7 @@ const HeroSection = ({ textContent, hideTimer }: HeroSectionProps) => {
               </div>
               <button
                 onClick={() => {
-                  window.location.href = '#payment';
+                  window.location.href = `#payment`;
                 }}
                 className="flex  cursor-pointer flex-col items-center rounded-lg bg-primary text-center hover:bg-primary-dark"
               >
diff --git a/src/components/media-area/KitSection.tsx b/src/components/media-area/KitSection.tsx
index 7c8691d6d..407274bde 100644
--- a/src/components/media-area/KitSection.tsx
+++ b/src/components/media-area/KitSection.tsx
@@ -25,7 +25,7 @@ const KitSection = ({ textContent }) => {
         </div>
         <div className="flex flex-row flex-wrap items-stretch gap-10">
           <KitCard
-            downloadImagesLink={'https://internxt.com/media-area/internxt-logo-set.zip'}
+            downloadImagesLink={`https://internxt.com/media-area/internxt-logo-set.zip`}
             image={getImage('/images/media-area/inxt-logo-set.svg')}
             textContent={textContent.firstSection}
           />
diff --git a/src/components/newsletter/MakePrivacySection.tsx b/src/components/newsletter/MakePrivacySection.tsx
index b1cd72608..db6055cfc 100644
--- a/src/components/newsletter/MakePrivacySection.tsx
+++ b/src/components/newsletter/MakePrivacySection.tsx
@@ -1,25 +1,25 @@
-import { getImage } from '@/lib/getImage';
-
-const MakePrivacySection = ({ textContent }): JSX.Element => (
-  <section className="overflow-hidden ">
-    <div className="flex w-full flex-col items-center justify-center space-y-12 bg-gray-1 py-20 px-5">
-      <div className="flex flex-col items-center justify-center space-y-6 text-center">
-        <h2 className="text-5xl font-semibold text-gray-100">{textContent.title}</h2>
-        <p className="max-w-[774px] text-xl text-gray-80">{textContent.description}</p>
-        <button className="flex w-full justify-center rounded-lg bg-primary px-5 py-3 font-medium text-white lg:w-max">
-          {textContent.cta}
-        </button>
+const MakePrivacySection = ({ textContent }) => {
+  return (
+    <section className="overflow-hidden ">
+      <div className="flex w-full flex-col items-center justify-center space-y-12 bg-gray-1 py-20 px-5">
+        <div className="flex flex-col items-center justify-center space-y-6 text-center">
+          <h2 className="text-5xl font-semibold text-gray-100">{textContent.title}</h2>
+          <p className="max-w-[774px] text-xl text-gray-80">{textContent.description}</p>
+          <button className="flex w-full justify-center rounded-lg bg-primary px-5 py-3 font-medium text-white lg:w-max">
+            {textContent.cta}
+          </button>
+        </div>
+        <picture className="max-w-[774px]">
+          <source srcSet="/images/home/internxt_secure_cloud_storage.webp" type="image/webp" />
+          <img
+            src="/images/home/internxt_secure_cloud_storage.webp"
+            alt="Internxt secure cloud storage"
+            draggable={false}
+          />
+        </picture>
       </div>
-      <picture className="max-w-[774px]">
-        <source srcSet="/images/home/internxt_secure_cloud_storage.webp" type="image/webp" />
-        <img
-          src={getImage('/images/home/internxt_secure_cloud_storage.webp')}
-          alt="Internxt secure cloud storage"
-          draggable={false}
-        />
-      </picture>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default MakePrivacySection;
diff --git a/src/components/partner-discount/HeroSection.tsx b/src/components/partner-discount/HeroSection.tsx
index 1d37edc42..0301cdc3e 100644
--- a/src/components/partner-discount/HeroSection.tsx
+++ b/src/components/partner-discount/HeroSection.tsx
@@ -1,12 +1,8 @@
+import React from 'react';
 import Image from 'next/legacy/image';
 import { notificationService } from '@/components/Snackbar';
-import { getImage } from '@/lib/getImage';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   const description = {
     part1: textContent.description.split('SPECIAL15')[0],
     special15: textContent.description.substring(
@@ -62,7 +58,7 @@ const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
           <div className="hidden flex-col rounded-3xl lg:flex">
             <Image
               alt="Woman with laptop"
-              src={getImage('/images/partners-discount/Internxt_partners_discount.webp')}
+              src="/images/partners-discount/Internxt_partners_discount.webp"
               className=" rounded-3xl"
               width={588}
               height={560}
@@ -74,7 +70,7 @@ const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
           <div className="flex flex-col rounded-3xl shadow-2xl lg:hidden">
             <Image
               alt="Woman with laptop"
-              src={getImage('/images/partners-discount/Internxt_partners_discount_mobile.webp')}
+              src="/images/partners-discount/Internxt_partners_discount_mobile.webp"
               className=" rounded-3xl"
               width={588}
               height={660}
diff --git a/src/components/partner-discount/InfoSection.tsx b/src/components/partner-discount/InfoSection.tsx
index ee6f72513..90fe04fcc 100644
--- a/src/components/partner-discount/InfoSection.tsx
+++ b/src/components/partner-discount/InfoSection.tsx
@@ -1,10 +1,7 @@
 import { ShieldCheck, LockKey, Scales, Fingerprint } from '@phosphor-icons/react';
+import React from 'react';
 
-interface InfoSectionProps {
-  textContent: Record<string, any>;
-}
-
-const InfoSection = ({ textContent }: InfoSectionProps): JSX.Element => {
+const InfoSection = ({ textContent }) => {
   const cards = [
     {
       id: 1,
@@ -43,10 +40,7 @@ const InfoSection = ({ textContent }: InfoSectionProps): JSX.Element => {
           <div className="grid grid-cols-1 flex-row flex-wrap justify-center gap-8 sm:grid-cols-2">
             {cards.map((card) => {
               return (
-                <div
-                  className="flex flex-col items-start justify-start space-y-6 rounded-2xl bg-cool-gray-5 p-8 sm:p-10 md:max-w-[488px]"
-                  key={card.title}
-                >
+                <div className="flex flex-col items-start justify-start space-y-6 rounded-2xl bg-cool-gray-5 p-8 sm:p-10 md:max-w-[488px]">
                   <card.icon className="text-4xl text-primary" />
                   <h4 className="text-2xl font-medium">{card.title}</h4>
                   <h5 className="text-lg text-cool-gray-80 sm:text-base">{card.description}</h5>
diff --git a/src/components/partner-discount/PaymentSection.tsx b/src/components/partner-discount/PaymentSection.tsx
index 8911cef79..0d7299ed4 100644
--- a/src/components/partner-discount/PaymentSection.tsx
+++ b/src/components/partner-discount/PaymentSection.tsx
@@ -1,11 +1,8 @@
+import React from 'react';
 import { Coin, CreditCard, Detective } from '@phosphor-icons/react';
 import PriceTable from './PriceTable';
 
-interface PaymentSectionProps {
-  textContent: Record<string, any>;
-}
-
-const PaymentSection = ({ textContent }: PaymentSectionProps): JSX.Element => {
+const PaymentSection = ({ lang, textContent }) => {
   return (
     <section id="payment" className="overflow-hidden bg-gray-1 py-20">
       <div className="flex flex-col space-y-8 lg:pt-0">
diff --git a/src/components/partnerships/freemonth/FeatureSection.js b/src/components/partnerships/freemonth/FeatureSection.js
new file mode 100644
index 000000000..99c837b4e
--- /dev/null
+++ b/src/components/partnerships/freemonth/FeatureSection.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import { UilEyeSlash, UilTachometerFast, UilLock, UilDesktop, UilChatBubbleUser } from '@iconscout/react-unicons';
+
+const FeatureSection = ({ textContent }) => (
+  <section>
+    <div className="flex flex-col items-center py-16">
+      <div className="flex flex-col items-center text-center mb-10 lg:mb-16 font-medium px-6">
+        <h2 className="eyebrow text-4xl">
+          {textContent.title.line1}
+          <br className="hidden sm:inline-flex" /> {textContent.title.line2}
+        </h2>
+      </div>
+
+      <div className="flex flex-row flex-wrap justify-center w-full max-w-7xl">
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilEyeSlash className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.privacy.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.privacy.description.line1} {textContent.features.privacy.description.line2}{' '}
+              {textContent.features.privacy.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilTachometerFast className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.speed.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.speed.description.line1} {textContent.features.speed.description.line2}{' '}
+              {textContent.features.speed.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilLock className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.security.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.security.description.line1} {textContent.features.security.description.line2}{' '}
+              {textContent.features.security.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilDesktop className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.multiplatform.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.multiplatform.description.line1}{' '}
+              {textContent.features.multiplatform.description.line2}{' '}
+              {textContent.features.multiplatform.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilChatBubbleUser className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.support.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.support.description.line1} {textContent.features.support.description.line2}{' '}
+              {textContent.features.support.description.line3}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div className="relative">
+      <div className="absolute top-0 left-0 w-full h-full z-0" />
+
+      <div className="relative flex flex-col items-center py-20 z-20">
+        <div className="flex flex-col items-center text-center mb-8 px-6">
+          <h3 className="text-4xl font-medium mb-4">
+            {textContent.buyNowSection.title.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.title.line2}
+          </h3>
+
+          <h4 className="text-lg lg:text-xl text-cool-gray-80">
+            {textContent.buyNowSection.description.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line3}
+          </h4>
+        </div>
+
+        <a
+          href="#buy"
+          className="flex justify-center sm:inline-flex px-6 py-2 mb-16 border border-transparent rounded-full text-base font-medium text-white bg-primary active:bg-primary-dark focus:bg-primary-dark outline-none transition-all duration-75"
+        >
+          <span className="whitespace-nowrap">{textContent.buyNowSection.freemonth}</span>
+        </a>
+
+        <div className="flex flex-col px-6">
+          <img
+            className="max-h-96"
+            loading="lazy"
+            src="../../images/partnerships/devices.png"
+            alt="Eye slash"
+            draggable="false"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default FeatureSection;
diff --git a/src/components/partnerships/freemonth/HeroSection.js b/src/components/partnerships/freemonth/HeroSection.js
new file mode 100644
index 000000000..80733c45d
--- /dev/null
+++ b/src/components/partnerships/freemonth/HeroSection.js
@@ -0,0 +1,50 @@
+/* eslint-disable max-len */
+/* eslint-disable prefer-const */
+import React from 'react';
+import PriceCard from './PriceCard';
+
+const HeroSection = ({ textContent, lang }) => {
+  const pricings = {
+    TB2: {
+      storage: '2TB',
+      price: '9.99',
+    },
+  };
+
+  return (
+    <section
+      id="buy"
+      className="relative flex w-full flex-col bg-gradient-to-b from-white via-neutral-10 to-white pt-16"
+    >
+      <div className="flex flex-col items-center justify-center space-y-20 px-8 py-20 lg:px-32 xl:flex-row xl:space-y-0 xl:space-x-40 xl:py-24">
+        {/* Main title */}
+        <div className="flex flex-shrink-0 flex-col text-left">
+          <h1 className="mb-4 text-5xl font-medium sm:mb-8 md:text-6xl">
+            {textContent.title.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.title.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.title.line3}
+            <br className="hidden sm:inline-flex" /> {textContent.title.line4}
+          </h1>
+
+          <h2 className="text-lg text-cool-gray-80 sm:text-xl">
+            {textContent.description.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.description.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.description.line3}
+          </h2>
+        </div>
+
+        {/* Features grid */}
+        <PriceCard
+          planType="individual"
+          storage={pricings.TB2.storage}
+          price={pricings.TB2.price}
+          billingFrequency={1}
+          cta={['checkout', 'TB21']}
+          lang={'en'}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/src/components/partnerships/freemonth/PriceCard.js b/src/components/partnerships/freemonth/PriceCard.js
new file mode 100644
index 000000000..12cb50c29
--- /dev/null
+++ b/src/components/partnerships/freemonth/PriceCard.js
@@ -0,0 +1,306 @@
+import React, { useEffect, useState } from 'react';
+import { checkout } from '../../../lib/auth';
+
+const PriceCard = ({
+  planType,
+  storage,
+  price,
+  priceBefore,
+  billingFrequency,
+  cta,
+  setUsers,
+  getUsers,
+  popular,
+  lang,
+}) => {
+  const [stripeObject, setStripeObject] = useState({});
+
+  const billingFrequencyList = {
+    1: 'monthly',
+    6: 'semiannually',
+    12: 'annually',
+  };
+
+  const totalBilled = Math.abs(price * billingFrequency).toFixed(2);
+  const teamsBilled = (totalBilled * getUsers).toFixed(2);
+  const MAX_USERS = 200;
+  const contentText = require(`../../../assets/lang/${lang}/priceCard.json`);
+
+  useEffect(() => {
+    if (cta[0] === 'checkout') {
+      const stripeObj = { product: cta[1] };
+      setStripeObject(stripeObj);
+    }
+  }, [cta]);
+
+  return (
+    <div
+      className={`priceCard card ${
+        popular ? 'bg-primary shadow-lg ring-2 ring-primary' : ''
+      } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl sm:m-4`}
+    >
+      <div
+        className={`mostPopular ${
+          popular ? '' : 'hidden'
+        } flex flex-col items-center justify-center py-2 text-xs font-medium text-white`}
+      >
+        {contentText.mostPopular}
+      </div>
+
+      <div className={`info flex flex-col items-center justify-center bg-white p-6 ${popular ? 'rounded-t-2xl' : ''}`}>
+        <div
+          className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
+            popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
+          } rounded-full font-medium`}
+        >
+          <p>
+            {storage}
+            <span className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-sm`}>
+              {contentText.perUserSlash}
+            </span>
+          </p>
+        </div>
+
+        <div
+          className={`planPrice flex flex-col items-center justify-center py-8 ${
+            priceBefore ? 'space-y-1' : 'space-y-2'
+          }`}
+        >
+          <div className="flex flex-col items-center">
+            <div
+              className={`priceBreakdown flex ${
+                planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
+              }`}
+            >
+              <span
+                className={`perUser ${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-xs font-medium`}
+              >
+                {contentText.perUser}
+              </span>
+
+              <p className="flex flex-row items-start space-x-0.5 font-medium text-green-old-50">
+                <span className={`currency ${price <= 0 ? 'hidden' : ''} text-2xl`}>€</span>
+                <span className="price text-5xl font-bold">0.00</span>
+                <span className={`currency ${price <= 0 ? 'hidden' : ''} pointer-events-none text-2xl opacity-0`}>
+                  €
+                </span>
+              </p>
+            </div>
+
+            <p className="text-lg font-medium text-cool-gray-100">{contentText.firstMonth}</p>
+          </div>
+
+          <span
+            className={`priceBefore ${
+              priceBefore ? 'flex' : 'hidden'
+            } text-base font-medium text-neutral-80 line-through`}
+          >
+            €{priceBefore}
+          </span>
+
+          <div
+            className={`totalBilling ${
+              planType.toLowerCase() === 'individual' ? 'flex' : 'hidden'
+            } flex-row text-xs text-neutral-80`}
+          >
+            <p className={`${price <= 0 ? 'hidden' : ''}`}>
+              <span className={`totalBilled ${billingFrequency < 0 ? 'hidden' : ''}`}>
+                <span className="currency text-supporting-2">€</span>
+                {totalBilled}{' '}
+              </span>
+
+              <span className="billingFrequency">
+                {contentText.billingFrequencyLabel[billingFrequencyList[billingFrequency]]}{' '}
+                {contentText.billingFrequencyLabel.afterMonth}
+              </span>
+            </p>
+
+            <p className={`${price <= 0 ? '' : 'hidden'}`}>{contentText.price.free}</p>
+          </div>
+        </div>
+
+        <div
+          className={`businessUserCount ${
+            planType.toLowerCase() === 'individual' ? 'hidden' : 'flex'
+          } mb-4 w-full flex-col rounded-lg bg-neutral-10 p-4 ring-1 ring-neutral-20`}
+        >
+          <div className="input relative flex flex-row justify-between rounded-lg bg-white ring-1 ring-neutral-30">
+            <button
+              type="button"
+              onClick={() => {
+                if (getUsers >= 3) {
+                  setUsers(parseInt(getUsers, 10) - 1);
+                } else setUsers(2);
+              }}
+              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
+                getUsers > 2
+                  ? 'bg-primary text-white active:bg-primary-dark'
+                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
+              } sm:duration-50 z-10 select-none rounded-l-lg text-2xl font-light transition-all`}
+            >
+              <span className="mb-1">-</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => {
+                if (getUsers <= MAX_USERS - 1) {
+                  setUsers(parseInt(getUsers, 10) + 1);
+                } else setUsers(MAX_USERS);
+              }}
+              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
+                getUsers < MAX_USERS
+                  ? 'bg-primary text-white active:bg-primary-dark'
+                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
+              } sm:duration-50 z-10 select-none rounded-r-lg text-2xl font-light transition-all`}
+            >
+              <span className="mb-1">+</span>
+            </button>
+
+            <label
+              htmlFor={`users_${storage}`}
+              className="absolute top-0 left-0 flex h-full w-full cursor-text flex-row items-center justify-center text-xl font-medium sm:text-base"
+            >
+              <div className="relative flex h-full flex-row items-center">
+                <span
+                  className={`pointer-events-none ${
+                    Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? '' : 'opacity-0'
+                  }`}
+                >
+                  {Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? 0 : getUsers}
+                </span>
+
+                {/* eslint-disable-next-line no-unused-expressions */}
+                <input
+                  id={`users_${storage}`}
+                  type="number"
+                  inputMode="numeric"
+                  min="2"
+                  max={MAX_USERS}
+                  step="1"
+                  value={getUsers}
+                  onChange={(e) => {
+                    e.target.value.toString().startsWith('0')
+                      ? (e.target.value = e.target.value.toString().slice(1, e.target.value.toString().length))
+                      : setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value);
+                  }}
+                  onBlur={(e) => {
+                    setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value < 2 ? 2 : e.target.value);
+                  }}
+                  className="absolute left-0 w-14 min-w-full appearance-none bg-transparent font-medium outline-none"
+                />
+              </div>
+
+              <span className="ml-1 select-none">{contentText.users}</span>
+            </label>
+          </div>
+
+          <div className="mt-4 flex w-full flex-row justify-between text-neutral-700">
+            <span className="font-medium">Total:</span>
+
+            <div className="flex flex-row items-end">
+              <div className="flex flex-row items-start">
+                <span className="mt-0.5 mr-0.5 text-xs">€</span>
+
+                <span>{teamsBilled}</span>
+              </div>
+
+              <span className="mb-1 ml-0.5 text-xs text-neutral-100">
+                {contentText.billingFrequencyLabelSmall[billingFrequencyList[billingFrequency]]}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          tabIndex={0}
+          // eslint-disable-next-line no-unused-expressions
+          // onClick={() => {
+          //   cta[0] === 'checkout'
+          //     ? checkout({
+          //         priceId: cta[1],
+          //       })
+          //     : (location.href = cta[1]);
+          // }}
+          className="flex w-full flex-col items-center text-center"
+        >
+          <div className="subscribePlan flex w-full origin-center cursor-pointer select-none items-center justify-center rounded-lg border border-transparent bg-primary px-6 py-2 text-lg  font-medium text-white transition-all duration-75 focus:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-blue-20 focus:ring-offset-2 active:translate-y-0.5 active:bg-primary-dark sm:text-base">
+            <p className={`${price <= 0 ? 'hidden' : ''} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
+              {contentText.cta.freemonth}
+            </p>
+
+            <p className={`${price <= 0 ? '' : 'hidden'} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
+              {contentText.cta.signUpNow}
+            </p>
+
+            <p className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''}`}>{contentText.cta.getStarted}</p>
+          </div>
+
+          <p className="mt-2 text-xs text-cool-gray-40">{contentText.onlyForNewClients}</p>
+        </div>
+      </div>
+
+      <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
+        <div className="flex flex-col space-y-2">
+          <div className="flex flex-row items-start space-x-2 font-medium">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span className={`${price <= 0 ? 'hidden' : 'flex'}`}>
+              {billingFrequency < 0
+                ? `${contentText.features.enjoyForever.enjoy} ${storage} ${contentText.features.enjoyForever.forever}`
+                : `${contentText.features.moneyBack}`}
+            </span>
+
+            <span className={`${price <= 0 ? 'flex' : 'hidden'}`}>
+              {contentText.features.enjoyForever.enjoy} {storage} {contentText.features.enjoyForever.forever}
+            </span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.encryptedFiles}</span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.accessFromAnywhere}</span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.allServices}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PriceCard;
diff --git a/src/components/partnerships/guru99/FeatureSection.js b/src/components/partnerships/guru99/FeatureSection.js
new file mode 100644
index 000000000..3e4f8e1e3
--- /dev/null
+++ b/src/components/partnerships/guru99/FeatureSection.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import { UilEyeSlash, UilTachometerFast, UilLock, UilDesktop, UilChatBubbleUser } from '@iconscout/react-unicons';
+
+const FeatureSection = ({ textContent }) => (
+  <section>
+    <div className="flex flex-col items-center py-16">
+      <div className="flex flex-col items-center text-center mb-10 lg:mb-16 font-medium px-6">
+        <h2 className="eyebrow text-4xl">
+          {textContent.title.line1}
+          <br className="hidden sm:inline-flex" /> {textContent.title.line2}
+        </h2>
+      </div>
+
+      <div className="flex flex-row flex-wrap justify-center w-full max-w-7xl">
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilEyeSlash className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.privacy.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.privacy.description.line1} {textContent.features.privacy.description.line2}{' '}
+              {textContent.features.privacy.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilTachometerFast className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.speed.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.speed.description.line1} {textContent.features.speed.description.line2}{' '}
+              {textContent.features.speed.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilLock className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.security.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.security.description.line1} {textContent.features.security.description.line2}{' '}
+              {textContent.features.security.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilDesktop className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.multiplatform.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.multiplatform.description.line1}{' '}
+              {textContent.features.multiplatform.description.line2}{' '}
+              {textContent.features.multiplatform.description.line3}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full sm:w-80 items-center text-center space-y-8 mx-12 my-6 lg:my-10">
+          <UilChatBubbleUser className="w-12 h-12 text-blue-50" />
+
+          <div className="flex flex-col items-center text-center space-y-3">
+            <span className="font-medium text-xl text-cool-gray-100">{textContent.features.support.title}</span>
+
+            <span className="text-cool-gray-80">
+              {textContent.features.support.description.line1} {textContent.features.support.description.line2}{' '}
+              {textContent.features.support.description.line3}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div className="relative">
+      <div className="absolute top-0 left-0 w-full h-full z-0" />
+
+      <div className="relative flex flex-col items-center py-20 z-20">
+        <div className="flex flex-col items-center text-center mb-8 px-6">
+          <h3 className="text-4xl font-medium mb-4">
+            {textContent.buyNowSection.title.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.title.line2}
+          </h3>
+
+          <h4 className="text-lg lg:text-xl text-cool-gray-80">
+            {textContent.buyNowSection.description.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.buyNowSection.description.line3}
+          </h4>
+        </div>
+
+        <a
+          href="#buy"
+          className="flex justify-center sm:inline-flex px-6 py-2 mb-16 border border-transparent rounded-full text-base font-medium text-white bg-primary active:bg-primary-dark focus:bg-primary-dark outline-none transition-all duration-75"
+        >
+          <span className="whitespace-nowrap">{textContent.buyNowSection.cta}</span>
+        </a>
+
+        <div className="flex flex-col px-6">
+          <img
+            className="max-h-96"
+            loading="lazy"
+            src="../../images/partnerships/devices.png"
+            alt="Eye slash"
+            draggable="false"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default FeatureSection;
diff --git a/src/components/partnerships/guru99/HeroSection.js b/src/components/partnerships/guru99/HeroSection.js
new file mode 100644
index 000000000..5368d775c
--- /dev/null
+++ b/src/components/partnerships/guru99/HeroSection.js
@@ -0,0 +1,87 @@
+/* eslint-disable max-len */
+/* eslint-disable prefer-const */
+import React, { useState, useEffect } from 'react';
+import Image from "next/legacy/image";
+import PriceCard from './PriceCard';
+
+const HeroSection = ({ textContent, lang }) => {
+  const pricings = {
+    TB2: {
+      storage: '2TB',
+      price: '9.99',
+      stripeID: 'TB2_Free_30_Days_Guru99_Monthly',
+    },
+  };
+  const [showCoupon, setShowCoupon] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowCoupon(true);
+    }, 350);
+  }, []);
+
+  return (
+    <section
+      id="buy"
+      className="relative flex w-full flex-col bg-gradient-to-b from-white via-neutral-10 to-white pt-16"
+    >
+      <div
+        className={`flex flex-row items-center justify-center p-6 text-center sm:h-16 sm:p-0 ${
+          showCoupon ? 'bg-primary text-blue-20' : 'bg-white text-blue-40'
+        } select-all transition-colors duration-1000 ease-in-out`}
+      >
+        <div>
+          <span className="select-none">{textContent.coupon.before}</span>
+          <span
+            className={`${
+              showCoupon ? 'text-white' : 'text-blue-50'
+            } duration-650 select-all px-1.5 font-bold tracking-wide underline transition-colors ease-in-out`}
+          >
+            GURU99
+          </span>
+          <span className="select-none">{textContent.coupon.after}</span>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center justify-center space-y-20 px-8 py-20 lg:px-32 xl:flex-row xl:space-y-0 xl:space-x-40 xl:py-24">
+        {/* Main title */}
+        <div className="flex flex-shrink-0 flex-col text-left">
+          <div className="mb-4 flex h-10 flex-row items-center justify-center self-start rounded-lg bg-cool-gray-10 px-5">
+            <p className="mr-2 text-base font-medium text-cool-gray-80">{textContent.partnershipWith}</p>
+            <Image
+              src="/images/partnerships/guru99/logo.webp"
+              width={61.5}
+              height={16}
+              className="pointer-events-none"
+              alt="Logo image"
+            />
+          </div>
+
+          <h1 className="mb-4 text-5xl font-medium leading-tight sm:mb-8 md:text-6xl">
+            {textContent.title.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.title.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.title.line3}
+          </h1>
+
+          <h2 className="text-lg text-cool-gray-80 sm:text-xl">
+            {textContent.description.line1}
+            <br className="hidden sm:inline-flex" /> {textContent.description.line2}
+            <br className="hidden sm:inline-flex" /> {textContent.description.line3}
+          </h2>
+        </div>
+
+        {/* Features grid */}
+        <PriceCard
+          planType="individual"
+          storage={pricings.TB2.storage}
+          price={pricings.TB2.price}
+          billingFrequency={1}
+          cta={['checkout', `${pricings.TB2.stripeID}`]}
+          lang={lang}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/src/components/partnerships/guru99/PriceCard.js b/src/components/partnerships/guru99/PriceCard.js
new file mode 100644
index 000000000..ca336f43f
--- /dev/null
+++ b/src/components/partnerships/guru99/PriceCard.js
@@ -0,0 +1,304 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-nested-ternary */
+import React, { useEffect, useState } from 'react';
+
+const PriceCard = ({
+  planType,
+  storage,
+  price,
+  priceBefore,
+  billingFrequency,
+  cta,
+  setUsers,
+  getUsers,
+  popular,
+  lang,
+}) => {
+  const [stripeObject, setStripeObject] = useState({});
+
+  const billingFrequencyList = {
+    1: 'monthly',
+    6: 'semiannually',
+    12: 'annually',
+  };
+
+  const totalBilled = Math.abs(price * billingFrequency).toFixed(2);
+  const teamsBilled = (totalBilled * getUsers).toFixed(2);
+  const MAX_USERS = 200;
+  const contentText = require(`../../../assets/lang/${lang}/priceCard.json`);
+
+  useEffect(() => {
+    if (cta[0] === 'checkout') {
+      const stripeObj = { product: cta[1] };
+      setStripeObject(stripeObj);
+    }
+  }, [cta]);
+
+  return (
+    <div
+      className={`priceCard card ${
+        popular ? 'bg-primary shadow-lg ring-2 ring-primary' : ''
+      } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl sm:m-4`}
+    >
+      <div
+        className={`mostPopular ${
+          popular ? '' : 'hidden'
+        } flex flex-col items-center justify-center py-2 text-xs font-medium text-white`}
+      >
+        {contentText.mostPopular}
+      </div>
+
+      <div className={`info flex flex-col items-center justify-center bg-white p-6 ${popular ? 'rounded-t-2xl' : ''}`}>
+        <div
+          className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
+            popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
+          } rounded-full font-medium`}
+        >
+          <p>
+            {storage}
+            <span className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-sm`}>
+              {contentText.perUserSlash}
+            </span>
+          </p>
+        </div>
+
+        <div
+          className={`planPrice flex flex-col items-center justify-center py-8 ${
+            priceBefore ? 'space-y-1' : 'space-y-2'
+          }`}
+        >
+          <div className="flex flex-col items-center">
+            <div
+              className={`priceBreakdown flex ${
+                planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
+              }`}
+            >
+              <span
+                className={`perUser ${planType.toLowerCase() === 'individual' ? 'hidden' : ''} text-xs font-medium`}
+              >
+                {contentText.perUser}
+              </span>
+
+              <p className="flex flex-row items-start space-x-0.5 font-medium text-green-old-50">
+                <span className={`currency ${price <= 0 ? 'hidden' : ''} text-2xl`}>€</span>
+                <span className="price text-5xl font-bold">0.00</span>
+                <span className={`currency ${price <= 0 ? 'hidden' : ''} pointer-events-none text-2xl opacity-0`}>
+                  €
+                </span>
+              </p>
+            </div>
+
+            <p className="text-lg font-medium text-cool-gray-100">{contentText.firstMonth}</p>
+          </div>
+
+          <span
+            className={`priceBefore ${
+              priceBefore ? 'flex' : 'hidden'
+            } text-base font-medium text-neutral-80 line-through`}
+          >
+            €{priceBefore}
+          </span>
+
+          <div
+            className={`totalBilling ${
+              planType.toLowerCase() === 'individual' ? 'flex' : 'hidden'
+            } flex-row text-xs text-neutral-80`}
+          >
+            <p className={`${price <= 0 ? 'hidden' : ''}`}>
+              <span className={`totalBilled ${billingFrequency < 0 ? 'hidden' : ''}`}>
+                <span className="currency text-supporting-2">€</span>
+                {totalBilled}{' '}
+              </span>
+
+              <span className="billingFrequency">
+                {contentText.billingFrequencyLabel[billingFrequencyList[billingFrequency]]}{' '}
+                {contentText.billingFrequencyLabel.afterMonth}
+              </span>
+            </p>
+
+            <p className={`${price <= 0 ? '' : 'hidden'}`}>{contentText.price.free}</p>
+          </div>
+        </div>
+
+        <div
+          className={`businessUserCount ${
+            planType.toLowerCase() === 'individual' ? 'hidden' : 'flex'
+          } mb-4 w-full flex-col rounded-lg bg-neutral-10 p-4 ring-1 ring-neutral-20`}
+        >
+          <div className="input relative flex flex-row justify-between rounded-lg bg-white ring-1 ring-neutral-30">
+            <button
+              type="button"
+              onClick={() => {
+                if (getUsers >= 3) {
+                  setUsers(parseInt(getUsers, 10) - 1);
+                } else setUsers(2);
+              }}
+              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
+                getUsers > 2
+                  ? 'bg-primary text-white active:bg-primary-dark'
+                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
+              } sm:duration-50 z-10 select-none rounded-l-lg text-2xl font-light transition-all`}
+            >
+              <span className="mb-1">-</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => {
+                if (getUsers <= MAX_USERS - 1) {
+                  setUsers(parseInt(getUsers, 10) + 1);
+                } else setUsers(MAX_USERS);
+              }}
+              className={`flex h-10 w-10 flex-row items-center justify-center sm:h-8 sm:w-8 ${
+                getUsers < MAX_USERS
+                  ? 'bg-primary text-white active:bg-primary-dark'
+                  : 'cursor-not-allowed bg-neutral-30 text-neutral-80 active:bg-neutral-40'
+              } sm:duration-50 z-10 select-none rounded-r-lg text-2xl font-light transition-all`}
+            >
+              <span className="mb-1">+</span>
+            </button>
+
+            <label
+              htmlFor={`users_${storage}`}
+              className="absolute top-0 left-0 flex h-full w-full cursor-text flex-row items-center justify-center text-xl font-medium sm:text-base"
+            >
+              <div className="relative flex h-full flex-row items-center">
+                <span
+                  className={`pointer-events-none ${
+                    Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? '' : 'opacity-0'
+                  }`}
+                >
+                  {Number.isNaN(getUsers) || getUsers === '' || getUsers < 1 ? 0 : getUsers}
+                </span>
+
+                {/* eslint-disable-next-line no-unused-expressions */}
+                <input
+                  id={`users_${storage}`}
+                  type="number"
+                  inputMode="numeric"
+                  min="2"
+                  max={MAX_USERS}
+                  step="1"
+                  value={getUsers}
+                  onChange={(e) => {
+                    e.target.value.toString().startsWith('0')
+                      ? (e.target.value = e.target.value.toString().slice(1, e.target.value.toString().length))
+                      : setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value);
+                  }}
+                  onBlur={(e) => {
+                    setUsers(e.target.value > MAX_USERS ? MAX_USERS : e.target.value < 2 ? 2 : e.target.value);
+                  }}
+                  className="absolute left-0 w-14 min-w-full appearance-none bg-transparent font-medium outline-none"
+                />
+              </div>
+
+              <span className="ml-1 select-none">{contentText.users}</span>
+            </label>
+          </div>
+
+          <div className="mt-4 flex w-full flex-row justify-between text-neutral-700">
+            <span className="font-medium">Total:</span>
+
+            <div className="flex flex-row items-end">
+              <div className="flex flex-row items-start">
+                <span className="mt-0.5 mr-0.5 text-xs">€</span>
+
+                <span>{teamsBilled}</span>
+              </div>
+
+              <span className="mb-1 ml-0.5 text-xs text-neutral-100">
+                {contentText.billingFrequencyLabelSmall[billingFrequencyList[billingFrequency]]}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          tabIndex={0}
+          // eslint-disable-next-line no-unused-expressions
+
+          className="flex w-full flex-col items-center text-center"
+        >
+          <div className="subscribePlan flex w-full origin-center cursor-pointer select-none items-center justify-center rounded-lg border border-transparent bg-primary px-6 py-2 text-lg  font-medium text-white transition-all duration-75 focus:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-blue-20 focus:ring-offset-2 active:translate-y-0.5 active:bg-primary-dark sm:text-base">
+            <p className={`${price <= 0 ? 'hidden' : ''} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
+              {contentText.cta.claimTheDeal}
+            </p>
+
+            <p className={`${price <= 0 ? '' : 'hidden'} ${planType.toLowerCase() === 'individual' ? '' : 'hidden'}`}>
+              {contentText.cta.signUpNow}
+            </p>
+
+            <p className={`${planType.toLowerCase() === 'individual' ? 'hidden' : ''}`}>{contentText.cta.getStarted}</p>
+          </div>
+
+          <p className="mt-2 text-xs text-cool-gray-40">{contentText.onlyForNewClients}</p>
+        </div>
+      </div>
+
+      <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
+        <div className="flex flex-col space-y-2">
+          <div className="flex flex-row items-start space-x-2 font-medium">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span className={`${price <= 0 ? 'hidden' : 'flex'}`}>
+              {billingFrequency < 0
+                ? `${contentText.features.enjoyForever.enjoy} ${storage} ${contentText.features.enjoyForever.forever}`
+                : `${contentText.features.moneyBack}`}
+            </span>
+
+            <span className={`${price <= 0 ? 'flex' : 'hidden'}`}>
+              {contentText.features.enjoyForever.enjoy} {storage} {contentText.features.enjoyForever.forever}
+            </span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.encryptedFiles}</span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.accessFromAnywhere}</span>
+          </div>
+
+          <div className="flex flex-row items-start space-x-2">
+            <img
+              loading="lazy"
+              className="mt-0.5 translate-y-px select-none"
+              src="/icons/checkNeutral500.svg"
+              draggable="false"
+              alt="check icon"
+            />
+
+            <span>{contentText.features.allServices}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PriceCard;
diff --git a/src/components/password-checker/FeaturesSection.tsx b/src/components/password-checker/FeaturesSection.tsx
index 63c881a7b..e71a1ba0d 100644
--- a/src/components/password-checker/FeaturesSection.tsx
+++ b/src/components/password-checker/FeaturesSection.tsx
@@ -1,14 +1,9 @@
+import React from 'react';
 import { Ruler, TextT, TextAa, NumberCircleThree, Hash, CirclesThree } from '@phosphor-icons/react';
 import Image from 'next/legacy/image';
 import RenderDescription from '@/components/shared/RenderDescription';
-import { getImage } from '@/lib/getImage';
 
-interface FeaturesSectionProps {
-  textContent: Record<string, any>;
-  lang?: string;
-}
-
-const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Element => {
+const FeaturesSection = ({ textContent, bannerText, lang }) => {
   const iconSize = 32;
   const tipIcons = [
     <Ruler size={iconSize} key={0} />,
@@ -79,7 +74,7 @@ const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Eleme
             <div className="flex cursor-pointer">
               {lang === 'es' ? (
                 <Image
-                  src={getImage('/images/password-checker/virus-scanner-es.webp')}
+                  src="/images/password-checker/virus-scanner-es.webp"
                   width={897}
                   height={350}
                   layout="intrinsic"
@@ -89,7 +84,7 @@ const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Eleme
                 />
               ) : (
                 <Image
-                  src={getImage('/images/password-checker/virus-scanner.webp')}
+                  src="/images/password-checker/virus-scanner.webp"
                   width={897}
                   height={350}
                   layout="intrinsic"
@@ -120,7 +115,7 @@ const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Eleme
           <div className="flex cursor-pointer">
             {lang === 'es' ? (
               <Image
-                src={getImage('/images/password-checker/byte-converter-es.webp')}
+                src="/images/password-checker/byte-converter-es.webp"
                 width={897}
                 height={350}
                 layout="intrinsic"
@@ -130,7 +125,7 @@ const FeaturesSection = ({ textContent, lang }: FeaturesSectionProps): JSX.Eleme
               />
             ) : (
               <Image
-                src={getImage('/images/password-checker/byte-converter.webp')}
+                src="/images/password-checker/byte-converter.webp"
                 width={897}
                 height={350}
                 layout="intrinsic"
diff --git a/src/components/password-checker/HeroSection.tsx b/src/components/password-checker/HeroSection.tsx
index 71d31ccdd..e224551cb 100644
--- a/src/components/password-checker/HeroSection.tsx
+++ b/src/components/password-checker/HeroSection.tsx
@@ -1,14 +1,12 @@
-import { useState } from 'react';
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useState } from 'react';
 import zxcvbn from 'zxcvbn';
 import { Info, Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react';
 import pwnedpasswords from '@/lib/checker';
 import Header from '@/components/shared/Header';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   const [inputTypePassword, setInputTypePassword] = useState(true);
   const [passwordLength, setPasswordLength] = useState(0);
   const [pwned, setPwned] = useState('-');
@@ -135,7 +133,7 @@ const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
       <div className="flex w-full flex-col items-stretch space-y-4 lg:h-48 lg:w-auto lg:flex-row lg:space-y-0 lg:space-x-5">
         <div className="relative flex h-40 w-full flex-col space-y-1 rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
           <span className="text-sm text-gray-50">{textContent.result.feedback.title}</span>
-          <span className={'text-2xl font-semibold text-gray-80'}>{crackFeedback}</span>
+          <span className={`text-2xl font-semibold text-gray-80`}>{crackFeedback}</span>
         </div>
 
         <div className="relative flex h-40 w-full flex-col rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
@@ -158,7 +156,7 @@ const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
         <div className="flex h-40 w-full flex-col rounded-2xl bg-gray-1 p-8 lg:h-auto lg:w-64">
           <div className="flex h-full flex-col space-y-1">
             <span className="text-sm text-gray-50">{textContent.result.crack.title}</span>
-            <span className={'text-2xl font-semibold text-gray-80'}>{crackTime}</span>
+            <span className={`text-2xl font-semibold text-gray-80`}>{crackTime}</span>
           </div>
 
           <span className="text-sm text-gray-50">{textContent.result.crack.subtitle}</span>
diff --git a/src/components/password-generator/HeroSection.tsx b/src/components/password-generator/HeroSection.tsx
index 785aef772..d1b3ea556 100644
--- a/src/components/password-generator/HeroSection.tsx
+++ b/src/components/password-generator/HeroSection.tsx
@@ -5,12 +5,7 @@ import PasswordSettings from './components/PasswordSettings';
 import PassphraseSettings from './components/PassphraseSettings';
 import Header from '@/components/shared/Header';
 
-interface CheckboxButtonProps {
-  checked: boolean;
-  id: string;
-}
-
-const CheckboxButton = ({ checked, id }: CheckboxButtonProps): JSX.Element => (
+const CheckboxButton = ({ checked, id }) => (
   <>
     <div
       className={`relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded-full
@@ -94,7 +89,7 @@ const HeroSection = ({ textContent }) => {
                     notificationService.openSuccessToast('Password copied to clipboard');
                   }}
                 >
-                  <Copy className={'hidden h-5 w-5 text-center text-white md:flex'} />
+                  <Copy className={`hidden h-5 w-5 text-center text-white md:flex`} />
                   <p className="font-medium text-white">{textContent.copy}</p>
                 </button>
                 <button
@@ -103,7 +98,7 @@ const HeroSection = ({ textContent }) => {
                     setRegenerate(!regenerate);
                   }}
                 >
-                  <ArrowsClockwise className={'hidden h-5 w-5 text-center md:flex'} />
+                  <ArrowsClockwise className={`hidden h-5 w-5 text-center md:flex`} />
                   <p className="font-medium">{textContent.generate}</p>
                 </button>
               </div>
diff --git a/src/components/password-generator/InfoSection.tsx b/src/components/password-generator/InfoSection.tsx
index b25d468db..1ed1ab2c2 100644
--- a/src/components/password-generator/InfoSection.tsx
+++ b/src/components/password-generator/InfoSection.tsx
@@ -6,13 +6,15 @@ import RenderDescription from '@/components/shared/RenderDescription';
 
 const allowedLangForImage = ['en', 'es', 'ru'];
 
-interface InfoSectionProps {
+const InfoSection = ({
+  textContent,
+  bannerText,
+  hideLast2Sections,
+}: {
   textContent: any;
   bannerText: any;
   hideLast2Sections?: boolean;
-}
-
-const InfoSection = ({ textContent, bannerText, hideLast2Sections }: InfoSectionProps): JSX.Element => {
+}): JSX.Element => {
   const router = useRouter();
   const lang = router.locale;
 
diff --git a/src/components/password-generator/components/CheckboxSettings.tsx b/src/components/password-generator/components/CheckboxSettings.tsx
index e5a8aab66..c55a68f69 100644
--- a/src/components/password-generator/components/CheckboxSettings.tsx
+++ b/src/components/password-generator/components/CheckboxSettings.tsx
@@ -1,14 +1,18 @@
 import { Check } from '@phosphor-icons/react';
 
-interface CheckboxSettingsProps {
+const CheckboxSettings = ({
+  id,
+  checked,
+  onClick,
+  required,
+  className,
+}: {
   id: string;
   checked: boolean;
   onClick?: React.DOMAttributes<HTMLLabelElement>['onClick'];
   required?: boolean;
   className?: string;
-}
-
-const CheckboxSettings = ({ id, checked, onClick, required, className }: CheckboxSettingsProps): JSX.Element => {
+}) => {
   return (
     <label className={`relative h-5 w-5 rounded focus-within:outline-primary ${className}`} onClick={onClick}>
       <div
diff --git a/src/components/password-generator/components/PasswordSettings.tsx b/src/components/password-generator/components/PasswordSettings.tsx
index 7e3a4f21a..c464f5059 100644
--- a/src/components/password-generator/components/PasswordSettings.tsx
+++ b/src/components/password-generator/components/PasswordSettings.tsx
@@ -25,12 +25,12 @@ const PasswordSettings = ({ textContent, setPassword, setCrackScore, regenerate
   }, [passwordProperties, regenerate]);
 
   const generateRandomPassword = () => {
-    const length = Number(passwordProperties.length);
-    let characters = '';
-    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
-    const numbers = '0123456789';
-    const symbols = '!@#$%^&*()<>,.?/[]{}-=_+|/';
+    const length: number = Number(passwordProperties.length);
+    let characters: string = '';
+    let uppercase: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    let lowercase: string = 'abcdefghijklmnopqrstuvwxyz';
+    let numbers: string = '0123456789';
+    let symbols: string = '!@#$%^&*()<>,.?/[]{}-=_+|/';
 
     if (passwordProperties.uppercase) {
       characters += uppercase;
diff --git a/src/components/password-generator/utils/index.ts b/src/components/password-generator/utils/index.ts
index 0df48b6f0..0b994da43 100644
--- a/src/components/password-generator/utils/index.ts
+++ b/src/components/password-generator/utils/index.ts
@@ -1,6 +1,6 @@
 import zxcvbn from 'zxcvbn';
 
-export const getRandomInteger = (min: number, max: number) => {
+export const getRandomInteger = (min, max) => {
   const randomWords = new Uint32Array(1);
   window.crypto.getRandomValues(randomWords);
   min = Math.ceil(min);
diff --git a/src/components/prices/CyberAwarenessSpecialCard.tsx b/src/components/prices/CyberAwarenessSpecialCard.tsx
index e7a4939dc..f7411ca12 100644
--- a/src/components/prices/CyberAwarenessSpecialCard.tsx
+++ b/src/components/prices/CyberAwarenessSpecialCard.tsx
@@ -14,7 +14,7 @@ export default function SpecialPriceCard({
   popular,
   lang,
   currency,
-}: PriceCardProps): JSX.Element {
+}: PriceCardProps) {
   const [coupon, setCoupon] = React.useState<string>();
   const billingFrequencyList = {
     lifetime: 'lifetime',
@@ -67,7 +67,7 @@ export default function SpecialPriceCard({
         {contentText.cta.discount}
       </div>
 
-      <div className={'info flex flex-col items-center justify-center  bg-white p-4 pt-6'}>
+      <div className={`info flex flex-col items-center justify-center  bg-white p-4 pt-6`}>
         <div
           className={`storage flex max-w-min flex-row whitespace-nowrap py-1 px-4 pb-0.5 ${
             popular ? 'bg-blue-10 text-primary' : 'bg-neutral-20 text-neutral-80'
@@ -88,8 +88,8 @@ export default function SpecialPriceCard({
         >
           {price <= 0 ? (
             <>
-              <p className={' flex flex-row items-start space-x-0.5 font-bold text-black'}>
-                <p className={' flex flex-row items-start space-x-0.5 font-medium'}>
+              <p className={` flex flex-row items-start space-x-0.5 font-bold text-black`}>
+                <p className={` flex flex-row items-start space-x-0.5 font-medium`}>
                   <span className="price text-4xl font-semibold">
                     {price <= 0 ? `${contentText.freePlan}` : price.toFixed(2)}
                   </span>
@@ -100,13 +100,13 @@ export default function SpecialPriceCard({
                   planType.toLowerCase() === 'individual' ? 'flex-row space-x-px' : 'flex-col items-center'
                 }`}
               >
-                <span className={'currency'}>{currency}</span>
+                <span className={`currency`}>{currency}</span>
                 <span className="price text-2xl font-semibold">{Math.abs((price * 20) / 100).toFixed(2)[0]}</span>
               </div>
             </>
           ) : (
             <>
-              <p className={' flex flex-row items-start space-x-0.5 font-bold text-black'}>
+              <p className={` flex flex-row items-start space-x-0.5 font-bold text-black`}>
                 <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
                 <span className="price text-4xl font-semibold">{Math.abs((price * 20) / 100).toFixed(2)}</span>
               </p>
@@ -115,7 +115,7 @@ export default function SpecialPriceCard({
                   planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
                 }`}
               >
-                <p className={' flex flex-row items-start space-x-0.5 font-medium '}>
+                <p className={` flex flex-row items-start space-x-0.5 font-medium `}>
                   <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
                   <span className="price text-2xl font-semibold line-through">
                     {price <= 0 ? `${contentText.freePlan}` : price.toFixed(2)}
@@ -165,7 +165,7 @@ export default function SpecialPriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
         <div className="flex flex-col space-y-2 text-sm">
           {billingFrequency === 'lifetime' && (
-            <div className={'flex flex-row items-start space-x-2 font-semibold'}>
+            <div className={`flex flex-row items-start space-x-2 font-semibold`}>
               <img
                 loading="lazy"
                 className="mt-0.5 translate-y-px select-none"
diff --git a/src/components/prices/FreePlanCard.tsx b/src/components/prices/FreePlanCard.tsx
index b135ea84a..92d912797 100644
--- a/src/components/prices/FreePlanCard.tsx
+++ b/src/components/prices/FreePlanCard.tsx
@@ -1,10 +1,6 @@
 import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 
-interface FreePlanCardProps {
-  textContent: Record<string, any>;
-}
-
-const FreePlanCard = ({ textContent }: FreePlanCardProps): JSX.Element => {
+const FreePlanCard = ({ textContent }) => {
   const { openDialog } = useGlobalDialog();
   return (
     <div className="flex w-full flex-col items-center justify-center gap-5 rounded-2xl border border-gray-10 px-5 py-9 md:flex-row md:justify-between">
diff --git a/src/components/prices/PriceCard.tsx b/src/components/prices/PriceCard.tsx
index 4a3c6bcfb..cedde98b5 100644
--- a/src/components/prices/PriceCard.tsx
+++ b/src/components/prices/PriceCard.tsx
@@ -46,7 +46,7 @@ export default function PriceCard({
   isLifetimePage,
   lifetimeMode,
   onButtonClicked,
-}: Readonly<PriceCardProps>): JSX.Element {
+}: Readonly<PriceCardProps>) {
   const billingFrequencyList = {
     lifetime: 'lifetime',
     month: 'monthly',
@@ -113,7 +113,7 @@ export default function PriceCard({
         popular ? 'border-primary/50 ring-[3px]' : 'ring-1 ring-gray-10'
       } m-2 flex max-w-xs flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-2xl xs:w-72`}
     >
-      <div className={'info flex flex-col items-center justify-center space-y-6 rounded-t-2xl bg-white p-6 pt-6'}>
+      <div className={`info flex flex-col items-center justify-center space-y-6 rounded-t-2xl bg-white p-6 pt-6`}>
         <div className="flex flex-col items-center justify-center space-y-4">
           {popular ? (
             <div className="flex flex-row items-center justify-center space-x-2 rounded-full bg-primary px-3 py-1">
@@ -133,7 +133,7 @@ export default function PriceCard({
               items-end space-x-px text-neutral-700
             `}
           >
-            <p className={' flex flex-row items-start space-x-1 whitespace-nowrap font-medium text-gray-100'}>
+            <p className={` flex flex-row items-start space-x-1 whitespace-nowrap font-medium text-gray-100`}>
               <span className={`currency ${isFreePlan ? 'hidden' : ''}`}>{currency}</span>
               <span className="price text-4xl font-bold">
                 {isFreePlan ? `${contentText.freePlan}` : formattedPrice}
@@ -148,7 +148,7 @@ export default function PriceCard({
               priceBefore ? 'flex' : 'hidden'
             } flex-row items-start space-x-1 whitespace-nowrap font-semibold text-gray-50 line-through`}
           >
-            <span className={'text-sm'}>{currency}</span>
+            <span className={`text-sm`}>{currency}</span>
             <span className="price text-2xl font-medium">{priceBefore}</span>
           </p>
 
@@ -171,7 +171,7 @@ export default function PriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 pb-6 text-sm text-gray-80">
         {isOffer ? (
           <div className="flex w-full flex-col space-y-4 bg-gray-100 p-6">
-            <p className={'} font-bold text-yellow'}>{contentText.productFeatures.starWarsFeatures.title}</p>
+            <p className={`} font-bold text-yellow`}>{contentText.productFeatures.starWarsFeatures.title}</p>
             {contentText.productFeatures.starWarsFeatures[storage].map((feature) => (
               <div
                 className={`${
diff --git a/src/components/prices/PriceTable.tsx b/src/components/prices/PriceTable.tsx
index 7dda91070..cd765118e 100644
--- a/src/components/prices/PriceTable.tsx
+++ b/src/components/prices/PriceTable.tsx
@@ -48,7 +48,7 @@ export default function PriceTable({
   useSameCouponForAllPlans,
   hideFreeCard,
   couponCode,
-}: Readonly<PriceTableProps>): JSX.Element {
+}: Readonly<PriceTableProps>) {
   const contentText = require(`@/assets/lang/${lang}/priceCard.json`);
   const CampaignContent = require(`@/assets/lang/${lang}/pricing.json`);
   const banner = require('@/assets/lang/en/banners.json');
@@ -113,7 +113,7 @@ export default function PriceTable({
         </div>
 
         <div className="flex flex-col items-center space-y-9">
-          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
+          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
           <div id="billingButtons" className="flex flex-row rounded-lg bg-cool-gray-10 p-0.5">
             <button
               type="button"
@@ -133,7 +133,7 @@ export default function PriceTable({
               onClick={() => {
                 setActiveSwitchPlan('Lifetime');
                 setBillingFrequency(Interval.Lifetime);
-                setSegmentPageName('Pricing Individuals Lifetime');
+                setSegmentPageName(`Pricing Individuals Lifetime`);
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Lifetime' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
@@ -145,7 +145,7 @@ export default function PriceTable({
               type="button"
               onClick={() => {
                 setActiveSwitchPlan('Business');
-                setSegmentPageName('Pricing Business');
+                setSegmentPageName(`Pricing Business`);
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Business' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
diff --git a/src/components/prices/SpecialPriceCard.tsx b/src/components/prices/SpecialPriceCard.tsx
index 739169d40..25d564c20 100644
--- a/src/components/prices/SpecialPriceCard.tsx
+++ b/src/components/prices/SpecialPriceCard.tsx
@@ -14,7 +14,7 @@ export default function SpecialPriceCard({
   popular,
   lang,
   currency,
-}: PriceCardProps): JSX.Element {
+}: PriceCardProps) {
   const [coupon, setCoupon] = React.useState<string>();
   const isPopularYearly = popular && billingFrequency === Interval.Year;
   const billingFrequencyList = {
@@ -88,7 +88,7 @@ export default function SpecialPriceCard({
           className={`planPrice flex flex-col items-center justify-center space-y-2
             py-8`}
         >
-          <p className={' flex flex-row items-start space-x-0.5 font-bold text-white'}>
+          <p className={` flex flex-row items-start space-x-0.5 font-bold text-white`}>
             <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
             <span className="price text-4xl font-semibold">
               {
@@ -104,7 +104,7 @@ export default function SpecialPriceCard({
               planType.toLowerCase() === 'individual' ? 'flex-row items-end space-x-px' : 'flex-col items-center'
             }`}
           >
-            <p className={' flex flex-row items-start space-x-0.5 font-medium '}>
+            <p className={` flex flex-row items-start space-x-0.5 font-medium `}>
               <span className={`currency ${price <= 0 ? 'hidden' : ''}`}>{currency}</span>
               <span className="price text-2xl font-semibold line-through">
                 {price <= 0 ? `${contentText.freePlan}` : price}
@@ -151,7 +151,7 @@ export default function SpecialPriceCard({
       <div className="featureList flex flex-col border-t border-neutral-20 bg-neutral-10 p-6 text-neutral-500">
         <div className="flex flex-col space-y-2 text-sm">
           {billingFrequency === 'lifetime' && (
-            <div className={'flex flex-row items-start space-x-2 font-semibold'}>
+            <div className={`flex flex-row items-start space-x-2 font-semibold`}>
               <img
                 loading="lazy"
                 className="mt-0.5 translate-y-px select-none"
diff --git a/src/components/pricing/BestStorageSection.tsx b/src/components/pricing/BestStorageSection.tsx
index 89f6fdd23..97dfce444 100644
--- a/src/components/pricing/BestStorageSection.tsx
+++ b/src/components/pricing/BestStorageSection.tsx
@@ -1,10 +1,7 @@
 import { CircleWavyCheck, Database, Eye, Key, Recycle } from '@phosphor-icons/react';
+import React from 'react';
 
-interface BestStorageSectionProps {
-  textContent: Record<string, any>;
-}
-
-const BestStorageSection = ({ textContent }: BestStorageSectionProps): JSX.Element => {
+const BestStorageSection = ({ textContent }) => {
   const features = [
     {
       icon: Database,
diff --git a/src/components/pricing/CtaSection.tsx b/src/components/pricing/CtaSection.tsx
index 91b805417..20638e8ab 100644
--- a/src/components/pricing/CtaSection.tsx
+++ b/src/components/pricing/CtaSection.tsx
@@ -1,11 +1,7 @@
+import React from 'react';
 import { goToSignUpURL } from '@/lib/auth';
 
-interface CtaSectionProps {
-  textContent: any;
-  freePlan?: boolean;
-}
-
-const CtaSection = ({ textContent, freePlan }: CtaSectionProps): JSX.Element => {
+const CtaSection = ({ textContent, freePlan }: { textContent: any; freePlan?: boolean }) => {
   return (
     <section className="overflow-hidden bg-primary py-14">
       <div className="flex flex-col items-center justify-center space-y-8 px-5 text-center">
diff --git a/src/components/pricing/HeroSection.tsx b/src/components/pricing/HeroSection.tsx
index acaf49ee1..2eb050f2e 100644
--- a/src/components/pricing/HeroSection.tsx
+++ b/src/components/pricing/HeroSection.tsx
@@ -2,11 +2,7 @@ import Image from 'next/legacy/image';
 import { Alarm, Coin, CreditCard, Detective } from '@phosphor-icons/react';
 import Countdown from '@/components/components/Countdown';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   const feeds = [
     {
       icon: Coin,
diff --git a/src/components/privacy-directory/HeroSection2.tsx b/src/components/privacy-directory/HeroSection2.tsx
index 292dd92bc..91af519a4 100644
--- a/src/components/privacy-directory/HeroSection2.tsx
+++ b/src/components/privacy-directory/HeroSection2.tsx
@@ -1,7 +1,6 @@
 import { CaretRight } from '@phosphor-icons/react';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 import Header from '@/components/shared/Header';
-import Link from 'next/link';
 
 const HeroSection2 = ({ textContent, lang, bannerText }) => {
   return (
@@ -15,14 +14,14 @@ const HeroSection2 = ({ textContent, lang, bannerText }) => {
             <p className=" text-2xl font-medium">{textContent.title}</p>
             <p className="text-xl font-normal">{textContent.description}</p>
           </div>
-          <Link
+          <a
             href="/privacy"
             target={'_blank'}
             className="flex cursor-pointer flex-row items-center justify-center space-x-1"
           >
             <p className="text-lg font-semibold text-primary">{textContent.cta}</p>
             <CaretRight size={14} weight="bold" className="text-primary" />
-          </Link>
+          </a>
         </div>
         <SignUpBanner textContent={bannerText} lang={lang} />
       </div>
diff --git a/src/components/privacy-directory/SupportNGOsSection.tsx b/src/components/privacy-directory/SupportNGOsSection.tsx
index b7fe55446..5eda1cc52 100644
--- a/src/components/privacy-directory/SupportNGOsSection.tsx
+++ b/src/components/privacy-directory/SupportNGOsSection.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { CaretRight } from '@phosphor-icons/react';
-import Image from 'next/legacy/image';
+import Image from "next/legacy/image";
 
 const SupportNGOsSection = ({ textContent }) => (
   <section className="relative flex flex-col items-center bg-white px-6">
diff --git a/src/components/privacy/BetterTomorrowSection.tsx b/src/components/privacy/BetterTomorrowSection.tsx
index d375725ca..bbc345960 100644
--- a/src/components/privacy/BetterTomorrowSection.tsx
+++ b/src/components/privacy/BetterTomorrowSection.tsx
@@ -2,12 +2,7 @@ import Image from 'next/legacy/image';
 import { CaretRight, ShieldStar } from '@phosphor-icons/react';
 import RevealX from '@/components/components/RevealX';
 
-interface BetterTomorrowSectionProps {
-  textContent: Record<string, any>;
-  lang?: string;
-}
-
-const BetterTomorrowSection = ({ textContent, lang }: BetterTomorrowSectionProps): JSX.Element => {
+const BetterTomorrowSection = ({ textContent, lang }) => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col-reverse items-center justify-center px-5 pt-16 pb-20 text-center md:flex-row md:space-y-0 md:space-x-24 md:text-start">
diff --git a/src/components/privacy/FeatureSection.tsx b/src/components/privacy/FeatureSection.tsx
index 0c98df589..0af4b230a 100644
--- a/src/components/privacy/FeatureSection.tsx
+++ b/src/components/privacy/FeatureSection.tsx
@@ -1,11 +1,7 @@
 import { Eye, Fingerprint, Globe, LockKey, ShieldCheck, UserCircle } from '@phosphor-icons/react';
 import RevealY from '@/components/components/RevealY';
 
-interface FeatureSectionProps {
-  textContent: Record<string, any>;
-}
-
-const FeatureSection = ({ textContent }: FeatureSectionProps): JSX.Element => {
+const FeatureSection = ({ textContent }) => {
   const cards = [
     {
       icon: Eye,
@@ -50,7 +46,7 @@ const FeatureSection = ({ textContent }: FeatureSectionProps): JSX.Element => {
           {cards.map((card) => (
             <div
               key={card.title}
-              className={'flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]'}
+              className={`flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]`}
             >
               <card.icon className="mb-6 text-4xl text-primary" size={32} />
               <div className="flex w-full max-w-[408px] flex-col">
diff --git a/src/components/privacy/HeroSection.tsx b/src/components/privacy/HeroSection.tsx
index d13bf55ea..c08809a5d 100644
--- a/src/components/privacy/HeroSection.tsx
+++ b/src/components/privacy/HeroSection.tsx
@@ -1,13 +1,9 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import YoutubeEmbed from '@/components/utils/youtube';
 import { CaretRight } from '@phosphor-icons/react';
 import Header from '@/components/shared/Header';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/src/components/privacy/HeroSection2.tsx b/src/components/privacy/HeroSection2.tsx
index 47e1fa141..449ff8fd8 100644
--- a/src/components/privacy/HeroSection2.tsx
+++ b/src/components/privacy/HeroSection2.tsx
@@ -1,14 +1,10 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { UilPlayCircle } from '@iconscout/react-unicons';
 import YoutubeEmbed from '@/components/utils/youtube';
 import styles from './HeroSection.module.scss';
 import Header from '@/components/shared/Header';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection2 = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection2 = ({ textContent }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/src/components/privacy/InxtAppsSection.tsx b/src/components/privacy/InxtAppsSection.tsx
index beb4caeef..add574603 100644
--- a/src/components/privacy/InxtAppsSection.tsx
+++ b/src/components/privacy/InxtAppsSection.tsx
@@ -1,11 +1,6 @@
 import ProductCard from '@/components/shared/ProductCard';
 
-interface InxtAppsSectionProps {
-  textContent: Record<string, any>;
-  lang: string;
-}
-
-const InxtAppsSection = ({ textContent, lang }: InxtAppsSectionProps): JSX.Element => {
+const InxtAppsSection = ({ textContent, lang }) => {
   return (
     <section className="overflow-hidden">
       <div className="z-10 flex flex-col items-center space-y-16 bg-gray-1 px-5 pt-20 text-gray-100 ">
diff --git a/src/components/privacy/ManifestoSection.tsx b/src/components/privacy/ManifestoSection.tsx
index 1b23d5f6a..c440e436e 100644
--- a/src/components/privacy/ManifestoSection.tsx
+++ b/src/components/privacy/ManifestoSection.tsx
@@ -1,10 +1,7 @@
-import { getImage } from '@/lib/getImage';
+/* eslint-disable max-len */
+import React from 'react';
 
-interface ManifestoSectionProps {
-  textContent: Record<string, any>;
-}
-
-const ManifestoSection = ({ textContent }: ManifestoSectionProps): JSX.Element => (
+const ManifestoSection = ({ textContent }) => (
   <section className="relative flex w-full flex-col bg-gray-1">
     {/* Why privacy is so important */}
     <div className="z-10 flex flex-col items-center py-20 ">
@@ -22,7 +19,7 @@ const ManifestoSection = ({ textContent }: ManifestoSectionProps): JSX.Element =
           <img
             loading="lazy"
             className="w-24 select-none"
-            src={getImage('/images/privacy/signature.webp')}
+            src="/images/privacy/signature.webp"
             draggable="false"
             alt="Fran's signature"
           />
diff --git a/src/components/privacy/ManifestoSection2.tsx b/src/components/privacy/ManifestoSection2.tsx
index cbed5e471..a08073c8d 100644
--- a/src/components/privacy/ManifestoSection2.tsx
+++ b/src/components/privacy/ManifestoSection2.tsx
@@ -1,14 +1,9 @@
+import React from 'react';
 import FAQSection from '@/components/shared/FaqSection';
 import { ArrowUpRight } from '@phosphor-icons/react';
 import ProductCard from '@/components/shared/ProductCard';
-import { getImage } from '@/lib/getImage';
 
-interface ManifestoSectionProps {
-  textContent: Record<string, any>;
-  lang: string;
-}
-
-const ManifestoSection2 = ({ textContent, lang }: ManifestoSectionProps): JSX.Element => (
+const ManifestoSection2 = ({ textContent, lang }) => (
   <section className="relative flex w-full flex-col">
     {/* Why privacy is so important */}
     <div className="z-10 flex flex-col items-center py-20 ">
@@ -29,7 +24,7 @@ const ManifestoSection2 = ({ textContent, lang }: ManifestoSectionProps): JSX.El
           <img
             loading="lazy"
             className="w-24 select-none"
-            src={getImage('/images/privacy/signature.webp')}
+            src="/images/privacy/signature.webp"
             draggable="false"
             alt="Fran's signature"
           />
diff --git a/src/components/privacy/SecuritumSection.tsx b/src/components/privacy/SecuritumSection.tsx
index 52771cc05..8b3c3c3f9 100644
--- a/src/components/privacy/SecuritumSection.tsx
+++ b/src/components/privacy/SecuritumSection.tsx
@@ -1,10 +1,6 @@
 import { CaretRight } from '@phosphor-icons/react';
 
-interface SecuritumSectionProps {
-  textContent: Record<string, any>;
-}
-
-const SecuritumSection = ({ textContent }: SecuritumSectionProps): JSX.Element => {
+const SecuritumSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden">
       <div className="bg- flex flex-col bg-gray-1 py-20">
diff --git a/src/components/services/stripe.service.ts b/src/components/services/stripe.service.ts
index 8ee0cbd1f..bde41a2c3 100644
--- a/src/components/services/stripe.service.ts
+++ b/src/components/services/stripe.service.ts
@@ -9,7 +9,7 @@ export enum Interval {
 }
 
 export interface ProductsProps {
-  individuals: Record<string, any> | undefined;
+  individuals: {} | undefined;
 }
 
 export enum Products {
diff --git a/src/components/shared/CommandTextInputCopy.tsx b/src/components/shared/CommandTextInputCopy.tsx
index 25c3921b9..be27cd8ad 100644
--- a/src/components/shared/CommandTextInputCopy.tsx
+++ b/src/components/shared/CommandTextInputCopy.tsx
@@ -13,9 +13,7 @@ export const CommandTextInputCopy = ({ text, isCommandCard }: CopyTextInputProps
 
   return (
     <button
-      className={
-        'flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl border border-gray-10 bg-white px-4 py-3 text-gray-80 shadow-sm'
-      }
+      className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl border border-gray-10 bg-white px-4 py-3 text-gray-80 shadow-sm`}
       onClick={onCopy}
     >
       <p
diff --git a/src/components/shared/CompanyLogosRecognitions.tsx b/src/components/shared/CompanyLogosRecognitions.tsx
index 8a0bab0e2..23d238dd3 100644
--- a/src/components/shared/CompanyLogosRecognitions.tsx
+++ b/src/components/shared/CompanyLogosRecognitions.tsx
@@ -7,7 +7,7 @@ export const CompanyLogosRecognitions = () => (
     <div className="flex flex-auto flex-shrink-0 pb-12 sm:p-0 sm:px-12">
       <div className="flex flex-shrink-0 flex-col items-center space-y-3">
         <Image
-          src={getImage('/images/about/logos/forbes.webp')}
+          src={getImage(`/images/about/logos/forbes.webp`)}
           width={125}
           height={32}
           loading={'lazy'}
diff --git a/src/components/shared/DownloadComponent.tsx b/src/components/shared/DownloadComponent.tsx
index b2f710dc8..042d5d3db 100644
--- a/src/components/shared/DownloadComponent.tsx
+++ b/src/components/shared/DownloadComponent.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 
 import { ArrowCircleDown, CaretRight } from '@phosphor-icons/react';
@@ -161,7 +161,7 @@ const DownloadComponent = ({ textContent, lang, download }) => {
         )}
 
         {/* Download for mobile */}
-        <div className={'flex flex-1 flex-grow flex-row justify-center text-lg lg:justify-start'}>
+        <div className={`flex flex-1 flex-grow flex-row justify-center text-lg lg:justify-start`}>
           {isMobile && (
             <a
               className="flex w-full flex-col"
diff --git a/src/components/shared/DropArea.tsx b/src/components/shared/DropArea.tsx
index 273e2b0e8..2a07be757 100644
--- a/src/components/shared/DropArea.tsx
+++ b/src/components/shared/DropArea.tsx
@@ -40,7 +40,7 @@ const DropArea = ({
 
   return (
     <div
-      className={'flex h-full w-full items-center justify-center'}
+      className={`flex h-full w-full items-center justify-center`}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
diff --git a/src/components/shared/FaqSection.tsx b/src/components/shared/FaqSection.tsx
index e82273319..b9c13e01a 100644
--- a/src/components/shared/FaqSection.tsx
+++ b/src/components/shared/FaqSection.tsx
@@ -6,7 +6,7 @@ interface FAQSectionProps {
   cardColor?: string;
 }
 
-const FAQSection = ({ textContent, bgColor, cardColor }: FAQSectionProps): JSX.Element => {
+const FAQSection = ({ textContent, bgColor, cardColor }: FAQSectionProps) => {
   return (
     <section className={`overflow-hidden ${bgColor ?? 'bg-white'}`}>
       <div className="flex flex-col items-center justify-center space-y-10 px-10 pb-16 pt-10 lg:py-20">
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
index 55d6ed360..bb88c046f 100644
--- a/src/components/shared/Header.tsx
+++ b/src/components/shared/Header.tsx
@@ -1,11 +1,14 @@
-interface HeaderProps {
+const Header = ({
+  children,
+  maxWidth = 'max-w-[796px]',
+  className,
+  isToolsPage,
+}: {
   children: React.ReactNode;
   maxWidth?: string;
   className?: string;
   isToolsPage?: boolean;
-}
-
-const Header = ({ children, maxWidth = 'max-w-[796px]', className }: HeaderProps) => {
+}) => {
   return (
     <h1
       className={`${maxWidth} ${className} whitespace-normal text-4xl font-semibold leading-tight sm:text-5xl sm:leading-tight`}
diff --git a/src/components/shared/HeroSectionSafeArea.tsx b/src/components/shared/HeroSectionSafeArea.tsx
index ac0cbccf6..599de8038 100644
--- a/src/components/shared/HeroSectionSafeArea.tsx
+++ b/src/components/shared/HeroSectionSafeArea.tsx
@@ -1,9 +1,11 @@
-const HeroSectionSafeArea = ({ children }: { children: React.ReactNode }): JSX.Element => (
-  <div className="w-full items-center justify-center px-4 lg:px-10 xl:px-32">
-    <div className="mx-auto flex w-full max-w-screen-xl flex-col space-y-10 px-5 py-20 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:px-0">
-      {children}
+const HeroSectionSafeArea = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="w-full items-center justify-center px-4 lg:px-10 xl:px-32">
+      <div className="mx-auto flex w-full max-w-screen-xl flex-col space-y-10 px-5 py-20 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:px-0">
+        {children}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default HeroSectionSafeArea;
diff --git a/src/components/shared/ProductCard.tsx b/src/components/shared/ProductCard.tsx
index 19850a74a..9a72567c8 100644
--- a/src/components/shared/ProductCard.tsx
+++ b/src/components/shared/ProductCard.tsx
@@ -11,33 +11,35 @@ interface ProductCard {
   imageUrl: string;
 }
 
-const ProductCard = ({ animationDirection, redirect, textContent, lang, imageUrl }: ProductCard): JSX.Element => (
-  <RevealX
-    direction={animationDirection}
-    className={'flex overflow-hidden rounded-2xl bg-gray-100 lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-0'}
-  >
-    <div className="flex h-full flex-col items-center justify-center p-7 text-center lg:items-start lg:pl-20 lg:text-start">
-      <h4 className="mb-10 max-w-xs text-4xl font-semibold text-white lg:text-4xl">{textContent.title}</h4>
-      <h5 className="mb-4 max-w-[340px] text-xl text-white">{textContent.description}</h5>
-      <div className="flex justify-start">
-        <Link
-          href={redirect}
-          target="_blank"
-          locale={lang}
-          className="flex flex-row items-center space-x-1 text-lg text-blue-50 hover:underline"
-        >
-          <span>{textContent.cta}</span>
-          <CaretRight size={16} />
-        </Link>
+const ProductCard = ({ animationDirection, redirect, textContent, lang, imageUrl }: ProductCard) => {
+  return (
+    <RevealX
+      direction={animationDirection}
+      className={`flex overflow-hidden rounded-2xl bg-gray-100 lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-0`}
+    >
+      <div className="flex h-full flex-col items-center justify-center p-7 text-center lg:items-start lg:pl-20 lg:text-start">
+        <h4 className="mb-10 max-w-xs text-4xl font-semibold text-white lg:text-4xl">{textContent.title}</h4>
+        <h5 className="mb-4 max-w-[340px] text-xl text-white">{textContent.description}</h5>
+        <div className="flex justify-start">
+          <Link
+            href={redirect}
+            target="_blank"
+            locale={lang}
+            className="flex flex-row items-center space-x-1 text-lg text-blue-50 hover:underline"
+          >
+            <span>{textContent.cta}</span>
+            <CaretRight size={16} />
+          </Link>
+        </div>
       </div>
-    </div>
 
-    <div className="lg:pl-15 relative mt-16 flex self-stretch  lg:mt-0">
-      <div className="hidden lg:flex lg:max-w-[480px]">
-        <Image src={imageUrl} loading="lazy" width={480} height={480} alt="Internxt Drive" draggable={false} />
+      <div className="lg:pl-15 relative mt-16 flex self-stretch  lg:mt-0">
+        <div className="hidden lg:flex lg:max-w-[480px]">
+          <Image src={imageUrl} loading="lazy" width={480} height={480} alt="Internxt Drive" draggable={false} />
+        </div>
       </div>
-    </div>
-  </RevealX>
-);
+    </RevealX>
+  );
+};
 
 export default ProductCard;
diff --git a/src/components/shared/RedirectButton.tsx b/src/components/shared/RedirectButton.tsx
index 61343bd5f..e1c1a9598 100644
--- a/src/components/shared/RedirectButton.tsx
+++ b/src/components/shared/RedirectButton.tsx
@@ -9,7 +9,7 @@ interface RedirectButtonProps {
 }
 
 export const RedirectButton = ({ url, className, target = '_blank', rel, children }: RedirectButtonProps) => (
-  <Link id={'redirect-button-id'} href={url} target={target} rel={rel} className={className}>
+  <Link id={`redirect-button-id`} href={url} target={target} rel={rel} className={className}>
     {children}
   </Link>
 );
diff --git a/src/components/shared/RenderDescription.tsx b/src/components/shared/RenderDescription.tsx
index 97149684e..b23b89082 100644
--- a/src/components/shared/RenderDescription.tsx
+++ b/src/components/shared/RenderDescription.tsx
@@ -1,12 +1,7 @@
 import { useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-interface RenderDescriptionProps {
-  description: string[];
-  fontSize?: string;
-}
-
-const RenderDescription = ({ description, fontSize }: RenderDescriptionProps): JSX.Element => {
+const RenderDescription = ({ description, fontSize }: { description: string[]; fontSize?: string }) => {
   useEffect(() => {
     const renderDescriptionComponent = document.querySelector('#render-description-section');
     const links = document.querySelectorAll('a');
diff --git a/src/components/shared/StarsRate.tsx b/src/components/shared/StarsRate.tsx
index d52cbcf37..4e19f2c3a 100644
--- a/src/components/shared/StarsRate.tsx
+++ b/src/components/shared/StarsRate.tsx
@@ -4,7 +4,7 @@ interface FiveStarsProps {
   totalStars: number;
 }
 
-export const FiveStars = ({ totalStars }: FiveStarsProps): JSX.Element => (
+export const FiveStars = ({ totalStars }: FiveStarsProps) => (
   <div className="flex flex-row gap-1.5">
     {new Array(totalStars).fill(0).map((_, index) => (
       <Star className="text-yellow" weight="fill" size={18} key={index} />
diff --git a/src/components/shared/ToolsSection.tsx b/src/components/shared/ToolsSection.tsx
index 82381d6a6..2bf2ab1c6 100644
--- a/src/components/shared/ToolsSection.tsx
+++ b/src/components/shared/ToolsSection.tsx
@@ -11,12 +11,7 @@ import {
 } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 
-interface ToolsSectionProps {
-  textContent: any;
-  lang: string;
-}
-
-export const ToolsSection = ({ textContent, lang }: ToolsSectionProps): JSX.Element => {
+export const ToolsSection = ({ textContent, lang }: { textContent: any; lang: string }) => {
   const router = useRouter();
   const pathname = router.pathname;
 
diff --git a/src/components/specialoffer/MarqueeComponent.tsx b/src/components/specialoffer/MarqueeComponent.tsx
index 975dd7f59..98b545b21 100644
--- a/src/components/specialoffer/MarqueeComponent.tsx
+++ b/src/components/specialoffer/MarqueeComponent.tsx
@@ -9,7 +9,7 @@ interface MarqueeComponentProps {
 
 export const MarqueeComponent = ({ label, bgColor = 'bg-color-1' }: MarqueeComponentProps) => {
   return (
-    <div className={'relative left-1/2 z-10 w-screen -translate-x-1/2'}>
+    <div className={`relative left-1/2 z-10 w-screen -translate-x-1/2`}>
       <div className={'flex xl:hidden'}>
         <Marquee gradientColor={[255, 255, 255]} className={bgColor} gradientWidth="32px" speed={30}>
           <div className="featured flex w-full flex-row space-x-10 p-6">
diff --git a/src/components/specialoffer/WhatWeDoSection.tsx b/src/components/specialoffer/WhatWeDoSection.tsx
index 4b0cea5f1..543f38394 100644
--- a/src/components/specialoffer/WhatWeDoSection.tsx
+++ b/src/components/specialoffer/WhatWeDoSection.tsx
@@ -29,7 +29,7 @@ export const WhatWeDoSectionForSpecialOffer = ({
           <div className="flex h-full flex-col items-center justify-center gap-8 p-7 text-center lg:items-start lg:pl-14 lg:text-start">
             <div className="flex max-w-[500px] flex-col gap-6 text-lg text-black lg:text-xl">
               {textContent.card.features.map((feature) => (
-                <div className="flex flex-row gap-2" key={feature}>
+                <div className="flex flex-row gap-2">
                   <CheckCircle className="mt-0.5 h-6 w-6 text-primary lg:mt-0 lg:h-8 lg:w-8" size={32} />
                   <p className="text-left font-semibold text-gray-80">{feature}</p>
                 </div>
diff --git a/src/components/success-stories/HeroSection.tsx b/src/components/success-stories/HeroSection.tsx
index c0dc3d867..b7fc357ad 100644
--- a/src/components/success-stories/HeroSection.tsx
+++ b/src/components/success-stories/HeroSection.tsx
@@ -1,11 +1,7 @@
 import Image from 'next/legacy/image';
 import Header from '@/components/shared/Header';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden pt-14">
       <div className="w-full lg:mx-4">
diff --git a/src/components/success-stories/WhatWeDo.tsx b/src/components/success-stories/WhatWeDo.tsx
index 0064f9407..2e3d39de9 100644
--- a/src/components/success-stories/WhatWeDo.tsx
+++ b/src/components/success-stories/WhatWeDo.tsx
@@ -2,12 +2,7 @@ import { ListMagnifyingGlass, MagicWand, SketchLogo } from '@phosphor-icons/reac
 import RenderDescription from '@/components/shared/RenderDescription';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 
-interface WhatWeDoProps {
-  textContent: Record<string, any>;
-  bannerLang: string;
-}
-
-const WhatWeDo = ({ textContent, bannerLang }: WhatWeDoProps): JSX.Element => {
+const WhatWeDo = ({ textContent, bannerLang }) => {
   return (
     <section id={'whatWeDo'} className="overflow-hidden bg-gray-1">
       <div className="flex flex-col items-center space-y-16 py-20 px-5">
diff --git a/src/components/techradar-discount/HeroSection.tsx b/src/components/techradar-discount/HeroSection.tsx
index 43da99eec..b01931a25 100644
--- a/src/components/techradar-discount/HeroSection.tsx
+++ b/src/components/techradar-discount/HeroSection.tsx
@@ -1,13 +1,9 @@
 import { Globe, SketchLogo, CloudCheck, FileArrowUp, ClockCounterClockwise } from '@phosphor-icons/react';
+import React from 'react';
 import styles from './Background.module.scss';
 import { toast } from 'react-toastify';
-import Link from 'next/link';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }) => {
   const open = () => toast.success('Copied to clipboard!');
 
   const subtitleTechradar = textContent.subtitle1.split('TECHRADAR')[0];
@@ -67,9 +63,11 @@ const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
               }
             </p>
             <div className="flex rounded-lg bg-white px-9 py-4">
-              <Link href="#pricing" className="cursor-pointer">
-                <p className="text-lg font-normal text-primary">{textContent.cta}</p>
-              </Link>
+              <a href="#pricing">
+                <button className="text-lg font-normal text-primary" onClick={() => {}}>
+                  {textContent.cta}
+                </button>
+              </a>
             </div>
           </div>
           <div className="relative px-10 pt-20 lg:px-0 lg:pt-10">
diff --git a/src/components/techradar-discount/InfoSection.tsx b/src/components/techradar-discount/InfoSection.tsx
index 54666139f..97d4815f6 100644
--- a/src/components/techradar-discount/InfoSection.tsx
+++ b/src/components/techradar-discount/InfoSection.tsx
@@ -1,10 +1,7 @@
 import { ShieldCheck, LockKey, Scales, Fingerprint } from '@phosphor-icons/react';
+import React from 'react';
 
-interface InfoSectionProps {
-  textContent: Record<string, any>;
-}
-
-const InfoSection = ({ textContent }: InfoSectionProps): JSX.Element => {
+const InfoSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col py-20">
diff --git a/src/components/techradar-discount/PaymentsSection.tsx b/src/components/techradar-discount/PaymentsSection.tsx
index b4219dcfe..344c50332 100644
--- a/src/components/techradar-discount/PaymentsSection.tsx
+++ b/src/components/techradar-discount/PaymentsSection.tsx
@@ -2,11 +2,7 @@ import CardSkeleton from '@/components/components/CardSkeleton';
 import PriceCard from './PriceCard';
 import usePricing from '@/hooks/usePricing';
 
-interface PaymentSectionProps {
-  textContent: Record<string, any>;
-}
-
-const PaymentsSection = ({ textContent }: PaymentSectionProps): JSX.Element => {
+const PaymentsSection = ({ textContent }) => {
   const { products, currency, loadingCards } = usePricing();
 
   return (
diff --git a/src/components/temp-email/HeroSection.tsx b/src/components/temp-email/HeroSection.tsx
index c8aff6ccf..716271513 100644
--- a/src/components/temp-email/HeroSection.tsx
+++ b/src/components/temp-email/HeroSection.tsx
@@ -27,11 +27,7 @@ import { useTempMailReducer } from './hooks/useTempMailReducer';
 import copyToClipboard from '../utils/copy-to-clipboard';
 import useWindowFocus from '@/hooks/useWindowFocus';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-export const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+export const HeroSection = ({ textContent }) => {
   const isFocused = useWindowFocus();
 
   const { state, setUser, setBorderColor, setIsChangeEmailIconAnimated, setMessages, setSelectedMessage } =
diff --git a/src/components/temp-email/InfoSection.tsx b/src/components/temp-email/InfoSection.tsx
index 7d9538408..33c77335c 100644
--- a/src/components/temp-email/InfoSection.tsx
+++ b/src/components/temp-email/InfoSection.tsx
@@ -2,14 +2,8 @@ import Image from 'next/legacy/image';
 import SignUpBanner from '@/components/banners/SignUpBanner';
 import { Bug, Detective, EyeSlash, Gift, Tray, UserPlus } from '@phosphor-icons/react';
 
-interface InfoSectionProps {
-  textContent: Record<string, any>;
-  bannerText: Record<string, any>;
-  lang: string;
-}
-
-export const InfoSection = ({ textContent, bannerText, lang }: InfoSectionProps): JSX.Element => {
-  const infoCards = () => {
+export const InfoSection = ({ textContent, bannerText, lang }) => {
+  const infoCards = (lang) => {
     return [
       {
         icon: Bug,
@@ -78,7 +72,7 @@ export const InfoSection = ({ textContent, bannerText, lang }: InfoSectionProps)
             </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().map((card) => (
+                {infoCards(lang).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]"
diff --git a/src/components/temp-email/SignupSection.tsx b/src/components/temp-email/SignupSection.tsx
index cdcb19da0..2a04beec8 100644
--- a/src/components/temp-email/SignupSection.tsx
+++ b/src/components/temp-email/SignupSection.tsx
@@ -1,26 +1,21 @@
+import React from 'react';
 import styles from '../../components/techradar-discount/Background.module.scss';
-import Link from 'next/link';
-import { SIGNUP_DRIVE_WEB } from '@/constants';
 
-interface SignupSectionProps {
-  textContent: Record<string, any>;
-}
-
-export const SignupSection = ({ textContent }: SignupSectionProps) => (
+export const SignupSection = ({ textContent }) => (
   <section className="overflow-hidden">
     <div className="flex flex-col items-center justify-center space-y-8 px-4 py-14 text-white">
       <div className="flex max-w-[595px] flex-col space-y-4 text-center">
         <p className="text-4xl font-semibold">{textContent.title}</p>
         <p className="text-xl font-normal">{textContent.description}</p>
       </div>
-      <Link
-        href={SIGNUP_DRIVE_WEB}
-        target="_blank"
-        rel="noopener noreferrer"
+      <button
         className="flex cursor-pointer rounded-lg bg-white px-6 py-2 hover:bg-blue-10"
+        onClick={() => {
+          window.open('https://drive.internxt.com/new', '_blank', 'noopener noreferrer');
+        }}
       >
         <p className="text-base font-semibold text-primary">{textContent.createAccount}</p>
-      </Link>
+      </button>
     </div>
     <div
       className={`absolute top-0 left-0 -z-10 flex h-full w-full ${styles.partnerHeroSection} pointer-events-none origin-center`}
diff --git a/src/components/temp-email/components/EmailToolBar.tsx b/src/components/temp-email/components/EmailToolBar.tsx
index bef276349..d6f621bad 100644
--- a/src/components/temp-email/components/EmailToolBar.tsx
+++ b/src/components/temp-email/components/EmailToolBar.tsx
@@ -5,57 +5,64 @@ interface EmailToolBarProps {
   email: string | undefined;
   borderColor: boolean;
   isChangeEmailIconAnimated: boolean;
-  textContent: Record<string, any>;
+  textContent: {
+    generatingEmail: string;
+    copyEmail: string;
+    deleteEmail: string;
+    expireEmail: string;
+  };
   onCopy: () => void;
   onDelete: () => void;
 }
 
-const EmailToolbar = ({
+function EmailToolbar({
   email,
   borderColor,
   isChangeEmailIconAnimated,
   onCopy,
   onDelete,
   textContent,
-}: Readonly<EmailToolBarProps>): JSX.Element => (
-  <div className="flex w-full max-w-3xl flex-col items-center rounded-2xl border-4 border-primary/7 bg-primary/2 p-9">
-    <div className="flex w-full flex-col items-center justify-center gap-3 md:flex-row">
-      <div
-        className={`flex h-full w-full items-center justify-center rounded-xl md:w-screen md:max-w-[500px] ${
-          borderColor ? 'ring ring-primary ring-opacity-15' : 'border border-gray-20'
-        }`}
-      >
-        <button
-          className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl bg-white text-gray-80 shadow-sm ${
-            borderColor ? 'border border-primary' : ''
-          } px-4 py-3`}
-          onClick={onCopy}
+}: Readonly<EmailToolBarProps>) {
+  return (
+    <div className="flex w-full max-w-3xl flex-col items-center rounded-2xl border-4 border-primary/7 bg-primary/2 p-9">
+      <div className="flex w-full flex-col items-center justify-center gap-3 md:flex-row">
+        <div
+          className={`flex h-full w-full items-center justify-center rounded-xl md:w-screen md:max-w-[500px] ${
+            borderColor ? 'ring ring-primary ring-opacity-15' : 'border border-gray-20'
+          }`}
         >
-          <p>{email ?? textContent.generatingEmail}</p>
-          <Tooltip
-            variant="light"
-            id="copy-to-clipboard"
-            delayShow={700}
-            className="z-40 rounded-lg bg-white drop-shadow-md"
+          <button
+            className={`flex h-full w-full cursor-pointer flex-row items-center justify-between rounded-xl bg-white text-gray-80 shadow-sm ${
+              borderColor ? 'border border-primary' : ''
+            } px-4 py-3`}
+            onClick={onCopy}
           >
-            <p className="break-word text-center text-gray-80">{textContent.copyEmail}</p>
-          </Tooltip>
-          <Copy
-            data-tooltip-id="copy-to-clipboard"
-            size={24}
-            className={`${borderColor ? 'text-primary' : 'text-gray-50'}`}
-          />
+            <p>{email ?? textContent.generatingEmail}</p>
+            <Tooltip
+              variant="light"
+              id="copy-to-clipboard"
+              delayShow={700}
+              className="z-40 rounded-lg bg-white drop-shadow-md"
+            >
+              <p className="break-word text-center text-gray-80">{textContent.copyEmail}</p>
+            </Tooltip>
+            <Copy
+              data-tooltip-id="copy-to-clipboard"
+              size={24}
+              className={`${borderColor ? 'text-primary' : 'text-gray-50'}`}
+            />
+          </button>
+        </div>
+        <button
+          className="flex w-full flex-row items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-20 bg-gray-5 px-5 py-2.5 text-gray-80 shadow-sm hover:bg-gray-5 active:bg-gray-10"
+          onClick={onDelete}
+        >
+          <ArrowClockwise size={24} className={`${isChangeEmailIconAnimated ? 'animate-spin-refresh' : ''}`} />
+          <p>{textContent.deleteEmail}</p>
         </button>
       </div>
-      <button
-        className="flex w-full flex-row items-center justify-center space-x-2 whitespace-nowrap rounded-lg border border-gray-20 bg-gray-5 px-5 py-2.5 text-gray-80 shadow-sm hover:bg-gray-5 active:bg-gray-10"
-        onClick={onDelete}
-      >
-        <ArrowClockwise size={24} className={`${isChangeEmailIconAnimated ? 'animate-spin-refresh' : ''}`} />
-        <p>{textContent.deleteEmail}</p>
-      </button>
     </div>
-  </div>
-);
+  );
+}
 
 export default EmailToolbar;
diff --git a/src/components/temp-email/components/InboxView.tsx b/src/components/temp-email/components/InboxView.tsx
index 205b0baf0..945a260fe 100644
--- a/src/components/temp-email/components/InboxView.tsx
+++ b/src/components/temp-email/components/InboxView.tsx
@@ -23,7 +23,7 @@ export const Inbox = ({
   messages,
   onMessageSelected,
   selectedMessage,
-}: InboxProps): JSX.Element => {
+}: InboxProps) => {
   return (
     <div className="relative px-52">
       <div className="hidden w-full justify-center md:flex">
diff --git a/src/components/temp-email/components/Messages.tsx b/src/components/temp-email/components/Messages.tsx
index 229fc6adf..b4134f04e 100644
--- a/src/components/temp-email/components/Messages.tsx
+++ b/src/components/temp-email/components/Messages.tsx
@@ -1,24 +1,36 @@
-import { useEffect, useState } from 'react';
-import Image from 'next/image';
-import moment from 'moment';
 import { ArrowClockwise } from '@phosphor-icons/react';
+import moment from 'moment';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
 
-interface NoMessageSelectedProps {
-  messagesLength: number;
-  textContent: any;
-  onRefreshButtonClicked: () => void;
-}
-
-interface MessageSelectedProps {
-  item: Record<string, any>;
-  textContent: any;
-}
+const Loader = (): JSX.Element => {
+  return (
+    <svg
+      width="96"
+      height="86"
+      className="animate-spin-slow"
+      viewBox="0 0 96 86"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.121 73.1269C10.4218 65.3992 5.99857 55.166 5.6659 44.3107L5.63002 43.1355L1.65554 46.7803L0 44.9615L7.68021 37.9148L14.7003 45.6241L12.8875 47.2864L9.26009 43.3025L9.32858 44.7933C9.77475 54.4955 13.8105 63.6426 20.6917 70.5492C24.8586 74.7309 30.0027 77.9456 35.5688 79.8462C52.0427 85.4716 70.3658 79.3146 80.1275 64.8735L81.1477 63.3643L84.1548 65.4117L83.1353 66.9201C72.4584 82.7159 52.4177 89.4503 34.3998 83.2979C28.3099 81.2185 22.6819 77.7007 18.1236 73.1255L18.121 73.1269ZM12.9678 19.0766C23.644 3.28149 43.6899 -3.45164 61.7143 2.70272C67.801 4.78079 73.4264 8.29663 77.9828 12.8698C85.8058 20.7219 90.2323 31.1221 90.4483 42.1554L90.4717 43.3489L94.3438 39.7978L96.0007 41.6166L88.3204 48.6626L81.301 40.9533L83.1138 39.291L86.828 43.3699L86.7882 41.9204C86.5142 31.9385 82.4706 22.5341 75.4016 15.439C71.2412 11.2632 66.1043 8.05307 60.5454 6.15505C44.0637 0.527741 25.7359 6.68275 15.9742 21.1232L14.954 22.6323L11.9476 20.585L12.9678 19.0766Z"
+        fill="#0066FF"
+        fillOpacity="0.15"
+      />
+    </svg>
+  );
+};
 
 export const NoMessageSelected = ({
   messagesLength,
   textContent,
   onRefreshButtonClicked,
-}: NoMessageSelectedProps): JSX.Element => {
+}: {
+  messagesLength: number;
+  textContent: any;
+  onRefreshButtonClicked: () => void;
+}): JSX.Element => {
   const [isRefreshIconAnimated, setIsRefreshIconAnimated] = useState<boolean>(false);
   const withoutMessagesSentence = `${textContent.withoutMessages.youHave} ${messagesLength} ${textContent.withoutMessages.newMessages}`;
   const withMessagesSentence = `${textContent.withMessages}`;
@@ -60,7 +72,13 @@ export const NoMessageSelected = ({
   );
 };
 
-export const MessageSelected = ({ item, textContent }: MessageSelectedProps): JSX.Element => {
+export const MessageSelected = ({
+  item,
+  textContent,
+}: {
+  item: Record<string, any>;
+  textContent: any;
+}): JSX.Element => {
   const date = moment(item.date).format('dddd DD, MMMM YYYY [at] HH:mm');
   const name = item.from?.charAt().toUpperCase();
 
diff --git a/src/components/temp-email/services/icon-service.ts b/src/components/temp-email/services/icon-service.ts
index 500fca079..16ffd71d8 100644
--- a/src/components/temp-email/services/icon-service.ts
+++ b/src/components/temp-email/services/icon-service.ts
@@ -1,5 +1,4 @@
 import { FunctionComponent, SVGProps } from 'react';
-import fileExtensionGroups from '../types/types';
 
 import LightFolder from '../public/icons/file-types/folder.svg';
 import DefaultFile from '../public/icons/file-types/default.svg';
@@ -15,6 +14,7 @@ import WordFile from '../public/icons/file-types/word.svg';
 import XlsFile from '../public/icons/file-types/excel.svg';
 import CsvFile from '../public/icons/file-types/csv.svg';
 import ZipFile from '../public/icons/file-types/zip.svg';
+import fileExtensionGroups from '../types/types';
 
 export enum FileExtensionGroup {
   Audio,
diff --git a/src/components/utils/schema-markup-generator.ts b/src/components/utils/schema-markup-generator.ts
index e970e551f..8cb111425 100644
--- a/src/components/utils/schema-markup-generator.ts
+++ b/src/components/utils/schema-markup-generator.ts
@@ -29,7 +29,7 @@ export const sm_faq = (faq) => {
       }}`;
     if (i + 1 < arr.length) data += ',';
   });
-  data += ']}';
+  data += `]}`;
   return data;
 };
 
@@ -53,4 +53,4 @@ export const sm_breadcrumb = (name, url) => {
           "item": "https://internxt.com/${url}"
         }
       ]}`;
-};
+};
\ No newline at end of file
diff --git a/src/components/virus-scanner/BannersSection.tsx b/src/components/virus-scanner/BannersSection.tsx
index b0ebca49b..1b94e8df0 100644
--- a/src/components/virus-scanner/BannersSection.tsx
+++ b/src/components/virus-scanner/BannersSection.tsx
@@ -1,13 +1,8 @@
+import React from 'react';
 import Image from 'next/legacy/image';
 import { CaretRight } from '@phosphor-icons/react';
-import { getImage } from '@/lib/getImage';
 
-interface BannersSectionProps {
-  textContent: Record<string, any>;
-  lang: string;
-}
-
-const BannersSection = ({ textContent, lang }: BannersSectionProps): JSX.Element => {
+const BannersSection = ({ textContent, lang }) => {
   return (
     <section className="overflow-hidden">
       <div className="flex flex-col items-center justify-center space-y-16 px-5 py-20">
@@ -38,7 +33,7 @@ const BannersSection = ({ textContent, lang }: BannersSectionProps): JSX.Element
           </div>
           <div className="flex w-screen max-w-xs flex-col items-center justify-center space-y-6 rounded-2xl bg-gray-1 p-10 text-center">
             <Image
-              src={getImage('/images/temp-email/byte-converter.svg')}
+              src="/images/temp-email/byte-converter.svg"
               quality={100}
               width={95}
               height={70}
diff --git a/src/components/virus-scanner/CtaSection.tsx b/src/components/virus-scanner/CtaSection.tsx
index cbec82f98..ff590473b 100644
--- a/src/components/virus-scanner/CtaSection.tsx
+++ b/src/components/virus-scanner/CtaSection.tsx
@@ -1,10 +1,7 @@
+import React from 'react';
 import styles from '../../components/techradar-discount/Background.module.scss';
 
-interface CtaSectionProps {
-  textContent: Record<string, any>;
-}
-
-const CtaSection = ({ textContent }: CtaSectionProps): JSX.Element => {
+const CtaSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden py-12">
       <div className="flex flex-col items-center justify-center pt-12 lg:px-20">
diff --git a/src/components/virus-scanner/FeaturesSection.tsx b/src/components/virus-scanner/FeaturesSection.tsx
index 7feae6396..0683a85a8 100644
--- a/src/components/virus-scanner/FeaturesSection.tsx
+++ b/src/components/virus-scanner/FeaturesSection.tsx
@@ -32,7 +32,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
               </div>
               <div className="flex">
                 <Image
-                  src={'/images/virus-scanner/virus_scanner.webp'}
+                  src={`/images/virus-scanner/virus_scanner.webp`}
                   width={573}
                   height={390}
                   alt="Viruses Hate Privacy"
@@ -44,7 +44,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
             <div className="flex flex-col-reverse items-center md:flex-row md:space-x-16">
               <div className="flex">
                 <Image
-                  src={'/images/virus-scanner/malware.webp'}
+                  src={`/images/virus-scanner/malware.webp`}
                   width={573}
                   height={390}
                   alt="Stop malware image"
@@ -82,7 +82,7 @@ const FeaturesSection = ({ textContent, bannerText, lang }) => {
               </div>
               <div className="flex">
                 <Image
-                  src={'/images/virus-scanner/phishing.webp'}
+                  src={`/images/virus-scanner/phishing.webp`}
                   width={573}
                   height={390}
                   alt="Scan files image"
diff --git a/src/components/virus-scanner/HeroSection.tsx b/src/components/virus-scanner/HeroSection.tsx
index 464619c24..c0853e76a 100644
--- a/src/components/virus-scanner/HeroSection.tsx
+++ b/src/components/virus-scanner/HeroSection.tsx
@@ -41,7 +41,7 @@ const HeroSection = ({ textContent }) => {
       body: formdata,
     };
 
-    fetch('https://clamav.internxt.com/filescan', requestOptions)
+    fetch(`https://clamav.internxt.com/filescan`, requestOptions)
       .then(async (res) => {
         if (res.status === 200) {
           const data = await res.json();
@@ -212,7 +212,7 @@ const HeroSection = ({ textContent }) => {
                             ) : (
                               <div className="flex flex-row gap-2">
                                 <CheckCircle weight="fill" size={24} className="text-green" />
-                                <span className={'text-lg font-semibold text-green-dark'}>
+                                <span className={`text-lg font-semibold text-green-dark`}>
                                   {textContent.table.noVirusDetected}
                                 </span>
                               </div>
@@ -414,7 +414,7 @@ const HeroSection = ({ textContent }) => {
                   <>
                     {/* Default state */}
                     <div className=" flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-xl">
-                      <div className={'flex flex-row items-center lg:space-x-0 xl:space-x-20'}>
+                      <div className={`flex flex-row items-center lg:space-x-0 xl:space-x-20`}>
                         <div className="hidden lg:flex">
                           <Image
                             src="/images/virus-scanner/upload_file.webp"
diff --git a/src/components/vpn-extension/HeroSection.tsx b/src/components/vpn-extension/HeroSection.tsx
index a7bcb99d2..7b5d8396e 100644
--- a/src/components/vpn-extension/HeroSection.tsx
+++ b/src/components/vpn-extension/HeroSection.tsx
@@ -4,11 +4,7 @@ import HeroSectionSafeArea from '../shared/HeroSectionSafeArea';
 import { RedirectButton } from '../shared/RedirectButton';
 import { VPN_CHROME_WEB_STORE } from '@/constants';
 
-interface HeroSectionProps {
-  textContent: Record<string, any>;
-}
-
-export const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
+export const HeroSection = ({ textContent }) => {
   return (
     <section className="overflow-hidden pt-8">
       <HeroSectionSafeArea>
@@ -46,7 +42,7 @@ export const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
               <Image
                 src={'/images/vpn-extension/vpn-hero.svg'}
                 alt="VPN Hero"
-                className={'top-10 left-0 -translate-x-72 rounded-lg lg:absolute'}
+                className={`top-10 left-0 -translate-x-72 rounded-lg lg:absolute`}
                 width={328}
                 height={385}
                 draggable={false}
diff --git a/src/components/vpn-extension/SecureVPNSection.tsx b/src/components/vpn-extension/SecureVPNSection.tsx
index ee94b2421..eb03bc9e8 100644
--- a/src/components/vpn-extension/SecureVPNSection.tsx
+++ b/src/components/vpn-extension/SecureVPNSection.tsx
@@ -37,7 +37,7 @@ export const SecureVPNSection = ({ textContent }) => {
           {cards.map((card) => (
             <div
               key={card.title}
-              className={'flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]'}
+              className={`flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]`}
             >
               <card.icon className="mb-6 text-4xl text-primary" size={32} />
               <div className="flex w-full max-w-[400px] flex-col">
diff --git a/src/components/webdav/HowToUseCLISection.tsx b/src/components/webdav/HowToUseCLISection.tsx
index 3c431adc0..1ba770074 100644
--- a/src/components/webdav/HowToUseCLISection.tsx
+++ b/src/components/webdav/HowToUseCLISection.tsx
@@ -32,7 +32,7 @@ export const HowToUseCLISection = ({ textContent }) => {
         </div>
         <div className="flex w-full flex-row flex-wrap justify-center gap-8">
           {cards.map((card) => (
-            <div className="flex w-full max-w-[350px] flex-col rounded-2xl bg-gray-1 p-10" key={card.title}>
+            <div className="flex w-full max-w-[350px] flex-col rounded-2xl bg-gray-1 p-10">
               <div className="flex flex-col  gap-6">
                 <p className="text-2xl font-medium text-gray-100">{card.title}</p>
                 <p className="text-lg text-gray-80">{card.description}</p>
diff --git a/src/components/webdav/WebDAVSupportSection.tsx b/src/components/webdav/WebDAVSupportSection.tsx
index 4737b2eb5..bd062f075 100644
--- a/src/components/webdav/WebDAVSupportSection.tsx
+++ b/src/components/webdav/WebDAVSupportSection.tsx
@@ -19,7 +19,7 @@ export const WebDAVSupportSection = ({ textContent }) => {
             </p>
             <div className="flex flex-col gap-3">
               {textContent.howToInstall.steps.map((steps) => (
-                <div className="flex flex-row items-start gap-3 md:items-center" key={steps.step}>
+                <div className="flex flex-row items-start gap-3 md:items-center">
                   <div className="flex whitespace-nowrap rounded-lg bg-gray-5 px-4 py-2">
                     <p className="text-lg font-semibold text-gray-80">{steps.step}</p>
                   </div>
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
index 818aa64b3..c89dea216 100644
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -1,8 +1,10 @@
+import _ from 'lodash';
+
 export function getCheckoutSessionData(session) {
   const conversionData = {
     coupon: {},
     properties: {},
-    traits: {},
+    traits: {}
   };
   const amount = session.amount_total * 0.01;
   const { discounts } = session.total_details.breakdown;
@@ -12,7 +14,7 @@ export function getCheckoutSessionData(session) {
     conversionData.coupon = {
       discount_id: discount.id,
       coupon_id: discount.coupon.id,
-      coupon_name: discount.coupon.name.toLowerCase(),
+      coupon_name: discount.coupon.name.toLowerCase()
     };
   }
 
@@ -29,7 +31,7 @@ export function getCheckoutSessionData(session) {
     plan_name: session.metadata.name,
     impact_value: amount === 0 ? 5 : amount,
     subscription_id: session.subscription,
-    payment_intent: session.payment_intent,
+    payment_intent: session.payment_intent
   };
 
   conversionData.traits = {
@@ -39,12 +41,13 @@ export function getCheckoutSessionData(session) {
     storage_limit: session.metadata.maxSpaceBytes,
     plan_name: session.metadata.name,
     subscription_id: session.subscription,
-    payment_intent: session.payment_intent,
+    payment_intent: session.payment_intent
   };
 
   return conversionData;
 }
 
+// eslint-disable-next-line import/prefer-default-export
 export async function trackPayment({ session, user }) {
   /*  if (user.registerCompleted && session.payment_status === 'paid') {
      const conversionData = getCheckoutSessionData(session);
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 5c358cdc9..0aa7e240e 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -4,7 +4,6 @@ const AUTH_FLOW_URL = 'https://drive.internxt.com';
 
 export const openAuthDialog = (view: 'login' | 'signup' | 'recover'): void => {
   if (view === 'login') {
-    //
   } else if (view === 'signup') {
     window.top?.postMessage({ action: 'openDialogSignup' }, window.location.origin);
   }
diff --git a/src/lib/brave.ts b/src/lib/brave.ts
index b96a7449b..783bcf7e9 100644
--- a/src/lib/brave.ts
+++ b/src/lib/brave.ts
@@ -1,5 +1,5 @@
 export default function isBrave() {
   const maybeBrave = (window.navigator as { brave?: any }).brave;
 
-  return maybeBrave != undefined && maybeBrave.isBrave.name == 'isBrave';
-}
+  return maybeBrave != undefined && maybeBrave.isBrave.name == "isBrave";
+}
\ No newline at end of file
diff --git a/src/lib/checker.ts b/src/lib/checker.js
similarity index 71%
rename from src/lib/checker.ts
rename to src/lib/checker.js
index d3f37a0b4..dcc520bac 100644
--- a/src/lib/checker.ts
+++ b/src/lib/checker.js
@@ -4,6 +4,8 @@ const crypto = require('crypto');
 const PREFIX_LENGTH = 5;
 const API_URL = 'https://api.pwnedpasswords.com/range/';
 const API_TIMEOUT = 5000;
+const HTTP_STATUS_OK = 200;
+const HTTP_STATUS_NOT_FOUND = 404;
 
 function hash(password) {
   const shasum = crypto.createHash('sha1');
@@ -12,10 +14,15 @@ function hash(password) {
 }
 
 function get(hashedPasswordPrefix) {
-  return fetch(API_URL + hashedPasswordPrefix).then((res) => res.text());
+  const opts = {
+    timeout: API_TIMEOUT,
+  };
+
+  return fetch(API_URL + hashedPasswordPrefix, opts)
+    .then((res) => res.text());
 }
 
-export default function pwnedpasswords(password, cb?) {
+export default function pwnedpasswords(password, cb) {
   const hasCallback = typeof cb === 'function';
 
   if (typeof password !== 'string') {
@@ -29,13 +36,12 @@ export default function pwnedpasswords(password, cb?) {
 
   return get(hashedPasswordPrefix)
     .then((res) => {
-      const found =
-        res
-          .split('\n')
-          .map((line) => line.split(':'))
-          .filter((filtered) => filtered[0].toLowerCase() === hashedPasswordSuffix)
-          .map((mapped) => Number(mapped[1]))
-          .shift() || 0;
+      const found = res
+        .split('\n')
+        .map((line) => line.split(':'))
+        .filter((filtered) => filtered[0].toLowerCase() === hashedPasswordSuffix)
+        .map((mapped) => Number(mapped[1]))
+        .shift() || 0;
 
       return hasCallback ? cb(null, found) : found;
     })
diff --git a/src/lib/gtag.ts b/src/lib/gtag.js
similarity index 100%
rename from src/lib/gtag.ts
rename to src/lib/gtag.js
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 86bf8cc62..02589f7af 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -43,6 +43,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     };
   }, [router.events]);
 
+  // eslint-disable-next-line react/jsx-props-no-spreading
   return (
     <LiveChatLoaderProvider provider="intercom" providerKey="ta2ffq6n">
       <GlobalUIManager
@@ -91,7 +92,6 @@ function MyApp({ Component, pageProps }: AppProps) {
                 src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
               />
               <Script
-                id="gtag-manager"
                 strategy="afterInteractive"
                 dangerouslySetInnerHTML={{
                   __html: `
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 1fc6ac20d..4a65e94cb 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -12,7 +12,6 @@ import { sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import CtaSection from '@/components/shared/CtaSection';
 import CompanySection from '@/components/about/CompanySection';
 import HeroSection2 from '@/components/about/HeroSection2';
-import { GetServerSidePropsContext } from 'next';
 
 const CTA_URL = 'https://internxt.com/pricing';
 
@@ -23,7 +22,7 @@ const AboutUs = ({ lang, textContent, footerLang, navbarLang, metatagsDescriptio
 
   return (
     <>
-      <Script id="breadcumb-about" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('About', 'about')}
       </Script>
 
@@ -53,7 +52,7 @@ const AboutUs = ({ lang, textContent, footerLang, navbarLang, metatagsDescriptio
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const footerLang = require(`@/assets/lang/${lang}/footer.json`);
diff --git a/src/pages/affiliates/[filename].tsx b/src/pages/affiliates/[filename].tsx
index 75805a5d9..57f03f406 100644
--- a/src/pages/affiliates/[filename].tsx
+++ b/src/pages/affiliates/[filename].tsx
@@ -7,7 +7,6 @@ import Layout from '@/components/layout/Layout';
 import { MinimalNavbar } from '@/components/layout/navbars/MinimalNavbar';
 import { HeroSectionForPartner } from '@/components/affiliates/affiliates-partners-template/HeroSection';
 import { CouponType } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 const SecondFeaturesSection = dynamic(
   () => import('@/components/home/SecondFeaturesSection').then((mod) => mod.default),
@@ -191,14 +190,14 @@ const AffiliateTemplates = ({ langJson, homeJson, lang, metatagsDescriptions, fo
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = 'en';
-  const pathname = ctx.params?.filename;
+  const pathname = ctx.params.filename;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/affiliates-partners-template.json');
-  const homeJson = require('@/assets/lang/en/home.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/affiliates-partners-template.json`);
+  const homeJson = require(`@/assets/lang/en/home.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/affiliates/index.tsx b/src/pages/affiliates/index.tsx
index e0524d277..b3c6e913d 100644
--- a/src/pages/affiliates/index.tsx
+++ b/src/pages/affiliates/index.tsx
@@ -9,7 +9,6 @@ import Footer from '@/components/layout/footers/Footer';
 import Layout from '@/components/layout/Layout';
 import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/shared/CtaSection';
-import { GetServerSidePropsContext } from 'next';
 
 const Affiliates = ({ langJson, lang, metatagsDescriptions, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((item) => item.id === 'affiliates');
@@ -44,13 +43,13 @@ const Affiliates = ({ langJson, lang, metatagsDescriptions, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/affiliates.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/affiliates.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/annual.tsx b/src/pages/annual.tsx
index 87eee62fa..af61690ae 100644
--- a/src/pages/annual.tsx
+++ b/src/pages/annual.tsx
@@ -6,7 +6,6 @@ import PaymentSection from '@/components/annual/PaymentSection';
 import FeatureSection from '@/components/annual/FeatureSection';
 import InfoSection from '@/components/home/InfoSection';
 import CtaSection from '@/components/pricing/CtaSection';
-import { GetServerSidePropsContext } from 'next';
 
 const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSectionLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -32,7 +31,7 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/b.tsx b/src/pages/b.tsx
index 63607a6f3..517a7a796 100644
--- a/src/pages/b.tsx
+++ b/src/pages/b.tsx
@@ -9,7 +9,6 @@ import CtaSection from '@/components/shared/CtaSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { MarqueeComponent } from '@/components/specialoffer/MarqueeComponent';
 import cookies from '@/lib/cookies';
-import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
 
 const HomePageV2 = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
@@ -52,7 +51,7 @@ const HomePageV2 = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/black-friday.tsx b/src/pages/black-friday.tsx
index beedabaf5..073e4be7e 100644
--- a/src/pages/black-friday.tsx
+++ b/src/pages/black-friday.tsx
@@ -12,7 +12,6 @@ import FaqSection from '@/components/black-friday/FAQSection';
 import BestStorageSection from '@/components/black-friday/BestStorageSection';
 import LoginBFBanner from '@/components/banners/LoginBFBanner';
 import FooterSection from '@/components/black-friday/FooterSection';
-import { GetServerSidePropsContext } from 'next';
 
 const BLACK_FRIDAY_METATAG_ID = 'black-friday';
 
@@ -54,8 +53,8 @@ const BlackFriday = ({ lang, metatagsDescriptions, langJson, navbarLang }) => {
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const language = ctx.locale as string;
+export async function getServerSideProps(ctx) {
+  const language = ctx.locale;
 
   const allowedLanguages = ['en', 'fr'];
 
diff --git a/src/pages/byte-converter.tsx b/src/pages/byte-converter.tsx
index df1bbba01..875508d57 100644
--- a/src/pages/byte-converter.tsx
+++ b/src/pages/byte-converter.tsx
@@ -13,7 +13,6 @@ import TryInternxtBanner from '@/components/banners/TryInternxtBanner';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import { ToolsSection } from '@/components/shared/ToolsSection';
-import { GetServerSidePropsContext } from 'next';
 
 const CONVERTER_TOOL_METATAG_ID = 'converter-tool';
 
@@ -22,11 +21,11 @@ const ConverterTool = ({ lang, metatagsDescriptions, navbarLang, langJson, tools
 
   return (
     <>
-      <Script id="schema-byte-converter" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script id="breadcrumb-byte-converter" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Byte Converter', 'byte-converter')}
       </Script>
 
@@ -66,7 +65,7 @@ const ConverterTool = ({ lang, metatagsDescriptions, navbarLang, langJson, tools
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloud-storage-comparison.tsx b/src/pages/cloud-storage-comparison.tsx
index 8c5e5b623..37c11b158 100644
--- a/src/pages/cloud-storage-comparison.tsx
+++ b/src/pages/cloud-storage-comparison.tsx
@@ -15,7 +15,6 @@ import ThirdFeaturesSection from '@/components/home/ThirdFeaturesSection';
 import CtaSection from '@/components/shared/CtaSection';
 import { ComparisonHeader } from '@/components/comparison/ComparisonHeader';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
-import { GetServerSidePropsContext } from 'next';
 
 const URL_REDIRECT = 'https://drive.internxt.com/new';
 
@@ -24,11 +23,11 @@ const CloudStorageComparison = ({ metatagsDescriptions, langJson, navbarLang, fo
 
   return (
     <>
-      <Script id="schema-drive" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script id="breadcrumb-drive" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Cloud Storage Comparison', 'comparison')}
       </Script>
 
@@ -62,7 +61,7 @@ const CloudStorageComparison = ({ metatagsDescriptions, langJson, navbarLang, fo
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloud-storage-for-education.tsx b/src/pages/cloud-storage-for-education.tsx
index a7bb12831..a05ae23a6 100644
--- a/src/pages/cloud-storage-for-education.tsx
+++ b/src/pages/cloud-storage-for-education.tsx
@@ -11,7 +11,6 @@ import BenefitsOfInternxtSection from '@/components/cloud-storage-for-education/
 import WhyChooseInternxtSection from '@/components/cloud-storage-for-education/WhyChooseInternxtSection';
 import ClaimYourDiscountSection from '@/components/cloud-storage-for-education/ClaimYourDiscountSection';
 import IntercomTicketCreatedBanner from '@/components/banners/IntercomTicketCreatedBanner';
-import { GetServerSidePropsContext } from 'next';
 
 const CloudStorageForEducation = ({ lang, metatagsDescriptions, navbar, textContent, footer }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cloud-storage-for-education');
@@ -54,7 +53,7 @@ const CloudStorageForEducation = ({ lang, metatagsDescriptions, navbar, textCont
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale || ctx.defaultLocale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cloudwards.tsx b/src/pages/cloudwards.tsx
index f69884db6..96173716f 100644
--- a/src/pages/cloudwards.tsx
+++ b/src/pages/cloudwards.tsx
@@ -8,7 +8,6 @@ import TestimonialsSection from '@/components/home/TestimonialsSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
 import { CtaSection } from '@/components/affiliates/affiliates-partners-template/CtaSection';
 import { CouponType } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 export type CardsType = 'all' | 'one';
 
@@ -77,13 +76,13 @@ const Cloudwards = ({ langJson, homeJson, lang, metatagsDescriptions, footerLang
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/affiliates-partners-template.json');
-  const homeJson = require('@/assets/lang/en/home.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/affiliates-partners-template.json`);
+  const homeJson = require(`@/assets/lang/en/home.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/cyber-awareness.tsx b/src/pages/cyber-awareness.tsx
index 23feae293..dfa3fdba0 100644
--- a/src/pages/cyber-awareness.tsx
+++ b/src/pages/cyber-awareness.tsx
@@ -17,18 +17,17 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import FileParallaxSection from '@/components/home/FileParallaxSection';
 import FeatureSection from '@/components/cyber-awareness/FeatureSection';
 import QuizSection from '@/components/cyber-awareness/QuizSection';
-import { GetServerSidePropsContext } from 'next';
 
 const CyberAwareness = ({ metatagsDescriptions, textContent, footerLang, navbarLang, lang, bannerText }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cyber-awareness');
 
   return (
     <>
-      <Script id="schema-cyber-awareness" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.FaqSection.faq)}
       </Script>
 
-      <Script id="breadcrumb-cyber-awareness" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Cyber Awareness', 'cyber-awareness')}
       </Script>
 
@@ -81,7 +80,7 @@ const CyberAwareness = ({ metatagsDescriptions, textContent, footerLang, navbarL
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/cyber-security-quiz.tsx b/src/pages/cyber-security-quiz.tsx
index e29401590..bde450b6c 100644
--- a/src/pages/cyber-security-quiz.tsx
+++ b/src/pages/cyber-security-quiz.tsx
@@ -3,7 +3,6 @@ import Layout from '@/components/layout/Layout';
 import Navbar from '@/components/layout/navbars/Navbar';
 import QuizSection from '@/components/CybersecurityQuiz/QuizSection';
 import { CyberSecurityQuizViews } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 const CyberSecurityQuiz = ({ metatagsDescriptions, navbarLang, textContent, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'cyber-security-quiz');
@@ -37,12 +36,12 @@ const CyberSecurityQuiz = ({ metatagsDescriptions, navbarLang, textContent, lang
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const textContent = require('@/assets/lang/en/cyber-security-quiz.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const textContent = require(`@/assets/lang/en/cyber-security-quiz.json`);
 
   return {
     props: {
diff --git a/src/pages/dealfuel.tsx b/src/pages/dealfuel.tsx
index 1339b9900..cfc650c6a 100644
--- a/src/pages/dealfuel.tsx
+++ b/src/pages/dealfuel.tsx
@@ -13,7 +13,6 @@ import PaymentSection from '@/components/lifetime/PaymentSection';
 import moment from 'moment';
 import HeroSection from '@/components/lifetime/HeroSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
-import { GetServerSidePropsContext } from 'next';
 
 const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
@@ -31,15 +30,15 @@ const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang
       description={metatags[0].description}
       segmentName="DealFuel"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       {openDialog ? (
-        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
+        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="TECHCULT" />
           </div>
         </div>
@@ -67,13 +66,13 @@ const Techcult = ({ lang, metatagsDescriptions, langJson, footerLang, navbarLang
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/techcult.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/techcult.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/dealmirror.tsx b/src/pages/dealmirror.tsx
index 8bcf64e5a..466f28a07 100644
--- a/src/pages/dealmirror.tsx
+++ b/src/pages/dealmirror.tsx
@@ -13,7 +13,6 @@ import SignUp from '@/components/auth/SignUp';
 import { X } from '@phosphor-icons/react';
 import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
-import { GetServerSidePropsContext } from 'next';
 
 const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
@@ -38,15 +37,15 @@ const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLa
       description={metatags[0].description}
       segmentName="DealMirror"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       {openDialog ? (
-        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
+        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="DEALMIRROR" />
           </div>
         </div>
@@ -69,14 +68,14 @@ const DealMirror = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLa
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/techcult.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/techcult.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/drive.tsx b/src/pages/drive.tsx
index ca36db63c..6b4402719 100644
--- a/src/pages/drive.tsx
+++ b/src/pages/drive.tsx
@@ -16,18 +16,17 @@ import { downloadDriveLinks } from '@/lib/get-download-url';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
 import { CliCard } from '@/components/drive/CliCard';
-import { GetServerSidePropsContext } from 'next';
 
 const Drive = ({ metatagsDescriptions, download, langJson, navbarLang, footerLang, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'drive');
 
   return (
     <>
-      <Script id="schema-drive" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script id="breadcrumb-drive" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Drive', 'drive')}
       </Script>
 
@@ -60,7 +59,7 @@ const Drive = ({ metatagsDescriptions, download, langJson, navbarLang, footerLan
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const download = await downloadDriveLinks();
   const lang = ctx.locale;
 
diff --git a/src/pages/file-converter/[filename].tsx b/src/pages/file-converter/[filename].tsx
index 7925137a8..bf77b82ac 100644
--- a/src/pages/file-converter/[filename].tsx
+++ b/src/pages/file-converter/[filename].tsx
@@ -7,7 +7,6 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import { ConverterSection } from '@/components/file-converter/ConverterSection';
 import { FeaturesSection } from '@/components/file-converter/FeaturesSection';
 import CtaSection from '@/components/shared/CtaSection';
-import { GetServerSidePropsContext } from 'next';
 
 const FileConverter = ({
   metatagsDescriptions,
@@ -44,10 +43,10 @@ const FileConverter = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const textLang = lang === 'es' ? lang : 'en';
-  const pathname = ctx.params?.filename;
+  const pathname = ctx.params.filename;
 
   const metatagsDescriptions = require(`@/assets/lang/${textLang}/metatags-descriptions.json`);
   const navbarLang = require(`@/assets/lang/${textLang}/navbar.json`);
diff --git a/src/pages/file-converter/index.tsx b/src/pages/file-converter/index.tsx
index 0a98e7027..52a6aa8f3 100644
--- a/src/pages/file-converter/index.tsx
+++ b/src/pages/file-converter/index.tsx
@@ -8,7 +8,6 @@ import { FeaturesSection } from '@/components/file-converter/main-state/Features
 import CtaSection from '@/components/shared/CtaSection';
 import QASection from '@/components/shared/FaqSection';
 import Footer from '@/components/layout/footers/Footer';
-import { GetServerSidePropsContext } from 'next';
 
 const FileConverter = ({
   metatagsDescriptions,
@@ -46,7 +45,7 @@ const FileConverter = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const textLang = lang === 'es' ? lang : 'en';
 
diff --git a/src/pages/freemonth.tsx b/src/pages/freemonth.tsx
new file mode 100644
index 000000000..c6a92c2c3
--- /dev/null
+++ b/src/pages/freemonth.tsx
@@ -0,0 +1,52 @@
+import HeroSection from '@/components/partnerships/freemonth/HeroSection';
+import FeatureSection from '@/components/partnerships/freemonth/FeatureSection';
+import Footer from '@/components/layout/footers/Footer';
+import Navbar from '@/components/layout/navbars/Navbar';
+import Layout from '@/components/layout/Layout';
+import cookies from '@/lib/cookies';
+
+const SpecialOffer = ({ metatagsDescriptions, langJson, navbarLang, footerLang, deviceLang, lang }) => {
+  const metatags = metatagsDescriptions.filter((desc) => desc.id === 'freemonth');
+
+  return (
+    <Layout
+      title={metatags[0].title}
+      description={metatags[0].description}
+      segmentName="Freemonth Partnership"
+      lang={lang}
+    >
+      <Navbar textContent={navbarLang} lang={deviceLang} cta={['default']} fixed darkMode={false} />
+
+      <HeroSection textContent={langJson.template.HeroSection} lang={lang} />
+
+      <FeatureSection textContent={langJson.template.FeatureSection} />
+
+      <Footer textContent={footerLang} lang={deviceLang} darkMode={false} />
+    </Layout>
+  );
+};
+
+export async function getServerSideProps(ctx) {
+  const lang = ctx.locale;
+  const deviceLang = ctx.locale;
+
+  const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/${lang}/partnerships.json`);
+  const navbarLang = require(`@/assets/lang/${lang}/navbar.json`);
+  const footerLang = require(`@/assets/lang/${lang}/footer.json`);
+
+  cookies.setReferralCookie(ctx);
+
+  return {
+    props: {
+      lang,
+      deviceLang,
+      metatagsDescriptions,
+      langJson,
+      navbarLang,
+      footerLang,
+    },
+  };
+}
+
+export default SpecialOffer;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5a21daa3a..7ec1deda7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,7 +16,6 @@ import { CouponType } from '@/lib/types';
 import FirstWhatWeDoSection from '@/components/home/FirstWhatWeDoSection';
 import SecondWhatWeDoSection from '@/components/home/SecondWhatWeDoSection';
 import { useRouter } from 'next/router';
-import { GetServerSidePropsContext } from 'next';
 
 const Home = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'home');
@@ -72,7 +71,7 @@ const Home = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang })
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/legal.tsx b/src/pages/legal.tsx
index ee004c620..d1242dafd 100644
--- a/src/pages/legal.tsx
+++ b/src/pages/legal.tsx
@@ -3,7 +3,6 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import Layout from '@/components/layout/Layout';
 import cookies from '@/lib/cookies';
 import TermsAndConditionsOverview from '@/components/legal/TermsAndConditionsOverview';
-import { GetServerSidePropsContext } from 'next';
 
 const Legal = ({ lang, metatagsDescriptions, textContent, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'legal');
@@ -19,7 +18,7 @@ const Legal = ({ lang, metatagsDescriptions, textContent, navbarLang, footerLang
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/lifetime/celebration/[filename].tsx b/src/pages/lifetime/celebration/[filename].tsx
index c269d634f..5fdf11890 100644
--- a/src/pages/lifetime/celebration/[filename].tsx
+++ b/src/pages/lifetime/celebration/[filename].tsx
@@ -12,7 +12,6 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import Navbar from '@/components/layout/navbars/Navbar';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
-import { GetServerSidePropsContext } from 'next';
 
 const ALLOWED_PATHS = ['canada', 'usa', 'france', 'belgium'];
 
@@ -67,7 +66,7 @@ const LifetimeCelebrationTemplate = ({
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -101,9 +100,9 @@ const LifetimeCelebrationTemplate = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   let lang = 'en';
-  const pathname = ctx.params?.filename as string;
+  const pathname = ctx.params.filename;
 
   if (['france', 'belgium'].includes(pathname)) {
     lang = 'fr';
diff --git a/src/pages/lifetime/index.tsx b/src/pages/lifetime/index.tsx
index 98514e595..fb0792ad2 100644
--- a/src/pages/lifetime/index.tsx
+++ b/src/pages/lifetime/index.tsx
@@ -8,9 +8,8 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/lifetime/CtaSection';
 import TestimonialsSection from '@/components/home/TestimonialsSection';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
-import { GetServerSidePropsContext } from 'next';
 
-const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, footerLang, navbarLang }) => {
+const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, footerLang, deviceLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
   const discount = 0.25;
 
@@ -20,7 +19,7 @@ const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, foot
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -52,8 +51,9 @@ const Lifetime = ({ lang, metatagsDescriptions, langJson, testimonialsJson, foot
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
+  const deviceLang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const langJson = require(`@/assets/lang/${lang}/lifetime.json`);
@@ -66,6 +66,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   return {
     props: {
       lang,
+      deviceLang,
       metatagsDescriptions,
       langJson,
       testimonialsJson,
diff --git a/src/pages/lifetime_special.tsx b/src/pages/lifetime_special.tsx
index 687a080e2..014ed5df0 100644
--- a/src/pages/lifetime_special.tsx
+++ b/src/pages/lifetime_special.tsx
@@ -9,7 +9,6 @@ import CtaSection from '@/components/lifetime/CtaSection';
 import TestimonialsSection from '@/components/home/TestimonialsSection';
 import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
-import { GetServerSidePropsContext } from 'next';
 
 const LifetimeSpecial = ({
   lang,
@@ -29,7 +28,7 @@ const LifetimeSpecial = ({
       description={metatags[0].description}
       segmentName="Lifetime"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed mode="payment" isLinksHidden />
 
@@ -55,7 +54,7 @@ const LifetimeSpecial = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
diff --git a/src/pages/locker.tsx b/src/pages/locker.tsx
index 09ac1e67d..41f068799 100644
--- a/src/pages/locker.tsx
+++ b/src/pages/locker.tsx
@@ -10,7 +10,6 @@ import PriceTable from '@/components/annual-plans-for-affiliates/components/Pric
 import { checkout } from '@/lib/auth';
 import { CouponType } from '@/lib/types';
 import usePricing from '@/hooks/usePricing';
-import { GetServerSidePropsContext } from 'next';
 
 export default function Locker({ metatagsDescriptions, navbarLang, footerLang, lang, textContent }) {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -49,12 +48,12 @@ export default function Locker({ metatagsDescriptions, navbarLang, footerLang, l
   );
 }
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const textContent = require('@/assets/lang/en/locker.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const textContent = require(`@/assets/lang/en/locker.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
 
   return {
     props: {
diff --git a/src/pages/media-area.tsx b/src/pages/media-area.tsx
index a27bd22fc..ef8accce9 100644
--- a/src/pages/media-area.tsx
+++ b/src/pages/media-area.tsx
@@ -10,7 +10,6 @@ import SocialProofSection from '@/components/home/SocialProofSection';
 import ThirdFeaturesSection from '@/components/media-area/FeatureSection';
 import InternxtInTheNews from '@/components/media-area/InternxtInTheNews';
 import AnalysisSection from '@/components/media-area/AnalysisSection';
-import { GetServerSidePropsContext } from 'next';
 
 const MediaArea = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang, downloadURL }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'media-area');
@@ -44,13 +43,13 @@ const MediaArea = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLan
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/media-area.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/media-area.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/mightydeals.tsx b/src/pages/mightydeals.tsx
index fc6c34faf..e09661684 100644
--- a/src/pages/mightydeals.tsx
+++ b/src/pages/mightydeals.tsx
@@ -13,7 +13,6 @@ import SignUp from '@/components/auth/SignUp';
 import { X } from '@phosphor-icons/react';
 import Link from 'next/link';
 import moment from 'moment';
-import { GetServerSidePropsContext } from 'next';
 
 const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
   const [openDialog, setOpenDialog] = useState(false);
@@ -31,15 +30,15 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
       description={metatags[0].description}
       segmentName="MightyDeals"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       {openDialog ? (
-        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
+        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="MIGHTYDEALS" />
           </div>
         </div>
@@ -64,9 +63,9 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
 
       <div className="flex w-full flex-row items-center justify-center space-x-4 py-16">
         <Link href="/" locale={lang} className="flex flex-shrink-0">
-          <img loading="lazy" src={'../../logos/internxt/cool-gray-90.svg'} alt="Internxt logo" />
+          <img loading="lazy" src={`../../logos/internxt/cool-gray-90.svg`} alt="Internxt logo" />
         </Link>
-        <p className={'text-xs text-cool-gray-60'}>
+        <p className={`text-xs text-cool-gray-60`}>
           {footerLang.FooterSection.copyright.line1 + year + footerLang.FooterSection.copyright.line2}
         </p>
       </div>
@@ -74,14 +73,14 @@ const MightyDeals = ({ lang, metatagsDescriptions, langJson, footerLang, deviceL
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/techcult.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/techcult.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/newsletter-subscribe.tsx b/src/pages/newsletter-subscribe.tsx
index 6f29db108..d6ecc6e92 100644
--- a/src/pages/newsletter-subscribe.tsx
+++ b/src/pages/newsletter-subscribe.tsx
@@ -6,7 +6,6 @@ import FileParallaxSection from '@/components/home/FileParallaxSection';
 import MakePrivacySection from '@/components/newsletter/MakePrivacySection';
 import WhatGetSection from '@/components/newsletter/WhatGetSection';
 import CtaSection from '@/components/shared/CtaSection';
-import { GetServerSidePropsContext } from 'next';
 
 const Newsletter = ({ lang, metatagsDescriptions, textContent, navbar, footer }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'newsletter-subscribe');
@@ -29,13 +28,13 @@ const Newsletter = ({ lang, metatagsDescriptions, textContent, navbar, footer })
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const navbar = require('@/assets/lang/en/navbar.json');
-  const textContent = require('@/assets/lang/en/newsletter.json');
-  const footer = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const navbar = require(`@/assets/lang/en/navbar.json`);
+  const textContent = require(`@/assets/lang/en/newsletter.json`);
+  const footer = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/open-source.tsx b/src/pages/open-source.tsx
index 0df6855c9..fa7088a3a 100644
--- a/src/pages/open-source.tsx
+++ b/src/pages/open-source.tsx
@@ -10,9 +10,8 @@ import WhatAreTheBenefits from '@/components/open-source/WhatAreTheBenefits';
 import WhatIsOSS from '@/components/open-source/WhatIsOSS';
 import CtaSection from '@/components/shared/CtaSection';
 import { downloadDriveLinks } from '@/lib/get-download-url';
-import { GetServerSidePropsContext } from 'next';
 
-const CTA_SIGNUP_URL = 'https://drive.internxt.com/new';
+const CTA_SIGNUP_URL = `https://drive.internxt.com/new`;
 
 const GITHUB_URL = 'https://github.com/internxt';
 
@@ -47,7 +46,7 @@ const OpenSource = ({ lang, metatagsDescriptions, langJson, navbarLang, footerLa
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const download = await downloadDriveLinks();
 
diff --git a/src/pages/partner-discount.tsx b/src/pages/partner-discount.tsx
index ac594f5f5..a9483e0b2 100644
--- a/src/pages/partner-discount.tsx
+++ b/src/pages/partner-discount.tsx
@@ -18,7 +18,7 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
 
       <HeroSection textContent={langJson.HeroSection} />
 
-      <PaymentSection textContent={langJson.PaymentSection} />
+      <PaymentSection textContent={langJson.PaymentSection} lang={lang} />
 
       <FeatureSection textContent={langJson.FeatureSection} />
 
@@ -31,12 +31,12 @@ const Annual = ({ metatagsDescriptions, langJson, navbarLang, footerLang, infoSe
   );
 };
 
-export async function getServerSideProps() {
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/partner-discount.json');
-  const infoSectionLang = require('@/assets/lang/en/home.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+export async function getServerSideProps(ctx) {
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/partner-discount.json`);
+  const infoSectionLang = require(`@/assets/lang/en/home.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   return {
     props: {
diff --git a/src/pages/password-checker.tsx b/src/pages/password-checker.tsx
index 3ec3100b7..638df665d 100644
--- a/src/pages/password-checker.tsx
+++ b/src/pages/password-checker.tsx
@@ -12,7 +12,6 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import { ToolsSection } from '@/components/shared/ToolsSection';
 import CtaSection from '@/components/shared/CtaSection';
 import InfoSection from '@/components/password-generator/InfoSection';
-import { GetServerSidePropsContext } from 'next';
 
 const PasswordChecker = ({
   metatagsDescriptions,
@@ -27,11 +26,11 @@ const PasswordChecker = ({
 
   return (
     <>
-      <Script id="schema-pass-checker" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script id="breadcrumb-pass-checker" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Password Checker', 'password-checker')}
       </Script>
 
@@ -62,7 +61,11 @@ const PasswordChecker = ({
 
         <CtaSection textContent={langJson.CtaSection} url="https://drive.internxt.com/new" maxWidth="max-w-lg" />
 
-        <FeaturesSection textContent={langJson.FeaturesSection} lang={lang} />
+        <FeaturesSection
+          textContent={langJson.FeaturesSection}
+          bannerText={bannerLang.SignUpPwdCheckerBanner}
+          lang={lang}
+        />
 
         <ToolsSection textContent={toolsContent} lang={lang} />
 
@@ -76,7 +79,7 @@ const PasswordChecker = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/password-generator.tsx b/src/pages/password-generator.tsx
index 6c330aa59..841f8297a 100644
--- a/src/pages/password-generator.tsx
+++ b/src/pages/password-generator.tsx
@@ -10,7 +10,6 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { sm_breadcrumb, sm_faq } from '@/components/utils/schema-markup-generator';
 import Script from 'next/script';
-import { GetServerSidePropsContext } from 'next';
 
 const DRIVE_URL = 'https://drive.internxt.com/new';
 
@@ -27,11 +26,11 @@ const PasswordGenerator = ({
 
   return (
     <>
-      <Script id="schema-pass-generator" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script id="breadcrumb-pass-generator" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Password Generator', 'password-generator')}
       </Script>
 
@@ -61,7 +60,7 @@ const PasswordGenerator = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const downloadURL = await downloadDriveLinks();
 
   const lang = ctx.locale;
diff --git a/src/pages/pccomponentes-products.tsx b/src/pages/pccomponentes-products.tsx
index 056bb00d5..14c2bbb01 100644
--- a/src/pages/pccomponentes-products.tsx
+++ b/src/pages/pccomponentes-products.tsx
@@ -8,7 +8,6 @@ import CardSkeleton from '@/components/components/CardSkeleton';
 import PriceCard from '@/components/prices/PriceCard';
 import usePricing from '@/hooks/usePricing';
 import { CouponType } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -43,7 +42,7 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
     <Layout segmentName={pageName} title={metatags[0].title} description={metatags[0].description} lang={lang}>
       <div className="flex flex-col space-y-10">
         <div className="flex flex-col items-center space-y-9">
-          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
+          {/* Switch buttons (Individual plans | Lifetime plans | Business) */}
           <div id="billingButtons" className="flex flex-row rounded-lg bg-cool-gray-10 p-0.5">
             <button
               type="button"
@@ -63,7 +62,7 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
               onClick={() => {
                 setActiveSwitchPlan('Lifetime');
                 setBillingFrequency(Interval.Lifetime);
-                setPageName('Pricing Individuals Lifetime');
+                setPageName(`Pricing Individuals Lifetime`);
               }}
               className={`rounded-lg py-0.5 px-6 font-semibold ${
                 activeSwitchPlan === 'Lifetime' ? 'bg-white text-cool-gray-80 shadow-sm' : 'text-cool-gray-50'
@@ -190,10 +189,10 @@ const PCComponentesProducts = ({ metatagsDescriptions, textContent, lang }) => {
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = 'es';
-  const metatagsDescriptions = require('@/assets/lang/es/metatags-descriptions.json');
-  const textContent = require('@/assets/lang/es/priceCard.json');
+  const metatagsDescriptions = require(`@/assets/lang/es/metatags-descriptions.json`);
+  const textContent = require(`@/assets/lang/es/priceCard.json`);
 
   return {
     props: {
diff --git a/src/pages/pcloud-alternative.tsx b/src/pages/pcloud-alternative.tsx
index 854525a22..1b2e19a8a 100644
--- a/src/pages/pcloud-alternative.tsx
+++ b/src/pages/pcloud-alternative.tsx
@@ -10,7 +10,6 @@ import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/shared/CtaSection';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
 import cookies from '@/lib/cookies';
-import { GetServerSidePropsContext } from 'next';
 
 const pCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pcloud-alternative');
@@ -38,7 +37,7 @@ const pCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, fo
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 224394575..0cae686d9 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -15,7 +15,6 @@ import BestStorageSection from '@/components/pricing/BestStorageSection';
 import FileParallaxSection from '@/components/home/FileParallaxSection';
 import InfoSection from '@/components/home/InfoSection';
 import { CouponType } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textContent, homeComponentsLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
@@ -23,11 +22,11 @@ const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textConte
 
   return (
     <>
-      <Script id="schema-pricing" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script id="breadcrumb-pricing" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Pricing', 'pricing')}
       </Script>
 
@@ -67,7 +66,7 @@ const Pricing = ({ metatagsDescriptions, navbarLang, footerLang, lang, textConte
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const textContent = require(`@/assets/lang/${lang}/pricing.json`);
diff --git a/src/pages/privacy-directory.tsx b/src/pages/privacy-directory.tsx
index cf5605e27..eb597e1cd 100644
--- a/src/pages/privacy-directory.tsx
+++ b/src/pages/privacy-directory.tsx
@@ -12,7 +12,6 @@ import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generato
 import HeroSection2 from '@/components/privacy-directory/HeroSection2';
 import CtaSection from '@/components/shared/CtaSection';
 import { SIGNUP_DRIVE_WEB } from '@/constants';
-import { GetServerSidePropsContext } from 'next';
 
 const PrivacyDirectory = ({
   metatagsDescriptions,
@@ -27,11 +26,11 @@ const PrivacyDirectory = ({
 
   return (
     <>
-      <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.FaqSection.faq)}
       </Script>
 
-      <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Privacy Directory', 'privacy-directory')}
       </Script>
 
@@ -79,7 +78,7 @@ const PrivacyDirectory = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const navbarLang = require(`@/assets/lang/${lang}/navbar.json`);
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index dc711ad9a..dc61a19c9 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -16,7 +16,6 @@ import BetterTomorrowSection from '@/components/privacy/BetterTomorrowSection';
 import FeatureSection from '@/components/privacy/FeatureSection';
 import HeroSection2 from '@/components/privacy/HeroSection2';
 import ManifestoSection2 from '@/components/privacy/ManifestoSection2';
-import { GetServerSidePropsContext } from 'next';
 
 const newDesignLang = ['en', 'es', 'zh-tw'];
 
@@ -29,21 +28,21 @@ const Privacy = ({ metatagsDescriptions, langJson, navbarLang, footerLang, lang
     <>
       {newDesignLang.includes(lang) ? (
         <>
-          <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
+          <Script type="application/ld+json" strategy="beforeInteractive">
             {sm_faq(langJson.FaqSection.faq)}
           </Script>
 
-          <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
+          <Script type="application/ld+json" strategy="beforeInteractive">
             {sm_breadcrumb('Privacy', 'privacy')}
           </Script>
         </>
       ) : (
         <>
-          <Script id="schema-privacy" type="application/ld+json" strategy="beforeInteractive">
+          <Script type="application/ld+json" strategy="beforeInteractive">
             {sm_faq(langJson.ManifestoSection.FaqSection.faq)}
           </Script>
 
-          <Script id="breadcrumb-privacy" type="application/ld+json" strategy="beforeInteractive">
+          <Script type="application/ld+json" strategy="beforeInteractive">
             {sm_breadcrumb('Privacy', 'privacy')}
           </Script>
         </>
@@ -84,7 +83,7 @@ const Privacy = ({ metatagsDescriptions, langJson, navbarLang, footerLang, lang
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/sitemap.xml.ts b/src/pages/sitemap.xml.js
similarity index 100%
rename from src/pages/sitemap.xml.ts
rename to src/pages/sitemap.xml.js
diff --git a/src/pages/specialoffer/freeuser.tsx b/src/pages/specialoffer/freeuser.tsx
index fa448a3b7..67736f9e6 100644
--- a/src/pages/specialoffer/freeuser.tsx
+++ b/src/pages/specialoffer/freeuser.tsx
@@ -9,7 +9,6 @@ import { HeroSectionForSpecialOffer } from '@/components/specialoffer/HeroSectio
 import { InxtFeaturesSection } from '@/components/specialoffer/InxtFeaturesSection';
 import { WhatWeDoSectionForSpecialOffer } from '@/components/specialoffer/WhatWeDoSection';
 import { CouponType } from '@/lib/types';
-import { GetServerSidePropsContext } from 'next';
 
 const FreeUserPage = ({ metatagsDescriptions, footerLang, navbarLang, lang, textContent }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'free-user')[0];
@@ -52,7 +51,7 @@ const FreeUserPage = ({ metatagsDescriptions, footerLang, navbarLang, lang, text
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
   const textContent = require(`@/assets/lang/${lang}/specialoffer/free-user.json`);
diff --git a/src/pages/stackcommerce.tsx b/src/pages/stackcommerce.tsx
index 61fc437c6..c1c6ace21 100644
--- a/src/pages/stackcommerce.tsx
+++ b/src/pages/stackcommerce.tsx
@@ -1,7 +1,4 @@
 import { useEffect, useState } from 'react';
-import { GetServerSidePropsContext } from 'next';
-import moment from 'moment';
-import { X } from '@phosphor-icons/react';
 
 import HeroSection from '@/components/lifetime/HeroSection';
 import FeatureSection from '@/components/lifetime/FeatureSection';
@@ -11,24 +8,13 @@ import cookies from '@/lib/cookies';
 import PaymentSection from '@/components/lifetime/PaymentSection';
 import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/lifetime/CtaSection';
+
 import SignUp from '@/components/auth/SignUp';
+import { X } from '@phosphor-icons/react';
+import moment from 'moment';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
 
-interface StackCommerceProps {
-  langJson: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  lang: string;
-}
-
-const StackCommerce = ({
-  lang,
-  metatagsDescriptions,
-  langJson,
-  footerLang,
-  navbarLang,
-}: StackCommerceProps): JSX.Element => {
+const StackCommerce = ({ lang, metatagsDescriptions, langJson, footerLang, deviceLang, navbarLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'lifetime');
   const year = moment().format('YYYY');
 
@@ -57,15 +43,15 @@ const StackCommerce = ({
       description={metatags[0].description}
       segmentName="StackCommerce"
       lang={lang}
-      specialOffer={'https://internxt.com/images/previewLink/LifetimePreviewLink.png'}
+      specialOffer={`https://internxt.com/images/previewLink/LifetimePreviewLink.png`}
     >
       {openDialog ? (
-        <div className={'fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0'}>
+        <div className={`fixed top-0 left-0 right-0 bottom-0 z-40 h-screen bg-black bg-opacity-50 px-5 lg:px-0`}>
           <div
             className={`absolute top-1/2 left-1/2
         z-20 flex w-max -translate-y-1/2 -translate-x-1/2 transform flex-col rounded-2xl bg-white p-7 text-neutral-900`}
           >
-            <X className={'absolute top-5 right-5 cursor-pointer'} size={24} onClick={() => setOpenDialog(false)} />
+            <X className={`absolute top-5 right-5 cursor-pointer`} size={24} onClick={() => setOpenDialog(false)} />
             <SignUp textContent={langJson.Auth} provider="STACKCOMMERCE" />
           </div>
         </div>
@@ -93,19 +79,21 @@ const StackCommerce = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
+  const deviceLang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/techcult.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/techcult.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   cookies.setReferralCookie(ctx);
 
   return {
     props: {
       lang,
+      deviceLang,
       metatagsDescriptions,
       langJson,
       navbarLang,
diff --git a/src/pages/startpage.tsx b/src/pages/startpage.tsx
index b741838c4..25fe9d218 100644
--- a/src/pages/startpage.tsx
+++ b/src/pages/startpage.tsx
@@ -11,23 +11,8 @@ import { checkout } from '@/lib/auth';
 
 import { CouponType } from '@/lib/types';
 import usePricing from '@/hooks/usePricing';
-import { GetServerSidePropsContext } from 'next';
 
-interface StartpageProps {
-  textContent: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  lang: string;
-}
-
-export default function Startpage({
-  metatagsDescriptions,
-  navbarLang,
-  footerLang,
-  lang,
-  textContent,
-}: StartpageProps): JSX.Element {
+export default function Startpage({ metatagsDescriptions, navbarLang, footerLang, lang, textContent }) {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pricing');
   const { currencyValue } = usePricing({});
   const offerDiscount = 25;
@@ -76,12 +61,12 @@ export default function Startpage({
   );
 }
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const textContent = require('@/assets/lang/en/startpage.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const textContent = require(`@/assets/lang/en/startpage.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
 
   return {
     props: {
diff --git a/src/pages/techradar-discount.tsx b/src/pages/techradar-discount.tsx
index 04b01e9fb..aed1676c6 100644
--- a/src/pages/techradar-discount.tsx
+++ b/src/pages/techradar-discount.tsx
@@ -5,25 +5,8 @@ import HeroSection from '@/components/techradar-discount/HeroSection';
 import PaymentsSection from '@/components/techradar-discount/PaymentsSection';
 import InfoSection from '@/components/techradar-discount/InfoSection';
 import Footer from '@/components/layout/footers/Footer';
-import { GetServerSidePropsContext } from 'next';
 
-interface PartnerDiscountProps {
-  langJson: Record<string, any>;
-  toolsContent: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  bannerLang: Record<string, any>;
-  lang: string;
-}
-
-const PartnerDiscount = ({
-  lang,
-  metatagsDescriptions,
-  navbarLang,
-  langJson,
-  footerLang,
-}: PartnerDiscountProps): JSX.Element => {
+const PartnerDiscount = ({ lang, metatagsDescriptions, navbarLang, langJson, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'techradar-discount');
 
   return (
@@ -41,13 +24,13 @@ const PartnerDiscount = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
-  const metatagsDescriptions = require('@/assets/lang/en/metatags-descriptions.json');
-  const langJson = require('@/assets/lang/en/techradar-discount.json');
-  const navbarLang = require('@/assets/lang/en/navbar.json');
-  const footerLang = require('@/assets/lang/en/footer.json');
+  const metatagsDescriptions = require(`@/assets/lang/en/metatags-descriptions.json`);
+  const langJson = require(`@/assets/lang/en/techradar-discount.json`);
+  const navbarLang = require(`@/assets/lang/en/navbar.json`);
+  const footerLang = require(`@/assets/lang/en/footer.json`);
 
   cookies.setReferralCookie(ctx);
 
diff --git a/src/pages/temporary-email.tsx b/src/pages/temporary-email.tsx
index 1ca9f3b46..d38d20e78 100644
--- a/src/pages/temporary-email.tsx
+++ b/src/pages/temporary-email.tsx
@@ -15,7 +15,7 @@ import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import { setup } from '@/lib/csrf';
 import { useRouter } from 'next/router';
 
-const TempEmail = (): JSX.Element => {
+const TempEmail = () => {
   const dialogAction = useGlobalDialog();
   const { locale: lang } = useRouter() as { locale: string };
 
@@ -30,11 +30,11 @@ const TempEmail = (): JSX.Element => {
 
   return (
     <>
-      <Script id="schema-temp-mail" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(textContent.SchemaMarkupQuestions.faq)}
       </Script>
 
-      <Script id="breadcrumb-temp-mail" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Temporary Email', 'temporary-email')}
       </Script>
 
@@ -61,7 +61,7 @@ const TempEmail = (): JSX.Element => {
   );
 };
 
-export const getServerSideProps = setup(async () => {
+export const getServerSideProps = setup(async (req, res) => {
   return { props: {} };
 });
 
diff --git a/src/pages/virus-scanner.tsx b/src/pages/virus-scanner.tsx
index 5969800de..eceb966bc 100644
--- a/src/pages/virus-scanner.tsx
+++ b/src/pages/virus-scanner.tsx
@@ -11,36 +11,17 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import TryInternxtBanner from '@/components/banners/TryInternxtBanner';
 
 import { sm_faq, sm_breadcrumb } from '@/components/utils/schema-markup-generator';
-import { GetServerSidePropsContext } from 'next';
-
-interface VirusScannerProps {
-  langJson: Record<string, any>;
-  toolsContent: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  bannerLang: Record<string, any>;
-  lang: string;
-}
 
-const Scan = ({
-  metatagsDescriptions,
-  langJson,
-  toolsContent,
-  navbarLang,
-  footerLang,
-  lang,
-  bannerLang,
-}: VirusScannerProps): JSX.Element => {
+const Scan = ({ metatagsDescriptions, langJson, toolsContent, navbarLang, footerLang, lang, bannerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'virus-scanner');
 
   return (
     <>
-      <Script id="schema-virus-scanner" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_faq(langJson.FaqSection.faq)}
       </Script>
 
-      <Script id="breadcrumb-virus-scanner" type="application/ld+json" strategy="beforeInteractive">
+      <Script type="application/ld+json" strategy="beforeInteractive">
         {sm_breadcrumb('Virus Scanner', 'virus-scanner')}
       </Script>
 
@@ -72,7 +53,7 @@ const Scan = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/vpn.tsx b/src/pages/vpn.tsx
index c7ba55a7e..9c5f881b6 100644
--- a/src/pages/vpn.tsx
+++ b/src/pages/vpn.tsx
@@ -11,25 +11,7 @@ import { ToolsSection } from '@/components/shared/ToolsSection';
 import FAQSection from '@/components/shared/FaqSection';
 import { VPN_CHROME_WEB_STORE } from '@/constants';
 
-interface VPNProps {
-  langJson: Record<string, any>;
-  toolsContent: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  bannerJson: Record<string, any>;
-  lang: string;
-}
-
-const VPN = ({
-  metatagsDescriptions,
-  langJson,
-  toolsContent,
-  bannerJson,
-  lang,
-  navbarLang,
-  footerLang,
-}: VPNProps): JSX.Element => {
+const VPN = ({ metatagsDescriptions, langJson, toolsContent, bannerJson, lang, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'vpn-extension');
 
   return (
@@ -59,7 +41,7 @@ const VPN = ({
   );
 };
 
-export async function getServerSideProps() {
+export async function getServerSideProps(ctx) {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/webdav.tsx b/src/pages/webdav.tsx
index 1112cab02..60a83e10a 100644
--- a/src/pages/webdav.tsx
+++ b/src/pages/webdav.tsx
@@ -9,14 +9,7 @@ import Footer from '@/components/layout/footers/Footer';
 import { SIGNUP_DRIVE_WEB } from '../constants';
 import FAQSection from '@/components/shared/FaqSection';
 
-interface WebDAVProps {
-  langJson: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-}
-
-const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }: WebDAVProps): JSX.Element => {
+const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'webDAV');
 
   return (
@@ -42,7 +35,7 @@ const WebDAV = ({ metatagsDescriptions, langJson, navbarLang, footerLang }: WebD
   );
 };
 
-export async function getServerSideProps() {
+export async function getServerSideProps(ctx) {
   const lang = 'en';
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/src/pages/what-does-google-know-about-me.tsx b/src/pages/what-does-google-know-about-me.tsx
index a42a34ccd..60f87ca61 100644
--- a/src/pages/what-does-google-know-about-me.tsx
+++ b/src/pages/what-does-google-know-about-me.tsx
@@ -6,20 +6,9 @@ import HeroSection from '@/components/what-does-google-know-about-me/HeroSection
 import ManageGoogleDataSection from '@/components/what-does-google-know-about-me/ManageGoogleDataSection';
 import { ToolsSection } from '@/components/shared/ToolsSection';
 import WhatGoogleKnowsSection from '@/components/what-does-google-know-about-me/WhatGoogleKnowsSection';
-import { GetServerSidePropsContext } from 'next';
 
 const URL_REDIRECT = 'https://drive.internxt.com/new';
 
-interface WhatDoesGoogleKnowAboutMeProps {
-  langJson: Record<string, any>;
-  toolsContent: Record<string, any>;
-  metatagsDescriptions: Record<string, any>;
-  navbarLang: Record<string, any>;
-  footerLang: Record<string, any>;
-  bannerLang: Record<string, any>;
-  lang: string;
-}
-
 const WhatDoesGoogleKnowAboutMe = ({
   lang,
   langJson,
@@ -28,7 +17,7 @@ const WhatDoesGoogleKnowAboutMe = ({
   navbarLang,
   footerLang,
   bannerLang,
-}: WhatDoesGoogleKnowAboutMeProps): JSX.Element => {
+}) => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'what-google-knows');
 
   return (
@@ -58,7 +47,7 @@ const WhatDoesGoogleKnowAboutMe = ({
   );
 };
 
-export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+export async function getServerSideProps(ctx: any) {
   const lang = ctx.locale;
 
   const metatagsDescriptions = require(`@/assets/lang/${lang}/metatags-descriptions.json`);
diff --git a/tests/redeem-codes.test.ts b/tests/redeem-codes.test.ts
index 02894539c..8d58f4191 100644
--- a/tests/redeem-codes.test.ts
+++ b/tests/redeem-codes.test.ts
@@ -1,14 +1,15 @@
-// // Tests that a valid GET request with correct code and provider parameters returns the expected response
-// import axios from 'axios';
-// import { expect } from '@jest/globals';
+// Tests that a valid GET request with correct code and provider parameters returns the expected response
+import axios from 'axios';
+import handler from '../pages/api/check_code';
+import { expect } from '@jest/globals';
 
-// test('test_valid_coupon', async () => {
-//   const apiCall = await axios.get('http://localhost:3000/api/check_code', {
-//     params: {
-//       code: '2tb_code_redeem',
-//       provider: 'TECHCULT',
-//     },
-//   });
+test('test_valid_coupon', async () => {
+  const apiCall = await axios.get('http://localhost:3000/api/check_code', {
+    params: {
+      code: '2tb_code_redeem',
+      provider: 'TECHCULT',
+    },
+  });
 
-//   expect(apiCall.status).toBe(404);
-// });
+  expect(apiCall.status).toBe(404);
+});
diff --git a/yarn.lock b/yarn.lock
index 4ff213b17..afc08ccf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1735,11 +1735,6 @@
   resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.1.5.tgz#762c368778a4040d52c5532b8af1692b66e16783"
   integrity sha512-B7vRm/w+P/+eavWZP5CB5Ul0ffK4Y7fpd/auWKuGvm+8pVgAJzbOK8O0s+DqzR+TwWkh5pHtJTuoAtaSvgCPzg==
 
-"@pkgr/core@^0.1.0":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
-  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
-
 "@popperjs/core@^2.8.6":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
@@ -3790,11 +3785,6 @@ eslint-config-next@13:
     eslint-plugin-react "^7.33.2"
     eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
 
-eslint-config-prettier@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
-  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
-
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
@@ -3869,14 +3859,6 @@ eslint-plugin-jsx-a11y@^6.7.1:
     object.entries "^1.1.7"
     object.fromentries "^2.0.7"
 
-eslint-plugin-prettier@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
-  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-    synckit "^0.8.6"
-
 "eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
@@ -4099,11 +4081,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
-  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
-
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -6249,18 +6226,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
-prettier-plugin-organize-imports@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz#77967f69d335e9c8e6e5d224074609309c62845e"
-  integrity sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==
-
 prettier-plugin-tailwindcss@0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
@@ -7312,14 +7277,6 @@ swc-plugin-coverage-instrument@^0.0.20:
   resolved "https://registry.yarnpkg.com/swc-plugin-coverage-instrument/-/swc-plugin-coverage-instrument-0.0.20.tgz#fdbd4b176e405c826c0e5146453ac7a6f1ba1cfa"
   integrity sha512-WXTGILCZE2hW61yrmxi6doN/UB4RT2K1JJSQVPn9JMJ6X4WJpZsesHi4lHy6qRKVsNIlHZvTWofkpuRi/WQUig==
 
-synckit@^0.8.6:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
-  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
-  dependencies:
-    "@pkgr/core" "^0.1.0"
-    tslib "^2.6.2"
-
 table@^6.0.9:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
@@ -7513,11 +7470,6 @@ tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
-  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
-
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"

From 3b6728683a64239d03314611e23384e231ee11a5 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 28 Jun 2024 10:18:12 +0200
Subject: [PATCH 06/10] feat: add lint-staged

---
 .husky/pre-commit |   2 +-
 .lintstagedrc     |   6 +
 package.json      |   6 +-
 yarn.lock         | 278 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 287 insertions(+), 5 deletions(-)
 create mode 100644 .lintstagedrc

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 8f56d750c..1f4c8f0d7 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1 @@
-yarn build
+yarn build; yarn lint-staged;
diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 000000000..acbb1dbe8
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,6 @@
+{
+  "*.{js,jsx,ts,tsx}": [
+    "eslint --fix",
+    "git add"
+  ]
+}
diff --git a/package.json b/package.json
index 73edf782b..ddae0196e 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,7 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
     "lint": "eslint './**/*.{js,ts,tsx}'",
-    "postinstall": "husky",
-    "prepack": "pinst --disable",
-    "postpack": "pinst --enable",
-    "prepare": "husky"
+    "postinstall": "husky"
   },
   "dependencies": {
     "@coderosh/images-to-pdf": "^2.1.0",
@@ -78,6 +75,7 @@
     "cypress": "^13.12.0",
     "eslint": "^7.32.0",
     "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
     "next-unused": "^0.0.6",
     "postcss": "8.4.31",
     "prettier": "2.7.1",
diff --git a/yarn.lock b/yarn.lock
index afc08ccf5..fc443a6ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2249,11 +2249,21 @@ ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.21.3"
 
+ansi-escapes@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.2.1.tgz#76c54ce9b081dad39acec4b5d53377913825fb0f"
+  integrity sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2273,6 +2283,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@^6.0.0, ansi-styles@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -2680,6 +2695,13 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 browserslist@^4.21.3:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
@@ -2860,6 +2882,11 @@ chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
+  integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
+
 character-entities-legacy@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
@@ -2932,6 +2959,13 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-4.0.0.tgz#3cecfe3734bf4fe02a8361cbdc0f6fe28c6a57ea"
+  integrity sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==
+  dependencies:
+    restore-cursor "^4.0.0"
+
 cli-spinners@^2.5.0:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
@@ -2954,6 +2988,14 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^7.0.0"
+
 client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -3007,6 +3049,11 @@ colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
+colorette@^2.0.20:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
 combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -3034,6 +3081,11 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@~12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
+  integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==
+
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -3278,6 +3330,13 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@~4.3.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
+  integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -3574,6 +3633,11 @@ electron-to-chromium@^1.4.648:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.659.tgz#e93af8119b6610cb4d2614a47508a74543b96ce5"
   integrity sha512-sRJ3nV3HowrYpBtPF9bASQV7OW49IgZC01Xiq43WfSE3RTCkK0/JidoCmR73Hyc1mN+l/H4Yqx0eNiomvExFZg==
 
+emoji-regex@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
+  integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4017,6 +4081,11 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
+eventemitter3@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 execa@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
@@ -4032,6 +4101,21 @@ execa@4.1.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@~8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
+  integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^8.0.1"
+    human-signals "^5.0.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^4.1.0"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -4172,6 +4256,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-cache-dir@^3.2.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
@@ -4333,6 +4424,11 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-east-asian-width@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz#5e6ebd9baee6fb8b7b6bd505221065f0cd91f64e"
+  integrity sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==
+
 get-intrinsic@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
@@ -4369,6 +4465,11 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-8.0.1.tgz#def9dfd71742cd7754a7761ed43749a27d02eca2"
+  integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
+
 get-symbol-description@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
@@ -4610,6 +4711,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+human-signals@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
+  integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
+
 husky@^9.0.11:
   version "9.0.11"
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9"
@@ -4823,6 +4929,18 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
+is-fullwidth-code-point@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz#9609efced7c2f97da7b60145ef481c787c7ba704"
+  integrity sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==
+  dependencies:
+    get-east-asian-width "^1.0.0"
+
 is-generator-function@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
@@ -4927,6 +5045,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -5334,11 +5457,32 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+lilconfig@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+lint-staged@^15.2.7:
+  version "15.2.7"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.2.7.tgz#97867e29ed632820c0fb90be06cd9ed384025649"
+  integrity sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==
+  dependencies:
+    chalk "~5.3.0"
+    commander "~12.1.0"
+    debug "~4.3.4"
+    execa "~8.0.1"
+    lilconfig "~3.1.1"
+    listr2 "~8.2.1"
+    micromatch "~4.0.7"
+    pidtree "~0.6.0"
+    string-argv "~0.3.2"
+    yaml "~2.4.2"
+
 listr2@^3.8.3:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
@@ -5353,6 +5497,18 @@ listr2@^3.8.3:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+listr2@~8.2.1:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.3.tgz#c494bb89b34329cf900e4e0ae8aeef9081d7d7a5"
+  integrity sha512-Lllokma2mtoniUOS94CcOErHWAug5iu7HOmDrvWgpw8jyQH2fomgB+7lZS4HWZxytUuQwkGOwe49FvwVaA85Xw==
+  dependencies:
+    cli-truncate "^4.0.0"
+    colorette "^2.0.20"
+    eventemitter3 "^5.0.1"
+    log-update "^6.0.0"
+    rfdc "^1.4.1"
+    wrap-ansi "^9.0.0"
+
 loader-utils@^1.0.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
@@ -5422,6 +5578,17 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+log-update@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.0.0.tgz#0ddeb7ac6ad658c944c1de902993fce7c33f5e59"
+  integrity sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==
+  dependencies:
+    ansi-escapes "^6.2.0"
+    cli-cursor "^4.0.0"
+    slice-ansi "^7.0.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -5584,6 +5751,14 @@ micromatch@^4.0.0, micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+micromatch@~4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
+  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -5601,6 +5776,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 minimatch@9.0.3:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
@@ -5782,6 +5962,13 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"
+  integrity sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
+  dependencies:
+    path-key "^4.0.0"
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -5916,6 +6103,13 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 opencollective-postinstall@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
@@ -6055,6 +6249,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -6095,6 +6294,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pidtree@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
+  integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
+
 pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -6822,6 +7026,14 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-4.0.0.tgz#519560a4318975096def6e609d44100edaa4ccb9"
+  integrity sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -6832,6 +7044,11 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
+rfdc@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
+  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
+
 rgbcolor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
@@ -6993,6 +7210,11 @@ signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signal-exit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -7016,6 +7238,22 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
+slice-ansi@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.0.tgz#cd6b4655e298a8d1bdeb04250a433094b347b9a9"
+  integrity sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -7090,6 +7328,11 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
+string-argv@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
+  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+
 string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -7099,6 +7342,15 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string-width@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.1.0.tgz#d994252935224729ea3719c49f7206dc9c46550a"
+  integrity sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
 string.prototype.matchall@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
@@ -7171,6 +7423,13 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -7186,6 +7445,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -7939,6 +8203,15 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.0.tgz#1a3dc8b70d85eeb8398ddfb1e4a02cd186e58b3e"
+  integrity sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -7984,6 +8257,11 @@ yaml@^1.10.0, yaml@^1.10.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@~2.4.2:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.5.tgz#60630b206dd6d84df97003d33fc1ddf6296cca5e"
+  integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"

From ceee305a33404f87fb35b0ebd055b9c52150aa60 Mon Sep 17 00:00:00 2001
From: Rafa <rafijv@gmail.com>
Date: Thu, 20 Jan 2022 12:19:19 +0100
Subject: [PATCH 07/10] fix: remove unused const

---
 src/components/home/HeroSection.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index fd8f3366b..362e62829 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,12 +1,11 @@
 import dynamic from 'next/dynamic';
 import { getImage } from '@/lib/getImage';
 import { HomeText } from '@/assets/types/home';
-import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
+import { useGlobalDialog } from '@/contexts/GlobalUIManager';
 import TitleAndOnePlan from './components/heroSection/TitleAndOnePlan';
-import { HomePageBannerForMobile } from '../banners/HomePageBannerForMobile';
-const Animation = dynamic(() => import('./components/Animation'));
 import Image from 'next/image';
 import Header from '../shared/Header';
+const Animation = dynamic(() => import('./components/Animation'));
 
 interface HeroSectionForHomeProps {
   textContent: HomeText['HeroSection'];
@@ -16,7 +15,6 @@ interface HeroSectionForHomeProps {
 
 export default function HeroSection({ textContent, lang, isHomePageV2 }: HeroSectionForHomeProps): JSX.Element {
   const { dialogIsOpen } = useGlobalDialog();
-  const shouldShowMobileBanner = dialogIsOpen(GlobalDialog.MobileBannerForHome);
   const previewImg = getImage('/images/lifetime/file_item.webp');
   const componentsFlow = isHomePageV2 ? 'flex-col-reverse' : 'flex-col';
 

From ed4085b0cf15e4957b5adbf3c98d604983b2cec5 Mon Sep 17 00:00:00 2001
From: Rafa <77491413+masterprog-cmd@users.noreply.github.com>
Date: Sat, 20 Jan 2024 12:19:19 +0100
Subject: [PATCH 08/10] fix: remove useless constant

---
 src/components/home/HeroSection.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 362e62829..030b908cd 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic';
 import { getImage } from '@/lib/getImage';
 import { HomeText } from '@/assets/types/home';
-import { useGlobalDialog } from '@/contexts/GlobalUIManager';
 import TitleAndOnePlan from './components/heroSection/TitleAndOnePlan';
 import Image from 'next/image';
 import Header from '../shared/Header';
@@ -14,7 +13,6 @@ interface HeroSectionForHomeProps {
 }
 
 export default function HeroSection({ textContent, lang, isHomePageV2 }: HeroSectionForHomeProps): JSX.Element {
-  const { dialogIsOpen } = useGlobalDialog();
   const previewImg = getImage('/images/lifetime/file_item.webp');
   const componentsFlow = isHomePageV2 ? 'flex-col-reverse' : 'flex-col';
 

From ca019d0a9594fcc615b95a8953cf21709de88f66 Mon Sep 17 00:00:00 2001
From: Rafa <rafijv@gmail.com>
Date: Fri, 21 Jan 2022 12:19:19 +0100
Subject: [PATCH 09/10] feat: Sidenav component

---
 src/components/home/HeroSection.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 030b908cd..0a1e9e892 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic';
 import { getImage } from '@/lib/getImage';
 import { HomeText } from '@/assets/types/home';
+import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import TitleAndOnePlan from './components/heroSection/TitleAndOnePlan';
 import Image from 'next/image';
 import Header from '../shared/Header';
@@ -13,6 +14,8 @@ interface HeroSectionForHomeProps {
 }
 
 export default function HeroSection({ textContent, lang, isHomePageV2 }: HeroSectionForHomeProps): JSX.Element {
+  const { dialogIsOpen } = useGlobalDialog();
+  const shouldShowMobileBanner = dialogIsOpen(GlobalDialog.MobileBannerForHome);
   const previewImg = getImage('/images/lifetime/file_item.webp');
   const componentsFlow = isHomePageV2 ? 'flex-col-reverse' : 'flex-col';
 

From 1ec7613a35947a8d85c7ceef5441b9d7feb68c04 Mon Sep 17 00:00:00 2001
From: Rafa <rafijv@gmail.com>
Date: Sun, 23 Jan 2022 12:19:19 +0100
Subject: [PATCH 10/10] feat: Sidenav component

---
 src/components/home/HeroSection.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 0a1e9e892..030b908cd 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic';
 import { getImage } from '@/lib/getImage';
 import { HomeText } from '@/assets/types/home';
-import { GlobalDialog, useGlobalDialog } from '@/contexts/GlobalUIManager';
 import TitleAndOnePlan from './components/heroSection/TitleAndOnePlan';
 import Image from 'next/image';
 import Header from '../shared/Header';
@@ -14,8 +13,6 @@ interface HeroSectionForHomeProps {
 }
 
 export default function HeroSection({ textContent, lang, isHomePageV2 }: HeroSectionForHomeProps): JSX.Element {
-  const { dialogIsOpen } = useGlobalDialog();
-  const shouldShowMobileBanner = dialogIsOpen(GlobalDialog.MobileBannerForHome);
   const previewImg = getImage('/images/lifetime/file_item.webp');
   const componentsFlow = isHomePageV2 ? 'flex-col-reverse' : 'flex-col';