✨ Develop the Image-Text Block Component

[bettybondoc]

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

Description:
Develop the Image-Text Block component for the Consulting Pages. This component should be highly flexible, allowing users to customise various fields (e.g., text, layout, buttons, icons, images). To ensure the UI remains clean and intuitive, group related options together (e.g., all button customisation options like text, link, and style under a single section) and use toggles to hide/show optional fields or elements. The design should prioritise usability and clarity.

Acceptance Criteria:

• The Image-Text Block component includes the following customisation options:

• Layout Selector (Text-Image, Image-Text, No Image)
• Background Selector (Transparent, Grey-700, Gradient 1/2/3/4)
• Label 1
  • Icon Selector
  • Text Field
• Heading Text Field
• Description Text Field
• Label 2 & Label 3
• List
  • Icon Selector (Per Item)
  • Text Field (Per Item)
  • Layout Selector (1-col, 2-col)
• Button 1 & Button 2
  • Before Icon Selector
  • Text & Link Field
  • After Icon Selector
  • Style Selector (Primary, Secondary)
• Lead Catcher (accepts email)
  • Placeholder Text Field
  • Button Text Field
• Image File Uploader + Alt Text

• Fully responsive across desktop, tablet, and mobile
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge)
• Each field includes optional descriptions with links to relevant docs (e.g., Content Creator Guide)
• Fields can be enabled or disabled for flexibility
• Customisation options are grouped logically for a clean, easy-to-use interface
• Code is ready for theming (e.g., Light/Dark modes, custom colours – see linked PBI)
• Tested and approved by Wicksy, Louis and Betty

Tasks

• TODO - Developer to update

Figure: Full Component - Desktop

Figure: Full Component - Mobile

Figure: Use Case - Hero Section

Figure: Use Case - Benefits

Figure: Use Case - Experts

Figure: Use Case - Single Case Study

Figure: Use Case - CTA

[isaaclombardssw]

This is still in progress – the schema's pretty much complete and I just have the component to do now.

There were one or two hold-ups including finding a bug with rich-text field embedded object lists, which I've done a minimal repro for and flagged with TinaCMS (see tinacms/tinacms#5323)

Sneak peek of the schema:

[jeoffreyfischer]

TODO: Check how much those icons increase the bundle size

[isaaclombardssw]

The email capture portion has been extracted into PBI #3360 after a conversation with Betty, Louis and Caleb (currently we aren't sure about the usage).

[isaaclombardssw]

As per my conversation with Betty/Wicksie, fade-in on scroll animation can be added (similar to current site animations).

[isaaclombardssw]

The bundle size issue is the last thing Caleb and I are trying to troubleshoot before this is ready for review – other than that you can see #3369 for the implementation and staging env.

[Calinator444]

We found that importing the icons for the icon picker was adding ~700kib to our bundle size. We're working on adding an endpoint that we're using to serve the icons instead so that they won't be imported into our page bundle.