factn/resilience-landing-page

Landing page for Resilience App

resilience-landing-page's Issues

Add placeholder images

Reference

Replace placeholder image areas with approved images

Route to "Partners" tab

Create a route to the "partner" tab.

Security issues reporting page

Page: /.well-known/security.txt

**Description: see https://securitytxt.org/ **

[Layout] Short text and link under video on 'Home' page

A textbox needs to be directly underneath the video on the 'Home' page.

The textbox should include a short description of the video, and a link to 'Get Resilience'.

Figma Link

Mockup:

[Layout] Link to Resilience App on Tools section

Under the Tool descriptions, a link should be present for organizers/users to sign up to use the resilience application. the link text should read "Get this for My Community".

Mockup:

[Layout] Add mission and hero to about-us

Page: /about-us

Add placeholder hero image with mission text

Mockup

Screenshot:

[Layout] A section that explains how to contribute on the 'Home' page

Underneath the Partners/Affiliations section, there should be a section that provides information for people to contribute to the project.

The text title for this section should read "Contribute to the Resilience" with a smaller heading that reads "Do you want to put your professional skills to use and collaborate with passionate people?"

Figma Link

Mockup:

[PINNED] Get recognized!

🎉 You are awesome! 🎉

As part of the spirit of open source, we welcome you to allow yourself to be recognized for your contributions to the Resilience App project.

❓ How can I do that?

We have gone ahead and set up All Contributors here to help showcase the contributors that made this project possible.

Add a comment to this issue to have the bot automatically submit a pull request to add your GitHub username to the list!

@all-contributors please add @your-user-name for comma, separated, contributions

🤔 What contributions can I list here?

Here are a few common contributions

Emoji/Type	Represents	Comments
🔊 audio	Audio	Podcasts, background music or sound effects
♿️ a11y	Accessibility	Reporting or working on accessibility issues
🐛 bug	Bug reports	links to issues reported by the user on this project
💼 business	Business Development	people who execute on the business end
💻 code	Code	links to commits by the user on this project
🖋 content	Content	e.g. website copy, blog posts are separate
📖 doc	Documentation	links to commits by the user on this project, Wiki, or other source of documentation
🎨 design	Design	links to the logo/iconography/visual design/etc.
💡 example	Examples	links to the examples
💵 financial	Financial Support	people or orgs who provide financial support, links to relevant page
🔍 fundingFinding	Funding/Grant Finders	people who help find financial support
🤔 ideas	Ideas & Planning
🚧 maintenance	Maintenance	people who help in maintaining the repo, links to commits by the user on this project
📆 projectManagement	Project Management
💬 question	Answering Questions	Answering Questions in Issues, Stack Overflow, Gitter, Slack, etc.
👀 review	Reviewed Pull Requests
🛡️ security	Security	identify and/or reduce security threats, GDPR, Privacy, etc

Find the full supported emoji list here

---

🚀 Thank you for all the time you have generously donated to making this project work.

Update Navigation header

Each page should consist of a navbar at the top of the page.

The navbar should consist of links back to the 'Home' page, 'Partners' page, 'Contribute' page, 'About Us' Page, 'Stories' page, and a 'Get Resilience' link.

Figma Link

Mockup

Update footer to match mockup

Use the mockup to update the footer with the appropriate layout and content

External links for footer:
docs: https://app.gitbook.com/@mutualaidworld/s/docs/
github: https://github.com/factn/resilience-app
slack: https://app.slack.com/client/T010BELED7Z
faction: https://github.com/factn

[Layout] "Stories" Page should contain a smaller feature of the other blog posts

On the "Stories" Page the rest of blog posts should be featured in pairs underneath the most recent blog post.

Description:
The blog posts should be featured side-by-side in pairs of two.
An image should be present on top of each blog posting.
Title of each blog should go underneath the image - Left Aligned
The date each blog was posted should be underneath the title - Left Aligned
Only a snippet of the post should be readable from the "Stories" Page - Left Aligned
"Finish Reading" link to the rest of the post should be present underneath the snippet of text - Left Aligned

Mockup

Screenshot:

[Layout] FAQ section

Page: /about-us

Description:
Add FAQ section content. Numbered list of items.
FAQ title should be an anchor with a valid ID.
The FAQ link in footer should be updated from /faq to use an anchor link within the /about-us page.

e.g.: href="/about-us#faq"

Mockup

Screenshot:

