[GOOD FIRST ISSUE]: Improve footer UI and responsiveness across the website

Context

Description

The current footer design across the Tectonic WebUI could be improved to provide a more consistent, polished, and responsive experience across different screen sizes.

The footer currently has spacing and layout issues, particularly on smaller screens, where the content becomes unnecessarily tall and visually unbalanced.

Current Behavior

• Footer content has excessive vertical spacing on smaller screen sizes.
• The footer becomes unnecessarily tall on mobile devices.
• Link groups and footer sections do not always feel visually balanced.
• Spacing and alignment between the footer sections could be improved.
• The footer layout could be more consistent across different pages and screen sizes.
• The overall footer design does not feel as polished as the rest of the website.

Expected Behavior

The footer should have a clean, consistent, and responsive layout across the website.

The improvement should:

• Reduce unnecessary whitespace and vertical spacing.
• Provide better alignment between footer sections.
• Maintain a consistent layout across pages.
• Improve responsiveness across mobile, tablet, and desktop screen sizes.
• Improve the visual hierarchy of footer links and sections.
• Ensure the copyright and footer branding are positioned consistently.
• Preserve accessibility and readability while improving the overall UI.

Scope

Review and improve the footer across the website rather than applying a fix to a single page or screen size.

Screenshots

Attached screenshots demonstrate the current footer layout and spacing issues, particularly on mobile.

What Needs to Be Done

What Needs to Be Done

Improve the footer UI and responsiveness across the website.

• Review the footer layout across different pages and screen sizes.
• Reduce excessive spacing and unnecessary empty space, especially on mobile.
• Improve alignment and spacing between footer sections such as Protocol, Community, and Resources.
• Improve the positioning and spacing of the copyright and footer branding.
• Ensure the footer remains visually consistent across mobile, tablet, and desktop.
• Maintain accessibility and readability while improving the overall design.
• Test the updated footer across different viewport sizes to ensure there are no layout issues.

Resources

• Contribution Guide - Start Here!
• Discord Channel

Getting Started

• I have joined the Discord server and will post updates there
• I have read the Contribution Guide
• I understand this issue is assigned on a first-come, first-served basis

Start with CONTRIBUTING.md, then review the existing footer across the website and compare its mobile, tablet, and desktop layouts with the attached screenshots. Done means reduced whitespace, balanced sections, consistent branding and copyright placement, and preserved accessibility across the requested viewport sizes.