[Frontend/UI] FAQ Page (JO Task)

[xandreiAThome]

Summary

Create a public FAQ page answering common questions about ArcherBytes — covering account setup, content creation, moderation, data privacy, and platform policies. The initial release will use hardcoded dummy content to validate layout and design before wiring up a data source. The developer will design the layout based on the design principles established in the Figma (no dedicated page mockup exists).

Scope

• src/app/(static)/faq/page.tsx — new route at /faq
• src/data/faq.ts — static dummy FAQ data (array of question/answer objects)
• Navigation: "FAQ" link in the site footer

Deliverables

• Data layer — a typed constant array of FAQ items with { question: string; answer: string } (or support for rich text if the layout requires it), containing 8–12 realistic but dummy Q&A pairs
• UI route — /faq renders an accordion or expandable list using the same layout/typography as other static pages, matching the Figma design system
• Footer link — "FAQ" added to the site footer
• Accessibility — accordion follows WAI-ARIA disclosure pattern (proper aria-expanded, aria-controls, keyboard navigation)
• No API or DB — data lives in a static TypeScript file; zero database or network dependencies

Implementation Notes

• Accordion pattern: Use shadcn/ui's Accordion component if available (@/components/ui/accordion), which follows the WAI-ARIA disclosure pattern out of the box.
• Layout reuse: There is no dedicated FAQ mockup in the Figma. Use the Figma as a reference for general design principles (typography, color, spacing, responsiveness) and apply them consistently
• Dummy data: Write the FAQ array in its own file (src/data/faq.ts) so it's trivial to swap out for CMS-backed data later. Keep answers concise (2–4 sentences each).
• No schema/types needed: Static data only — no DB tables, API routes, or Zod validation required.
• Search (future): Do not build client-side search yet. The dummy data phase is purely about layout validation.

Acceptance Criteria

• /faq returns a 200 and renders an accordion/list of FAQ items
• Page matches the Figma design (spacing, heading hierarchy, responsive breakpoints)
• Accordion collapses/expands correctly with keyboard navigation
• Footer includes a visible "FAQ" link
• No database calls or API requests on page load
• npm run build passes without errors

Tasks

Setup

• Check if shadcn/ui Accordion component is already installed; if not, add it via npx shadcn@latest add accordion

Implementation

• Create dummy FAQ data file at src/data/faq.ts (8–12 Q&A pairs)
• Create the route page at src/app/(static)/faq/page.tsx
• Build or reuse the accordion component matching Figma design
• Reuse the existing static/legal page layout for visual consistency
• Add "FAQ" link to the site footer
• Verify responsive layout matches Figma breakpoints

Validation

• Run npm run build — ensure page compiles and typechecks
• Test keyboard navigation (Tab, Enter/Space to toggle, arrow keys if applicable)