feat(components): created faq dropdown accordian

[ashoomky]

Description

This PR customises the shadcn Accordion component to match the UOAVC FAQ section design requirements, implementing the visual styling specified in the Figma.

Closes #57

• updates src/components/ui/accordion.tsx to set a fixed width of 1412px on AccordionItem
• adds transition-colors duration-300 to AccordionItem for a smooth hover transition — background fades to transparent with a border-foreground border on hover (closed state only)
• adds open state styles to AccordionItem: border-secondary and bg-background
• updates AccordionTrigger to use a fixed height of 50px, font size of 20px, and font-normal (removing the default bold weight, changing it from font-medium)
• removes the fixed height constraint from the AccordionContent inner div so content expands freely regardless of text length
• adds text-[20px] to AccordionContent to match the trigger font size

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Screen.Recording.2026-05-17.at.10.31.58.am.mov

• Manual testing (requires screenshots or videos)

Run the app and verify the accordion on the FAQ page:

• closed accordion items show the accent background and transition smoothly to transparent with a foreground border on hover
• clicking an item opens it with the secondary border and background colour
• the trigger row is 50px tall with 20px non-bold text
• content expands to fit any amount of text without being clipped
• open/close animations play correctly via Radix data-open/data-closed classes

Checklist before requesting a review

• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation if needed
• I've requested a review from another team member

[aleckshen]

A few issues to address, the main one is splitting this into a separate domain component that builds on top of ui/accordion.tsx, something like src/components/Faq/Faq.tsx that takes an items: { question: string; answer: string }[] prop, exported via src/components/index.ts (see Navbar/ for the pattern). That way page.tsx just renders <Faq items={…} /> and the FAQ page ticket can reuse it. While you're in there, worth switching to type="multiple" per the AC and dropping collapsible.

Alongside that, the hover state doesn't quite match Figma, the pill should go transparent/outlined on hover, but right now bg-accent sits on the item while hover:bg-transparent is on the trigger, so the background stays solid. Could you also do a pass on the spacing (padding inside the pill and gap between items) against the Figma frame? Once those are in I'll do a deeper review on the internals