hack4impact / hack4impact-website Goto Github PK

Above National board in About page, similar to National Board Members. Use same component

1. Chapter Members Number to Chapter
2. Number of total members
3. Number of chapters
4. A map of our current chapters
5. Number of nonprofits
6. Projects

As a website admin, I want to easily update application details for new chapters and nonprofits.

Action items

• Create a content model for FAQ entries (question and answer)
• Create a big content model for ApplicationPage. This should have:
• description (rich text)
• application link (short text -> URL)
• image (media upload)
• application type (short text -> radio buttons for "New Chapter" or "Nonprofit")
• a list of FAQ entries

Author notes

• Look into GraphiQL to query for these entries on the frontend
• If possible, wire these in using the fetchContent helper on the frontend. These components should already be built to handle incoming JSON!

Reference mockup

Connects directly to Open Collective

Convert our values into the Guiding Principles we have

As a user, I want to scan for questions at a glance and click into the answers I'm interested in.

Action items

• Add a dropdown toggle as shown in the mockup below

Author notes

• Use the icon MdArrowDropdownCircle from react-icons/io
• Use the $accent variable for the text color, $body for the font size
• Use the Reach UI dropdown component for screen reader a11y
• Bonus points for rotating the dropdown arrow to indicate it's expanded!

To reproduce

Head to /apply/nonprofit (for example). Notice how the header, button, and image differ from the mockup below.

Author notes

• Image and text should be split 50% / 50% on the tablet breakpoint and above (check variables.scss). Below this, wrap the image to the line below.
• The button shouldn't be stretched

Work with GT Chapter to push integration sooner.

@shopaniuk for subdomain stuff

In FAQ, update copy to be appropriate