feat: Add FAQs page

[BIA3IA]

Add FAQs page

Closes #91

[BIA3IA]

Help Wanted per il fade della versione mobile

[coderabbitai]

Walkthrough

This PR refactors the FAQ page into a component-based tabbed architecture with responsive, scrollable navigation. The page now exports Next.js metadata, delegates FAQ rendering to a new FaqsTabs component, and simplifies layout composition. Supporting infrastructure includes type updates for flexible button content and CSS-backed responsive styling for scrollable tabs.

Changes

FAQ Page Redesign with Tabs & Scrollable Layout

Layer / File(s)	Summary
Type Contract & Responsive Styling Foundation src/components/callout-item/types.ts, src/styles/globals.css	CalloutItemProps.buttonText type expands from string to React.ReactNode to allow flexible button content. Mobile media query added to .scroll-fade-x for responsive gradient mask fade behavior on small viewports.
TabsList Responsive & Scrollable Layout src/components/tabs/tabs-list.tsx	TabsList wraps TabsPrimitive.List in a centered responsive container with horizontal scroll support. Glass wrapper styling changes from compact inline-flex to full-width overflow-hidden rounded layout with explicit flex-based className and hidden scrollbars.
FaqsTabs Component with FAQ Data & Rendering src/components/faqs/faqs-tabs.tsx	New client component FaqsTabs defines static faqItems array with five FAQ tabs (Lezioni, Tasse, Esami, Piano di Studi, Mobilità Internazionale), each with icon and nested accordion items. Renders tabbed UI using TabsNavigation, TabsContent, and AccordionList, with trailing CalloutItem linking to /guides and responsive button labels.
FAQsPage Refactoring & UI Polish src/app/faqs/page.tsx, src/components/ui/item.tsx	FAQsPage simplified to export Next.js metadata and render <Hero> plus <FaqsTabs />, removing inline FAQ data and client directive. ItemTitle component updated with responsive typography classes (typo-label-small and sm:typo-title-medium).

Possibly related PRs

• PoliNetworkOrg/web#115: The main PR's FAQs page now composes in the shared <Hero> component, which was introduced in retrieved PR #115 (along with its integration patterns).
• PoliNetworkOrg/web#87: Both PRs introduce/modify the FAQ "guides" callout UX via the shared CalloutItem component/types (retrieved PR adds CalloutItem + buttonText: string, while main PR updates buttonText to ReactNode and uses CalloutItem inside the new FaqsTabs/FAQ page composition).
• PoliNetworkOrg/web#86: Both PRs build on the new Radix-based tabs UI—main PR's FAQ tabs (FaqsTabs/faqs/page.tsx) depend on the shared src/components/tabs/* components (notably tabs-list.tsx), which were introduced/added in retrieved PR #86.

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	All changes are focused on implementing the FAQs page feature; however, some modifications appear tangential such as Hero component styling and CalloutItem prop changes.	Clarify whether Hero component updates and CalloutItem prop type changes from string to React.ReactNode are necessary for the FAQs feature or represent separate enhancements.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Add FAQs page' clearly and concisely describes the main change: adding a new FAQs page to the application.
Linked Issues check	✅ Passed	The PR successfully implements the FAQs page feature with tabbed interface, accordion items, and responsive design as required by issue #91.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/faqs/faqs-tabs.tsx (1)

112-112: ⚡ Quick win

Avoid hard-coding the default tab key.

Using "tab5" directly makes the initial state brittle: if values are renamed/removed, no panel is selected by default.

♻️ Proposed fix

-      <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
+      <Tabs defaultValue={faqItems[0]?.value} className="flex w-full flex-col items-center">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/faqs/faqs-tabs.tsx` at line 112, The Tabs component in
faqs-tabs.tsx currently hardcodes defaultValue="tab5", which can break when tab
keys change; update Tabs to derive its default value from the actual tabs data
(e.g., use the first entry of the tabs array or a TAB_KEYS constant) or make the
active tab controlled via state in the FaQsTabs component so the initial
selected tab is computed (refer to the Tabs component, defaultValue prop, and
the tabs data/array used to render TabList/TabPanel) and replace the literal
"tab5" with that derived value.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/faqs/faqs-tabs.tsx`:
- Around line 38-40: Several FAQ entries in src/components/faqs/faqs-tabs.tsx
repeat the same "Per le lauree le lezioni sono sospese?" trigger/content across
unrelated tab groups (occurring at the diff ranges you noted); consolidate by
extracting that repeated Q/A into a single shared constant (e.g., LEZIONI_FAQ)
or helper (e.g., getLezioniFaq()) and replace the duplicated inline objects with
references to that constant in the tab arrays (or remove duplicates and keep a
single canonical entry per relevant category), ensuring only one source of truth
for the trigger/content to avoid inconsistent copies.

In `@src/styles/globals.css`:
- Around line 38-39: The two mask declarations are inconsistent: mask-image uses
calc(100% - 36px) while -webkit-mask-image uses calc(100% - 28px); update the
-webkit-mask-image declaration so its gradient stops match mask-image (i.e.,
transparent, black 28px, black calc(100% - 36px), transparent) so both
mask-image and -webkit-mask-image use the same start (28px) and end (36px) fade
distances.

---

Nitpick comments:
In `@src/components/faqs/faqs-tabs.tsx`:
- Line 112: The Tabs component in faqs-tabs.tsx currently hardcodes
defaultValue="tab5", which can break when tab keys change; update Tabs to derive
its default value from the actual tabs data (e.g., use the first entry of the
tabs array or a TAB_KEYS constant) or make the active tab controlled via state
in the FaQsTabs component so the initial selected tab is computed (refer to the
Tabs component, defaultValue prop, and the tabs data/array used to render
TabList/TabPanel) and replace the literal "tab5" with that derived value.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e7b8a4d3-7341-42be-8566-a49d8c2bdd72

📥 Commits

Reviewing files that changed from the base of the PR and between 146617a and 6baceab.

📒 Files selected for processing (7)

• src/app/faqs/page.tsx
• src/components/accordion-association/index.tsx
• src/components/callout-item/types.ts
• src/components/faqs/faqs-tabs.tsx
• src/components/tabs/tabs-list.tsx
• src/components/ui/item.tsx
• src/styles/globals.css

💤 Files with no reviewable changes (1)

• src/components/accordion-association/index.tsx