fix(web): make FAQ section theme-aware and align nav/footer label to FAQ #97
Description
Problem 1: FAQ Section Not Respecting Theme Toggle
The FAQ accordion content boxes used hardcoded inline styles (background-color: #1e1e1e; color: #ddd;), which prevented them from responding to the light/dark theme toggle. When users switched to light mode, the FAQ content remained dark, creating poor readability and an inconsistent user experience.
Problem 2: Misleading Navigation Label
The header navigation and footer links displayed "Pricing" but actually navigated to the FAQ section (#faq-footer). Since this project doesn't have pricing tiers, the label was misleading and didn't match the destination.
Approach:
Replaced all inline styles in the three FAQ accordion .content divs with Tailwind utility classes that include both light and dark mode variants
Updated the navigation link label from "Pricing" to "FAQ" in both the header and footer while preserving the existing anchor link
Related Issue
Closes #75 (Theme toggle not working for FAQ section)
Checklist
Attach Proof of Work - Screenshots showing before/after in light and dark mode (see below)
Explain Your Approach - Problem and solution clearly described above
PR links to the issue - This PR closes #75
I have tested my changes locally (manually toggled theme and verified FAQ content responds correctly)
My code follows the project's coding standards (uses existing Tailwind conventions)
I have added appropriate comments to my code (N/A - HTML/CSS only, self-documenting)
I have updated documentation if necessary (N/A - no user-facing docs to update)