feat: compressed link preview and svgs
updated link preview alt to be more descriptive, only show legend after canvas has loaded
|
@ -79,7 +79,8 @@ const METADATA = {
|
|||
URL: '/img/roadmap-preview.png',
|
||||
WIDTH: 1503,
|
||||
HEIGHT: 755,
|
||||
ALT: 'Progress tree preview',
|
||||
ALT:
|
||||
'Blurred background of the Oxen roadmap with the words progress tree',
|
||||
},
|
||||
},
|
||||
FAQ_PAGE: {
|
||||
|
|
|
@ -109,14 +109,22 @@ export default function Roadmap() {
|
|||
</div>
|
||||
)}
|
||||
<RoadmapCanvas loaded={loaded} canScaleMore={!isMobile && !isTablet} />
|
||||
<div className="absolute right-5 bottom-8">
|
||||
<img
|
||||
src={'/svgs/roadmap-key.svg'}
|
||||
alt="Oxen Roadmap Legend"
|
||||
height={isMobile ? 180 : 242}
|
||||
width={isMobile ? 150 : 200}
|
||||
/>
|
||||
</div>
|
||||
{loaded && (
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute right-4 bottom-4',
|
||||
'desktop:right-6 desktop:bottom-6',
|
||||
)}
|
||||
>
|
||||
{/* eslint-disable @next/next/no-img-element */}
|
||||
<img
|
||||
src={'/svgs/roadmap-key.svg'}
|
||||
alt="Oxen Roadmap Legend"
|
||||
height={isMobile ? 180 : 242}
|
||||
width={isMobile ? 150 : 200}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 215 KiB |
Before Width: | Height: | Size: 138 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 12 KiB |
11779
public/svgs/roadmap.svg
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 1.7 MiB |