Website redesign

builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx

@@ -27,8 +27,7 @@ const SelectedEligibilityCheck = ({
     createSignal(false);
   const [editAliasModalOpen, setEditAliasModalOpen] = createSignal(false);
 
-  const displayName = () =>
-    checkConfig().aliasName || checkConfig().checkName;
+  const displayName = () => checkConfig().aliasName || checkConfig().checkName;
 
   const isBlankParameterValue = (value: unknown) => {
     return value === undefined || value === null || value === "";
@@ -72,14 +71,14 @@ const SelectedEligibilityCheck = ({
           <span>{titleCase(displayName())}</span>
           <span class="text-gray-500">- {checkConfig().checkVersion}</span>
           <div
-            class="text-sm text-gray-500 hover:text-gray-700 hover:rounded-2xl p-2 hover:bg-gray-400"
+            class="text-sm text-gray-500 hover:text-gray-700 hover:rounded-lg p-2 hover:bg-gray-400"
             onClick={(e) => {
               e.stopPropagation();
               setEditAliasModalOpen(true);
             }}
             title="Edit alias"
           >
-            <PencilIcon size={16}/>
+            <PencilIcon size={16} />
           </div>
         </div>
         <Show when={checkConfig().aliasName}>

website/astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 
 import svelte from "@astrojs/svelte";
@@ -9,4 +9,16 @@ export default defineConfig({
   vite: { plugins: [tailwindcss()] },
   site: "https://bdtoolkit.org",
   integrations: [svelte()],
+  fonts: [
+    {
+      provider: fontProviders.fontsource(),
+      name: "Lato",
+      cssVariable: "--font-lato",
+    },
+    {
+      provider: fontProviders.fontsource(),
+      name: "Crete Round",
+      cssVariable: "--font-crete-round",
+    },
+  ],
 });

website/package.json

@@ -10,9 +10,6 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^9.0.1",
-    "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource/open-sans": "^5.2.7",
-    "@fontsource/ramaraja": "^5.2.8",
     "@tailwindcss/vite": "^4.1.17",
     "astro": "^7.2.4",
     "svelte": "^5.45.8",

website/src/assets/text/Contact.md

@@ -1,4 +1,4 @@
-## Reach out to us!
+## Contact
 
 Have a question? Want to get involved?
 

website/src/assets/text/Hero.md

@@ -1,3 +1,3 @@
-## Build eligibility screening tools... _fast_
+# Build eligibility<br>screening tools... _fast_
 
 Benefit Decision Toolkit simplifies the management of eligibility rules and screeners so you can create useful tools quickly and keep the code to a minimum.

website/src/assets/text/Overview.md

@@ -1,5 +1,5 @@
-## What We Do
+## Our Mission
 
-Our mission is to provide free, intuitive tools that help organizations build benefit eligibility screeners for the communities they serve.
+Provide free, intuitive tools that help organizations build benefit eligibility screeners for the communities they serve.
 
 With the open-source BDT web app, you can easily create and maintain benefit screeners, without needing coding expertise or relying on costly software vendors.

website/src/assets/text/Projects.md

@@ -1 +1 @@
-## BDT’s Projects
+## What We're Building

website/src/assets/text/Volunteer.md

@@ -1,4 +1,4 @@
-# Build BDT With Us
+## Build BDT With Us
 
 Contributing to BDT is a great way to gain experience working on an open source project with a friendly team!
 

website/src/assets/text/projects/ScreenerBuilder.md

@@ -1,13 +1,11 @@
 ---
-index: 2
+index: 1
+link: https://github.com/CodeForPhilly/benefit-decision-toolkit
+btnText: View Code
+screenshot: ../../screenshots/web-app.png
+screenshotAlt: Screenshot of a benefits management interface with a button labeled create new benefit and two existing benefits named food assistance and heating assistance.
 ---
 
-### Screener Builder
+### Screener Builder Web App
 
 An application designed to simplify and improve the process of creating online screeners for public benefit eligibility.
-
-![Screenshot of a benefits management interface with a button labeled create new benefit and two existing benefits named food assistance and heating assistance.](../../screenshots/web-app.png)
-
-<a href="https://github.com/CodeForPhilly/benefit-decision-toolkit" target="_blank">Visit GitHub repository ↗</a>
-
-<a href="https://bdt-docs.web.app/" target="_blank">Read user guide ↗</a>

website/src/assets/text/projects/TaxScreener.md

@@ -1,11 +1,11 @@
 ---
 index: 2
+link: https://phillypropertytaxrelief.org/
+btnText: Try It Out
+screenshot: ../../screenshots/property-tax.png
+screenshotAlt: Philadelphia property tax relief screener text overlaid on a background of Philadelphia’s skyline with trees in the foreground.
 ---
 
 ### Property Tax Relief Screener
 
 A screener built using BDT that Philadelphia residents can use to check their eligibility for property tax relief benefits.
-
-![Philadelphia property tax relief screener text overlaid on a background of Philadelphia’s skyline with trees in the foreground.](../../screenshots/property-tax.png)
-
-<a href="https://phillypropertytaxrelief.org/" target="_blank">Visit screener website ↗</a>

website/src/components/ActionButton.astro

@@ -0,0 +1,5 @@
+<div
+  class="relative mt-6 w-fit px-6 py-3 bg-linear-to-b from-btn-t via-btn-b to-btn-b border border-t-btn-b border-border-b rounded-lg font-serif text-xl shadow-lg/10"
+>
+  <slot />
+</div>

website/src/components/Contact.astro

@@ -1,64 +1,70 @@
 ---
+import { Image } from "astro:assets";
 import { Content } from "../assets/text/Contact.md";
+import ActionButton from "./ActionButton.astro";
+import photo from "../assets/backgrounds/philly-parkway.jpg";
 ---
 
-<section id="contact">
-  <div class="max-w-[130ch] mx-auto">
-    <div class="flex flex-row">
-      <div class="sm:w-1/2 sm:p-12 px-3 py-6 sm:pr-6">
-        <div class="prose prose-headings:text-left">
-          <Content />
+<section id="contact" class="max-w-[130ch] mx-auto py-6 md:py-12">
+  <div class="flex flex-row">
+    <div class="w-full md:w-1/2 md:p-6 px-3 py-6 md:pr-6">
+      <div class="prose prose-headings:text-left">
+        <Content />
+      </div>
+      <form action="https://formspree.io/f/xlgpngrj" method="post" class="mt-6">
+        <div><label for="name" class="font-semibold">Name</label></div>
+        <div>
+          <input
+            class="my-3 p-3 w-full border border-gray-500 rounded-lg"
+            type="text"
+            name="name"
+            id="name"
+            placeholder="John Doe"
+            autocomplete="name"
+            required
+          />
         </div>
-        <form
-          action="https://formspree.io/f/xlgpngrj"
-          method="post"
-          class="mt-6"
-        >
-          <div><label for="name" class="font-semibold">Name</label></div>
-          <div>
-            <input
-              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
-              type="text"
-              name="name"
-              id="name"
-              placeholder="John Doe"
-              required
-            />
-          </div>
-          <div><label for="email" class="font-semibold">Email</label></div>
-          <div>
-            <input
-              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
-              type="email"
-              name="email"
-              id="email"
-              placeholder="johndoe@example.com"
-              required
-            />
-          </div>
-          <div><label for="message" class="font-semibold">Message</label></div>
-          <div>
-            <textarea
-              class="my-3 p-3 w-full h-40 border-2 border-bdt-blue rounded-2xl"
-              name="message"
-              id="message"
-              placeholder="Your message"
-              required></textarea>
-          </div>
+        <div><label for="email" class="font-semibold">Email</label></div>
+        <div>
           <input
-            class="px-6 py-2 pt-3.5 mt-3 font-serif bg-bdt-green-light rounded-full text-xl cursor-pointer"
-            type="submit"
-            value="Submit"
-            size=""
+            class="my-3 p-3 w-full border border-gray-500 rounded-lg"
+            type="email"
+            name="email"
+            id="email"
+            placeholder="johndoe@example.com"
+            autocomplete="email"
+            required
           />
-        </form>
-      </div>
-      <div class="w-1/2 h-180 hidden sm:flex">
-        <div
-          class="w-full m-12 ml-6 bg-[url(../assets/backgrounds/man-in-office.webp)] bg-cover bg-center justify-center rounded-2xl"
-        >
         </div>
-      </div>
+        <div><label for="message" class="font-semibold">Message</label></div>
+        <div>
+          <textarea
+            class="my-3 p-3 w-full h-40 border border-gray-500 rounded-lg"
+            name="message"
+            id="message"
+            placeholder="Your message"
+            required></textarea>
+        </div>
+        <ActionButton>
+          <span class="invisible">Submit</span>
+          <button
+            class="absolute inset-0 w-full h-full cursor-pointer"
+            type="submit"
+          >
+            Submit
+          </button>
+        </ActionButton>
+      </form>
+    </div>
+    <div
+      class="w-1/2 h-180 hidden md:flex overflow-hidden rounded-lg border border-gray-400 mr-3 md:mr-6"
+    >
+      <Image
+        src={photo}
+        alt="Philadelphia skyline"
+        width={600}
+        class="w-full h-full object-cover"
+      />
     </div>
   </div>
 </section>