added FAQ page and linked it in footer

[ArshiBansal]

Description

Added a comprehensive FAQ page (/faq) and integrated the FAQ link into the Footer navigation.

Changes:

• Created app/faq/page.tsx with a clean, accessible accordion-style FAQ section (10 detailed questions)
• Updated Footer component to include "FAQ" link in the Navigation section
• Fully responsive design with dark mode support
• Translation-ready with proper keys
• Added helpful links to GitHub Issues and Discord

Fixes #5499

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

FAQ Page:
A modern, clean FAQ page with expandable accordion items, smooth animations, and a "Still have questions?" contact section.

Footer Update:
FAQ link now appears in the Navigation column alongside Home, Generator, Compare, etc.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally.
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format.
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that I have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@ArshiBansal is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🚨 Hey @ArshiBansal, the CI Pipeline is failing on this PR and it has been marked as status:blocked.

Please fix the issues before this can be reviewed. Here's how:

1. Run checks locally before pushing:

npm run format:check   # Check Prettier formatting
npm run lint           # Run ESLint
npm run typecheck      # TypeScript type check
npm run test           # Run unit tests (Vitest)
npm run build          # Verify production build passes

2. Auto-fix common issues:

npm run format         # Auto-fix formatting with Prettier
npm run lint -- --fix  # Auto-fix lint errors where possible

3. Check the full failure log here:
👉 View CI Run

Once you push a fix and the CI passes, the status:blocked label will be removed automatically. 💪

[Aamod007]

Thanks for adding the FAQ page and footer entry. I reviewed the PR description, linked issue #5499, failing CI log, and the actual diff before labeling.

Labels applied:

• level:intermediate: the PR adds a new client page in app/FAQ/page.tsx with local accordion state, translation fallbacks, ten FAQ entries, external links, and responsive/dark-mode styling across lines 1-170, plus footer navigation changes in app/components/Footer.tsx lines 68-72.
• type:feature: it adds a new /FAQ page and exposes it from the footer navigation.
• type:docs: the page centralizes product/project FAQ content that issue #5499 requested as organized user-facing documentation.
• type:design: the new page includes a full responsive accordion layout, themed surfaces, and button/link styling in app/FAQ/page.tsx lines 75-169.
• type:accessibility: the accordion buttons include aria-expanded and keyboard-friendly button elements in lines 87-96.

I am requesting changes because the PR is marked status:blocked and the required Format · Lint · Typecheck · Test workflow fails in app/components/Footer.empty-fallback.test.tsx.

What is failing:

• The empty-fallback test expects every footer link text to be blank when translations return empty strings.
• The new footer item uses t('footer.faq') || 'FAQ', so the test receives FAQ instead of '' and fails at app/components/Footer.empty-fallback.test.tsx:54.

How to fix it:

1. Add footer.faq to the translation resources so the footer label comes from translations like the other navigation items.
2. Avoid forcing the 'FAQ' fallback in the footer link when t('footer.faq') intentionally returns an empty string for fallback tests. A safer pattern is to let the translation layer provide fallback text, or update the test with an intentional exception only if maintainers want FAQ to behave differently.
3. Re-run npm run test -- app/components/Footer.empty-fallback.test.tsx and then the full CI commands before pushing.

Once that failing footer fallback behavior is fixed and CI is green, this can be reviewed again.

[Aamod007]

I’m keeping this on request changes for now because the new route lives in �pp/FAQ/page.tsx, while the footer links to /faq. On a case-sensitive filesystem that means the navigation can point at the wrong segment, so the fix is to rename the route folder to �pp/faq/page.tsx (or align the link path) and then recheck the footer nav after that.

[Aamod007]

Thanks for the FAQ work. I’m keeping this on Request Changes because the PR is still blocked and the link target needs to be verified on the current tree. Please clear the blocking check and confirm the /faq route works on the deployed case-sensitive filesystem before asking for approval again.

[Aamod007]

The FAQ page and footer link are in the right direction, but this PR is still blocked. Please clear the blocking check and confirm the /faq route works on the current case-sensitive filesystem, then I can re-review the navigation update safely.

[ArshiBansal]

@Aamod007 made the changes check once