Website update

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@fontsource/open-sans": "^5.2.7",
+    "@fontsource/ramaraja": "^5.2.8"
+  }
+}

website/src/assets/copy/values/Empathy.md

@@ -1,3 +1,3 @@
 ### Empathy
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+For people who are entitled to benefits and organizations who work to help them get those benefits

website/src/assets/copy/values/Inclusivity.md

@@ -1,3 +1,3 @@
 ### Inclusivity
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+Stand against discrimination with regard to race, gender, religion, etc.

website/src/assets/copy/values/Transparency.md

@@ -1,3 +1,3 @@
 ### Transparency
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+Remain open source and accessible

website/src/components/Contact.astro

@@ -14,7 +14,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Name:</label></div>
           <div>
             <input
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
               type="text"
               name="name"
               id="name"
@@ -24,7 +24,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Email:</label></div>
           <div>
             <input
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
               type="text"
               name="email"
               id="email"
@@ -34,21 +34,21 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Message:</label></div>
           <div>
             <textarea
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full h-40 border-2 border-sky-500 rounded-2xl"
               name="message"
               id="message"
               placeholder="Your message"></textarea>
           </div>
           <input
-            class="px-4 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
+            class="px-6 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
             type="submit"
             value="Submit"
             size=""
           />
         </form>
       </div>
       <div
-        class="sm:w-3/5 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 bg-center hidden sm:block"
       >
         <img class="h-full relative right-0.5" src={wedge.src} alt="" />
       </div>

website/src/components/Footer.astro

@@ -1,5 +1,7 @@
 <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>
+  <a class="underline text-lg" href=`${import.meta.env.BASE_URL}/#top`
+    >Return to top</a
+  >
+  <p class="text-2xl! font-semibold font-serif">Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>
 </footer>

website/src/components/Header.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 z-50">
+<header class="p-6 bg-sky-500 sm:static z-50">
   <div
     class="flex flex-row justify-between items-baseline gap-6 max-w-[130ch] mx-auto"
   >

website/src/components/Hero.astro

@@ -4,17 +4,17 @@ import { Content } from "../assets/copy/Hero.md";
 
 <section
   id="hero"
-  class="py-6 px-3 h-120 bg-slate-700/25 bg-[url(../assets/photos/man-with-laptop.png)] bg-cover bg-blend-overlay"
+  class="py-6 px-3 h-120 bg-[url(../assets/photos/man-with-laptop-small.png)] sm:bg-[url(../assets/photos/man-with-laptop.png)] bg-cover bg-center"
 >
   <div class="max-w-[130ch] mx-auto mt-20">
     <div
-      class="prose prose-p:text-slate-100 prose-headings:text-slate-100 prose-headings:text-left max-w-120"
+      class="prose prose-p:text-slate-100 prose-headings:text-slate-100 prose-headings:text-left max-w-120 prose-p:text-shadow-sm/35 prose-p:text-2xl! prose-p:leading-8! prose-headings:text-shadow-lg/15"
     >
       <Content />
     </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-6 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-700! text-lg font-bold font-serif"
       >
         See what we can do
       </p>

website/src/components/NavMenu.svelte

@@ -1,33 +1,46 @@
 <script>
+  import { quadOut } from "svelte/easing";
   import navLinks from "../data/navLinks";
+  import { fade } from "svelte/transition";
   let menuActive = $state(false);
   function toggleMenu() {
     menuActive = !menuActive;
   }
 </script>
 
