feat(web): Added waitlist

[kriptonian1]

User description

Description

Give a summary of the change that you have made

Fixes #[ISSUENO]

Dependencies

Mention any dependencies/packages used

Future Improvements

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

Mentions

Mention and tag the people

Screenshots of relevant screens

Add 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.

---

Type

enhancement, documentation

---

Description

• Introduced a new page component with waitlist functionality, social links, and new SVG assets.
• Added new components for layout, links, killers, encrypt button, input spotlight, and moving border.
• Updated Tailwind configuration to include brand colors and a plugin for color variables.
• Added global styles for the application and removed outdated styles.
• Added new dependencies for enhanced UI functionality and animations.

---

Changes walkthrough

Relevant files

Enhancement

15 files page.tsx Remove Page Component Content                                                        apps/web/app/page.tsx Removed the entire content of the page component. +0/-61    killers.tsx Remove Killers Component Content                                                  apps/web/components/killers.tsx Removed the entire content of the killers component. +0/-40    index.ts Add New SVG Asset Exports                                                                apps/web/public/index.ts Added exports for new SVG assets: XSVG, LinkdinSVG, and DiscordSVG. +4/-0      layout.tsx Add New Layout Component                                                                  apps/web/src/app/layout.tsx Added a new layout component with metadata and root layout structure. +86/-1    page.tsx Introduce New Page Component with Waitlist                              apps/web/src/app/page.tsx Introduced a new page component with waitlist functionality and social links. +152/-0  killers.tsx Introduce New Killers Component Structure                                apps/web/src/components/killers.tsx Introduced a new killers component structure for social links. +16/-0    links.tsx Introduce New Links Component                                                        apps/web/src/components/links.tsx Introduced a new links component for documentation and GitHub. +33/-1    encrypt-btn.tsx Introduce New Encrypt Button Component                                      apps/web/src/components/ui/encrypt-btn.tsx Introduced a new encrypt button component with animation. +104/-0  input-spotlight.tsx Introduce New Input Spotlight Component                                    apps/web/src/components/ui/input-spotlight.tsx Introduced a new input spotlight component for email input. +77/-0    moving-border.tsx Introduce New Moving Border Component                                        apps/web/src/components/ui/moving-border.tsx Introduced a new moving border component for animated UI elements. +149/-0  cn.ts Introduce New Utility Function for ClassName Merging          apps/web/src/utils/cn.ts Introduced a new utility function for class name merging. +7/-0      tailwind.config.js Update Tailwind Configuration with Brand Colors                    apps/web/tailwind.config.js Updated Tailwind configuration to include brand colors and a plugin for color variables. +28/-54  global.css Remove Global Styles from app/global.css                                  apps/web/app/global.css Removed base, components, utilities, and unselectable class styles. +0/-17    global.css Add Global Styles to src/app/global.css                                    apps/web/src/app/global.css Added Tailwind base, components, utilities, and body background color. +7/-0      package.json Add New Dependencies for UI Enhancements                                  apps/web/package.json Added dependencies for clsx, framer-motion, jsonp, sonner, and tailwind-merge. +6/-1

---

✨ PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot
9 New Code Smells (required ≤ 5)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[codiumai-pr-agent-free]

PR Description updated to latest commit (a2b4a58)

[codiumai-pr-agent-free]

PR Review

⏱️ Estimated effort to review [1-5]	4, because the PR introduces a significant amount of new functionality, including new components and updates to existing ones. The changes span across multiple files and include both frontend and backend logic, requiring a thorough review to ensure compatibility and adherence to best practices. Additionally, the introduction of new dependencies and the update to the Tailwind configuration suggest that the visual aspects of the project are significantly affected, necessitating a review of the UI/UX implications.
🧪 Relevant tests	No
🔍 Possible issues	Possible Bug: The console.log(email) statement in apps/web/src/app/page.tsx seems to be left from debugging and should be removed to clean up the code.
	Performance Concern: The use of setInterval in apps/web/src/components/ui/encrypt-btn.tsx without a clear mechanism for clearing the interval could lead to memory leaks or performance issues if not handled correctly.
	Code Duplication: The InputBorderSpotlight and EncryptButton components contain similar logic for handling focus and blur events. Consider abstracting shared functionality into a custom hook or utility function to reduce duplication and improve maintainability.
🔒 Security concerns	No

---

✨ Review tool usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

Utilizing extra instructions The review tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize. Examples for extra instructions: [pr_reviewer] # /review # extra_instructions=""" In the 'possible issues' section, emphasize the following: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

How to enable\disable automation When you first install PR-Agent app, the default mode for the review tool is: pr_commands = ["/review", ...] meaning the review tool will run automatically on every PR, with the default configuration. Edit this field to enable/disable the tool, or to change the used configurations

Auto-labels The review tool can auto-generate two specific types of labels for a PR: a possible security issue label, that detects possible security issues (enable_review_labels_security flag) a Review effort [1-5]: x label, where x is the estimated effort to review the PR (enable_review_labels_effort flag)

Extra sub-tools The review tool provides a collection of possible feedbacks about a PR. It is recommended to review the possible options, and choose the ones relevant for your use case. Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example: require_score_review, require_soc2_ticket, and more.

