Merge pull request #46 from brown-ccv/feat-map-page

Feat map page
brown-ccv · Jun 17, 2024 · 60783b8 · 60783b8
2 parents 5875878 + fd13905
commit 60783b8
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 6 deletions.
diff --git a/public/images/MMP_Map.jpg b/public/images/MMP_Map.jpg
diff --git a/src/components/svg/Arrow.tsx b/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
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -0,0 +1,36 @@
+---
+import BaseHead from "../components/BaseHead.astro"
+import Header from "../components/Header.astro"
+import Footer from "../components/Footer.astro"
+
+interface Props {
+  title: string
+  description: string
+  lede: string
+}
+
+const { title, description, lede } = Astro.props
+---
+
+<html lang="en">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+
+  <body class="grid grid-cols-1 px-16 xl:px-64">
+    <Header />
+    <main>
+      <article class="max-w-[1000px]">
+        <div>
+          <div class="flex flex-col gap-3 pb-6 md:w-1/2">
+            <h1 class="title">{title}</h1>
+            <h3 class="pb-48">{lede}</h3>
+          </div>
+          <hr class="pb-6" />
+          <slot />
+        </div>
+      </article>
+    </main>
+    <Footer />
+  </body>
+</html>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -22,11 +22,10 @@ const { title, description, lede } = Astro.props
     <main>
       <article class="max-w-[1000px]">
         <div>
-          <div class="flex flex-col gap-3 pb-6 md:w-1/2">
+          <div class="flex flex-col gap-3 pb-6">
             <h1 class="title">{title}</h1>
-            {lede && <h3 class="pb-48">{lede}</h3>}
           </div>
-          <hr />
+          <hr class="pb-6" />
           <slot />
         </div>
       </article>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Home from "../layouts/Home.astro"
 import CircleIcon from "../components/svg/Circle"
 import MiniMapSvg from "../components/svg/MiniMaps"
 import FootPrint from "../components/svg/FootPrint"
 ---
 
-<Layout
+<Home
   title="MESOAMERICAN MIGRATION PROJECT"
   description="Mesoamerican Migration Project"
   lede="Furthering understanding of Mexican migration to the United States"
@@ -66,4 +66,4 @@ import FootPrint from "../components/svg/FootPrint"
       </div>
     </section>
   </div>
-</Layout>
+</Home>
diff --git a/src/pages/map.astro b/src/pages/map.astro
@@ -0,0 +1,47 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Arrow from "../components/svg/Arrow"
+---
+
+<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>
+        The data contained in the various MMP databases have been gathered using an approach that
+        borrows from anthropological and sociological research methods. In particular, our study
+        employs the Ethnosurvey approach, which combines the techniques of ethnographic fieldwork
+        and representative survey sampling to gather qualitative as well as quantitative data. The
+        two kinds of empirical data are compared throughout the study to yield results of greater
+        validity than either ethnography or a sample survey could provide alone. This method was
+        designed to provide a picture of Mexican-US migration that is historically grounded,
+        ethnographically interpretable, quantitatively accurate, and rooted in receiving as well as
+        sending areas.
+      </p>
+      <p>
+        Each year, during the winter months (when seasonal migrants tend to return home), the MMP
+        randomly samples households in communities located throughout Mexico. After gathering
+        social, demographic, and economic information on the household and its members, interviewers
+        collect basic immigration information on each person’s first and last trip to the United
+        States. From household heads and spouses, we compile detailed year-by-year labor history and
+        migration information; in addition, for household head migrants, we administer a detailed
+        series of questions about their last trip to the U.S., focusing on employment, earnings, and
+        use of U.S. social services.
+      </p>
+      <p>
+        Following completion of the Mexican surveys, interviewers travel to destination areas in the
+        United States to administer identical questionnaires to migrants from the same communities
+        sampled in Mexico who have settled north of the border and no longer return home. These
+        surveys are combined with those conducted in Mexico to generate a representative binational
+        sample.
+      </p>
+      <a href="/documentation" class="flex items-center gap-3.5">
+        <span class="text-secondary-blue-500 font-semibold">Read the documentation</span>
+        <Arrow />
+      </a>
+    </section>
+  </div>
+</Layout>