feat: responsive landing

[SRINJAYDASGUPTA-Git]

Type

Enhancement

---

Description

This PR introduces changes to make the landing page of the application mobile responsive. The main changes include:

• Adjustments to the layout and sizing of elements on the landing page to ensure they fit and display properly on smaller screens.
• Changes to the text size in the Links component to be responsive, displaying smaller on mobile and larger on desktop screens.

---

PR changes walkthrough

Relevant files

Ui/ux changes

2 files page.tsx                                                                                                        apps/web/app/page.tsx The changes in this file are primarily focused on making the landing page mobile responsive. This includes adjustments to div classes, flex properties, text sizes, and gaps between elements to ensure a better fit and layout on smaller screens. +9/-10 Links.tsx                                                                                                      apps/web/components/Links.tsx The text size of the description in the Links component has been adjusted to be responsive, with a smaller size for mobile and the original size for larger screens. +1/-1

---

User description

Description

fix(landing-page): Make mobile responsive

Fixes #41

Dependencies

Mention any dependencies/packages used

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

@rajdip-b

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

[codiumai-pr-agent-free]

PR Description updated to latest commit (3fd5a1d)

[codiumai-pr-agent-free]

PR Analysis

• 🎯 Main theme: Making the landing page of the application mobile responsive
• 📝 PR summary: This PR introduces changes to make the landing page of the application mobile responsive. The main changes include adjustments to the layout and sizing of elements on the landing page to ensure they fit and display properly on smaller screens, and changes to the text size in the Links component to be responsive.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 2, because the changes are mostly related to CSS and layout, which are straightforward to review.
• 🔒 Security concerns: No

PR Feedback

💡 General suggestions: The PR seems to be well-structured and the changes are clear. However, it would be beneficial to add screenshots or a brief video showing the responsive behavior on different screen sizes. This would help reviewers understand the visual changes without needing to pull and run the code locally.

🤖 Code feedback:

---

relevant file	apps/web/app/page.tsx
suggestion	Consider using more descriptive class names or adding comments to explain what each class does. This will make the code easier to understand and maintain. [medium]
relevant line

---

relevant file	apps/web/app/page.tsx
suggestion	It's a good practice to avoid using magic numbers in the code. Consider defining constants for these values to make the code more readable and maintainable. [medium]
relevant line

---

relevant file	apps/web/components/Links.tsx
suggestion	Consider using a CSS preprocessor like SASS or LESS. This will allow you to use variables for colors, sizes, etc., making the code cleaner and easier to maintain. [medium]
relevant line	{description}

---

✨ Usage tips:

---

To invoke the PR-Agent, add a comment using one of the following commands:

• /review: Request a review of your Pull Request.
• /describe: Update the PR title and description based on the contents of the PR.
• /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
• /ask <QUESTION>: Ask a question about the PR.
• /update_changelog: Update the changelog based on the PR's contents.
• /add_docs 💎: Generate docstring for new components introduced in the PR.
• /generate_labels 💎: Generate labels for the PR based on the PR's contents.
• /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To edit any configuration parameter from the configuration.toml, add --config_path=new_value.
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, add a /config comment.

[rajdip-b]

Looks awesome!

[rajdip-b]

🎉 This PR is included in version 1.0.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[rajdip-b]

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