getting started, liability waiver

web/components/Onboarding/GetStarted.tsx

@@ -1,9 +1,38 @@
-import { useState } from "react";
+import Button from "@components/atoms/Button";
+import { Dispatch, SetStateAction, useState } from "react";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
 }
 
 export default function GetStartedPage({ setPage }: Props) {
-  return <div></div>;
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col shrink-0 py-7 gap-4 items-center justify-center bg-onboarding-background">
+        <img
+          src="/MBBLogo.svg"
+          className="stroke-[2.1px] object-contain sm:stroke-[3px]"
+        />
+        <span className="text-white text-xl font-bold font-opensans tracking-[0.6px]">
+          Caregiver
+        </span>
+      </div>
+      <div className="flex flex-col p-7 gap-[1.125rem]">
+        <h1 className="text-primary-text text-2xl font-bold font-opensans">
+          Let's get started
+        </h1>
+        <p>
+          Motherhood Beyond Bars is here to provide whole family support for
+          mothers, infants, and caregivers like yourself!
+        </p>
+        <p>
+          Before we get started, we’ll need to collect some information to best
+          meet your needs. If you have any questions, please email us at{" "}
+          <strong className="font-semibold">[email protected]</strong>{" "}
+          or call us at <strong className="font-semibold">678-404-1397</strong>.
+        </p>
+        <Button type="primary" text="Get Started" onClick={() => setPage(1)} />
+      </div>
+    </div>
+  );
 }

web/components/Onboarding/LiabilityWaiver.tsx

@@ -1,9 +1,47 @@
-import { useState } from "react";
+import Button from "@components/atoms/Button";
+import TextInput from "@components/atoms/TextInput";
+import { Dispatch, SetStateAction, useState } from "react";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
 }
 
 export default function LiabilityWaiverPage({ setPage }: Props) {
-  return <div></div>;
+  return (
+    <div className="flex flex-col px-6 gap-3">
+      <h1 className="text-primary-text text-2xl font-bold font-opensans">
+        Liability Waiver
+      </h1>
+      <div className="bg-[#C4C4C4] overflow-auto shrink-0 pt-2 px-3">
+        {/* Waiver here */}
+        <p>
+          PARTICIPANT RELEASE AND WAIVER OF LIABILITY In consideration for the
+          willingness of Motherhood Beyond Bars (“Organization”) to accept the
+          individual signing below (“Participant”), as a participant in its
+          Infant and Caregiver Support program or Reentry and Reunification
+          program (the “Program”), and in consideration for Participant
+          accepting the Donated Items (as defined below), and for other good and
+          valuable consideration, the receipt and sufficiency of which are
+          acknowledged, Participant does freely, voluntarily and without duress
+          execute the following Release for and on behalf of him or herself and
+          his or her heirs, successors, beneficiaries and assigns: 1. Donated
+          Items. Participant acknowledges receipt from Organization of items,
+          including those described in the attached document, which may be
+          provided at any time during the Program (“Donated Items”).
+          Organization is providing the Donated Items at no charge. Participant
+          voluntarily accepts the Donated Items “As-Is.”
+        </p>
+      </div>
+      <input type="checkbox" /> {/* TODO: <CheckboxText /> */}
+      <div className="mt-3">
+        <label>Signature</label>
+        <TextInput />
+      </div>
+      <div className="mb-6">
+        <label>Date</label>
+        <TextInput /> {/* TODO: <DatePicker /> */}
+      </div>
+      <Button text="Next" onClick={() => setPage((prev) => prev + 1)} />
+    </div>
+  );
 }

web/components/atoms/ProgressBar.tsx

@@ -5,7 +5,7 @@ interface Props {
 
 export default function ProgressBar({ progress }: Props) {
   return (
-    <div className="h-[6px] relative rounded-full bg-empty-gray">
+    <div className="h-[6px] w-[107px] lg:w-[250px] relative rounded-full bg-empty-gray">
       <div
         style={{ width: `${progress}%` }}
         className="rounded-full bg-mbb-pink absolute top-0 left-0 bottom-0 transition-all"

web/pages/caregiver/onboarding.tsx

@@ -6,14 +6,25 @@ import LiabilityWaiverPage from "@components/Onboarding/LiabilityWaiver";
 import RequestItemsPage from "@components/Onboarding/RequestItems";
 import ShippingAddressPage from "@components/Onboarding/ShippingAddress";
 import PreferredContactPage from "@components/Onboarding/PreferredContact";
+import BackButton from "@components/atoms/BackButton";
+import ProgressBar from "@components/atoms/ProgressBar";
+import Button from "@components/atoms/Button";
 
 export default function CaregiverOnboarding() {
   // Page 0 - Let's Get Started, Page 1 - Household Information, Page 2 - Liability Waiver,
   // Page 3 - Request Items, Page 4 - Shipping Address, Page 5 - Contact Page
   const [page, setPage] = useState(0);
 
   return (
-    <div>
+    <div className="flex flex-col w-full gap-7">
+      {page > 0 && (
+        <div className="flex bg-white sticky top-0 items-center justify-between px-7 py-[1.125rem]">
+          <BackButton
+            onClick={() => setPage((prev) => Math.max(0, prev - 1))}
+          />
+          <ProgressBar progress={(page / 5) * 100} />
+        </div>
+      )}
       {
         page == 0 ? (
           <GetStartedPage setPage={setPage} />
@@ -30,6 +41,7 @@ export default function CaregiverOnboarding() {
         ) : null
         // Save data and route to next page
       }
+      <Button text="debug next" onClick={() => setPage((prev) => Math.min(5, prev + 1))} />
     </div>
   );
 }

web/tailwind.config.js

@@ -12,7 +12,10 @@ module.exports = {
     },
     extend: {
       backgroundImage: {
-        'custom-background': 'radial-gradient(115.79% 108.31% at 24.4% 30.17%, #EDB1CB 0.01%, #B14378 92.53%)'
+        "custom-background":
+          "radial-gradient(115.79% 108.31% at 24.4% 30.17%, #EDB1CB 0.01%, #B14378 92.53%)",
+        "onboarding-background":
+          "radial-gradient(147.14% 98.02% at 24.4% 30.17%, #EDB1CB 0%, #B14378 100%)",
       },
       fontFamily: {
         sans: ["Open Sans", ...defaultTheme.fontFamily.sans],