feat: new roadmpa

package.json

@@ -32,6 +32,7 @@
     "react-redux": "^7.2.1",
     "react-scripts": "^4.0.2",
     "react-use": "^17.1.1",
+    "react-zoom-pan-pinch": "^2.5.0",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
     "sharp": "^0.30.1",

pages/roadmap.tsx

@@ -1,37 +1,66 @@
 import { METADATA, NAVIGATION } from '@/constants';
-
 import CustomHead from '@/components/CustomHead';
-import Image from 'next/image';
 import { SideMenuItem } from '@/state/navigation';
-import classNames from 'classnames';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import Image from 'next/image';
+import React from 'react';
+import { useScreenSize } from '@/hooks/screen';
 
 function Roadmap() {
+  const { isMobile, isTablet, isDesktop } = useScreenSize();
+
+  const renderTransformComp = () => {
+    return (
+      <TransformComponent wrapperStyle={{ height: '100vh' }}>
+        <Image
+          src={'/svgs/roadmap.svg'}
+          alt="roadmap"
+          height={6478}
+          width={11519}
+        />
+      </TransformComponent>
+    );
+  };
+
   return (
     <>
       <CustomHead
         title={NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label}
         metadata={METADATA.ROADMAP_PAGE}
       />
-      <div className="w-full h-full">
-        <div className="flex flex-col px-6 py-6 space-y-10">
-          <div
-            className={classNames(
-              'relative w-full mx-auto',
-              'desktop:max-w-3xl',
-            )}
-          >
-            <Image
-              src={`/img/roadmap.webp`}
-              alt="Oxen's Roadmap and Plans for the future."
-              width={1920}
-              height={3528}
-              layout="responsive"
-              quality={100}
-              priority={true}
-            />
-          </div>
-        </div>
-      </div>
+      {isDesktop && (
+        <TransformWrapper
+          /* className="relative w-full" */
+          initialScale={2.5}
+          initialPositionX={-1000}
+          initialPositionY={-200}
+        >
+          {renderTransformComp()}
+        </TransformWrapper>
+      )}
+      {isTablet && (
+        <TransformWrapper initialScale={2.5} initialPositionX={-550}>
+          {renderTransformComp()}
+        </TransformWrapper>
+      )}
+      {isMobile && (
+        <TransformWrapper
+          initialScale={4.5}
+          initialPositionX={-650}
+          initialPositionY={null}
+        >
+          {renderTransformComp()}
+        </TransformWrapper>
+      )}
+
+      {/*       <div className="absolute right-5 bottom-8">
+          <Image
+            src={'/svgs/roadmap-key.svg'}
+            alt="roadmap"
+            height={200}
+            width={125}
+          />
+        </div> */}
     </>
   );
 }

yarn.lock

@@ -12146,6 +12146,11 @@ react-use@^17.1.1:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
+react-zoom-pan-pinch@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.5.0.tgz#c247f2cbc836ae3bc9b2a5c8cdb478e24a267fb2"
+  integrity sha512-5o3DKACPRNXM5Yr1dfQ5sZsGpstEsam3ih3dNmaDUfpghwD7ENwCVAupbNiBHlJ1Jbowd6o9qamp/2FiWu2Jcg==
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"