website

website copied to clipboard

Description

• Added a carousel in "What the Experts are saying section" to improve the visual appearance and enhance the focus of the user to a single testimonial at a time.
• Added pagination feature which allow user to access the required testimonial.
• Made changes to components/Testimonials.js and pages/index.js

Related issue(s)

Fixes #1696

After

https://github.com/asyncapi/website/assets/85403534/0c9557bc-4772-4636-9f4f-7d65e6b52287

❌ Deploy Preview for asyncapi-website failed.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	453ee50930d1ba88ca63508e4dd7ccc97a05a65c
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/65e87bf093ecab00087598d0

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	54
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1704--asyncapi-website.netlify.app/

@akshatnema I guess the previous PR(#1698 ) had some issues, so I had to make new PR and this one has passed all checks. Issue- #1696

Hi @Lucif3r-in You have done an excellent job, and I appreciate your efforts. However, I have a few suggestions to enhance the overall experience further.

• Please create sufficient spacing between the header and the cards. This will help improve the visual appeal and readability of the content.
• Use pagination icons beside the cards on the left and right sides to provide users with a more intuitive navigation experience.
• To ensure that users can focus on one card at a time, I recommend making the active card more significant than the others. Alternatively, you could add a subtle shadow to distinguish the active card from the rest.

Hi @Lucif3r-in You have done an excellent job, and I appreciate your efforts. However, I have a few suggestions to enhance the overall experience further.

• Please create sufficient spacing between the header and the cards. This will help improve the visual appeal and readability of the content.
• Use pagination icons beside the cards on the left and right sides to provide users with a more intuitive navigation experience.
• To ensure that users can focus on one card at a time, I recommend making the active card more significant than the others. Alternatively, you could add a subtle shadow to distinguish the active card from the rest.

I will add the arrows for the second point and decrease the opacity of the inactive cards to make it distinguishable.

Hi @Lucif3r-in You have done an excellent job, and I appreciate your efforts. However, I have a few suggestions to enhance the overall experience further.

• Please create sufficient spacing between the header and the cards. This will help improve the visual appeal and readability of the content.
• Use pagination icons beside the cards on the left and right sides to provide users with a more intuitive navigation experience.
• To ensure that users can focus on one card at a time, I recommend making the active card more significant than the others. Alternatively, you could add a subtle shadow to distinguish the active card from the rest.

I will add the arrows for the second point and decrease the opacity of the inactive cards to make it distinguishable.

Alright, let's give it a try and see how it works. Weldone!

@Mayaleeeee Check pls I have done the asked changes. You can check it here https://deploy-preview-1704--asyncapi-website.netlify.app/

@Lucif3r-in Thanks for improving the testimonials section. I have couple of changes from my side:

The navigation arrow buttons are not easily visible in the section. Kindly increase of opacity of the buttons. Secondly. the carousel should have the property of auto-scroll so that it should show other testimonials automatically to the users.

Can you tell me at what screen size are you facing the issue as I am unable to reproduce the issue? Still I will increase the opacity.

@akshatnema Check the changes please. I had to add react-icons for the arrows we have used. You can suggest me any suitable changes to replace those.

@Mayaleeeee Check pls I have done the asked changes. You can check it here https://deploy-preview-1704--asyncapi-website.netlify.app/

Hello @Lucif3r-in thanks for working on this, and I apologize for the delayed response. After reviewing the website on my laptop, I find the overall design pleasing. However, the mobile view seems to require some adjustments to ensure a better user experience. Currently, it appears that you have attempted to maintain the same layout as the desktop version by compressing the content within the card. Unfortunately, this approach has resulted in a slim and narrow card view, resembling a rectangle shape that feels awkward.

To adjust this and maintain a consistent square size across both desktop and mobile, you can simply reduce the size of the square shape and its corresponding content. For instance, if you use a 24px header on the desktop, consider reducing it to 16px for mobile.

I have attached a screenshot of the mobile view below to provide a clearer understanding.

I tried doing the same @Mayaleeeee but the text overflows at smaller screen. What do you suggest should I make the text scrolable?

I tried doing the same @Mayaleeeee but the text overflows at smaller screen. What do you suggest should I make the text scrolable?

Oops Okay, can you send me the link to the figma file?

I tried doing the same @Mayaleeeee but the text overflows at smaller screen. What do you suggest should I make the text scrolable?

Oops Okay, can you send me the link to the figma file?

I will make some changes and send you a video. I don't have a figma file actually, I just coded it. @Mayaleeeee What do you say should I remove these animations of 3 cards and place a single card instead?

@akshatnema @Mayaleeeee I am adding a new video. If you approve we can use this carousel instead to avoid readability issue in the previous carousel.

https://github.com/asyncapi/website/assets/85403534/de604186-ac0a-462a-9ac2-ed9521a7838d

@akshatnema @Mayaleeeee I am adding a new video. If you approve we can use this carousel instead to avoid readability issue in the previous carousel.

https://github.com/asyncapi/website/assets/85403534/de604186-ac0a-462a-9ac2-ed9521a7838d

This is so nice.💯💯 Thank you so much for working on it 🤗🤗

@akshatnema @Mayaleeeee I am adding a new video. If you approve we can use this carousel instead to avoid readability issue in the previous carousel.

carousel.mp4

This is so nice.💯💯 Thank you so much for working on it 🤗🤗

@Mayaleeeee if you approve the changes should I raise a PR then?

Text inside the component is very small as compared to normal text inside website in mobile view. Kindly increase the font-size in mobile view. Also, you can think of using TextTruncate component for the description in mobile view and then having a Read More option to view full content.

Secondly. the carousel should have the property of auto-scroll so that it should show other testimonials automatically to the users.

Kindly work on this feature too if possible.

So should the card size increase on clicking Read More? As increasing text size it overflows the card.

@akshatnema I think there is an open question for you, but also commits that you can review

@Lucif3r-in Can you please resolve the conflicts in this PR?

@Lucif3r-in any updates?

@Lucif3r-in any updates?

I am having problem with the Read more button else everything seems good

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	31
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-1704--asyncapi-website.netlify.app/

@ashutosh-rath02 any update?

@ashutosh-rath02 the build is breaking please try running npm run build on your local machine to know about the errors

@ashutosh-rath02 any updates??

closing this PR as there is no update on this from the contributor from last 1 month It can be reopened again if he comes back