feat: add testimonial carousel #1704

ashutosh-rath02 · 2023-05-23T12:08:11Z

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

caro.mp4

netlify · 2023-05-23T12:08:21Z

❌ Deploy Preview for asyncapi-website failed.

Built without sensitive environment variables

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

github-actions · 2023-05-23T12:11:00Z

⚡️ 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/

ashutosh-rath02 · 2023-05-23T12:12:23Z

@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

Mayaleeeee · 2023-05-24T11:50:51Z

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.

ashutosh-rath02 · 2023-05-24T11:57:58Z

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.

Mayaleeeee · 2023-05-24T12:06:45Z

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!

…site into async_testimonial

ashutosh-rath02 · 2023-05-25T06:39:50Z

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

akshatnema

@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.

components/Testimonial.js

package-lock.json

ashutosh-rath02 · 2023-05-28T11:53:15Z

@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.

ashutosh-rath02 · 2023-05-28T12:35:06Z

@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 · 2023-05-28T17:38:24Z

@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.

ashutosh-rath02 · 2023-05-28T17:41:49Z

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

Mayaleeeee · 2023-05-28T17:46:36Z

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?

ashutosh-rath02 · 2023-05-29T01:52:23Z

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?

ashutosh-rath02 · 2023-05-29T12:23:23Z

@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

akshatnema

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.

config/content/Testimonial.js

components/Testimonial.js

ashutosh-rath02 · 2023-06-04T03:25:01Z

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.

derberg · 2023-06-22T12:21:10Z

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

akshatnema · 2023-09-30T19:19:21Z

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

akshatnema · 2023-09-30T19:20:30Z

package.json

@@ -79,6 +79,7 @@
    "react-dom": "^17.0.2",
    "react-ga": "^3.1.2",
    "react-gtm-module": "^2.0.11",
+    "react-icons": "^4.8.0",


Are we using these icons anywhere in the PR? I don't see any imports for this library.

components/Testimonial.js

akshatnema · 2023-09-30T19:35:25Z

components/Testimonial.js

+       <ArrowLeft className='w-4'/>
+      </div>
+      <div className="flex flex-col justify-center items-center">
+        <div className="relative h-[300px] w-[300px] md:w-[600px] md:h-[450px] overflow-hidden">


Don't specify height for the box, as you may not know how long can be testimonial text. Moreover, using overflow-hidden is not a good practice. You can allow Read More option inside box to expand the testimonial box.

For some reason I cant set the height to auto... When I am doing height-auto or max-content the cards just disappears. The Read more part is causing some issue also, causing this PR to delay

Weldone @akshatnema

Hello @Lucif3r-in, thank you.
Where can I review the updated version of the testimonial section? Or is it still the same link in the deploy preview column?

Same link @Mayaleeeee

The icon here is not centered in the middle.

You need to change the card background color to white and add elevation to match other cards on the website.

Thank you @Lucif3r-in

This reverts commit f7e677c.

akshatnema

Kindly add these files inside a new folder Testimonials.

akshatnema · 2023-12-07T18:57:19Z

@Lucif3r-in any updates?

ashutosh-rath02 · 2023-12-08T16:06:40Z

@Lucif3r-in any updates?

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

asyncapi-bot · 2023-12-08T16:06:58Z

⚡️ 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/

sambhavgupta0705 · 2024-03-05T09:54:41Z

@ashutosh-rath02 any update?

sambhavgupta0705 · 2024-03-07T03:48:09Z

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

sambhavgupta0705 · 2024-03-25T12:51:41Z

@ashutosh-rath02 any updates??

sambhavgupta0705 · 2024-04-18T06:03:06Z

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

feat: add testimonial carousel

622c655

ashutosh-rath02 requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners May 23, 2023 12:08

ashutosh-rath02 mentioned this pull request May 23, 2023

Enhancement Request: Improving the What the experts are saying Section on the AsyncAPI Website #1696

Closed

ashutosh-rath02 and others added 3 commits May 25, 2023 08:19

Merge branch 'master' into async_testimonial

ab4f4ac

fix: add arrows for navigation

43a69d4

Merge branch 'async_testimonial' of https://github.com/Lucif3r-in/web…

ab5633d

…site into async_testimonial

akshatnema requested changes May 28, 2023

View reviewed changes

components/Testimonial.js Outdated Show resolved Hide resolved

components/Testimonial.js Outdated Show resolved Hide resolved

package-lock.json Outdated Show resolved Hide resolved

Merge branch 'master' into async_testimonial

143b22e

Lucif3r-in added 2 commits May 28, 2023 17:47

fix: fix nav arrow && chore: add content to config

db3beea

fix: added comments explaining the logic

ef4e468

Merge branch 'master' into async_testimonial

0325cec

akshatnema requested changes Jun 3, 2023

View reviewed changes

config/content/Testimonial.js Outdated Show resolved Hide resolved

components/Testimonial.js Outdated Show resolved Hide resolved

Merge branch 'master' into async_testimonial

3892e2e

ashutosh-rath02 added 2 commits June 4, 2023 14:30

fix: change arrow styles && chore: store TestimonialData

fafd00e

feat: add auto scroll to carousels

00af294

derberg requested a review from akshatnema June 22, 2023 12:21

derberg mentioned this pull request Jun 22, 2023

fix: improved what the experts are saying section #1696 #1697

Closed

akshatnema requested changes Sep 30, 2023

View reviewed changes

fix: suggested changes

f7e677c

