[WIP] feat: Revamp landing page #1145

kriptonian1 · 2025-09-14T06:42:02Z

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.

PR Type

Enhancement

Description

Complete hero section redesign with new layout and styling
New reusable button components (CtaButton, TertiaryButton)
Updated navbar with simplified design and new navigation
Background color changes and gradient improvements

Diagram Walkthrough

flowchart LR
  A["Old Hero Section"] --> B["New Hero Section"]
  C["Old Navbar"] --> D["New Navbar Design"]
  E["Button Components"] --> F["CtaButton & TertiaryButton"]
  G["Background Colors"] --> H["Updated Color Scheme"]

File Walkthrough

Relevant files

Enhancement

10 files

index.ts `Add GitHub SVG export`	+3/-0
index.ts `Add ArrowRight SVG export`	+2/-1
global.css `Update background colors and formatting`	+13/-9
index.tsx `Add new hero SVG assets`	+5/-2
layout.tsx `Add top gradient to layout`	+3/-1
index.tsx `Create new CTA button component`	+30/-0
index.tsx `Create new tertiary button component`	+28/-0
index.tsx `Complete hero section redesign`	+69/-30
index.tsx `Update background color reference`	+4/-3
index.tsx `Redesign navbar with new layout`	+58/-62

codiumai-pr-agent-free · 2025-09-14T06:42:18Z

CI Feedback 🧐

(Feedback updated until commit `7317e95`)

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: Validate PR title
Failed stage: Lint PR [❌]
Failed test name: amannn/action-semantic-pull-request
Failure summary: The action failed because the PR title "[WIP] feat: Revamp landing page" does not follow the conventional commits format expected by the semantic-pull-request action. The "[WIP]" prefix is not recognized as a valid release type according to conventional commits specification.
Relevant error logs: 1: ##[group]Runner Image Provisioner 2: Hosted Compute Agent ... 31: SecurityEvents: write 32: Statuses: write 33: ##[endgroup] 34: Secret source: Actions 35: Prepare workflow directory 36: Prepare all required actions 37: Getting action download info 38: Download action repository 'amannn/action-semantic-pull-request@v5' (SHA:e32d7e603df1aa1ba07e981f2a23455dee596825) 39: Complete job name: Validate PR title 40: ##[group]Run amannn/action-semantic-pull-request@v5 41: with: 42: githubBaseUrl: https://api.github.com 43: env: 44: GITHUB_TOKEN: *** 45: ##[endgroup] 46: ##[error]No release type found in pull request title "[WIP] feat: Revamp landing page". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/ 47:

codiumai-pr-agent-free · 2025-09-14T06:42:32Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Empty Space Character There's an unnecessary empty space character inside the CtaButton component that could cause inconsistent spacing in the UI. {' '} <VideoSVG /> Schedule a Demo Interface Naming The interface is named CtaButtonProps but the component is TertiaryButton, which could lead to confusion in component documentation and type usage. interface CtaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: React.ReactNode } Inconsistent Structure The closing div tag is misaligned with its opening tag after adding the TopGradientSVG component, which could lead to layout issues. <div className="relative flex w-full justify-center"> <Navbar /> <TopGradientSVG className="absolute -z-10" /> </div>

rajdip-b · 2025-09-14T06:42:47Z

lmk when this is done

