Enhances FAQs page with detailed info and overly fancy stuff

[srkirkland]

Summary by CodeRabbit

• New Features
  • Redesigned FAQ page with expanded, homepage-style content and structured layout.
  • Added a “How Readable works” two-column overview and a step-by-step illustrated timeline.
  • New “What you get” section highlighting core capabilities.
  • Collapsible FAQ items for easier navigation and content access.
  • Enhanced visual design with cards, icons, alerts, header actions (Upload a PDF, Jump to FAQs) and improved content blocks.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

A single frontend file (client/src/routes/FAQs.tsx) is fully replaced: the prior placeholder FAQ is rebuilt into a multi-section FAQ page with a two-column hero, feature overview cards, an illustrated timeline, alerts, and multiple collapsible FAQ items via a new internal FaqItem component.

Changes

Cohort / File(s)	Summary
FAQ Page Redesign client/src/routes/FAQs.tsx	Replaces placeholder with a structured FAQ page. Adds internal FaqItem component and FaqItemProps type, hero header (two-column) with actions, overview cards, "How Readable works" timeline, alerts, and a mapped list of collapsible FAQ entries. Imports additional heroicons and Link. Net change: +418/−164 lines.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through code to bring clarity near,
Cards and timelines now spring into cheer,
Questions collapse, secrets softly unfurl,
I nibble bugs and polish each pearl,
Hooray—FAQs bloom in a tidy swirl.

🚥 Pre-merge checks | ✅ 1 | ❌ 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.
Title check	❓ Inconclusive	The title is vague and uses non-descriptive language ('overly fancy stuff') that doesn't clearly convey the actual changes made to the FAQs page.	Revise the title to be more specific and professional, such as 'Redesign FAQs page with collapsible items and multi-section layout' to better reflect the substantial UI restructuring and new content organization.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@client/src/routes/FAQs.tsx`:
- Around line 419-424: The FAQ copy contains a duplicated word "for for" inside
the FaqItem paragraph; update the JSX text within the FaqItem (component
instance with question="Who is Readable for?") to remove the extra "for" so the
sentence reads correctly (e.g., "Readable is designed for UC Davis by the
College of Agricultural and Environmental Sciences Dean's Office @ UC Davis").
- Around line 25-27: The checkbox toggle in the collapse component lacks an
accessible label; update the input rendered in the FAQs component so it has an
accessible name (e.g., add aria-label or aria-labelledby referencing the
collapse title). For example, give the collapse title element (the div with
class "collapse-title" that uses the question prop) a stable id and set that id
on the input's aria-labelledby attribute (or provide a descriptive aria-label)
so screen readers announce the control; keep the existing
defaultChecked={defaultOpen} behavior.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add an accessible label to the collapse toggle.

The checkbox has no label, which is an accessibility blocker for screen readers. Add an aria-label (or link it to the title) so the control is announced meaningfully.

🔧 Suggested fix

-      <input defaultChecked={defaultOpen} type="checkbox" />
+      <input
+        aria-label={question}
+        defaultChecked={defaultOpen}
+        type="checkbox"
+      />

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div className="collapse collapse-arrow bg-base-100 shadow border border-base-300">
	<input defaultChecked={defaultOpen} type="checkbox" />
	<div className="collapse-title text-base font-semibold">{question}</div>
	<div className="collapse collapse-arrow bg-base-100 shadow border border-base-300">
	<input
	aria-label={question}
	defaultChecked={defaultOpen}
	type="checkbox"
	/>
	<div className="collapse-title text-base font-semibold">{question}</div>

🤖 Prompt for AI Agents

In `@client/src/routes/FAQs.tsx` around lines 25 - 27, The checkbox toggle in the
collapse component lacks an accessible label; update the input rendered in the
FAQs component so it has an accessible name (e.g., add aria-label or
aria-labelledby referencing the collapse title). For example, give the collapse
title element (the div with class "collapse-title" that uses the question prop)
a stable id and set that id on the input's aria-labelledby attribute (or provide
a descriptive aria-label) so screen readers announce the control; keep the
existing defaultChecked={defaultOpen} behavior.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Fix duplicated word in FAQ copy.

Minor typo: “for for” reads awkwardly.

✏️ Suggested fix

-                Readable is designed for for UC Davis by the College of
-                Agricultural and Environmental Sciences Dean's Office @ UC
-                Davis
+                Readable is designed for UC Davis by the College of
+                Agricultural and Environmental Sciences Dean's Office @ UC
+                Davis.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<FaqItem question="Who is Readable for?">
	<p>
	Readable is designed for for UC Davis by the College of
	Agricultural and Environmental Sciences Dean&apos;s Office @ UC
	Davis
	</p>
	<FaqItem question="Who is Readable for?">
	<p>
	Readable is designed for UC Davis by the College of
	Agricultural and Environmental Sciences Dean&apos;s Office @ UC
	Davis.
	</p>

🤖 Prompt for AI Agents

In `@client/src/routes/FAQs.tsx` around lines 419 - 424, The FAQ copy contains a
duplicated word "for for" inside the FaqItem paragraph; update the JSX text
within the FaqItem (component instance with question="Who is Readable for?") to
remove the extra "for" so the sentence reads correctly (e.g., "Readable is
designed for UC Davis by the College of Agricultural and Environmental Sciences
Dean's Office @ UC Davis").