complete implementation of visual design, start to set up content collections for projects and team members

Author: earth-walker

website/src/assets/backgrounds/wedge.svg

@@ -2,5 +2,3 @@
 
 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.
 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.
-
-There are so many eligibility screeners in existence, purpose-built, for a variety of specific use cases. There are high-level screeners and comprehensive screeners. There are single-benefit screeners and multi-benefit screeners. There are screeners meant to be used directly by the person seeking benefits and others meant to be used by caseworkers.

website/src/assets/copy/History.md

@@ -1,5 +1,3 @@
 ## Our Mission
 
 We are a team of problem solvers working to improve the usability and onboarding experience for creating benefit eligibility screeners, especially for non-technical users like benefits analysts.
-
-There are so many eligibility screeners in existence, purpose-built, for a variety of specific use cases. There are high-level screeners and comprehensive screeners.  There are single-benefit screeners and multi-benefit screeners. There are screeners meant to be used directly by the person seeking benefits and others meant to be used by caseworkers.

website/src/assets/copy/Mission.md

@@ -1,7 +1,6 @@
 ---
-import { Image } from "astro:assets";
 import { Content } from "../assets/copy/Contact.md";
-import manInOffice from "../assets/photos/man-in-office.png";
+import wedge from "../assets/backgrounds/wedge.svg";
 ---
 
 <section id="contact">
@@ -14,11 +13,18 @@ import manInOffice from "../assets/photos/man-in-office.png";
         <form action="message" class="mt-6">
           <div><label for="name">Name:</label></div>
           <div>
-            <input type="text" name="name" id="name" placeholder="John Doe" />
+            <input
+              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              type="text"
+              name="name"
+              id="name"
+              placeholder="John Doe"
+            />
           </div>
           <div><label for="name">Email:</label></div>
           <div>
             <input
+              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
               type="text"
               name="email"
               id="email"
@@ -27,17 +33,24 @@ import manInOffice from "../assets/photos/man-in-office.png";
           </div>
           <div><label for="name">Message:</label></div>
           <div>
-            <input
-              type="text"
+            <textarea
+              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
               name="message"
               id="message"
               placeholder="Your message"
-            />
+              cols="40"
+              rows="10"></textarea>
           </div>
-          <input type="submit" value="Submit" />
+          <input
+            class="px-4 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="w-1/2 bg-[url(../assets/photos/man-in-office.png)] bg-cover">
+        <img class="h-full relative right-0.5" src={wedge.src} alt="" />
       </div>
     </div>
   </div>

website/src/components/Contact.astro

@@ -1,4 +1,5 @@
 <footer class="py-6 text-center flex flex-col gap-3 bg-green-300">
+  <a href="#top">Return to top</a>
   <p>Benefit Decision Toolkit</p>
-  <p>A Code For Philly Project</p>
+  <p>With ❤️ from Philly</p>
 </footer>

website/src/components/Footer.astro

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

website/src/components/Hero.astro

@@ -10,18 +10,18 @@ import manInOffice from "../assets/photos/man-in-office.png";
   <div class="max-w-[130ch] mx-auto">
     <div class="grid grid-rows-2 grid-cols-2">
       <div class="bg-green-200 flex justify-center items-center">
-        <div class="max-w-72">
+        <div class="max-w-72 relative top-30">
           <Image src={womanWithLaptop} alt="Woman with laptop." />
         </div>
       </div>
-      <div class="prose p-6">
+      <div class="prose p-6 pb-30">
         <Mission />
       </div>
-      <div class="prose p-6">
+      <div class="prose p-6 pt-30">
         <History />
       </div>
       <div class="bg-green-200 flex justify-center items-center">
-        <div class="max-w-72">
+        <div class="max-w-72 relative bottom-30">
           <Image src={manInOffice} alt="Woman with laptop." />
         </div>
       </div>

website/src/components/HistoryMission.astro

@@ -0,0 +1,30 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const projects = defineCollection({
+  loader: glob({
+    pattern: "**/*.md",
+    base: "./src/projects",
+  }),
+  schema: ({ image }) =>
+    z.object({
+      index: z.number(),
+      image: image(),
+      imageAlt: z.string(),
+    }),
+});
+
+const members = defineCollection({
+  loader: glob({
+    pattern: "**/*.md",
+    base: "./src/members",
+  }),
+  schema: ({ image }) =>
+    z.object({
+      index: z.number(),
+      image: image(),
+      imageAlt: z.string(),
+    }),
+});
+
+export const collections = { projects, members };

website/src/components/Mission.astro

@@ -5,7 +5,7 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 ---
 
-<html lang="en">
+<html lang="en" class="scroll-smooth">
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" type="image/svg+xml" href={favicon} />