Auto-approve PRs By invoking: /review auto_approve The tool will automatically approve the PR, and add a comment with the approval. To ensure safety, the auto-approval feature is disabled by default. To enable auto-approval, you need to actively set in a pre-defined configuration file the following: [pr_reviewer] enable_auto_approval = true (this specific flag cannot be set with a command line argument, only in the configuration file, committed to the repository) You can also enable auto-approval only if the PR meets certain requirements, such as that the estimated_review_effort is equal or below a certain threshold, by adjusting the flag: [pr_reviewer] maximal_review_effort = 5

More PR-Agent commands 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 list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

[codiumai-pr-agent-free]

PR Code Suggestions

Category	Suggestions
Best practice	Remove or replace the console.log statement. Consider removing the console.log statement or replacing it with a more robust logging mechanism that includes log levels and the ability to toggle logging on and off based on the environment. This will help keep the production console clean and improve the application's performance and security. apps/web/src/app/page.tsx [21] -console.log(email) +// Consider using a more sophisticated logging library or mechanism
	Improve error handling in fetch requests. The fetchData function inside onSubmit does not handle the case where the fetch request is successful but returns a non-200 status code. Consider checking the response status and handling potential errors accordingly to improve error handling. apps/web/src/app/page.tsx [50-51] -await fetch(`${url}&EMAIL=${email}`, { - mode: 'no-cors' - }) +const response = await fetch(`${url}&EMAIL=${email}`, { + mode: 'no-cors' +}); +if (!response.ok) { + throw new Error('Network response was not ok'); +}
	Rename SVG imports to follow camelCase naming convention for consistency. Consider renaming XSVG to XSvg for consistency with other SVG imports. Similarly, rename LinkdinSVG and DiscordSVG to follow camelCase naming convention, such as LinkedinSvg and DiscordSvg. apps/web/public/index.ts [7-9] -export {default as XSVG} from "./XSVG.svg" -export {default as LinkdinSVG} from "./linkdinSVG (1).svg" -export {default as DiscordSVG} from "./discordSVG.svg" +export {default as XSvg} from "./XSVG.svg" +export {default as LinkedinSvg} from "./linkdinSVG (1).svg" +export {default as DiscordSvg} from "./discordSVG.svg"
	Use a CSS variable for the body background color for better maintainability. Consider using a CSS variable for the background color to improve maintainability and support theming. This variable can be defined in a global CSS file or directly within the :root selector. apps/web/src/app/global.css [5-6] body { - background: #03080B; + background: var(--body-background-color, #03080B); }
Maintainability	Use Tailwind CSS classes or separate CSS for styling toast notifications. Instead of using inline styles for setting the background color and other properties in the toast notifications, consider using Tailwind CSS classes or a separate CSS/SCSS file. This approach will make the code cleaner, easier to maintain, and consistent across the application. apps/web/src/app/page.tsx [28-30] -<div className="bg-[#852b2c] shadow-2xl p-2 backdrop-blur-3xl rounded-lg text-brandBlue w-[90vw] md:w-[20vw] border border-brandBlue/20"> +<div className="customErrorToast">
	Use the cn utility function consistently across the project for class name merging. Since clsx and tailwind-merge are used together to merge class names, ensure that this utility function is used throughout the project to maintain consistency in handling class names. apps/web/src/utils/cn.ts [5-6] +// Ensure to replace direct usage of clsx or tailwind-merge with cn function across the project. export function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)) }
	Review and potentially remove unused dependencies to keep the project clean. Review the newly added dependencies to ensure they are all necessary for the project. For example, if sonner is not used, consider removing it to keep the project dependencies clean. apps/web/package.json [18] -"sonner": "^1.4.3", +// If sonner is not used, remove it +// "sonner": "^1.4.3",
Performance	Optimize scramble effect for better performance. The EncryptButton component's onMouseEnter and onMouseLeave handlers could lead to performance issues due to the frequent starting and stopping of intervals. Consider debouncing the scramble effect or using CSS animations for a more performance-friendly solution. apps/web/src/components/ui/encrypt-btn.tsx [55-56] -onMouseEnter={scramble} -onMouseLeave={stopScramble} +onMouseEnter={debouncedScramble} +onMouseLeave={debouncedStopScramble}
	Use CSS-in-JS for dynamic styling instead of inline styles. The InputBorderSpotlight component uses inline styles for dynamic styling, which can be less efficient. Consider using CSS-in-JS libraries like styled-components or Emotion for better performance and maintainability. apps/web/src/components/ui/input-spotlight.tsx [69-72] -style={{ - border: '1px solid rgba(202, 236, 241, 1)', - opacity, - WebkitMaskImage: `radial-gradient(30% 30px at ${position.x}px ${position.y}px, black 45%, transparent)` -}} +styled.div` + border: 1px solid rgba(202, 236, 241, 1); + opacity: ${props => props.opacity}; + -webkit-mask-image: radial-gradient(30% 30px at ${props => props.position.x}px ${props => props.position.y}px, black 45%, transparent); +`
Enhancement	Prefix CSS variables generated by addVariablesForColors to avoid conflicts. Ensure that the addVariablesForColors function does not inadvertently override existing CSS variables in the :root selector. Consider adding a prefix to the generated variable names to avoid conflicts. apps/web/tailwind.config.js [27-28] let newVars = Object.fromEntries( - Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + Object.entries(allColors).map(([key, val]) => [`--tw-${key}`, val]) )

---

✨ Improve tool usage guide:

---

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...] meaning the improve tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.

Utilizing extra instructions Extra instructions are very important for the improve tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: [pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.

More PR-Agent commands 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 list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.

[rajdip-b]

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