[Layout] Add ways to contribute to the "Contribute" page

Description
The layout should include a text block -Center aligned
Heading at the top, text at the bottom

The second block of content underneath the first.
In the block, there should be 3 information button modules aligned horizontally, 1 for join as a developer, 1 for join as a designer, and 1 for just joining us.

Under the button, modules will be a block of text.

Mockup

Screenshot

[Layout] Link to Mutualaid.world Slack channel

Under the "Who We Are" section, a link to the mutualaid.world slack will be available for people to join the project.

Mockup:

[Layout] A call to action for other organizations to partner up

At the bottom of the 'Partner' page, right above the footer, there should be a call to action for other mutual aid groups or organizations to partner with the Resilience App.

There should be a link to the "Get Resilience" page and a link to the informational PDF.

Mockup:

Link to Volunteers on Homepage

Create a link to the "Volunteer's Spotlight" titled "Who We Are" on the homepage of the website.

[Layout] The 'Partners' page needs a quote

At the top of the 'Partners' page, there will be a quote.

Mockup:

Add social icons and quote to footer

Footer should have relevant social media icons linking to corresponding social pages

Footer should have our inspirational quote

Mockup: https://www.figma.com/file/GLg0zPNnwMEGIb9TytCrxQ/Resilience-App?node-id=33854%3A19521

[Layout] "Stories" Page should contain spotlight of most recent blog post

The top of the "Stories" Page should contain an intro to encourage visitors to read our "Stories". The most recent story should be spotlighted at the top.

Description:
The page title should be at the top - Center Aligned
Call to action to keep encouraging people to read should be at under the title - Center Aligned
An image of the most recent blog post should be the first thing that is present of the most recent blog - Center Aligned
Title of the blog should go underneath the image - Left Aligned
The date the blog was posted should be underneath the title - Left Aligned
Only a snippet of the post should be readable from the "Stories" Page - Left Aligned
"Finish Reading" link to the rest of the post should be present underneath the snippet of text - Left Aligned

Mockup

Screenshots:

Information Architecture

Complete first iteration of information architecture.

Rough draft has been completed and we are currently finalizing it into an editable chart in Figma.

https://www.figma.com/file/GLg0zPNnwMEGIb9TytCrxQ/Resilience-App?node-id=33878%3A136

[Layout] Recap of what the Resilience is offering

Once the user is directed to the Get Resilience form, there will be a quick recap of all the ways that Resilience would be beneficial to organizations at the top of the page.

Description:
On the left side with will be a sales pitch - Left Aligned
A link to display how our users use the application - Left Aligned
The right side will be a checklist of features stored in a box - Center Aligned

Mockup

Screenshot:

[Layout] Video embed on 'Home' Page

The first feature on the 'Home' page needs to be a video that describes the project.

Probably the video from Simon Mont

Media
https://www.youtube.com/watch?v=ia7h5sRIe5U

Update Readme

Update README to include:

1. Steps to get development environment set up
2. Updated project names
3. Working badges

[Layout] Section that portray the rest of the contributors

The layout should contain a section underneath the 'contributors spotlight' section that highlights the remaining contributors.

Description
At the top of the section should be a heading and text area - center-aligned
underneath the text area, contributors should be displayed with an image only in a grid style.
under the grid of photos should be a button to join the project-centered

Mockup

Screenshots

[Layout] Create a spotlight for our partners on the 'Partner' page

Underneath the quote by Margaret Mead, there needs to be a spotlight for our partners. Each partner should have a case study quotes from each organization.

Mockup:

[Layout] Create a section that explains how resilience helps organizations

On the 'Partners' page, we will provide a section that gives step-by-step directions on how this tool is beneficial to organizations.

Mockup:

[Layout] Add backstory layout Backstory

Page: /about-us

Description:
Layout should include the first text section - center aligned
Additional rows with header text to the left split with paragraph blocks on the right

This ticket should warrant the creation of a reusable component containing the item/description layout

Mockup

Screenshot:

Link to Contribute Section on the Homepage.

Create a link to the "Contribute Section" Titled "Contribute" on the Homepage.

Provisional personas

Create provisional personas user groups who will be visiting the resilienceapp.org website.

Based off of the Resilience App personas.

[Layout] Section that spotlights our contributors.

Description
The layout should have a section that spotlights some of the contributors to this project.
Heading and text area at the top of the section - center aligned

