feat: update Footer layout and styles to better match Figma design

tomive01888 commented 1 month ago

What does this PR do?

This PR refactors the Footer component for improved structure, responsiveness, and accessibility. Key updates include:

Layout and spacing improvements
Refined newsletter section design
Icon buttons for Facebook and Instagram
Consistent hover/focus states
Use of shared Button component
Minor semantic enhancements

Description of Task to be completed?

[x] Inspect the current footer for layout bugs or misalignment
[x] Adjust padding, margin, or flex/grid structure as needed
[x] Verify all links and icons are correctly positioned
[x] Test responsiveness on mobile, tablet, and desktop
[x] Confirm visual consistency with the design mockup

How should this be manually tested?

Scroll to Footer component as see the changes and minor improvements to the lower half of footer component. Can see that merge mistake of duplicate div content is gone. Spacing between links are widened, hover effect of major links has been improved for accessibility improvements. And more in alignment with the Figma design.

Mobile view also considers the "back to top"-button now not overlapping the bottom links "privacy policy" and "terms and conditions", as they have to been moved to left when on mobile screen sizes.

💡 Suggested Improvements Newsletter UX Enhancements

Improve the visual design and feedback for the newsletter subscription form.
Add a toast notification to confirm successful subscription attempts (per user feedback or Figma design).
Add a loading and success/failure state handler for the “Sign Up” button to reflect user interaction.
Code Structure Improvements
Extract the NewsletterForm into its own dedicated component to improve maintainability and reusability.

netlify[bot] commented 1 month ago

Deploy Preview for musikkforandrerliv failed.

Name	Link
Latest commit	310233c69a4f404c452e019adb1a977348782be4
Latest deploy log	https://app.netlify.com/projects/musikkforandrerliv/deploys/68417c1357c1740008f3a11f

sulenchy commented 1 month ago

@tomive01888 Pls, add the ticket link

tomive01888 commented 1 month ago

https://github.com/NoroffFEU/musikkforandrerliv.no/issues/1223

sulenchy commented 1 month ago

@senbet22 Please, have a look

senbet22 commented 1 month ago

This looks good well done!

NoroffFEU / musikkforandrerliv.no