Improve MineGeo UI and application flows

components/FirstVisitIntro.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useId, useRef } from "react";
-import { Compass, MapPin } from "lucide-react";
+import { MapPin } from "lucide-react";
 import { useI18n } from "./I18nProvider";
 
 const storageKey = "minegeo:intro:v1";
@@ -37,11 +37,12 @@ export function FirstVisitIntro() {
         }
       }
       seenThisSession = true;
+      // This is decorative delight, so reduced motion goes straight to the site.
       if (motion.matches || !element.isConnected) return;
       // A welcome must never interrupt another modal, such as account notices.
       if (document.querySelector("dialog[open]")) return;
       element.showModal();
-      end = setTimeout(finish, 4750);
+      end = setTimeout(finish, 4000);
     }, 0);
     const motionChanged = () => {
       if (motion.matches) finish();
@@ -62,26 +63,40 @@ export function FirstVisitIntro() {
       className="first-visit-intro"
       aria-labelledby={titleId}
     >
-      <div className="intro-landscape" aria-hidden="true">
-        <div className="intro-horizon" />
-        <div className="intro-terrain">
-          {Array.from({ length: 15 }, (_, index) => (
-            <i key={index} />
-          ))}
+      <div className="intro-cartography" aria-hidden="true" />
+      <div className="intro-content">
+        <div className="intro-map-stage" aria-hidden="true">
+          <span className="intro-coordinate intro-coordinate-left">
+            X: −128
+          </span>
+          <span className="intro-coordinate intro-coordinate-right">
+            Z: +256
+          </span>
+          <div className="intro-map-enter">
+            <div className="intro-map-surface">
+              <span className="intro-map-water" />
+              <span className="intro-map-path" />
+              <i className="intro-map-block intro-map-block-one" />
+              <i className="intro-map-block intro-map-block-two" />
+              <i className="intro-map-block intro-map-block-three" />
+              <span className="intro-map-target" />
+            </div>
+          </div>
+          <div className="intro-pin-anchor">
+            <MapPin className="intro-pin" strokeWidth={1.5} />
+          </div>
+          <span className="intro-bearing">N</span>
         </div>
-        <div className="intro-compass">
-          <span />
-          <span />
-          <Compass strokeWidth={1} />
-          <MapPin className="intro-pin" strokeWidth={1.4} />
+        <div className="intro-title">
+          <p className="eyebrow">{t("YOUR NEXT EXPEDITION")}</p>
+          <h2 id={titleId} aria-label={t("MineGeo")}>
+            <span aria-hidden="true">MINE</span>
+            <span aria-hidden="true">GEO</span>
+          </h2>
+          <p className="intro-subtitle">
+            {t("Find your place in a blocky world.")}
+          </p>
         </div>
-        <span className="intro-coordinate intro-coordinate-left">X: −128</span>
-        <span className="intro-coordinate intro-coordinate-right">Z: +256</span>
-      </div>
-      <div className="intro-title">
-        <p className="eyebrow">{t("YOUR NEXT EXPEDITION")}</p>
-        <h2 id={titleId}>{t("MineGeo")}</h2>
-        <p>{t("Find your place in a blocky world.")}</p>
       </div>
       <button
         type="button"
@@ -89,7 +104,7 @@ export function FirstVisitIntro() {
         autoFocus
         onClick={() => dialog.current?.close()}
       >
-        {t("Skip intro")} <span aria-hidden="true">↵</span>
+        {t("Skip intro")} <span aria-hidden="true">Esc</span>
       </button>
     </dialog>
   );