feat(web): Landing revamp

[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, other

---

Description

• Revamped the landing page structure with new components and layout.
• Introduced new SVG and PNG assets for various sections.
• Added new components for collaboration, hero, developers' life easy, and secrets sections.
• Implemented new UI components like encrypted button, encrypted text, input border spotlight, moving border effect, sparkles effect, and spotlight card.
• Updated global styles and Tailwind CSS configuration for both web and workspace apps.
• Added new dependencies for enhanced functionality.

---

Changes walkthrough

	Relevant files
Enhancement	28 files page.tsx Revamp Landing Page Structure                                                        apps/web/app/page.tsx Removed all content and replaced with a new structure for the landing page. Introduced new components for the landing page structure. +0/-61    killers.tsx Remove Killers Component                                                                  apps/web/components/killers.tsx Removed Killers component. +0/-40    links.tsx Remove Links Component                                                                      apps/web/components/links.tsx Removed Links component. +0/-32    index.tsx Add New Assets for Hero Section                                                    apps/web/public/hero/index.tsx Added new SVG and PNG assets for the hero section. +4/-0      index.ts Remove Unused SVG Asset Exports                                                    apps/web/public/index.ts Removed exports for several SVG assets. +0/-5      index.ts Add New SVG Assets for Sections                                                    apps/web/public/sectionsvg/index.ts Added new SVG assets for various sections. +25/-0    index.ts Add New SVG Assets for Shared Components                                  apps/web/public/shared/index.ts Added new SVG assets for shared components. +4/-0      layout.tsx Introduce New Layout Structure                                                      apps/web/src/app/layout.tsx Introduced new layout structure with metadata configuration. +86/-1    page.tsx Implement New Landing Page Structure                                          apps/web/src/app/page.tsx Replaced the old page content with new component structure for the landing page. +23/-0    index.tsx Add Collaboration Section Component                                            apps/web/src/components/colabEasy/index.tsx Added new ColabEasy component for collaboration section. +43/-0    index.tsx Add Hero Section Component                                                              apps/web/src/components/hero/index.tsx Added new Hero component for the hero section. +46/-0    index.tsx Add Developers Life Easy Section Component                              apps/web/src/components/lifeEasySection/index.tsx Added new LifeEasySection component for making developers' life easy section. +87/-0    index.tsx Add Secrets Section Component                                                        apps/web/src/components/secretSection/index.tsx Added new SecretSection component for secrets section. +80/-0    index.tsx Add Shared Card Component                                                                apps/web/src/components/shared/card/index.tsx Added new Card component for shared card UI. +21/-0    index.tsx Add Footer Component                                                                          apps/web/src/components/shared/footer/index.tsx Added new Footer component for the footer section. +140/-0  index.tsx Add Navbar Component                                                                          apps/web/src/components/shared/navbar/index.tsx Added new Navbar component for the navigation bar. +24/-0    encrypt-btn.tsx Add Encrypted Button Component                                                      apps/web/src/components/ui/encrypt-btn.tsx Added new EncryptButton component for encrypted button UI. +103/-0  encrypt-text.tsx Add Encrypted Text Component                                                          apps/web/src/components/ui/encrypt-text.tsx Added new EncryptText component for encrypted text UI. +65/-0    input-spotlight.tsx Add Input Border Spotlight Component                                          apps/web/src/components/ui/input-spotlight.tsx Added new InputBorderSpotlight component for input with spotlight effect. +64/-0    moving-border.tsx Add Moving Border Effect Component                                              apps/web/src/components/ui/moving-border.tsx Added new MovingBorder component for moving border effect. +149/-0  sparkles.tsx Add Sparkles Effect Component                                                        apps/web/src/components/ui/sparkles.tsx Added new SparklesCore component for sparkles effect. +441/-0  spotlight-card.tsx Add Spotlight Card Component                                                          apps/web/src/components/ui/spotlight-card.tsx Added new SpotlightCard component for card with spotlight effect. +63/-0    cn.ts Add Utility Function for Class Name Merging                            apps/web/src/utils/cn.ts Added new utility function for class name merging. +7/-0      page.tsx Add Authentication Page Component                                                apps/workspace/app/auth/page.tsx Added new AuthPage component for authentication page. +15/-0    layout.tsx Update Metadata Title                                                                        apps/workspace/app/layout.tsx Updated metadata title to 'Keyshade'. +1/-1      page.tsx Add Button Component to Workspace Page                                      apps/workspace/app/page.tsx Added Button component to the workspace page. +8/-1      button.tsx Add UI Button Component                                                                    apps/workspace/src/components/ui/button.tsx Added new Button component for UI button. +57/-0    utils.ts Add Utility Function for Class Name Merging                            apps/workspace/src/lib/utils.ts Added new utility function for class name merging. +6/-0
Configuration changes	5 files tailwind.config.ts Add Tailwind CSS Configuration                                                      apps/workspace/tailwind.config.ts Added new configuration for Tailwind CSS. +40/-0    tailwind.config.js Update Tailwind CSS Configuration for Web App                        apps/web/tailwind.config.js Updated Tailwind CSS configuration for the web app. +28/-54  prettier.config.js Update Prettier Configuration                                                        prettier.config.js Updated Prettier configuration. +8/-2      .prettierrc Remove Prettier Configuration                                                        .prettierrc Removed Prettier configuration. +0/-8      components.json Add New Components Configuration for Workspace App              apps/workspace/components.json Added new components configuration for the workspace app. +17/-0
Formatting	3 files global.css Remove All Styles from Global CSS                                                apps/web/app/global.css Removed all styles. +0/-17    global.css Add New Global Styles for Web App                                                apps/web/src/app/global.css Added new global styles for the web app. +20/-0    global.css Update Global Styles for Workspace App                                      apps/workspace/app/global.css Updated global styles for the workspace app. +4/-4
Dependencies	3 files package.json Add New Dependencies for Web App                                                  apps/web/package.json Added new dependencies for the web app. +9/-2      package.json Add New Dependencies and Update Scripts for Workspace App apps/workspace/package.json Added new dependencies and updated scripts for the workspace app. +11/-4    package.json Add New Dependencies to Root Package.json                                package.json Added new dependencies to the root package.json. +3/-1

---

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

[kriptonian1]

@rajdip-b I have some work left there, for now I have just pushed it for my reference

[codiumai-pr-agent-free]

PR Description updated to latest commit (e5764d4)

[codiumai-pr-agent-free]

PR Review

⏱️ Estimated effort to review [1-5]	4, because the PR includes a significant amount of new code across multiple files and components, introducing new features, components, and configurations. The complexity of the changes, including the introduction of new SVG assets, components, and significant modifications to existing components and styles, requires a thorough review to ensure code quality, functionality, and consistency with project standards.
🧪 Relevant tests	No
🔍 Possible issues	Possible Bug: The removal of certain components and utilities (e.g., killers.tsx, links.tsx) without corresponding updates or replacements might lead to missing functionalities or broken links in the application.
	Performance Concern: The addition of multiple SVG and PNG assets could potentially impact the loading time and performance of the landing page, especially if not optimized or lazy-loaded.
	Styling Inconsistency: The extensive changes to global styles and the introduction of new CSS configurations require careful review to ensure they do not conflict with existing styles or lead to inconsistencies across different browsers and screen sizes.
🔒 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	Improve type safety by avoiding the use of any. Instead of using any for the resize event in the interactivity options, it's better to explicitly define the expected type or interface. This improves type safety and code readability. apps/web/src/components/ui/sparkles.tsx [89] -resize: true as any +resize: true
	Enhance type safety by defining proper types. Instead of disabling eslint rules for unsafe assignment and member access, consider defining a proper type or interface for the pathRef and Component props. This enhances type safety and code maintainability. apps/web/src/components/ui/moving-border.tsx [1-92] -/* eslint-disable @typescript-eslint/no-unsafe-assignment -- chill */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access -- chill */ -const pathRef = useRef<any>() -as?: any +const pathRef = useRef<SVGRectElement>(null) +as?: React.ElementType
	Add cleanup for setInterval in useEffect to prevent memory leaks. Consider using useEffect to clean up the interval when the component unmounts to prevent potential memory leaks. apps/web/src/components/ui/encrypt-btn.tsx [23-43] -intervalRef.current = setInterval(() => { - ... -}, SHUFFLE_TIME) +useEffect(() => { + return () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + } + }; +}, []);
	Use unique identifiers as keys for list items. Avoid using array indexes as keys in React lists. Consider using a unique identifier. apps/web/src/components/secretSection/index.tsx [66] -<Card key={index}> +<Card key={card.heading}>
	Document custom Tailwind CSS plugins for better code understanding. While defining custom plugins in Tailwind CSS config, ensure that the plugin functions are well-documented. This includes adding comments to explain what the plugin does, especially for complex utilities like addVariablesForColors. This will help other developers understand the purpose and functionality of the custom plugins. apps/web/tailwind.config.js [25-33] +// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200). function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme('colors')) let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) ) addBase({ ':root': newVars }) }
	Use Tailwind utility classes instead of custom CSS for maintainability. For better maintainability and to avoid potential specificity issues, consider using Tailwind's utility classes directly in your HTML or JSX instead of defining custom classes like .gradBtnBg. Tailwind's utility-first approach is designed to help you manage styles more efficiently without the need for custom CSS whenever possible. apps/web/src/app/global.css [17-19] -.gradBtnBg:hover { - background: radial-gradient(84.92% 150% at 50% 138.75%,hsla(0,0%,100%,.24) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.01); - background-size: 150% 150% -} +<!-- Use Tailwind utility classes directly in your component -->
	Use consistent naming conventions for files and exports. It's a good practice to follow consistent naming conventions for your files and exports. For example, consider using camelCase for SVG file names and their respective exports to align with JavaScript naming conventions. This change enhances readability and consistency across your codebase. apps/web/public/sectionsvg/index.ts [1-11] -import SecrectRotationSVG from './SecrectRotationSVG.svg' -import VersoningSVG from './Versioning.svg' -import RoleBaseSVG from './RoleBase.svg' -import PublicKeySVG from './PublicKey.svg' -import VairiablesSVG from './Variables.svg' -import AudtingSVG from './Audting.svg' -import StandardKitSVG from './StandardKit.svg' -import ImportExportSVG from './ImportExport.svg' -import SeemlessIntegrationSVG from './SeemlessIntegration.svg' -import CommandLineSVG from './CommandLine.svg' -import SnapshotSVG from './Snapshot.svg' +import secretRotationSVG from './secretRotationSVG.svg' +import versioningSVG from './versioning.svg' +import roleBaseSVG from './roleBase.svg' +import publicKeySVG from './publicKey.svg' +import variablesSVG from './variables.svg' +import auditingSVG from './auditing.svg' +import standardKitSVG from './standardKit.svg' +import importExportSVG from './importExport.svg' +import seamlessIntegrationSVG from './seamlessIntegration.svg' +import commandLineSVG from './commandLine.svg' +import snapshotSVG from './snapshot.svg'
