Added code to Display Limited Users for "Be a part of Drifty Family!

[PriyansuMaurya]

Fixes issue

Fixes #252

Changes proposed

1. Added code to Display Limited no of Users for "Be a part of Drifty Family!" section.
2. Added Little bit of Responsive improvements in "Be a part of Drifty Family!" section.

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
drifty	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 25, 2023 6:26pm

[github-actions]

Yeah! You did it 🎉 Now, Relax 😉, Grab a drink ☕, and wait for the maintainers to check your contributions. Meanwhile, you can discuss on other issues and solve them 😀. Thank You 😃!

Meanwhile you can also discuss about the project in our Discord Server 😀

[SaptarshiSarkar12]

@PriyansuMaurya I am requesting some changes on the following :

• Please add this animation for 43+ circular icon.

  Screencast.from.2023-08-24.20-29-24.webm

• Revert the animation changes you have made for the contribution, stars and forks buttons for mobile screens. Keep the same animation (violet as background colour when the buttons are hovered) for both desktop and mobile screens.

• Increase the size of the contribution, stars and forks buttons for mobile screens.
  

• Change the style of the the contribution, stars and forks buttons to rounded-lg instead of rounded-full.

• For IPad Mini, the avatars are about to overlap. Please fix that.
  

[SaptarshiSarkar12]

Please make this changes and let me know when you are done.

[PriyansuMaurya]

@SaptarshiSarkar12, I have made the requested changes.

[SaptarshiSarkar12]

@PriyansuMaurya Please make the buttons to rounded-lg.
Also, fix the text overflow in mobile screens :

[SaptarshiSarkar12]

@PriyansuMaurya Also, revert the avatars from square to rounded shape as present in your first commit. The circular shape looks good.

[SaptarshiSarkar12]

@PriyansuMaurya Make the view something like this :

[SaptarshiSarkar12]

@PriyansuMaurya Please make the rounded-lg type of buttons for all displays and not just for mobile screens.

[SaptarshiSarkar12]

@PriyansuMaurya Please change all the class attributes to className attribute.

[SaptarshiSarkar12]

@PriyansuMaurya Along with the below changes, please change the lg:mt-20 attribute in line number 9 to lg:mt-16.

[SaptarshiSarkar12]

@PriyansuMaurya Please keep the partially rounded buttons by removing the md:rounded-full attribute.

[SaptarshiSarkar12]

@PriyansuMaurya In IPad Mini, the GitHub avatars are about to overlap. Can you please add some space/gap between two consecutive avatars (might be gap-1) ?

[PriyansuMaurya]

After a gap-2, it was still not resolved. Therefore, I had to make changes to achieve what you wanted:

width={80} height={80} => width={64} height={64}

If you believe that further changes are necessary, please note that I am not available for them. You can proceed to close this pull request.

[SaptarshiSarkar12]

After a gap-2, it was still not resolved. Therefore, I had to make changes to achieve what you wanted:

width={80} height={80} => width={64} height={64}

If you believe that further changes are necessary, please note that I am not available for them. You can proceed to close this pull request.

@PriyansuMaurya It is fine if you have changed the image size. Also, no more changes are required for the IPad Mini case. But, there is some small syntactical and some logical changes required.

[SaptarshiSarkar12]

@PriyansuMaurya Looks good to merge 👍.
Thanks for contributing 🚀 🚀.
You may join our Discord server - https://discord.gg/DeT4jXPfkG to get updates about the project.