From ca6d15f64fc151ba6676d66dd8f933b219615e3e Mon Sep 17 00:00:00 2001
From: galenwinsor <galen_winsor@brown.edu>
Date: Thu, 27 Jun 2024 15:38:00 -0400
Subject: [PATCH 1/3] fix: max-w-1000px causes modal to be too small

---
 src/styles/global.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index a93dee5..ccffcb0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,7 +24,6 @@
 
     body > * {
         grid-column: 2;
-        @apply max-w-[1000px];
         @apply px-3;
     }
 

From f5b05cd89be8a91e84359c18cd4979ffeedf31db Mon Sep 17 00:00:00 2001
From: galenwinsor <galen_winsor@brown.edu>
Date: Thu, 27 Jun 2024 15:42:02 -0400
Subject: [PATCH 2/3] fix: error message color and size

---
 src/components/CustomInput.tsx    | 2 +-
 src/components/CustomTextarea.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
index c84a6ff..a916f25 100644
--- a/src/components/CustomInput.tsx
+++ b/src/components/CustomInput.tsx
@@ -34,7 +34,7 @@ export const CustomInput = React.forwardRef<
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
     {match !== undefined && (
diff --git a/src/components/CustomTextarea.tsx b/src/components/CustomTextarea.tsx
index e53a4c8..a6570c3 100644
--- a/src/components/CustomTextarea.tsx
+++ b/src/components/CustomTextarea.tsx
@@ -24,7 +24,7 @@ export const CustomTextarea = React.forwardRef<
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
   </Form.Field>

From 30debd76cfa5d2704a32c5afd16f2ad518a77b7a Mon Sep 17 00:00:00 2001
From: galenwinsor <galen_winsor@brown.edu>
Date: Thu, 27 Jun 2024 16:15:52 -0400
Subject: [PATCH 3/3] feat: add icons for project aims

---
 src/components/ProjectAim.astro | 29 ++++++++++++++++++++++++++
 src/layouts/Home.astro          |  1 -
 src/pages/index.astro           | 37 +++++++++++++++++----------------
 3 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ProjectAim.astro

diff --git a/src/components/ProjectAim.astro b/src/components/ProjectAim.astro
new file mode 100644
index 0000000..565432a
--- /dev/null
+++ b/src/components/ProjectAim.astro
@@ -0,0 +1,29 @@
+---
+interface Props {
+  color: "blue" | "primary" | "brown"
+}
+
+const { color } = Astro.props
+---
+
+<div class="flex-1 flex flex-col gap-4">
+  <span
+    class={color === "blue"
+      ? "text-secondary-blue-500"
+      : color === "primary"
+        ? "text-primary-500"
+        : "text-secondary-brown-500"}
+  >
+    <slot name="icon" />
+  </span>
+  <hr
+    class={`h-1 w-36 border-none ${
+      color === "blue"
+        ? "bg-secondary-blue-500"
+        : color === "primary"
+          ? "bg-primary-500"
+          : "bg-secondary-brown-500"
+    } `}
+  />
+  <p><slot /></p>
+</div>
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
index 5d330d0..0ed6024 100644
--- a/src/layouts/Home.astro
+++ b/src/layouts/Home.astro
@@ -2,7 +2,6 @@
 import BaseHead from "../components/BaseHead.astro"
 import Header from "../components/Header.astro"
 import Footer from "../components/Footer.astro"
-import FootPrint from "../components/svg/FootPrint"
 
 interface Props {
   title: string
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c9e5ff2..24a266b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,9 @@
 ---
 import Home from "../layouts/Home.astro"
-import CircleIcon from "../components/svg/Circle"
 import MiniMapSvg from "../components/svg/MiniMaps"
 import FootPrint from "../components/svg/FootPrint"
+import { GlobeIcon, Pencil1Icon, TargetIcon } from "@radix-ui/react-icons"
+import ProjectAim from "../components/ProjectAim.astro"
 ---
 
 <Home
@@ -13,8 +14,8 @@ import FootPrint from "../components/svg/FootPrint"
   <div class="hidden xl:block absolute top-24 left-12">
     <FootPrint />
   </div>
-  <div class="space-y-24">
-    <section class="space-y-6 py-6 lg:w-3/4">
+  <div class="flex flex-col gap-24">
+    <section class="space-y-8 py-6 lg:w-3/4">
       <p>
         The Mexican Migration Project (MMP) was created in 1982 by an interdisciplinary team of
         researchers to further our understanding of the complex process of Mexican migration to the
@@ -36,24 +37,24 @@ import FootPrint from "../components/svg/FootPrint"
         behavior of Mexican migrants.
       </p>
     </section>
-    <section class="space-y-4">
+    <section class="space-y-12">
       <h3 class="title font-semibold">Project Aims</h3>
-      <div class="flex space-x-6">
-        <div>
-          <CircleIcon styling="fill-secondary-blue-500" />
-          <p>Gather and maintain high quality data on Mexican migration to the US</p>
-        </div>
-        <div>
-          <CircleIcon styling="fill-primary-500" />
-          <p>Make data public and confidential</p>
-        </div>
-        <div>
-          <CircleIcon styling="fill-secondary-brown-500" />
-          <p>Investigate the evolving transnational dynamics of migration</p>
-        </div>
+      <div class="flex flex-wrap gap-20 justify-center">
+        <ProjectAim color="blue">
+          <TargetIcon slot="icon" height={36} width={36} />
+          Gather and maintain high quality data on Mexican migration to the US
+        </ProjectAim>
+        <ProjectAim color="primary">
+          <GlobeIcon slot="icon" height={36} width={36} />
+          Make data public and confidential
+        </ProjectAim>
+        <ProjectAim color="brown">
+          <Pencil1Icon slot="icon" height={36} width={36} />
+          Investigate the evolving transnational dynamics of migration
+        </ProjectAim>
       </div>
     </section>
-    <section class="space-y-4 lg:w-3/4">
+    <section class="space-y-12 lg:w-3/4">
       <h3 class="title font-semibold">Where are we located?</h3>
       <p>
         The MMP has offices, in Mexico, at the Departamento de Investigacion sobre Movimientos