Maintainability	Use descriptive variable names for better readability. Consider using a more descriptive variable name instead of init for the state that tracks the initialization status of the particles engine. A name like isParticlesEngineInitialized would make the code more readable. apps/web/src/components/ui/sparkles.tsx [35] -const [init, setInit] = useState(false) +const [isParticlesEngineInitialized, setIsParticlesEngineInitialized] = useState(false)
	Refactor repeated logic into a custom hook for better reusability. Refactor the repeated logic for scrambling text into a custom hook to improve code reusability and maintainability. apps/web/src/components/ui/encrypt-text.tsx [20-50] -const scramble = (): void => { +// In a separate file, create a useScrambleText hook +export const useScrambleText = (TARGET_TEXT) => { ... + return { text, scramble, stopScramble }; }
	Extract inline styles into a CSS module or use Tailwind's @apply. For the inline styles used in the div element, consider extracting them into a CSS module or using Tailwind's @apply directive if possible. This approach can help maintain the separation of concerns and improve the readability and maintainability of your styling code. apps/web/src/components/shared/card/index.tsx [9-15] -<div - className="flex w-[25rem] flex-col justify-end rounded-2xl backdrop-blur-2xl" - style={{ - background: - 'linear-gradient(180deg, rgba(52, 52, 52, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(17, 18, 27, 0.24)', - boxShadow: - '0px 4px 4px 0px rgba(255, 255, 255, 0.15) inset, 0px 0px 68px 0px rgba(255, 255, 255, 0.05) inset' - }} -> +<div className="cardStyle">
Performance	Use useCallback to improve performance. To improve performance and avoid unnecessary re-renders, wrap the particlesLoaded function with useCallback hook. This ensures that the function is not recreated on every render. apps/web/src/components/ui/sparkles.tsx [49-58] -const particlesLoaded = (container?: Container): void => { +const particlesLoaded = useCallback((container?: Container): void => { if (container) { console.log(container) void controls.start({ opacity: 1, transition: { duration: 1 } }) } -} +}, [controls])
	Limit the frequency of updates in useAnimationFrame for better performance. To avoid potential performance issues, consider limiting the frequency of updates in the useAnimationFrame hook. This can be achieved by updating the progress only when a significant change has occurred. apps/web/src/components/ui/moving-border.tsx [95-102] +let lastUpdate = 0 useAnimationFrame((time) => { const length = pathRef.current?.getTotalLength() - if (length) { + if (length && time - lastUpdate > 16) { // ~60 updates per second const pxPerMillisecond = length / duration progress.set((time * pxPerMillisecond) % length) + lastUpdate = time } })
	Use CSS for hover effects instead of JavaScript. Use CSS for hover effects instead of JavaScript to improve performance and reduce complexity. apps/web/src/components/ui/input-spotlight.tsx [29-34] -const handleMouseEnter = (): void => { - setOpacity(1) +/* CSS */ +.input-hover-effect:hover { + opacity: 1; }
	Use useCallback for event handlers to improve performance. Consider using useCallback for the event handlers (handleMouseMove, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave) to avoid unnecessary re-renders. This is especially beneficial for performance in components that could be frequently updated or are part of larger lists. apps/web/src/components/ui/spotlight-card.tsx [14-20] -const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => { +const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>): void => { if (!divRef.current || isFocused) return const div = divRef.current const rect = div.getBoundingClientRect() setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }) -} +}, [isFocused])
Accessibility	Ensure buttons have accessible names for better accessibility. For accessibility, ensure that buttons have discernible text or aria-labels when using them as icons only. apps/web/src/components/ui/button.tsx [43] const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( + ({ className, variant, size, asChild = false, 'aria-label': ariaLabel, children, ...props }, ref) => { + if (!children && !ariaLabel) { + console.warn('Button component is missing an accessible name.'); + } + ... +)

---

✨ 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]

Just make sure the lints and sonarqube analysis passes and we should be good to go.

[rajdip-b]

Alignment issue

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
18 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
3.2% Duplication on New Code

See analysis details on SonarCloud

[rajdip-b]

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