Bug: FAQ section uses raw Tailwind color classes instead of the site's CSS design variables

[SG170]

Bug Description

The FAQ component (src/components/FAQ.jsx) uses hardcoded Tailwind color
utilities like text-purple-600, bg-purple-50, text-gray-900, and
border-gray-200 — which are inconsistent with the rest of the site.

Every other section (Hero, Mentors, SummerOfAI, Footer, etc.) uses the CSS
variables defined in globals.css such as var(--purple), var(--ink),
var(--cream), and var(--border). The FAQ was built with a different
pattern and stands out visually.

Current Behavior

FAQ uses raw Tailwind classes:

• text-purple-600 instead of color: var(--purple)
• bg-purple-50 instead of background: var(--cream)
• text-gray-900 instead of color: var(--ink)
• border-gray-200 instead of border: var(--border)

Expected Behavior

FAQ should use the same CSS variables as the rest of the site for
consistent theming and easier future maintenance.

Labels

bug good first issue

[SG170]

@escher-m, can you assign this to me under GSSOC? Thank you!!

[Srushti-Kamble14]

Hey @escher-m -m I would like to work on this issue .Please assign it to me

[PriyadharshniG]

Hi @escher-m,

I’d like to work on issue #94 under GSSoC 2026.

Implementation approach:

• Refactor the FAQ component to replace hardcoded Tailwind color utilities with the existing CSS design variables defined in "globals.css"
• Ensure consistent usage of variables such as "--purple", "--ink", "--cream", and "--border" throughout the FAQ section
• Maintain the current visual appearance while improving design consistency and maintainability
• Verify responsiveness and theme consistency with the rest of the website components
• Test the updated styles across different screen sizes and UI states

Looking forward to contributing.