adjust spacing and colors, use map for items in process section

Author: earth-walker

website/src/assets/backgrounds/bubbles.png

@@ -6,7 +6,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
 <section id="contact">
   <div class="max-w-[130ch] mx-auto">
     <div class="flex flex-row">
-      <div class="w-1/2 p-6">
+      <div class="sm:w-2/5 p-6 py-12">
         <div class="prose">
           <Content />
         </div>
@@ -48,7 +48,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
         </form>
       </div>
       <div
-        class="w-1/2 bg-[url(../assets/photos/man-in-office.png)] bg-cover hidden sm:block"
+        class="sm:w-3/5 bg-[url(../assets/photos/man-in-office.png)] bg-cover hidden sm:block"
       >
         <img class="h-full relative right-0.5" src={wedge.src} alt="" />
       </div>

website/src/assets/backgrounds/chevron.svg

@@ -1,4 +1,4 @@
-<footer class="py-6 text-center flex flex-col gap-3 bg-green-300">
+<footer class="py-12 text-center flex flex-col gap-3 bg-green-300">
   <a href=`${import.meta.env.BASE_URL}/#top`>Return to top</a>
   <p>Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>

website/src/components/Contact.astro

@@ -4,7 +4,7 @@ import logo from "../assets/logos/bdt-logo-large-mono-dark.svg";
 import NavMenu from "./NavMenu.svelte";
 ---
 
-<header class="py-6 px-3 bg-sky-500 sticky top-0 sm:static">
+<header class="py-6 px-3 bg-sky-500 sticky top-0 sm:static z-50">
   <div
     class="flex flex-row justify-between items-baseline gap-6 max-w-[130ch] mx-auto"
   >

website/src/components/Footer.astro

@@ -14,7 +14,7 @@ import { Content } from "../assets/copy/Hero.md";
     </div>
     <a href=`${import.meta.env.BASE_URL}/#projects`>
       <p
-        class="mt-6 w-fit px-4 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-500 text-lg font-bold font-serif"
+        class="mt-6 w-fit px-4 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-500! text-lg font-bold font-serif"
       >
         See what we can do
       </p>

website/src/components/Header.astro

@@ -3,7 +3,7 @@ import { Content } from "../assets/copy/Overview.md";
 ---
 
 <section id="overview" class="bg-green-200">
-  <div class="max-w-[85ch] mx-auto py-6 px-3 prose">
+  <div class="max-w-[85ch] mx-auto py-12 px-3 prose">
     <Content />
   </div>
 </section>

website/src/components/Hero.astro

@@ -1,9 +1,25 @@
 ---
 import { Content } from "../assets/copy/Process.md";
+const steps = ["Create a Screener", "Add Logic", "Deploy Your Tool"];
 ---
 
-<section id="process">
-  <div class="max-w-[85ch] mx-auto py-6 px-3 prose">
-    <Content />
+<section id="process" class="border-b-2 border-sky-500">
+  <div class="max-w-[85ch] mx-auto py-12 px-3 flex flex-col gap-8 relative">
+    <div class="prose max-w-[85ch]">
+      <Content />
+    </div>
+    <div class="flex sm:gap-4 w-fit mx-auto">
+      {
+        steps.map((step) => (
+          <div class="bg-[url(../assets/backgrounds/chevron.svg)] bg-no-repeat bg-contain sm:h-40 sm:w-40 h-25 w-25 flex justify-center items-center">
+            <div class="w-15 sm:w-20">
+              <p class="relative left-1 sm:left-2 text-center text-sm sm:text-xl text-white!">
+                {step}
+              </p>
+            </div>
+          </div>
+        ))
+      }
+    </div>
   </div>
 </section>

website/src/components/Overview.astro

@@ -6,7 +6,7 @@ import { Content } from "../assets/copy/Hero.md";
   id="projects"
   class="bg-sky-500/50 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-soft-light"
 >
-  <div class="max-w-[130ch] mx-auto py-6 px-3">
+  <div class="max-w-[130ch] mx-auto py-12 px-3">
     <h2 class="font-bold font-serif text-2xl text-center mb-6">
       BDT's Projects
     </h2>

website/src/components/Process.astro

@@ -9,7 +9,7 @@ import inclusivity from "../assets/icons/inclusivity.png";
 ---
 
 <section id="values">
-  <div class="max-w-[130ch] mx-auto py-6 px-3">
+  <div class="max-w-[130ch] mx-auto py-12 px-3">
     <h2 class="font-bold font-serif text-2xl text-center">Our Values</h2>
     <ul class="flex flex-col sm:flex-row justify-between">
       <li class="flex flex-col gap-6 p-3 items-center">