[MPT-81] Home: Redesign testimonial to show Mentee/Mentor 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

[wei2912]

@ykIsCoding I'll reach out to @w3joe to get the code for the PR, can just look through the design and code, then discuss with me and @jcc-kh on how to proceed.

[wei2912]

https://flowbite.com/docs/components/carousel/ might be useful

we aren't currently using Flowbite but I'm okay to import it (see https://flowbite.com/docs/getting-started/quickstart/)

[ykIsCoding]

Hi @wei2912 @jcc-kh I have requested to edit the figma. Will show the mockup prior to coding the thing out

[ykIsCoding]

changed the UI to this to better differentiate mentor and mentee.

For mobile screen i have increased the button size for easier navigation.

btw i still cant edit the figma, i just copied onto my own figma file to edit.

[wei2912]

@ykIsCoding could you include your Figma link? thanks!

@jcc-kh for your review :P

[ykIsCoding]

https://www.figma.com/design/R7G3ALPtUvHdjO5payCrpu/Untitled?t=quH6gWS7AXaOq7tW-1

[wei2912]

@jcc-kh to get back to @ykIsCoding on the design soon