feat: Revamp the website with modern design

FabrizioJordan commented 1 week ago

Fixes issue

Fixes #720

Changes proposed

These changes improve consistency across the website.

Check List (Check all the applicable boxes)

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

Screenshots

Home section:

With 2 buttons in header on hover:

Contribute section:

With 2 buttons in header, 3 contributors avatar and fork button on hover:

Demo section:

Normal:

Buttons on hover:

Footer:

Note to reviewers

@SaptarshiSarkar12 please check it. I didn't touch the Releases page because I think an issue is needed for this page alone.

New Features

Incorrectly used padding and margin replaced with flex and gap. Modern and clean designs for buttons and anchors. Minor changes in Footer. Minor changes in Demo section.

Updated styling for a consistent visual experience.

Bug Fixes

Overflow hidden in Main section.

Summary by CodeRabbit

Release Notes

New Features
- Enhanced layout and styling across various components including Header, Footer, Main Section, and Demo for improved user experience.
Improvements
- Updated flexbox layouts for better alignment and spacing.
- Refined hover effects for buttons and links to enhance visual feedback.
- Adjusted font sizes and background colors for better readability and aesthetics.
Bug Fixes
- Addressed minor styling inconsistencies for a more uniform appearance.

vercel[bot] commented 1 week ago

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	Nov 28, 2024 7:04am

coderabbitai[bot] commented 1 week ago

📝 Walkthrough

## Walkthrough The pull request introduces extensive modifications across several components of the website, focusing primarily on layout and styling improvements. Key changes include the transition from grid to flexbox layouts in multiple components, adjustments to padding and margin properties for better alignment, and enhancements to hover effects on buttons and links. The overall aim is to modernize the design, improve visual consistency, and enhance user experience while maintaining existing functionality. ## Changes | File | Change Summary | |---------------------------|-------------------------------------------------------------------------------------------------------------| | Website/app/Contribute.js | Converted layout to flexbox, updated class names, refined padding/margin, improved contributor image styling, and adjusted button hover effects. | | Website/app/Demo.js | Enhanced layout with flexbox, modified tab hover effects, and adjusted padding for paragraphs. | | Website/app/Footer.js | Reordered class attributes, improved layout using flexbox, and simplified anchor tag hover effects. | | Website/app/Header.js | Simplified `NavLink` hover effects, standardized button styles, and adjusted social media icon sizes. | | Website/app/MainSection.js | Updated header font size and modified `Link` components to enhance visual presentation. | | Website/app/layout.js | Added `overflow-x-hidden` class to `` element to prevent horizontal overflow. | ## Assessment against linked issues | Objective | Addressed | Explanation | |---------------------------------------------------------|-----------|---------------------------------------| | Transition from grid to flexbox layouts (720) | ✅ | | | Improve button and link designs (720) | ✅ | | | Fix horizontal scrollbar issue (720) | ❌ | No changes made to address the scrollbar issue. | | Enhance visual consistency across the website (720) | ✅ | | | Minor changes in Footer and Demo sections (720) | ✅ | | ## Possibly related PRs - **#672**: This PR modifies the `Header.js` component, which is related to the `Contribute.js` changes as both involve layout and styling enhancements using flexbox properties. - **#674**: This PR also focuses on the `Header.js` component, making changes that improve the navigation functionality, which may indirectly relate to the overall user experience improvements seen in `Contribute.js`. - **#687**: This PR updates the `Footer.js` component, which, like `Contribute.js`, aims to enhance the visual layout and readability, contributing to a more cohesive user interface across the application. ## Suggested labels `hacktoberfest-accepted`, `maintenance` ## Poem > 🐰 In a world of grids, we chose to flex, > With colors and styles, we’ve made some checks. > Buttons now hover with a charming glow, > A modern design, watch our website grow! > So hop along, dear friends, take a look, > A fresh new feel, like a well-loved book! 📚✨

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 your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - 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/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

FabrizioJordan commented 6 days ago

@SaptarshiSarkar12 Thanks for your feedback! I wanted to explain a few things so you know where I’m coming from.

I’m mainly a web developer, so I don’t have much experience with Java or the differences between GUI and CLI tools. What I did with the animation was just a quick fix by adding overflow-hidden to the parent container to stop it from overflowing. I didn’t know the animation was outdated or didn’t match the current project.