Underneath the text area should be information modules that contain information on the spotlighted contributors. These modules will contain the contributor's full name, job title, a short summary of the contributor, and a photo.

Mockup

Screenshot

[Layout] Create a section for "Stories" on the 'Home' Page

Underneath the "Who We Are" section, there will be a section that features the most recent blog post. With a clickable link to take you to the rest of the story and the "Stories" page.

Mockup:

[Routing] "Get Resilience" should be routed to the form for organizations to sign up

Once the "Get Resilience" button is pushed the user should be redirected to "Get Resilience form Page".

Description:
Use the /getresilience route

Route to "Stories" tab

Create a route to the "Stories" tab (Blogs)

Edit: Rename Blogs route to Stories

[Layout] The link to the entire blog post.

After clicking on the "Finish Reading" link on each blog post you should be directed to a link that displays the full blog post.

Description:
A button should be present at the top left to go back to the "Stories" Page.
Next to the button should be the date the blog was created - Center Aligned
Under the date should be the title of the blog post - Center Aligned
The blog post with the images that are linked to the post should be underneath the title - Left Aligned
Under the posting should be Tags - Left Aligned

Mockup

Screenshot:

Rough wireframes for the content layouts

Wireframes:
https://www.figma.com/proto/GLg0zPNnwMEGIb9TytCrxQ/Resilience-App?node-id=34756%3A0&viewport=-2356%2C-2808%2C1&scaling=scale-down-width

Followed the IA plan from Courtney, and I put some basic copy to start with.

Add descriptions under involvement cards

Reference:

Lorem ipsum should be replaced with approved messaging. Links on each card should be valid and working

Route to "About Us" tab

Create a route to the "About Us" Tab.

Edit: Rename "About" to "About Us"

Modal pops up when you click on an volunteers image on the grid

When looking at the volunteers on the grid, a modal should pop up when a user clicks on a volunteer's image.

Description:
The modal should display information about the volunteer on the left side and a picture of the volunteer on the right side.
The information should contain the volunteer's full name - Left Aligned
The volunteer's position - Left Aligned
A summary about the volunteer and how they contributed - Left Aligned
Where they contributed the most - Left Aligned

Mockup

Screenshot:

[Layout] Section on the 'home' page that highlights application tools

On the 'Home' page we need to highlight the features that the resilience app contains.

We should create a section that contains a heading stating "Get tools to empower your mutual aid organization" with a smaller heading underneath that stating "Resilience is the ability to recover from change and disaster"

Mockup:

Route to "Contribute" tab

Create a route to the "Contribute" tab.

Add newsletter subscription email input box

Page: index.html

Description: a box, with a success or failure message

Mockup

Screenshot:

[Layout] A section that spotlights our partners on the 'Home' page

Underneath the Applications tools section, there should be a section that spotlights the companies/organizations that are "Our Partners and Affiliations".

Partners Logos will be presented under a Title text that reads "Our Partners and Affiliations".

Figma Link

Mockup:

[Layout] Add culture section

Page: /about-us

Description:
Culture section will be dependent on the reusable component from #98.

Mockup

Screenshot:

[Layout] Add graphics and descriptions for application tools

In the tools section on the 'Home' page, there needs to be a graphic with a title and short description under the graphic for each feature.

One for Task Management, one Coordination, and Scheduling, one for Pay and Transport Resources.

Mockup:

[Layout] Create a section for "Who We Are" on the 'Home' Page

Underneath the "Contribute to the Resilience" there will be a section that spotlights "Who We Are" as a team.

Mockup:

Optimize images for web

Reference:

Image resolutions are too large to quickly load on the blogs pages.

Almost 18 seconds to load 11MB of images. This can be drastically improved with lower resolution images.

[Layout] Form should be present underneath product recap

Underneath the project recap, a form will be located in for the organizers to fill out so they can become a Resilience user.

Description:
The top of the section should have the Title "Get Resilience for Your Organization" - Center Aligned
Under the title, the text should read "Tell us a bit more, So we can see how we fit" - Center Aligned
The form should be displayed underneath - Center aligned

Mockup

Screenshot:

[Layout] Call to action inform others to donate funds

Description
The layout should a text/button that contains a heading and text that describes how one could Donate Funds - Center Aligned

With a button underneath the text-centered

Mockup

Screenshot

[Layout] Link to learn more about partnership

At the bottom of the Logo images in the Partnership section, there is a link that will provide more information about becoming a partner of the project.

Mockup:

Test Write Access