[MPT-81] Home: Split Mentee/Mentor testimonials into side-by-side

[wei2912]

Currently, we have a single column with a tag saying Mentor/Mentee:

Since we plan to feature a mentee/mentor side-by-side, there should be two columns with the carousel controlling both.

Before starting on code, a design mockup should be created first.

_{From SyncLinear.com | MPT-81}

[wei2912]

Assigned to @jcc-kh for design ideation.

[w3joe]

@jcc-kh, I have created a design mockup for the mobile version of the carousell, do let me know what you think:

[jcc-kh]

Now that I look at it, looks a bit weird that the photos are not entirely in the box, would it be possible if both the mobile and laptop versions of photos have the photos in the box and aligned with the paragraph (meaning the name, organisation & title) also shift inwards, photo is outermost but still aligned with paragraph)

[w3joe]

Sure, something like this? For the mobile the paragraph (Name, org, title) is a bit of a squeeze but I can try coding it out first and see how it looks.

[wei2912]

Some comments:

1. Mentee vs mentor distinction is not so clear - easy way is to just make the pill tags with "Mentor" or "Mentee" bigger, other ways might be having distinct background colours, using icons?
2. Left/right buttons would be more intuitive if placed at the sides on desktop, rather than at the bottom.

That said, I think the current design is already good enough for MVP - in the interest of time (since we ought to finish preparing the website by end of this month), could we get this implemented first?

[jcc-kh]

@wei2912 I'm wondering if it would be better for name, organisation and title to be in the same line

[jcc-kh]

https://www.figma.com/design/t84Qk5UE7zow4Q3KdFDM1S/Advisory-SG-Prototypes?m=auto&t=VwiGwpyMRVvcK325-1