-<nav class="hidden sm:block">
-  <ul class="flex gap-4">
+<nav class="hidden md:block">
+  <ul class="flex gap-6 text-lg">
     {#each navLinks as link}
       <li>
-        <a class="text-white" href={`${import.meta.env.BASE_URL}${link.path}`}>
+        <a
+          class="text-white font-bold"
+          href={`${import.meta.env.BASE_URL}${link.path}`}
+        >
           {link.title}
         </a>
       </li>
     {/each}
   </ul>
 </nav>
 <button
-  class="sm:hidden self-center text-white border border-white rounded-lg px-2 py-1"
-  onclick={toggleMenu}>Menu</button
+  class="md:hidden self-center text-white font-bold border-2 border-white rounded-lg px-2 py-1"
+  onclick={toggleMenu}
+  aria-label={menuActive ? "Close navigation menu" : "Open navigation menu"}
+  aria-controls="navMenu"
+  aria-expanded={menuActive}>Menu</button
 >
 {#if menuActive == true}
   <div
+    id="navMenu"
     class="fixed left-0 top-0 h-screen w-screen flex justify-center items-center bg-sky-500"
+    transition:fade={{ duration: 180, easing: quadOut }}
   >
     <button
-      class="fixed top-10 right-3 text-white border border-white rounded-lg px-2 py-1"
-      onclick={toggleMenu}>Close</button
+      class="fixed top-9.5 right-6 text-white font-bold border-2 border-white rounded-lg px-2 py-1"
+      onclick={toggleMenu}
+      aria-label={menuActive ? "Close navigation menu" : "Open navigation menu"}
+      aria-controls="navMenu"
+      aria-expanded={menuActive}>Close</button
     >
     <ul class="w-fit h-fit flex flex-col gap-4 items-center">
       {#each navLinks as link}

website/src/components/Process.astro

@@ -13,7 +13,7 @@ const steps = ["Create a Screener", "Add Logic", "Deploy Your Tool"];
         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!">
+              <p class="relative left-1 sm:left-2 text-center text-sm! sm:text-xl! text-white!">
                 {step}
               </p>
             </div>

website/src/components/Projects.astro

@@ -1,26 +1,30 @@
 ---
-import { Content } from "../assets/copy/Hero.md";
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
+const projects = await getCollection("projects");
 ---
 
 <section
   id="projects"
-  class="bg-sky-500/50 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-soft-light"
+  class="bg-sky-500/50 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-multiply"
 >
   <div class="max-w-[130ch] mx-auto py-12 px-3">
-    <h2 class="font-bold font-serif text-2xl text-center mb-6">
+    <h2 class="font-bold font-serif text-2xl text-center mb-9">
       BDT's Projects
     </h2>
     <ul class="flex flex-col sm:flex-row gap-6 justify-center">
-      <li class="bg-white/50 p-6 rounded-2xl">
-        <div class="prose">
-          <Content />
-        </div>
-      </li>
-      <li class="bg-white/50 p-6 rounded-2xl">
-        <div class="prose">
-          <Content />
-        </div>
-      </li>
+      {
+        projects.map(async (project) => {
+          const { Content } = await render(project);
+          return (
+            <li class="bg-white/50 p-6 rounded-2xl md:w-1/2">
+              <div class="prose">
+                <Content />
+              </div>
+            </li>
+          );
+        })
+      }
     </ul>
   </div>
 </section>

website/src/components/Values.astro

@@ -10,21 +10,21 @@ import inclusivity from "../assets/icons/inclusivity.png";
 
 <section id="values">
   <div class="max-w-[130ch] mx-auto py-12 px-3">
-    <h2 class="font-bold font-serif text-2xl text-center">Our Values</h2>
+    <h2 class="font-bold font-serif text-2xl text-center mb-6">Our Values</h2>
     <ul class="flex flex-col sm:flex-row justify-between">
-      <li class="flex flex-col gap-6 p-3 items-center">
+      <li class="flex flex-col gap-6 p-3 items-center sm:w-1/3">
         <Image class="w-42" src={empathy} alt="Man in office." />
         <div class="prose text-center">
           <Empathy />
         </div>
       </li>
-      <li class="flex flex-col gap-6 p-3 items-center">
+      <li class="flex flex-col gap-6 p-3 items-center sm:w-1/3">
         <Image class="w-42" src={transparency} alt="Man in office." />
         <div class="prose text-center">
           <Transparency />
         </div>
       </li>
-      <li class="flex flex-col gap-6 p-3 items-center">
+      <li class="flex flex-col gap-6 p-3 items-center sm:w-1/3">
         <Image class="w-42" src={inclusivity} alt="Man in office." />
         <div class="prose text-center">
           <Inclusivity />

website/src/content.config.ts

@@ -6,12 +6,6 @@ const projects = defineCollection({
     pattern: "**/*.md",
     base: "./src/projects",
   }),
-  schema: ({ image }) =>
-    z.object({
-      index: z.number(),
-      image: image(),
-      imageAlt: z.string(),
-    }),
 });
 
 const members = defineCollection({

website/src/layouts/Layout.astro

@@ -13,7 +13,7 @@ import Footer from "../components/Footer.astro";
     <title>Benefit Decision Toolkit</title>
   </head>
   <body
-    class="prose-headings:font-serif prose-headings:text-center prose-p:text-black prose-p:leading-6"
+    class="prose-headings:font-serif prose-headings:text-center prose-p:text-black prose-p:leading-6 prose-a:font-semibold prose-h2:text-3xl prose-h3:text-2xl prose-p:text-lg"
   >
     <div id="top"></div>
     <Header />