✨ Develop the Comparison Table Component

[bettybondoc]

cc @wicksipedia @isaaclombardssw @UlyssesMaclaren @adamcogan @miichaelsmedley @louisroa8189

Description:
Create the Comparison Table component for Consulting Pages. This component should allow users to compare features or items in a tabular format with flexible customization options for content, categories, and styling. The component should support repeatable table items and categories with logical grouping and prioritization for usability.

Acceptance Criteria:

• The Comparison Table component includes the following customization options:

• Background Selector:
  • Transparent
  • Grey-700
  • Gradient 1/2/3/4
• Heading Text Field
• Description Text Field
• Button 1 & Button 2:
  • Before Icon Selector
  • Text Field
  • After Icon Selector
  • Style Selector (Primary, Secondary)
• Table Heading
• Comparison Category (Repeatable)
• Table Item (Repeatable):
  • Item Heading Text Field
  • Item Description Text Field
  • Item Code Text Field
  • Comparison Categories Multiselect

• Fully responsive across desktop, tablet, and mobile.
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge).
• Fields and sections can be enabled or disabled for flexibility.
• The UI for customization options is grouped logically for ease of use (e.g., table items grouped with corresponding settings).
• Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: ✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300).
• Tested and approved by Wicksy, Louis, and Betty.

Tasks:

• TODO - Developer to update

Figure: Comparison Table - Desktop

Figure: Comparison Table - Mobile