use image component and remove more packages

app/components/home/HomePage.tsx

@@ -15,6 +15,7 @@ import Markets from './Markets'
 import Announcements from './Announcements'
 import { BuildWrapper, SwapStageWrapper } from './Wrappers'
 import BlackSphere from './BlackSphere'
+import Image from 'next/image'
 
 // type Markets = {
 //   perp: FormattedMarketData[]
@@ -65,15 +66,20 @@ const HomePage = () => {
           </div>
           <div className="col-span-12 lg:col-span-7 relative h-full flex justify-center">
             <BlackSphere />
-            <img
+            <Image
               className="w-3/4 absolute h-auto lg:-right-40 lg:top-1/2 lg:transform lg:-translate-y-1/2 xl:right-0 lg:w-full xl:w-[740px]"
               src="/images/new/trade-desktop.webp"
-              alt=""
+              alt="Trade"
+              width={1266}
+              height={901}
+              priority
             />
-            <img
-              className="sphere absolute lg:-bottom-24 xl:-bottom-40 -right-28 sm:-right-24 md:-right-14 lg:right-0 lg:left-0 xl:-left-16 w-80 h-auto"
+            <Image
+              className="sphere hidden md:block absolute lg:-bottom-24 xl:-bottom-40 -right-28 sm:-right-24 md:-right-14 lg:right-0 lg:left-0 xl:-left-16 w-80 h-auto"
               src="/images/new/orange-sphere.webp"
-              alt=""
+              width={631}
+              height={631}
+              alt="Orange sphere"
             />
           </div>
         </div>
@@ -156,11 +162,13 @@ const HomePage = () => {
                 linkText="Swap Now"
                 size="large"
               />
-              <img
+              <Image
                 className="shadow-lg mt-12 w-full sm:w-3/4 max-w-[800px] h-auto absolute left-1/2 -translate-x-1/2 bottom-16 md:bottom-10"
                 src="/images/new/swap-desktop.webp"
-                alt=""
+                alt="Swap"
                 id="swap-desktop"
+                width={1350}
+                height={620}
               />
             </div>
             {tokenIcons.map((icon, i) => (

package.json

@@ -37,13 +37,11 @@
     "dayjs": "^1.11.10",
     "decimal.js": "^10.4.3",
     "dotenv": "^16.3.1",
-    "immer": "^10.0.3",
     "next": "^14.0.3",
     "next-plausible": "^3.11.3",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-flip-numbers": "^3.0.8",
     "react-slick": "^0.30.1",
     "recharts": "^2.10.0",
     "slick-carousel": "^1.8.1"

yarn.lock

@@ -3400,11 +3400,6 @@ ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
   integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
 
-immer@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
-  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
-
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5400,13 +5395,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-flip-numbers@^3.0.8:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/react-flip-numbers/-/react-flip-numbers-3.0.8.tgz#45f9240c3afd51e55f40d3da2380ac9d68d83456"
-  integrity sha512-iEh4WScZFiGYkIWw3ATA352+XVWBsiKLg97CQHGXvpBetJFYazaYWMqv/mR2fGHdoDLA/2uES74e2wdEgy69BQ==
-  dependencies:
-    react-simple-animate "^3.0.1"
-
 react-is@^16.10.2, react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5427,11 +5415,6 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-simple-animate@^3.0.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.5.2.tgz#ab08865c8bd47872b92bd1e25902326bf7c695b3"
-  integrity sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==
-
 react-slick@^0.30.1:
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.30.1.tgz#9584e83282f6b70f26ceeac0a687870c8ca1618e"