Skip to content

Add global dark mode footer - #342

Open
Adeolu01 wants to merge 1 commit into
SwiftChainn:mainfrom
Adeolu01:feat/global-dark-footer
Open

Add global dark mode footer#342
Adeolu01 wants to merge 1 commit into
SwiftChainn:mainfrom
Adeolu01:feat/global-dark-footer

Conversation

@Adeolu01

Copy link
Copy Markdown

Summary

Implements a reusable GlobalFooter component matching the Dark Mode design system, following the project's Component -> Hook -> Service architecture.

  • Three primary link sections: Infrastructure, Resources, Connect
  • Email subscription form with client-side validation and pending/success/error states
  • Bottom legal section with Privacy Policy, Terms of Service, Cookie Policy links and copyright line
  • On mobile, the three sections collapse into an accessible accordion (aria-expanded/aria-controls); on desktop they render as a grid
  • Full dark mode support via Tailwind dark: classes

Architecture

  • Service: services/footerService.ts - getFooterContent() and subscribeToNewsletter(email), axios-based, follows the existing faqService.ts pattern
  • Hook: hooks/useFooter.ts - useFooter() (react-query) for content, useNewsletterSubscribe() (mutation) for the subscribe form
  • Component: components/shared/GlobalFooter.tsx - consumes the hooks only, no direct service calls, no inline mock content driving the primary render path

Integration

  • Wired GlobalFooter into the root layout (app/layout.tsx) so it renders once across the app
  • Removed the now-redundant inline footer markup from app/page.tsx to avoid duplication

Testing

  • npx tsc --noEmit: no errors in files touched by this change (pre-existing unrelated errors elsewhere in the repo are untouched)
  • npx eslint on the changed files: 0 errors, 0 warnings
  • Manually verified accordion behavior, subscribe form validation states, and dark mode styling

Notes

  • Backend endpoints /api/footer and /api/footer/subscribe are assumed per the issue spec. Until they exist, the footer falls back to a static set of sections for rendering and the subscribe form surfaces its error state on submit.

closes #306

Introduce a reusable GlobalFooter with Infrastructure/Resources/Connect
link sections backed by a footerService/useFooter query, a validated
email subscription form with pending/success/error states, and a legal
links + copyright bar. Sections collapse into an accessible accordion
on mobile and render as a grid on desktop, styled for dark mode.

Wire GlobalFooter into the root layout and remove the now-redundant
inline footer markup from app/page.tsx.
@drips-wave

drips-wave Bot commented Jul 26, 2026

Copy link
Copy Markdown

@Adeolu01 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: Global Dark Mode Footer

1 participant