docs: add FAQ section to in-app documentation page (JhaSourav07#895)

## Description

Fixes JhaSourav07#886

## Pillar

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

## Visual Preview
### Before
FAQ only existed in the README on GitHub — not accessible within the app
itself.

### After
<img width="1546" height="811" alt="image"
src="https://github.com/user-attachments/assets/53dfeb4d-20dd-4fc2-9558-27adc4c159a9"
/>


## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] 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).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/documentation/page.tsx

@@ -459,6 +459,50 @@ export default function DocumentationPage() {
             </div>
           </Panel>
         </section>
+        <section className="mb-8">
+          <Panel
+            eyebrow="FAQ"
+            title="Frequently Asked Questions"
+            description="Quick answers to the most common questions from the CommitPulse community."
+          >
+            <div className="space-y-3">
+              {[
+                {
+                  q: 'How do I change the accent color of my badge?',
+                  a: 'Add &accent=ff6b35 to your URL with any hex color (no # needed). This overrides the theme accent color.',
+                },
+                {
+                  q: 'Can I use a custom font?',
+                  a: 'Yes — use the &font= parameter. Pass any Google Font name (e.g. &font=Fira+Code). If left blank, the theme default is used.',
+                },
+                {
+                  q: 'Why does my badge show NOT FOUND?',
+                  a: 'This means the GitHub username does not exist or has no public contribution data. Double-check your username spelling.',
+                },
+                {
+                  q: 'How do I embed the badge in my README?',
+                  a: 'Copy the markdown snippet from the homepage and paste it into your GitHub profile README. The badge renders automatically.',
+                },
+                {
+                  q: 'Can I preview my badge before adding it to my README?',
+                  a: 'Yes! Enter your GitHub username on the homepage to instantly preview your 3D contribution monolith before copying the link.',
+                },
+                {
+                  q: 'Which themes are available?',
+                  a: 'CommitPulse includes dark, neon, dracula, github, light, ocean, sunset, forest, rose, nord, synthwave, gruvbox and highcontrast. See the Theme Gallery above for previews.',
+                },
+              ].map(({ q, a }) => (
+                <div
+                  key={q}
+                  className="rounded-[1.25rem] border border-black/10 bg-gray-50 px-5 py-4 dark:border-white/8 dark:bg-black/35"
+                >
+                  <p className="text-sm font-semibold text-black dark:text-white">{q}</p>
+                  <p className="mt-2 text-sm leading-7 text-gray-600 dark:text-white/60">{a}</p>
+                </div>
+              ))}
+            </div>
+          </Panel>
+        </section>
       </div>
     </main>
   );