ashutosh-rath02 requested a review from Mayaleeeee as a code owner October 1, 2023 09:58

ashutosh-rath02 added 3 commits October 1, 2023 15:31

Revert "fix: suggested changes"

13815e9

This reverts commit f7e677c.

fix: made changes

6a54171

Merge branch 'master' into async_testimonial

232c3c7

akshatnema reviewed Oct 12, 2023

View reviewed changes

Merge branch 'master' into async_testimonial

3d3533b

ashutosh-rath02 closed this Mar 6, 2024

ashutosh-rath02 reopened this Mar 6, 2024

ashutosh-rath02 requested a review from anshgoyalevil as a code owner March 6, 2024 14:20

Merge branch 'master' into async_testimonial

453ee50

sambhavgupta0705 closed this Apr 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add testimonial carousel #1704

feat: add testimonial carousel #1704

ashutosh-rath02 commented May 23, 2023

netlify bot commented May 23, 2023 •

edited

Loading

github-actions bot commented May 23, 2023 •

edited

Loading

ashutosh-rath02 commented May 23, 2023 •

edited

Loading

Mayaleeeee commented May 24, 2023 •

edited

Loading

ashutosh-rath02 commented May 24, 2023

Mayaleeeee commented May 24, 2023

ashutosh-rath02 commented May 25, 2023

akshatnema left a comment

ashutosh-rath02 commented May 28, 2023

ashutosh-rath02 commented May 28, 2023

Mayaleeeee commented May 28, 2023

ashutosh-rath02 commented May 28, 2023

Mayaleeeee commented May 28, 2023

ashutosh-rath02 commented May 29, 2023 •

edited

Loading

ashutosh-rath02 commented May 29, 2023

akshatnema left a comment

ashutosh-rath02 commented Jun 4, 2023

derberg commented Jun 22, 2023

akshatnema commented Sep 30, 2023

akshatnema Sep 30, 2023

akshatnema Sep 30, 2023

ashutosh-rath02 Oct 1, 2023 •

edited

Loading

Mayaleeeee Oct 2, 2023 •

edited

Loading

ashutosh-rath02 Oct 2, 2023

Mayaleeeee Oct 2, 2023 •

edited

Loading

akshatnema left a comment

akshatnema commented Dec 7, 2023

ashutosh-rath02 commented Dec 8, 2023

asyncapi-bot commented Dec 8, 2023 •

edited

Loading

sambhavgupta0705 commented Mar 5, 2024

sambhavgupta0705 commented Mar 7, 2024 •

edited

Loading

sambhavgupta0705 commented Mar 25, 2024

sambhavgupta0705 commented Apr 18, 2024

feat: add testimonial carousel #1704

feat: add testimonial carousel #1704

Conversation

ashutosh-rath02 commented May 23, 2023

netlify bot commented May 23, 2023 • edited Loading

❌ Deploy Preview for asyncapi-website failed.

github-actions bot commented May 23, 2023 • edited Loading

ashutosh-rath02 commented May 23, 2023 • edited Loading

Mayaleeeee commented May 24, 2023 • edited Loading

ashutosh-rath02 commented May 24, 2023

Mayaleeeee commented May 24, 2023

ashutosh-rath02 commented May 25, 2023

akshatnema left a comment

Choose a reason for hiding this comment

ashutosh-rath02 commented May 28, 2023

ashutosh-rath02 commented May 28, 2023

Mayaleeeee commented May 28, 2023

ashutosh-rath02 commented May 28, 2023

Mayaleeeee commented May 28, 2023

ashutosh-rath02 commented May 29, 2023 • edited Loading

ashutosh-rath02 commented May 29, 2023

akshatnema left a comment

Choose a reason for hiding this comment

ashutosh-rath02 commented Jun 4, 2023

derberg commented Jun 22, 2023

akshatnema commented Sep 30, 2023

akshatnema Sep 30, 2023

Choose a reason for hiding this comment

akshatnema Sep 30, 2023

Choose a reason for hiding this comment

ashutosh-rath02 Oct 1, 2023 • edited Loading

Choose a reason for hiding this comment

Mayaleeeee Oct 2, 2023 • edited Loading

Choose a reason for hiding this comment

ashutosh-rath02 Oct 2, 2023

Choose a reason for hiding this comment

Mayaleeeee Oct 2, 2023 • edited Loading

Choose a reason for hiding this comment

akshatnema left a comment

Choose a reason for hiding this comment

akshatnema commented Dec 7, 2023

ashutosh-rath02 commented Dec 8, 2023

asyncapi-bot commented Dec 8, 2023 • edited Loading

sambhavgupta0705 commented Mar 5, 2024

sambhavgupta0705 commented Mar 7, 2024 • edited Loading

sambhavgupta0705 commented Mar 25, 2024

sambhavgupta0705 commented Apr 18, 2024

netlify bot commented May 23, 2023 •

edited

Loading

github-actions bot commented May 23, 2023 •

edited

Loading

ashutosh-rath02 commented May 23, 2023 •

edited

Loading

Mayaleeeee commented May 24, 2023 •

edited

Loading

ashutosh-rath02 commented May 29, 2023 •

edited

Loading

ashutosh-rath02 Oct 1, 2023 •

edited

Loading

Mayaleeeee Oct 2, 2023 •

edited

Loading

Mayaleeeee Oct 2, 2023 •

edited

Loading

asyncapi-bot commented Dec 8, 2023 •

edited

Loading

sambhavgupta0705 commented Mar 7, 2024 •

edited

Loading