feat: create Hero component for the landing page, including navigatio…

[broskell]

Pull Request Description

Summary

This pull request improves the visual styling of the Contributors button in the landing page navbar.
A new reusable .btn-contributors CSS class was added and applied to the Contributors link in Hero.jsx to make it more modern, visually prominent, and interactive.

Type of Change

• UI/UX improvement

Related Issues

• Related to #N/A

Motivation and Context

Previously, the Contributors link appeared as plain text in the navigation bar. Since the Contributors page is important for open-source participation, making it visually distinct improves discoverability and enhances the overall landing page design.

Changes Made

• Added a reusable .btn-contributors style in src/index.css
• Applied the new button class to the Contributors link in src/pages/hero/Hero.jsx
• Added hover animation and focus styles for better user interaction and accessibility
• Ensured compatibility with the existing Tailwind styling system

Screenshots (if applicable)

Before:
Plain text "Contributors" link in navbar.

After:
Styled Contributors button with improved visibility and hover interaction.

Testing

• I have tested these changes locally
• I have added tests that prove my fix is effective or that my feature works
• All new and existing tests pass
• I have tested the changes on different screen sizes (for UI changes)
• I have tested in both light and dark mode (for UI changes)

Code Quality

• My code follows the existing code style of this project
• I have performed a self-review of my own code
• I have commented my code where necessary
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors

Deployment

• These changes require no deployment steps

Breaking Changes

This change does not introduce any breaking changes.

Additional Notes

The styling changes were implemented using Tailwind-compatible CSS and do not modify any existing functionality.

Screenshots

Before

*After

[vercel]

@broskell is attempting to deploy a commit to the Sahil's projects Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a UI/UX enhancement for the landing page. It transforms the previously plain text "Contributors" link into a visually distinct and interactive button, aiming to improve its discoverability and encourage engagement with the open-source community. The changes ensure a more modern aesthetic and better user experience while maintaining compatibility with the existing Tailwind styling system.

Highlights

• Visual Styling: Improved the visual styling of the "Contributors" button on the landing page navbar.
• Reusable Styling: Introduced a new set of Tailwind CSS classes to style the "Contributors" link, making it more prominent and interactive.
• User Experience: Added hover animations and focus styles to enhance user interaction and accessibility for the "Contributors" button.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request improves the styling of the 'Contributors' link by turning it into a button. The implementation uses a long string of Tailwind utility classes directly in the component. While this works, for better maintainability and reusability, I've suggested extracting these styles into a dedicated CSS class using @apply, as was also mentioned in the pull request description.

[broskell]

Added the reusable code

[broskell]

Successfully created a global, reusable ContributorsButton component (src/components/ContributorsButton.jsx) and updated Hero.jsx to use it. The button maintains its desktop text and mobile icon styles, matching your UI design while being exportable to other components.

[broskell]

Successfully created a global, reusable ContributorsButton component (src/components/ContributorsButton.jsx) and updated Hero.jsx to use it. The button maintains its desktop text and mobile icon styles, matching your UI design while being exportable to other components.