[-]:Fix/remove unused imports

src/components/ai-detector/FeatureSliderImg.tsx

@@ -1,11 +1,6 @@
-import { Fragment, useState } from 'react';
-import RevealX from '@/components/components/RevealX';
 import Image from 'next/image';
 
-const FeaturesSliderImg = ({ textContent, cardInfo, backgroundClass = 'bg-white' }) => {
-  const [cardIndex, setCardIndex] = useState(0);
-  const DescriptionIcon = cardInfo[cardIndex].icon;
-
+const FeaturesSliderImg = ({ textContent, cardInfo }) => {
   return (
     <section className={`overflow-hidden bg-gray-1`}>
       <section className="flex flex-col items-center justify-center space-y-12 overflow-hidden px-5 py-20">

src/components/annual-plans-for-affiliates/components/PriceTable.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Transition } from '@headlessui/react';
 import CardSkeleton from '@/components/components/CardSkeleton';
 
 import PriceCard from './PriceCard';
-import { CurrencyCircleDollar, Detective, FolderLock, Lifebuoy } from '@phosphor-icons/react';
+import { CurrencyCircleDollar, Lifebuoy } from '@phosphor-icons/react';
 
 import OpenSource from '../../../../public/icons/open-source.svg';
 import usePricing from '@/hooks/usePricing';
@@ -26,9 +27,8 @@ const PriceTable: React.FC<PriceTableProps> = ({
   billingFrequency,
   isStartPage,
   titleFontSize,
-  isCloudwards,
 }) => {
-  const { products, currency, lifetimeCoupons, currencyValue, loadingCards } = usePricing({
+  const { products, currency, lifetimeCoupons, loadingCards } = usePricing({
     fetchLifetimeCoupons: true,
   });
 

src/components/antivirus/DownloadComponent.tsx

@@ -1,25 +1,7 @@
-import { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { ArrowCircleRight } from '@phosphor-icons/react';
 
-const DownloadComponent = ({ textContent, lang, download }) => {
-  const [OS, setOS] = useState('');
-
-  function getOS() {
-    const osList = [
-      { keyword: 'Win', name: 'Windows' },
-      { keyword: 'Mac', name: isMobile ? 'iPad' : 'MacOS' },
-      { keyword: 'Linux', name: 'Linux' },
-    ];
-
-    const res = osList.find((os) => window.navigator.appVersion.indexOf(os.keyword) !== -1);
-    return res ? res.name : `Unknown (${window.navigator.appVersion})`;
-  }
-
-  useEffect(() => {
-    setOS(getOS());
-  }, []);
-
+const DownloadComponent = ({ textContent, download }) => {
   return (
     <div className="flex w-full flex-col items-center justify-center space-y-9 pb-6">
       <p className="text-center text-4xl font-semibold text-gray-100">{textContent.downloadTitle}</p>

src/components/antivirus/HeroSection.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import DownloadComponent from './DownloadComponent';
 import { isMobile } from 'react-device-detect';
 
-const HeroSection = ({ textContent, lang, download }) => (
+const HeroSection = ({ textContent, download }) => (
   <section className="flex w-full flex-col px-2">
     <div className="flex flex-col items-center pt-32 lg:pt-40">
       <div className="flex flex-col items-center justify-center space-y-6 px-5 text-center">
@@ -60,7 +60,7 @@ const HeroSection = ({ textContent, lang, download }) => (
         </div>
       </div>
 
-      {!isMobile && <DownloadComponent textContent={textContent.DownloadLinks} lang={lang} download={download} />}
+      {!isMobile && <DownloadComponent textContent={textContent.DownloadLinks} download={download} />}
     </div>
   </section>
 );

src/components/banners/BitdefenderBanner.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { getImage } from '@/lib/getImage';
 import { X } from '@phosphor-icons/react';
 import Image from 'next/image';
@@ -10,7 +10,6 @@ interface BitdefenderBannerProps {
 }
 
 const BitdefenderBanner = ({ languageForImage, isTempMail }: BitdefenderBannerProps) => {
-  const router = useRouter();
   const [showBanner, setShowBanner] = useState<boolean>(false);
 
   useEffect(() => {

src/components/business/WhatCanWeDo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { getImage } from '@/lib/getImage';
 import Image from 'next/image';
 import { Fragment, useState } from 'react';
@@ -11,27 +12,23 @@ interface WhatCanWeDoProps {
 
 export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
   const [selectedTab, setSelectedTab] = useState<number>(0);
-  const [isTransitioning, setIsTransitioning] = useState(false);
 
   const onRightArrowClick = () => {
     const newIndex = selectedTab === textContent.cards.length - 1 ? 0 : selectedTab + 1;
-    onTabSelectorButtonClicked(newIndex);
+    setSelectedTab(newIndex);
   };
 
   const onLeftArrowClick = () => {
     const newIndex = selectedTab === 0 ? textContent.cards.length - 1 : selectedTab - 1;
-    onTabSelectorButtonClicked(newIndex);
+    setSelectedTab(newIndex);
   };
 
   const onTabSelectorButtonClicked = (tabId: number) => {
     if (selectedTab !== tabId) {
-      setIsTransitioning(true);
-      setTimeout(() => {
-        setSelectedTab(tabId);
-        setIsTransitioning(false);
-      }, 200);
+      setSelectedTab(tabId);
     }
   };
+
   const isLastTab = selectedTab === textContent.cards.length - 1;
 
   return (
@@ -46,28 +43,28 @@ export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
           <h2 className="text-3xl font-semibold lg:text-5xl">{textContent.title}</h2>
           <h3 className="text-xl">{textContent.description}</h3>
         </div>
+
         <div className="hidden max-w-[1330px] flex-row items-start py-20 lg:flex">
           <div className="flex flex-col">
-            {textContent.cards.map((info, index) => (
+            {textContent.cards.map((info: any, index: number) => (
               <Fragment key={info.title}>
                 <button
                   className={`flex ${
                     selectedTab === index ? 'border-primary' : 'border-gray-10'
                   } cursor-pointer flex-row items-center border-r-4 p-2 pr-8`}
-                  onClick={() => {
-                    onTabSelectorButtonClicked(index);
-                  }}
+                  onClick={() => onTabSelectorButtonClicked(index)}
                 >
-                  <p className=" text-start text-2xl font-medium  text-white hover:text-primary">{info.selectorTab}</p>
+                  <p className="text-start text-2xl font-medium text-white hover:text-primary">{info.selectorTab}</p>
                 </button>
                 <div className="h-8 border-r-4 border-gray-10 pr-8 last:hidden" />
               </Fragment>
             ))}
           </div>
-          <RevealX direction="left" className="flex flex-col justify-start">
+
+          <RevealX key={selectedTab} direction="left" className="flex flex-col justify-start">
             <div className="flex w-auto justify-center px-6">
               <div className="flex flex-col rounded-3xl pl-6">
-                <div className="flex  w-full max-w-[710px] flex-col space-y-6">
+                <div className="flex w-full max-w-[710px] flex-col space-y-6">
                   <p className="text-4xl font-semibold text-white">{textContent.cards[selectedTab].selectorTab}</p>
                   <ReactMarkdown className="font-regular text-xl text-white">
                     {textContent.cards[selectedTab].description}
@@ -87,46 +84,40 @@ export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
           </RevealX>
         </div>
 
-        {/*Mobile/Tablet View*/}
-        <div className="relative w-full snap-x snap-mandatory flex-row justify-start gap-6 lg:hidden">
-          <div className="flex w-full snap-x snap-mandatory space-y-5">
-            {textContent.cards.map((testimonial) => (
-              <div
-                key={testimonial.selectorTab}
-                className="rounded- flex w-full shrink-0 snap-center flex-col justify-end px-5"
-              >
-                <div className="flex h-full flex-col">
-                  <div className="flex min-h-[110px] flex-col items-end justify-end px-3">
-                    <p className="py-5 text-center text-3xl font-medium text-white">
-                      {textContent.cards[selectedTab].selectorTab}
-                    </p>
-                  </div>
+        <div className="relative w-full flex-row justify-start gap-6 lg:hidden">
+          <div className="flex w-full flex-col space-y-5">
+            <div className="flex w-full flex-col justify-end px-5">
+              <div className="flex h-full flex-col">
+                <div className="flex min-h-[110px] flex-col items-end justify-end px-3">
+                  <p className="py-5 text-center text-3xl font-medium text-white">
+                    {textContent.cards[selectedTab].selectorTab}
+                  </p>
+                </div>
 
-                  <div className="flex flex-row items-center justify-center space-x-2 py-4">
-                    {selectedTab !== 0 && (
-                      <>
-                        <button onClick={onLeftArrowClick} className="flex items-center text-white">
-                          <CaretLeft size={24} />
-                        </button>
-                        <DotsThree size={24} className="text-white"></DotsThree>
-                      </>
-                    )}
+                <div className="flex flex-row items-center justify-center space-x-2 py-4">
+                  {selectedTab !== 0 && (
+                    <>
+                      <button onClick={onLeftArrowClick} className="flex items-center text-white">
+                        <CaretLeft size={24} />
+                      </button>
+                      <DotsThree size={24} className="text-white" />
+                    </>
+                  )}
 
-                    <button
-                      onClick={onRightArrowClick}
-                      disabled={isLastTab}
-                      className={`${isLastTab ? 'text-gray-400 cursor-not-allowed' : 'hover:text-gray-300 text-white'}`}
-                    >
-                      <CaretRight size={24} />
-                    </button>
-                  </div>
+                  <button
+                    onClick={onRightArrowClick}
+                    disabled={isLastTab}
+                    className={`${isLastTab ? 'text-gray-400 cursor-not-allowed' : 'hover:text-gray-300 text-white'}`}
+                  >
+                    <CaretRight size={24} />
+                  </button>
+                </div>
 
-                  <div className="flex w-full max-w-[890px] flex-col">
-                    <p className="text-center text-xl text-white">{textContent.cards[selectedTab].description}</p>
-                  </div>
+                <div className="flex w-full max-w-[890px] flex-col">
+                  <p className="text-center text-xl text-white">{textContent.cards[selectedTab].description}</p>
                 </div>
               </div>
-            ))}
+            </div>
           </div>
         </div>
       </div>

src/components/cloud-storage-for-photos/ExplanationSection.tsx

@@ -1,16 +1,8 @@
-import Image from 'next/legacy/image';
-import SignUpBanner from '@/components/banners/SignUpBanner';
 import Link from 'next/link';
 
-const language = {
-  en: 'EN',
-  es: 'ES',
-};
-const ExplanationSection = ({ textContent, lang, ctaText, ctaLink }) => {
-  const langUpperCase = language[lang] || 'EN';
+const ExplanationSection = ({ textContent, ctaText, ctaLink }) => {
   return (
     <section className="overflow-hidden bg-white">
-      {/* Header Section */}
       <section className="flex flex-col items-center justify-center space-y-12 overflow-hidden px-5">
         <div className="flex w-full flex-col items-center justify-center space-y-6 pt-20 text-center lg:max-w-[75%]">
           <p className="text-30 font-semibold text-gray-100 lg:text-3xl">{textContent.title}</p>
@@ -44,7 +36,6 @@ const ExplanationSection = ({ textContent, lang, ctaText, ctaLink }) => {
             {ctaText}
           </Link>
         )}
-        {/* <div id="incontent_2" className="flex w-full justify-center"></div> */}
       </div>
     </section>
   );

src/components/metadata-remover/FeaturesSliderImg.tsx

@@ -1,11 +1,6 @@
-import { Fragment, useState } from 'react';
-import RevealX from '@/components/components/RevealX';
 import Image from 'next/image';
 
-const FeaturesSliderImg = ({ textContent, cardInfo, backgroundClass = 'bg-white' }) => {
-  const [cardIndex, setCardIndex] = useState(0);
-  const DescriptionIcon = cardInfo[cardIndex].icon;
-
+const FeaturesSliderImg = ({ textContent, cardInfo }) => {
   return (
     <section className={`overflow-hidden bg-gray-1`}>
       <section className="flex flex-col items-center justify-center space-y-12 overflow-hidden px-5 py-20">
@@ -17,7 +12,6 @@ const FeaturesSliderImg = ({ textContent, cardInfo, backgroundClass = 'bg-white'
         </div>
       </section>
 
-      {/* Mobile view */}
       <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-8 px-5 pb-20 md:grid-cols-2">
         {cardInfo.map((info) => (
           <div key={info.title} className="flex h-full flex-col items-start justify-start rounded-2xl bg-white">

src/components/metadata-remover/HeroSection.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, Fragment, createRef } from 'react';
 import { Transition } from '@headlessui/react';
 import { CheckCircle } from '@phosphor-icons/react';
@@ -10,18 +11,17 @@ interface HeroSectionProps {
   lang: string;
 }
 
-const HeroSection = ({ textContent, lang }: HeroSectionProps): JSX.Element => {
+const HeroSection = ({ textContent }: HeroSectionProps): JSX.Element => {
   const [isSelectedFile, setIsSelectedFile] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isError, setIsError] = useState(false);
   const [isProcessFinished, setIsProcessFinished] = useState(false);
-  const [processResult, setProcessResult] = useState<any>(null);
+  const [setProcessResult] = useState<any>(null);
   const [dragEnter, setDragEnter] = useState(false);
   const [fileSizeLimitReached, setFileSizeLimitReached] = useState(false);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
   const uploadFileRef = createRef<HTMLInputElement>();
   const [file, setFile] = useState<File | null>(null);
-  const [showPopup, setShowPopup] = useState(true);
   const isDragging = dragEnter;
   const maxFileSize = 104_857_600;
 
@@ -52,7 +52,6 @@ const HeroSection = ({ textContent, lang }: HeroSectionProps): JSX.Element => {
 
       setProcessResult({ success: true });
       setIsProcessFinished(true);
-      setShowPopup(true);
 
       const downloadLink = document.createElement('a');
       downloadLink.href = url;
@@ -66,7 +65,6 @@ const HeroSection = ({ textContent, lang }: HeroSectionProps): JSX.Element => {
       setIsSelectedFile(false);
       setIsProcessing(false);
       setIsProcessFinished(false);
-      setShowPopup(false);
     }
   };
 
@@ -95,7 +93,6 @@ const HeroSection = ({ textContent, lang }: HeroSectionProps): JSX.Element => {
     setIsProcessing(false);
     setIsProcessFinished(false);
     setIsError(false);
-    setShowPopup(false);
     setFile(null);
   };
 
@@ -144,30 +141,6 @@ const HeroSection = ({ textContent, lang }: HeroSectionProps): JSX.Element => {
     }
   };
 
-  const processAgainButton = () => {
-    return (
-      <Transition
-        as={Fragment}
-        show={!isError && isProcessFinished}
-        enter="transition duration-200 ease-in-out"
-        enterFrom="opacity-0 translate-y-2"
-        enterTo="opacity-100 translate-y-0"
-      >
-        <div className="flex w-full flex-row justify-center pt-6">
-          <button
-            type="button"
-            className="group -bottom-16 z-10 flex h-12 flex-row items-center justify-center space-x-2 rounded-lg border border-gray-10 bg-primary px-6 text-lg text-white transition duration-150 ease-out active:scale-98 sm:-bottom-14 sm:h-10 sm:px-5 sm:text-base"
-            onClick={() => {
-              handleRestartProcess();
-            }}
-          >
-            <p className="text-base font-medium">{textContent.scanAgain}</p>
-          </button>
-        </div>
-      </Transition>
-    );
-  };
-
   const renderProcessStatus = () => {
     if (isProcessing && !isProcessFinished) {
       return (