feat: new roadmpa
This commit is contained in:
parent
303ee4ebe7
commit
8ac53382e2
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 2.7 MiB |
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue