Enhance Mobile User Experience by Limiting Initial Tweet Display in Testimonials Component

Description:

Currently, all tweets in the Testimonials component are displayed by default, leading to a cluttered user experience on mobile devices. Users are required to scroll excessively to view the content, which is not ideal for usability.

Expected Behavior:

Initially, a limited number of tweets (e.g., 8) should be displayed.
A "Show More" button should be available for users to expand and view additional tweets.
Once expanded, a "Show Less" button should allow users to collapse the list back to the initial view.

Current Behavior:

All tweets are shown by default without any option to toggle visibility, resulting in excessive scrolling, especially on mobile devices.

https://github.com/user-attachments/assets/a65e5821-4a60-4054-8d56-9463595fe01f

Steps to Reproduce:

Open the Testimonials section on a mobile device or a browser window with a small screen.
Observe that all tweets are displayed without any option to collapse or limit the view.

Proposed Solution:

I have implemented a solution that limits the initial number of displayed tweets to improve user experience. It includes:

A "Show More" button to expand and display additional tweets.
A "Show Less" button to collapse back to the initial view.

https://github.com/user-attachments/assets/7a1392be-2895-49b6-8d54-8420b84e1b92

Request:

I would like to request to be assigned this issue under Hacktoberfest, this enhancement will significantly improve usability for users on mobile devices.

Locate the Testimonials component in the TypeScript/Next.js website and inspect how its tweet list and responsive Tailwind styling are rendered. Verify the mobile layout first, then implement the initial limit and Show More/Show Less behavior described in the issue. Done means the list expands and collapses correctly without disrupting the testimonials section.