feat: designed new Features section

[iryanraushan]

Changes Proposed

• Redesigned the feature cards
• Added a coloured bar to each card and re-located the icons in those cards

Summary by CodeRabbit

• Refactor

  • Improved the Features component with a more modern arrow function syntax.
  • Enhanced the visual layout of the features section using a grid layout for better user experience.

• Style

  • Updated styling and layout of the features display for a more appealing and organized presentation.
  • Introduced color customization for feature icons based on new colorHex property.

• Documentation

  • Clarified and condensed feature descriptions for better understanding.

• New Features

  • Added a colorHex property to feature objects for dynamic styling.

[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	Nov 29, 2023 11:27am

[coderabbitai]

Walkthrough

The Features component in a web application has undergone a significant transformation. It's been refactored into an arrow function and now presents its content within a grid layout inside a section element. The features are more vibrant with color-coded icons, and the text has been polished for better clarity. This update brings a modern aesthetic and improved readability to the feature display.

Changes

File Path	Change Summary
.../app/Features.js	Converted to arrow function, added colorHex property, restructured with grid layout, updated class names and inline styles, changed key attribute to use feature.title, and rephrased descriptions.

🐇✨
In the land of code, where the brackets embrace,
A rabbit hopped through, leaving a trace.
With colors so bright and layout so neat,
The features now dance in a grid so sweet.
🌟🌿

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

Note: For conversation with the bot, please use the review comments on code diffs or files.

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 😀

[coderabbitai]

Review Status

Actionable comments generated: 3

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between b953bd3 and 6fef9c4.

Files selected for processing (1)

• Website/app/Features.js (1 hunks)

Additional comments: 1

Website/app/Features.js (1)

• 3-70: The conversion to an arrow function and the use of a section element and grid layout are modern practices that have been correctly implemented.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6fef9c4 and 0b609db.

Files selected for processing (1)

• Website/app/Features.js (1 hunks)

[SaptarshiSarkar12]

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