fix: Added responsiveness to the website for mobile

[the-shivam-gupta]

Fixes issue

Fixes #350

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

Summary by CodeRabbit

• Style

  • Updated <h2> element styling, including font size and margins.
  • Enhanced link styling with new padding, margins, and icon placement.

• Refactor

  • Transitioned layout structure from grid to flexbox for better alignment and spacing.
  • Adjusted grid layout settings for feature presentation.

• New Features

  • Added a new text element to enhance the features section.

• Documentation

  • Updated responsive design breakpoints for improved user experience on smaller screens.

[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	Dec 12, 2023 1:10pm

[coderabbitai]

Walkthrough

The recent updates focus on UI enhancements, with changes to layout structures, styling, and responsive design configurations. These refinements aim to improve visual appeal and user experience across the website's contribution and feature sections, as well as better adaptability to smaller screens.

Changes

File Path	Change Summary
.../app/Contribute.js	Updated <h2> styling, switched grid to flexbox layout, modified link styles.
.../app/Features.js	Adjusted grid layout settings, updated feature styling, added new text element.
.../tailwind.config.js	Changed xs screen size from 350px to 280px.

🐇✨
Changes here, changes there,
Layouts flex, styles debonair.
Smaller screens, now more flair,
CodeRabbit's touch, beyond compare. 🎨🖌️

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• You can reply to a review comment from CodeRabbit.
• You can also chat with CodeRabbit bot directly around the specific lines of code or files in the PR by tagging @coderabbitai in a new comment.
• You can tag @coderabbitai in a PR comment and ask questions about the PR and the codebase.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

[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 😀

[the-shivam-gupta]

@SaptarshiSarkar12, please review it and let me know if any changes are required.

[coderabbitai]

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 80b31fa and 540f23b.

Files selected for processing (3)

• Website/app/Contribute.js (3 hunks)
• Website/app/Features.js (2 hunks)
• Website/tailwind.config.js (1 hunks)

Additional comments: 10

Website/app/Contribute.js (6)

• 19-19: The <h2> element's class names have been updated to include responsive font sizes and margins. Ensure that these changes are consistent with the design system and breakpoints defined in the project.

• 31-31: The introduction of flexbox for alignment and spacing is a good practice for responsive design. Verify that the flexbox properties are correctly applied and that they work as expected across different screen sizes.

• 47-49: New links have been added with hover effects and responsive padding. Verify that the hover effects and padding are consistent across different devices and that they do not break the layout on smaller screens.

• 47-49: Ensure that the icons used within the links have appropriate alternative text or are labeled correctly for screen readers to maintain accessibility.

• 43-52: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [16-52]

While reviewing the changes in Contribute.js, ensure that the breakpoint changes made in tailwind.config.js (as mentioned in the PR overview) are reflected and tested across all components that use Tailwind classes for consistency.

• 43-52: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [16-52]

If the changes to the layout and styling conventions affect how components should be used or styled, consider updating the project's documentation to reflect these changes.

Website/app/Features.js (3)

• 40-40: The new grid layout configuration uses a combination of grid flow properties and responsive classes. Verify that the layout behaves as expected on different screen sizes, especially with the lg:[&>*:nth-of-type(1)]:row-span-2 and lg:[&>*:nth-of-type(4)]:row-span-2 classes which seem to be targeting the first and fourth child elements for special styling on larger screens.

• 44-44: The updated className for feature elements includes responsive flexbox classes and shadow styling. Ensure that these changes are consistent with the project's design system and that the new shadow and layout classes do not conflict with existing styles or affect accessibility.

• 66-68: The addition of the new text element "....and many more!" should be reviewed for its semantic and stylistic appropriateness within the context of the section. It's also important to ensure that the ellipsis is intentional and correctly represents the content it's supposed to convey.

Website/tailwind.config.js (1)

• 17-21: The change to the xs breakpoint in the Tailwind CSS configuration is a significant alteration that could affect the entire responsive design. It is important to verify that all components that rely on this breakpoint have been tested and adjusted accordingly to ensure that the layout does not break on smaller screens.

[SaptarshiSarkar12]

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