feat: compressed link preview and svgs

updated link preview alt to be more descriptive, only show legend after canvas has loaded

constants/metadata.tsx

@@ -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: {

pages/roadmap.tsx

@@ -109,14 +109,22 @@ export default function Roadmap() {
         </div>
       )}
       <RoadmapCanvas loaded={loaded} canScaleMore={!isMobile && !isTablet} />
-      <div className="absolute right-5 bottom-8">
+      {loaded && (
-        <img
+        <div
-          src={'/svgs/roadmap-key.svg'}
+          className={classNames(
-          alt="Oxen Roadmap Legend"
+            'absolute right-4 bottom-4',
-          height={isMobile ? 180 : 242}
+            'desktop:right-6 desktop:bottom-6',
-          width={isMobile ? 150 : 200}
+          )}
-        />
+        >
-      </div>
+          {/* 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>
+      )}
     </>
   );
 }