Accordion and Get-Help-For-My-Client page (#78)

## Description Added `AccordionBlock` component and created `Get-Help-For-My-Client`. ![image](https://github.com/user-attachments/assets/5dc072ed-d757-4e7e-81de-384b8e15fdbf) ![image](https://github.com/user-attachments/assets/0137d835-9221-480f-a3a4-1f6aab0f2ca4) ![image](https://github.com/user-attachments/assets/295b8065-376a-40e0-9de9-68bea98949b2) ![image](https://github.com/user-attachments/assets/ca890ba0-d807-4516-9cdc-149e6da765a6) ## Notes Future improvement: - Change content of Accordion to Markdown - Change the header of `TwoColumn` component to markdown. Solves #73 #74 --------- Co-authored-by: Justin Ferber <[email protected]>
stevensblueprint · Dec 4, 2024 · ddc69f8 · ddc69f8 · vercel · Dec 4, 2024
1 parent 639a4f7
commit ddc69f8
Show file tree

Hide file tree

Showing 6 changed files with 419 additions and 0 deletions.
diff --git a/content/pages/Example-Accordion.mdx b/content/pages/Example-Accordion.mdx
@@ -0,0 +1,29 @@
+---
+title: Example Accordion
+blocks:
+  - blockTitle: Our mobile app
+    content:
+      - accordionTitle: WHAT IS THE INREACH APP?
+        accordionContent: >-
+          InReach is the world’s first tech platform matching LGBTQ+ people
+          facing persecution or discrimination with safe, verified resources. 
+
+
+          The free InReach App is available on web (desktop and mobile), and
+          native iOS and Android. InReach currently lists verified resources in
+          all 50 U.S. states, the District of Columbia and U.S. territories,
+          Canada and Mexico.
+
+
+          InReach’s free technology instantly matches LGBTQ+ people facing
+          persecution or discrimination with affirming, independently verified
+          medical and mental health care, immigration and other legal help, safe
+          housing, meal assistance, education and employment, translation,
+          community and spiritual support, and more critical services.
+      - accordionTitle: HOW CAN I DOWNLOAD THE MOBILE APP?
+        accordionContent: >-
+          Download the free InReach mobile app on iOS and Android today. InReach
+          is the world’s first tech platform matching LGBTQ+ people facing
+          persecution or discrimination with safe, verified resources
+    _template: accordionblock
+---
diff --git a/content/pages/Get-Help-For-My-Client.mdx b/content/pages/Get-Help-For-My-Client.mdx
@@ -0,0 +1,292 @@
+---
+title: Get Help For My Client
+blocks:
+  - logo:
+      src: /inreach-logos/InReach_Logo_Color_RGB.svg
+      alt: InReach Logo
+    navBGColor: Green
+    navLinks:
+      - linkName: About
+        linkUrls:
+          - sectionUrl: Mission
+            pathURL: /
+          - sectionUrl: Our Team
+            pathURL: /example-gallery
+          - sectionUrl: Our Vetting Process
+            pathURL: /
+      - linkName: News
+        linkUrls:
+          - sectionUrl: In The News
+            pathURL: /
+          - sectionUrl: Awards
+            pathURL: /
+          - sectionUrl: Our Blog
+            pathURL: /
+      - linkName: Get Help
+      - linkName: Take Action
+      - linkName: Contact
+    _template: header
+  - richTextContent: >
+      # <ColoredText text="USE InReach TO FIND VERIFIED RESOURCE REFERRALS FOR
+      LGBTQ+ PEOPLE" color="Ally Green" />
+    _template: richText
+  - heading: ''
+    richTextLeft: "## ARE YOU A LAWYER, CASE MANAGER, THERAPIST, SOCIAL WORKER, TEACHER OR OTHER DIRECT SERVICE PROVIDER WORKING WITH THE LGBTQ+ COMMUNITY?\n\nInReach is a trans-led tech nonprofit\_increasing resource access\_for the diverse LGBTQ+ community. We provide\_the world’s first\_open source\_platform matching LGBTQ+ people facing persecution or discrimination with safe, independently verified resources.\n\nInReach aims to serve as a digital one-stop-shop for the diverse, intersectional LGBTQ+ community: the\_[free InReach App](https://app.inreach.org/)\_lists verified services for asylum seekers, refugees and other immigrants, Black, Indigenous and People of Color (BIPOC), transgender and gender non-conforming (TGNC) folks, youth and their caregivers, and more LGBTQ+ communities.\n\nUse our\_[free website](https://app.inreach.org/)\_and\_[mobile app](https://inreach.org/mobile-app/)\_to gather verified legal, medical, mental health and social service referrals for LGBTQ+ people in need.\n\n![](/home/Service-Provider-Page-1024x725.webp)\n"
+    richTextRight: >
+      ## Watch this quick prototype demo video of the free InReach App on
+      desktop to learn more about how to find verified referrals for your LGBTQ+
+      clients or loved ones
+
+
+      <YoutubeEmbed url="https://www.youtube.com/watch?v=U_nPt0Y2TsU" />
+
+
+      ### InReach is free for everyone, including:
+
+
+      * Immigration attorneys
+
+      * Pro bono attorneys & law students
+
+      * Refugee resettlement agencies
+
+      * Case managers, social workers, therapists & other direct service
+      providers working with the diverse LGBTQ+ community
+
+      * School districts, administrators, teachers & guidance counselors
+
+      * Caregiver and supportive loved ones of TGNC/LGBTQ+ youth looking for
+      safe resources
+    _template: twoColumn
+  - blockTitle: Our Mobile App
+    content:
+      - accordionTitle: HOW CAN I DOWNLOAD THE MOBILE APP?
+        accordionContent: >-
+          Download the free InReach mobile app on iOS and Android today. InReach
+          is the world’s first tech platform matching LGBTQ+ people facing
+          persecution or discrimination with safe, verified resources. Click on
+          the buttons below:
+    _template: accordionblock
+  - blockTitle: Using the InReach App
+    content:
+      - accordionTitle: HOW DO I SUGGEST A NEW RESOURCE TO ADD TO INREACH?
+        accordionContent: >-
+          Submitting a new resource for consideration is easy and helps our team
+          to continue to improve and expand the free InReach App! The InReach
+          team is currently accepting public resource suggestions for direct
+          service providers located anywhere in the United States, Canada or
+          Mexico.
+
+
+          To suggest a new resource for inclusion on InReach, you must create a
+          free user account. Once you are logged in, you will be able to suggest
+          a new resource.
+
+
+          You can suggest a resource to be listed on the free InReach App here.
+      - accordionTitle: HOW DO I ADD MY ORGANIZATION TO INREACH?
+        accordionContent: >-
+          Don’t see your organization, firm or agency listed on InReach?
+          Submitting your organization for consideration is easy and helps our
+          team to continue to improve and expand the free InReach App! The
+          InReach team is currently accepting public resource suggestions for
+          direct service providers located anywhere in the United States, Canada
+          or Mexico.
+
+
+          To suggest a new resource for inclusion on InReach, you must create a
+          free user account. Once you are logged in, you will be able to suggest
+          a new resource.
+
+
+          You can suggest a resource to be listed on the free InReach App at
+          this link..
+      - accordionTitle: >-
+          HOW DO I CONNECT MY USER ACCOUNT WITH MY ORGANIZATION’S PROFILE PAGE
+          ON INREACH ?
+        accordionContent: "Please note: the ability for service providers to “claim” their own organization’s profile page on the redesigned InReach App is coming soon! \n\nWith a free InReach service provider user account, you will soon be able to:\n\n✍\U0001F3FE Update your organization’s information on InReach\n\U0001F4E8 Invite other staff to join your organization on InReach \n\U0001F511 Gain access to future features built specifically for affiliated service providers on InReach! \nSign up for a free service provider account today. "
+      - accordionTitle: ' WHY SHOULD I SIGN UP FOR A FREE SERVICE PROVIDER USER ACCOUNT?'
+        accordionContent: "With a free InReach account you can unlock additional features, such as:\n \n\U0001F49A Save and share personalized resource lists with clients and coworkers\n\U0001F4AC Leave public rating/reviews on organizations\n\U0001F3E0 Suggest organizations in your area\n\U0001F517 Claim your organization’s profile page (Coming soon!)"
+      - accordionTitle: WHAT IS THE INREACH APP?
+        accordionContent: >-
+          InReach is the world’s first tech platform matching LGBTQ+ people
+          facing persecution or discrimination with safe, verified resources. 
+
+
+          The free InReach App is available on web (desktop and mobile), and
+          native iOS and Android. InReach currently lists verified resources in
+          all 50 U.S. states, the District of Columbia and U.S. territories,
+          Canada and Mexico.
+
+
+          InReach’s free technology instantly matches LGBTQ+ people facing
+          persecution or discrimination with affirming, independently verified
+          medical and mental health care, immigration and other legal help, safe
+          housing, meal assistance, education and employment, translation,
+          community and spiritual support, and more critical services.
+      - accordionTitle: WHO DOES INREACH SERVE?
+        accordionContent: >-
+          InReach aims to serve as a comprehensive digital one-stop-shop for the
+          diverse LGBTQ+ community. InReach has verified services for LGBTQ+
+          asylum seekers, refugees and other immigrants, LGBTQ+ Black,
+          Indigenous and People of Color (BIPOC) communities, the transgender
+          and gender nonconforming (TGNC) community, LGBTQ+ youth and their
+          caregivers, and more LGBTQ+ communities.
+
+
+          Lawyers, law students, case managers, therapists, social workers, and
+          other service providers also use the free InReach App to efficiently
+          find safe, independently verified resource referrals for their LGBTQ+
+          clients
+      - accordionTitle: WHAT TYPES OF RESOURCES CAN BE FOUND ON INREACH?
+        accordionContent: >
+          As a direct service provider, you can use the free InReach App to find
+          a wide range of independently verified resource referrals for your
+          LGBTQ+ clients/patients, including:
+
+
+          Abortion Care
+
+          Community Support
+
+          Computers & Internet
+
+          Education & Employment
+
+          Food
+
+          Housing
+
+          Hygiene and Clothing
+
+          Legal
+
+          Mail Services
+
+          Medical
+
+          Mental Health
+
+          Sports & Entertainment
+
+          Translation & Interpretation
+
+          Transportation
+
+          The free InReach App lists a wide range of services, which we refer to
+          as “resources”, for the diverse LGBTQ+ community:
+
+
+          “Crisis resources” (e.g., emergency housing, food, legal help, mental
+          health hotlines, medical care, drop-in centers for LGBTQ+ youth,
+          abortion care, and more) 
+
+          “Quality of life resources” (resources that LGBTQ+ people need to not
+          just survive but thrive, such as local community and social groups,
+          spiritual support, art and music, sports and entertainment, haircuts
+          and stylists, dental care, substance use, educational support for
+          LGBTQ+ youth, career counseling, libraries, HIV and sexual health,
+          language classes, and so much more).
+      - accordionTitle: HOW DO I RATE AND REVIEW A RESOURCE I FIND LISTED ON INREACH?
+        accordionContent: >-
+          To rate and review a resource, you must first create a free user
+          account.  Please see “HOW DO I SIGN UP FOR A USER ACCOUNT?” above for
+          instructions. 
+
+           
+
+          Once you are logged in, you will be able to leave a public rating (one
+          to five stars) and written review on any direct service provider you
+          find listed on InReach. 
+
+           
+
+          Click on any direct service provider you see listed in the App to go
+          to the organization’s profile page 
+
+          Click on the “Reviews” tab on the provider’s profile page to be taken
+          to the the “Leave a review” section 
+
+          Click on the stars (one to five stars) to leave a rating 
+
+          Type your review in the text box to leave more feedback on your
+          experience
+      - accordionTitle: >-
+          HOW DO I SHARE FEEDBACK ON MY EXPERIENCE USING INREACH TO FIND SAFE,
+          VERIFIED RESOURCES?
+        accordionContent: >-
+          To share feedback with our team, please fill out our quick InReach App
+          Share Feedback Survey. 
+
+
+          We’d love to hear from you!
+      - accordionTitle: HOW DO I SIGN UP FOR A SERVICE PROVIDER USER ACCOUNT?
+        accordionContent: >-
+          Visit the InReach App (on a computer, web browser on your phone, or
+          download our mobile app on the App Store or Google Play)
+
+
+          If you are using a computer or tablet:
+
+
+          Click on “Sign up for free” at the top right-hand corner of your
+          screen
+
+          Click on “Professional/Provider” 
+
+          Follow the instructions on the screen to create your free InReach
+          service provider user account
+
+          If you are using a web browser on your phone or our mobile app:
+
+
+          Click on “Account” at the bottom of the screen
+
+          Click on the “Sign Up” tab
+
+          Click on  “Professional/Provider” 
+
+          Follow the instructions on the screen to create your free InReach
+          service provider user account
+      - accordionTitle: >-
+          HOW DO YOU MAKE SURE THE DIRECT SERVICE PROVIDERS LISTED ON INREACH
+          ARE SAFE FOR MEMBERS OF THE DIVERSE LGBTQ+ COMMUNITY?
+        accordionContent: >-
+          Every direct service provider listed on InReach is vetted by our
+          trained volunteers to be welcoming to LGBTQ+ people facing persecution
+          or discrimination. 
+
+
+          Our trained volunteers employ a rigorous tailored vetting process for
+          all direct service providers listed on InReach. Our core vetting
+          criteria include: 
+
+
+          Is the direct service provider active and legitimate? (required to be
+          listed on InReach)
+
+          Is the direct service provider LGBTQ+ affirming? (required to be
+          listed on InReach)
+
+          Does the direct service provider meet any of InReach’s
+          intersectionality definitions? (preferred but not required to be
+          listed on InReach)
+
+          At InReach, we recognize that LGBTQ+ equality requires trans justice,
+          racial justice, refugee justice, reproductive justice, language
+          justice, and more. As a result, in addition to verifying that each
+          provider listed on InReach is generally LGBTQ+ affirming, our trained
+          volunteers also verify whether providers are led by and/or have
+          expertise serving specific historically marginalized LGBTQ+
+          communities.
+
+          See our intersectionality definitions for more information. 
+
+          We repeat our vetting process for every provider listed on InReach at
+          least once every 6 months.
+
+
+          Please see the “Our Vetting Process” page for more information.
+    _template: accordionblock
+  - _template: footer
+---
diff --git a/public/home/Service-Provider-Page-1024x725.webp b/public/home/Service-Provider-Page-1024x725.webp
diff --git a/src/components/RenderBlocks.tsx b/src/components/RenderBlocks.tsx
@@ -7,6 +7,7 @@ import { FooterContainer } from './blocks/Footer'
 import { LookingForContainer } from './blocks/LookingFor'
 import { TitleImageGrid } from './blocks/layout/TitleImageGrid'
 import { Header } from './blocks/layout/Header'
+import { AccordionContainer } from './blocks/AccordionBlock'
 import { TwoColumn } from './blocks/layout/TwoColumn'
 import { RichText } from './blocks/layout/RichText'
 import { Hero } from './blocks/layout/Hero'
@@ -65,6 +66,12 @@ export const Blocks = (props: Omit<Page, 'id' | '_sys' | '_values'>) => {
 										<Header data={block} />
 									</div>
 								)
+							case 'PageBlocksAccordionblock':
+								return (
+									<div key={i + block.__typename} className='w-full'>
+										<AccordionContainer data={block} />
+									</div>
+								)
 							case 'PageBlocksTwoColumn':
 								return (
 									<div key={i + block.__typename} className='w-full'>