PBI 2716 & 2758 Improve Testimonials Section on Home Page

[ZenoWang1999]

Resolves #2716

• Updated the original component using Magic UI as required, change the display mode to an infinite scrolling component
• Limit the height to a fixed size, and keep the rest of the basic functionality unchanged
• Optimized the white transition effect to a transparent transition.

Figure: New layout implemented using magic ui

Figure: The basic functionality remains unchanged

Resolves #2758

• Resolved the issues with right sidebar overflow and width fluctuation.
• Added functionality for the right sidebar to scroll synchronously with the corresponding content in the middle.
• Optimized the component appearance.

Please help me test whether the following content loads properly in your local environment:

1. Start tina.io and visit http://localhost:3000/docs/introduction/faq.
2. If it displays as shown in Figure 1, it indicates that the css content has loaded correctly.
3. If it displays as shown in Figure 2, where the right sidebar does not hide the scrollbar, it indicates that the styled component failed to load. This issue often occurs after React Fast Refresh, and I am not yet sure whether the same issue appears in other local or production environments. If it does, I will replace this part of CSS with JSX.

Figure 1: Loading correctly

Figure 2: The styled component did not load.

General Contributing:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

All New Content Submissions: (To be confirmed by reviewer)

• Title is short & specific
• Headers are logically ordered & consistent
• Purpose of document is explained in the first paragraph
• Procedures are tested and work
• Any technical concepts are explained or linked to
• Document follows structure from templates
• All links work
• The spelling and grammar checker has been run
• Graphics and images are clear and useful
• Any prerequisites and next steps are defined.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tina-io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 21, 2025 1:58am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ ZenoWang1999
❌ tino-liu
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[joshbermanssw]

left some comments :) awesome component

[joshbermanssw]

Looks cool - just a couple small comments

[isaaclombardssw]

A couple of acceptance test thoughts – there's a white border here (it should be opacity gradient).

This component is used on another page (see below), the border around avatars might also not be suitable for that use case. Check with @landonmaxwell on that.

Also should this be limited to the standard max width for components?

[isaaclombardssw]

Looks dope 💯

[isaaclombardssw]

Deployment looks really good!

[isaaclombardssw]

LGTM – great job on this one 🙌