Implement the new design for the footer: desktop

[abuna1985]

Dependency

• [x] #2958
• [x] https://github.com/hackforla/website/issues/3023
• [x] https://github.com/hackforla/website/issues/3026
• [x] https://github.com/hackforla/website/issues/2802

Overview

We need to create a dynamic footer based on the Figma Design of our Footer so that we have a more user-friendly footer.

Click here to see current HfLA footer

Click here to see the proposed footer (Figma design)

Action Items

• [ ] Feature Branch: You will be working off a feature branch called feature-homepage-launch and the pull request created from this issue should be pushed into that feature branch. Please read and follow the steps in the How to work off of a feature branch wiki article.
• [ ] Create data files (if they don't exist yet) with the column title (Our Work, join Us, Get in Touch, etc) and the list of links that go in each column
  • [ ] The data can be stored under _data/navigation
  • [ ] The footer should dynamically get the data using liquid instead of being statically rendered
• [ ] Modify the existing footer section based on the Figma design
• [ ] Create a PR that is pushing to the feature-homepage-launch branch ~- [ ] Once PR is approved and merged, release dependency on #2554~

Resources/Instructions

Feature branch wiki article Figma - Footer (final design) https://github.com/hackforla/website/issues/1969#issuecomment-921299370 Click below to see page footer https://github.com/hackforla/website/blob/66f89317e84517f4bbbd29911bb21aeddb8bb2d3/_includes/footer.html#L1-L24

[github-actions[bot]]

Hi @abuna1985.

Good job adding the required labels to this issue.

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[kristine-eudey]

@macho-catt I just updated the order of menu items in the "Join Us" section of the footer to match the order they appear on the Join Us page.

[Providence-o]

This is a screenshot of the footer that Kristine updated

[ExperimentsInHonesty]

Once this issue is done, please send back to product with a note for them to ask design and research to confirm the order they want the Join Us footer items in.

[github-actions[bot]]

Hi @jyaymie, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[jyaymie]

Availability: 11/29/22 - 12/2/22 ETA: 12/2/22

[jyaymie]

@ExperimentsInHonesty

The current Contact Us link - /#contact-us - takes me to the top of the home page where I can't find any info for contacting HfLA. I wanted to know if I have the correct link. Thanks!

Where the Contact Us link takes me:

[JessicaLucindaCheng]

@jyaymie

The current Contact Us link - /#contact-us - takes me to the top of the home page where I can't find any info for contacting HfLA. I wanted to know if I have the correct link. Thanks!

Where the Contact Us link takes me:

Contact Us should go to www.hackforla.org/#get-in-touch, so the Docker equivalent is localhost:4000/#get-in-touch It should redirect to the Get in Touch section at the bottom of the redesigned homepage.

[jyaymie]

Thanks for the correction, @JessicaLucindaCheng! This will mean that the user will have two links directing them to www.hackforla.org/#get-in-touch, specifically, "Get in Touch" (in bold) and "Contact Us" in the third column of the footer. Will both links be needed?

[JessicaLucindaCheng]

@jyaymie

This will mean that the user will have two links directing them to www.hackforla.org/#get-in-touch, specifically, "Get in Touch" (in bold) and "Contact Us" in the third column of the footer. Will both links be needed?

That is a good point. I assumed the bold text was just supposed to act like a header for each column and was not supposed to be linked but I could be wrong about this.

Please reach out to Bonnie (GitHub handle: ExperimentsInHonesty) and ask her your question. She may know the answer.

[jyaymie]

@ExperimentsInHonesty - There are two links directing the user to the same section of the home page. I wanted to know how I should proceed, as this feels redundant to the user.

This will mean that the user will have two links directing them to www.hackforla.org/#get-in-touch, specifically, "Get in Touch" (in bold) and "Contact Us" in the third column of the footer. Will both links be needed?

[Rabia2219]

@ExperimentsInHonesty @hackforla/product-managment

The current Contact Us link - /#contact-us - takes me to the top of the home page where I can't find any info for contacting HfLA. I wanted to know if I have the correct link. Thanks!

Where the Contact Us link takes me:

@jyaymie Hi there! Tagging '@hackforla/product-managment' sends this message to all the PMs across HackforLA. You only need to tag the PM for you project or add the 'ready for milestone' label to get feedback :)

[jyaymie]

@jyaymie Hi there! Tagging '@hackforla/product-managment' sends this message to all the PMs across HackforLA. You only need to tag the PM for you project or add the 'ready for milestone' label to get feedback :)

@Rabia2219 Sorry about that! The comment has been edited accordingly 🙂

[github-actions[bot]]

@jyaymie

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, December 12, 2022 at 11:15 PM PST.}

[jyaymie]

1. Progress: I have confirmed that the footer is dynamically getting data using liquid and that the data can be easily modified to implement future changes to the order of the footer items. I have also modified the CSS to match the Figma design.
2. Blockers: Currently, there are two links - "Get in Touch" (in bold) and "Contact Us" in the third column of the footer - that direct the user to the same section of the home page, www.hackforla.org/#get-in-touch. This might be redundant to the user. I am waiting for instruction on how I should proceed.
3. Availability: Flexible
4. ETA: Jan 2023
5. Pictures (optional): The footer with its CSS modifications:

[roslynwythe]

@jyaymie I just wanted to mention that there is a PR #3754 that is also modifying the footer CSS on feature-homepage-launch

[jyaymie]

@jyaymie I just wanted to mention that there is a PR #3754 that is also modifying the footer CSS on feature-homepage-launch

@roslynwythe Great eye! Thanks for bringing this to my attention. I'll watch out for further development on that issue and modify my code accordingly.

[github-actions[bot]]

@jyaymie

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, December 26, 2022 at 11:15 PM PST.}

[jyaymie]

1. Progress: There is no progress to report since my last update. However, a discussion with the dev team at today's meeting shed light on other potential blockers.
2. Blockers:

• As previously mentioned, the two links, "Get in Touch" and "Contact Us" are directing users to the same section of the home page, www.hackforla.org/#get-in-touch.
• I wonder if users will instinctively know that the bolded headers of each column are also links.
• Even at a max font weight of 900, these bolded headers don't look that different from other non-bolded links. See screenshot.

3. Availability: Flexible
4. ETA: Jan 2023

[jyaymie]

In today's All Team meeting, it was confirmed that the URL of some links are placeholders to be updated as the website develops, so I will move forward with the links as they currently are.

Blockers related to the column headers will be considered following user testing.