feat: add link to documentation page

src/components/svg/Arrow.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+const CircleIcon: React.FC = () => {
+  return (
+    <>
+      <svg
+        fill="#317a7c"
+        version="1.1"
+        id="Capa_1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="48px"
+        height="48px"
+        viewBox="0 0 93.934 93.934"
+        stroke="#317a7c"
+      >
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+        <g id="SVGRepo_iconCarrier">
+          {" "}
+          <g>
+            {" "}
+            <path d="M46.967,0C21.029,0,0,21.028,0,46.967c0,25.939,21.029,46.967,46.967,46.967c25.939,0,46.967-21.027,46.967-46.967 C93.934,21.027,72.906,0,46.967,0z M55.953,66.295V54.3H18.652V39.634h37.303V27.639l19.326,19.328L55.953,66.295z"></path>{" "}
+          </g>{" "}
+        </g>
+      </svg>
+    </>
+  )
+}
+
+export default CircleIcon

src/pages/map.astro

@@ -1,9 +1,13 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import Arrow from "../components/svg/Arrow"
 ---
 
-<Layout title="Map" description="Mesoamerican Migration Project">
+<Layout title="Map of MMP Communities" description="Mesoamerican Migration Project">
   <div class="flex flex-col gap-6">
+    <section class="flex flex-col gap-3.5">
+      <img src="/images/MMP_Map.jpg" />
+    </section>
     <section class="flex flex-col gap-3.5">
       <h2>Design</h2>
       <p>
@@ -34,10 +38,12 @@ import Layout from "../layouts/Layout.astro"
         surveys are combined with those conducted in Mexico to generate a representative binational
         sample.
       </p>
-    </section>
-    <section class="flex flex-col gap-3.5">
-      <h2>Map of MMP Communities</h2>
-      <img src="/images/MMP_Map.jpg" />
+      <h3 class="flex items-center gap-3.5 text-secondary-blue-500 font-semibold">
+        Read the documentation
+        <a role="button" href="/documentation">
+          <Arrow />
+        </a>
+      </h3>
     </section>
   </div>
 </Layout>