That said, I’ve now managed to apply the overflow-hidden in a different way, and the animation no longer gets cut on the left side. If this works for you, let me know, and I’ll adjust the PR to include it. If the animation still needs to be updated or changed, feel free to share the latest version, and I’ll be happy to apply it. Otherwise, I can leave it as is, and you or someone else can handle it later.

For the header (point #2), I already have some ideas to improve it for both Desktop and Mobile, and making the text bold is one of them.

Let me know what you think, and I’ll adjust the PR based on what’s needed.

FabrizioJordan commented 6 days ago

I also wanted to mention that I’ve been trying to follow the guidelines for the PR and signing the commits properly. I hope everything looks correct now, but if there’s anything I can improve, please let me know so I can fix it.

SaptarshiSarkar12 commented 4 days ago

@FabrizioJordan Apologise for the late reply. I was busy in the weekend.

I’m mainly a web developer, so I don’t have much experience with Java or the differences between GUI and CLI tools. What I did with the animation was just a quick fix by adding overflow-hidden to the parent container to stop it from overflowing. I didn’t know the animation was outdated or didn’t match the current project.

Okay. No issue. We can keep this animation for now. But it still gets cut on the left side. Please check once.

For the header (point https://github.com/SaptarshiSarkar12/Drifty/discussions/2), I already have some ideas to improve it for both Desktop and Mobile, and making the text bold is one of them.

Yeah, we can proceed with those modifications as well. Should you create a new issue for that?

SaptarshiSarkar12 commented 4 days ago

I also wanted to mention that I’ve been trying to follow the guidelines for the PR and signing the commits properly. I hope everything looks correct now, but if there’s anything I can improve, please let me know so I can fix it.

That's great :+1:. I think there's a problem in the signing of commits, I will check once. If it is a false positive, I would remove that rule.

github-actions[bot] commented 3 days ago

:x: Linting errors found!

@FabrizioJordan Please fix the following errors:

_PRETTIER

Generated from this workflow run (ID: 12020293708)

github-actions[bot] commented 3 days ago

:x: Linting errors found!

@FabrizioJordan Please fix the following errors:

_PRETTIER

Generated from this workflow run (ID: 12020382588)

FabrizioJordan commented 3 days ago

Yeah, we can proceed with those modifications as well. Should you create a new issue for that?

Is not necessary, i will make the changes right now.

That's great 👍. I think there's a problem in the signing of commits, I will check once. If it is a false positive, I would remove that rule.

The error was on my side. I didn’t know that VSCode doesn’t sign my commits automatically.

But it still gets cut on the left side. Please check once.

With the new changes in this PR, the animation is no longer being cut on the left side.

Also, I noticed that the current CSS linter error is from the latest commit in the project, not my commits, and the error still persists. Let me know if there’s anything I should do about it!

github-actions[bot] commented 3 days ago

:x: Linting errors found!

@FabrizioJordan Please fix the following errors:

_PRETTIER

Generated from this workflow run (ID: 12020932527)

SaptarshiSarkar12 commented 2 days ago

Yeah, we can proceed with those modifications as well. Should you create a new issue for that?

Is not necessary, i will make the changes right now.

@FabrizioJordan Okay, the current changes look nice :+1:.

That's great 👍. I think there's a problem in the signing of commits, I will check once. If it is a false positive, I would remove that rule.

The error was on my side. I didn’t know that VSCode doesn’t sign my commits automatically.

It's okay :smile:.

But it still gets cut on the left side. Please check once.

With the new changes in this PR, the animation is no longer being cut on the left side.

Also, I noticed that the current CSS linter error is from the latest commit in the project, not my commits, and the error still persists. Let me know if there’s anything I should do about it!

I applied the fix :smiley: using prettier.

FabrizioJordan commented 1 day ago

@SaptarshiSarkar12 Thank you for merging! 🚀 I'm glad to have contributed and would be happy to help with the web in the future. (maybe download page)

SaptarshiSarkar12 commented 1 day ago

@SaptarshiSarkar12 Thank you for merging! 🚀

Most Welcome Fabricio :smile:.

I'm glad to have contributed and would be happy to help with the web in the future. (maybe download page)

@FabrizioJordan I loved collaborating with you on this PR :heart:. Would love to see your wonderful work on the download page :upside_down_face:.

SaptarshiSarkar12 / Drifty