codiumai-pr-agent-free · 2025-09-14T06:43:30Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Security	Add security attributes to external links The `href` for the "Docs" and "Blog" navigation links points to an external website. To prevent potential security vulnerabilities like tabnabbing, you should add `rel="noopener noreferrer"` and `target="_blank"` to these external links. This ensures they open in a new tab securely. apps/web/src/components/shared/navbar/index.tsx [40-46] {navContent.map((item) => { + const isExternal = item.href.startsWith('http'); return ( - <Link className="px-4 py-2" href={item.href} key={item.name}> + <Link + className="px-4 py-2" + href={item.href} + key={item.name} + rel={isExternal ? "noopener noreferrer" : undefined} + target={isExternal ? "_blank" : undefined} + > {item.name} </Link> ) })} Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that external links are being rendered without `rel="noopener noreferrer"`, and proposes a fix that mitigates potential tabnabbing security vulnerabilities.	Medium
High-level	Centralize font loading for performance To improve performance and adhere to Next.js best practices, the PR should centralize font loading. Currently, `Geist` and `Geist_Mono` fonts are loaded in multiple components. They should be loaded once in the root layout and applied globally using CSS variables. Examples: apps/web/src/components/hero/index.tsx [8-18] import { Geist, Geist_Mono } from 'next/font/google' import CtaButton from '../CtaButton' import { isUserLoggedIn } from '@/utils/is-user-logged-in' const geist = Geist({ subsets: ['latin'] }) const geistMono = Geist_Mono({ subsets: ['latin'], weight: ['400', '700'] ... (clipped 1 lines) apps/web/src/components/CtaButton/index.tsx [2-13] import { Geist_Mono } from 'next/font/google' import type { ButtonHTMLAttributes } from 'react' import React from 'react' interface CtaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: React.ReactNode } const geistMono = Geist_Mono({ subsets: ['latin'], ... (clipped 2 lines) Solution Walkthrough: Before: // In apps/web/src/components/hero/index.tsx import { Geist, Geist_Mono } from 'next/font/google' const geist = Geist(...) const geistMono = Geist_Mono(...) function Hero() { return ( <h1 className={geist.className}>...</h1> <button className={geistMono.className}>...</button> ) } // In apps/web/src/components/CtaButton/index.tsx import { Geist_Mono } from 'next/font/google' const geistMono = Geist_Mono(...) export default function CtaButton({ children }) { return <button className={geistMono.className}>{children}</button> } After: // In a root layout file, e.g., apps/web/src/app/layout.tsx import { Geist, Geist_Mono } from 'next/font/google' const geist = Geist({ subsets: ['latin'], variable: '--font-geist' }) const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' }) export default function RootLayout({ children }) { return ( <html lang="en" className={`${geist.variable} ${geistMono.variable}`}> <body>{children}</body> </html> ) } // In tailwind.config.js, map variables to font families // Then, in components, use Tailwind classes like `font-sans` or `font-mono` // without importing the fonts directly. function Hero() { return ( <h1 className="font-sans">...</h1> <button className="font-mono">...</button> ) } Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies redundant font loading across multiple components, and centralizing them is a significant performance and maintainability improvement that aligns with Next.js best practices.	Medium
General	Reuse component instead of duplicating styles You've created a new `TertiaryButton` component in this PR, but are using a manually styled element here with very similar styling. To improve code reuse and maintainability, you should use the `TertiaryButton` component and pass a `className` prop to override the default border and text colors. apps/web/src/components/hero/index.tsx [62-68] -<button - className={`${geistMono.className} flex items-center gap-3 rounded-[8px] border border-[#33E3FF]/[60%] bg-[#99EEFF14] px-4 py-2 text-[#D4F7FF]`} - type="button" -> +<TertiaryButton className="border-[#33E3FF]/[60%] text-[#D4F7FF]"> {isUserLoggedIn() ? 'Open app' : 'Sign in to Keyshade'}{' '} <ArrowRight /> -</button> +</TertiaryButton> Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies an opportunity to use the new `TertiaryButton` component instead of a custom-styled button, which improves code reuse and maintainability.	Medium
General	Rename interface for component accuracy The interface for this component is incorrectly named `CtaButtonProps`, likely due to a copy-paste error from another component. Rename it to `TertiaryButtonProps` to accurately reflect the component it belongs to and avoid confusion. apps/web/src/components/TertiaryButton/index.tsx [6-8] -interface CtaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { +interface TertiaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: React.ReactNode } Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies a copy-paste error where the interface `CtaButtonProps` is used in the `TertiaryButton` component, and fixing it improves code clarity and maintainability.	Low
More

feat: add hero section

a834390

kriptonian1 requested review from rajdip-b and Souvik9205 September 14, 2025 06:42

Merge branch 'develop' into feat/website-revamp

7317e95

kriptonian1 marked this pull request as draft September 14, 2025 06:42

codiumai-pr-agent-free bot added the Review effort 3/5 label Sep 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[WIP] feat: Revamp landing page #1145

[WIP] feat: Revamp landing page #1145

Uh oh!

kriptonian1 commented Sep 14, 2025 •

edited by codiumai-pr-agent-free bot

Loading

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025 •

edited

Loading

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025

Uh oh!

rajdip-b commented Sep 14, 2025

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025

Examples:

Solution Walkthrough:

Before:

After:

Uh oh!

Uh oh!

Uh oh!

[WIP] feat: Revamp landing page #1145

Are you sure you want to change the base?

[WIP] feat: Revamp landing page #1145

Uh oh!

Conversation

kriptonian1 commented Sep 14, 2025 • edited by codiumai-pr-agent-free bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Description

Dependencies

Future Improvements

Mentions

Screenshots of relevant screens

Developer's checklist

Documentation Update

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Feedback 🧐

(Feedback updated until commit 7317e95)

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025

PR Reviewer Guide 🔍

Uh oh!

rajdip-b commented Sep 14, 2025

Uh oh!

codiumai-pr-agent-free bot commented Sep 14, 2025

PR Code Suggestions ✨

Examples:

Solution Walkthrough:

Before:

After:

Uh oh!

Uh oh!

kriptonian1 commented Sep 14, 2025 •

edited by codiumai-pr-agent-free bot

Loading

codiumai-pr-agent-free bot commented Sep 14, 2025 •

edited

Loading

(Feedback updated until commit `7317e95`)