perf: reduce lag on pricing page #263
Conversation
|
@vinodM09 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughReplaces the monolithic pricing page with a modular, data-driven composition: adds animated feature/why sections, pricing card components and data, lazy-loaded testimonials and payment flow, in-view animation hook, hash-scroll handler, UI primitives, new design tokens + Tailwind utility, and small TSX/runtime and font CSS changes. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/app/(main)/(landing)/pricing/page.tsx (2)
4-4: Remove unused ShineBorder import.The ShineBorder component is no longer used after replacing it with the CSS gradient border. This import should be removed.
import Footer from "@/components/landing-sections/footer"; import Header from "@/components/ui/header"; -import { ShineBorder } from "@/components/ui/shine-borders"; import { motion } from "framer-motion";
296-476: Overall assessment: Performance goal achieved, but design system compliance is broken.The removal of the animated ShineBorder component and replacement with a static CSS gradient border should effectively reduce rendering work and address the lag issue. However, this change introduces design system violations that need to be fixed before merge:
- Hardcoded hex values (lines 301, 381): Colors must be moved to design tokens/Tailwind config
- Duplicate CSS classes (lines 301, 381): Extract the gradient border into a reusable component
- Unused import (line 4): Remove ShineBorder import
Address these issues to maintain code quality and design consistency.
♻️ Duplicate comments (1)
apps/web/src/app/(main)/(landing)/pricing/page.tsx (1)
381-381: Duplicate gradient border implementation—extract to reusable component or utility.SecondaryPricingCard duplicates the exact same complex gradient border classes from PricingCard (line 301). Extract this into a reusable wrapper component or a Tailwind
@applyutility class to reduce duplication and simplify maintenance.This pairs with the design token extraction task (previous comment); once colors are moved to tokens, having a single shared border component will make future updates much easier.
Example refactor:
// Option 1: Reusable wrapper component const GradientBorderCard = ({ children, className = "" }) => ( <div className={`relative overflow-hidden rounded-3xl isolate before:absolute before:inset-0 ... ${className}`}> {children} </div> ); // Usage: <GradientBorderCard> {/* card content */} </GradientBorderCard>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/app/(main)/(landing)/pricing/page.tsx(2 hunks)apps/web/tsconfig.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Remove unused imports
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Prefer functional components with TypeScript
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Organize imports in order: React → third-party → local components → utils → types
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use PascalCase for types and interfaces with descriptive names
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use UPPER_SNAKE_CASE for constants
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use proper TypeScript types and avoid using `any` type
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use camelCase for functions and variables
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use dynamic imports for code splitting when appropriate
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Organize imports: react → third-party → local components → utils → types
Applied to files:
apps/web/tsconfig.json
🔇 Additional comments (1)
apps/web/tsconfig.json (1)
18-18: Verify the JSX runtime change is compatible with current React & Next.js versions.The change from "preserve" to "react-jsx" is a good modernization (enables automatic JSX runtime), but ensure your React version is 17+ and Next.js is 13+, and that the build completes successfully with no regressions.
|
okay, i'll fix it |
|
@vinodM09 nice work! pls fix the reviews then it'll be good to go. |
vinodM09
force-pushed
the
fix-pricing-page-lag
branch
from
375feae to
a0fd41f
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/src/app/(main)/(landing)/pricing/page.tsx(5 hunks)apps/web/src/lib/design-tokens.ts(1 hunks)apps/web/tailwind.config.ts(1 hunks)apps/web/tsconfig.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/app/(main)/(landing)/pricing/page.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/lib/design-tokens.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
**/src/{lib,utils}/**
📄 CodeRabbit inference engine (.cursorrules)
Use kebab-case or camelCase for utility file names
Files:
apps/web/src/lib/design-tokens.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/lib/design-tokens.ts
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/lib/design-tokens.ts
apps/web/src/{lib,utils}/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
Name files and folders using kebab-case or camelCase for utilities
Files:
apps/web/src/lib/design-tokens.ts
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Applied to files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.ts
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/lib/design-tokens.tsapps/web/tailwind.config.tsapps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Prefer functional components with TypeScript
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Remove unused imports
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Organize imports in order: React → third-party → local components → utils → types
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use PascalCase for types and interfaces with descriptive names
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use dynamic imports for code splitting when appropriate
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use proper TypeScript types and avoid using `any` type
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use camelCase for functions and variables
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use UPPER_SNAKE_CASE for constants
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use descriptive prop names and define prop types using TypeScript interfaces or types
Applied to files:
apps/web/tsconfig.json
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Organize imports: react → third-party → local components → utils → types
Applied to files:
apps/web/tsconfig.json
🔇 Additional comments (2)
apps/web/src/lib/design-tokens.ts (1)
36-40: LGTM! Well-structured design token for gradient border.The new
borderGradienttoken is properly structured, follows the existing pattern in the design tokens file, and includes a helpful comment describing its purpose for pricing cards. This aligns well with the PR objective of replacing the animated border with a static gradient.apps/web/tailwind.config.ts (1)
13-21: LGTM! Properly configured Tailwind utility using design tokens.The new
border-gradientbackgroundImage utility correctly references the design tokens fromcolors.brand.purple.borderGradient, avoiding hardcoded values. The gradient configuration (135deg angle with three color stops) is appropriate for creating the static border effect that replaces the animated ShineBorder component.Based on learnings and coding guidelines about using design tokens rather than hardcoded values.
|
I have addressed the review feedback by replacing all hardcoded hex values with design tokens. in addition, I removed blur effects from a few non critical areas to improve smoothness and performance while keeping the overall visual style unchanged and as intended. I also reverted some unintended changes from earlier commits, so the PR is now fully focused on the required updates. Everything should be aligned now. Please let me know if anything else needs adjustment. thanks |
|
@vinodM09 hey vinod, ive tested ur changes locally and i found the perf score is still 63. i acknowledge you've made an improvement, but can you pls look into it so that it can be improved more. attaching some of my findings: 
|
|
@apsinghdev Thanks for the review and for sharing the performance results. I would like to share the testing process I followed and the results I am seeing locally, as there seems to be a difference in the reported scores. For testing, I:
The same flow we use to validate deployment behavior. I tested the pricing page using this setup on both Chrome and Brave. In my case, the Lighthouse performance score is consistently above 97 to 98. The paint related issues are resolved as I mentioned previously in this PR, and the visible scroll lag that existed earlier is no longer present. I have attached screenshots from my local tests for reference. While there are still some warnings related to unused JavaScript and CSS, those were already present earlier. Addressing them would require a broader optimization pass, and I am happy to work on that as a follow-up if needed. To help align the results, could you please share the exact method you are using to measure performance? Also, are you still observing the visible scroll lag on your end? This will help me reproduce the same conditions and ensure we are evaluating the change consistently. brave: chrome: warnings: thanks again for the review, and I am happy to iterate further if required. |
|
Greate work @vinodM09 But, there is an issue rn. Localhost ≠ Real-world deployed websites. On localhost: Zero network latency and JS already warm in memory. That’s why FCP is good (0.3s) but LCP is bad (4.2s) in prod. Have a look here : https://chatgpt.com/share/6942c28d-d820-800e-9ae9-d4e1ca3fc487 You will require to reiterate. Just put it to cursor or antigravity's claude 4.5 thinking model and it will help you debug. |
vinodM09
force-pushed
the
fix-pricing-page-lag
branch
from
84f652d to
733c259
Compare
There was a problem hiding this comment.
Actionable comments posted: 15
🧹 Nitpick comments (5)
apps/web/src/components/ui/CustomButtonStatic.tsx (2)
1-2: Consider adding React import for TypeScript type usage.While the modern JSX runtime may handle
React.ReactNodewithout an explicit import, it's clearer to import React when using its types:+import React from "react"; import { cn } from "@/lib/utils"; import Link from "next/link";
21-29: Consider extracting shared button styles.The styling is nearly identical to
custom-button.tsx(lines 6-28). To reduce duplication and improve maintainability, consider extracting the shared className string to a constant or utility function that both components can use:// in a shared location (e.g., apps/web/src/lib/button-styles.ts) export const BUTTON_BASE_STYLES = [ "flex gap-2 items-center justify-center px-5 py-3 rounded-[16px] relative", "border-x border-t-2 border-brand-purple", "bg-gradient-to-b from-[#5728f4] to-[#5100FF]", // replace with design tokens "[box-shadow:0px_-2px_0px_0px_#2c04b1_inset]", // replace with design tokens "hover:opacity-90 transition-opacity duration-100", "text-white font-medium", ].join(" ");Then both components can reference this constant.
apps/web/src/hooks/useInViewAnimation.ts (1)
16-51: Consider using framer-motion's built-inuseInViewhook.The custom implementation is correct, but framer-motion (already a project dependency) provides a built-in
useInViewhook with similar functionality. Fromapps/web/src/components/ui/number-ticker.tsxline 19, the codebase already uses framer-motion'suseInViewin other components.Using the built-in hook would reduce maintenance burden and ensure consistency across the codebase.
🔎 Migration to framer-motion's useInView
-import { useEffect, useRef, useState } from 'react'; +import { useInView } from 'framer-motion'; +import { useRef } from 'react'; -interface UseInViewAnimationOptions { - threshold?: number; - triggerOnce?: boolean; - rootMargin?: string; -} - -/** - * Custom hook that detects when an element enters the viewport - * Returns a ref to attach to the element and an inView boolean - * - * @param options - Intersection Observer options - * @returns [ref, inView] tuple - */ -export function useInViewAnimation<T extends HTMLElement = HTMLDivElement>( - options: UseInViewAnimationOptions = {} -) { - const { threshold = 0.1, triggerOnce = true, rootMargin = '0px' } = options; - const ref = useRef<T>(null); - const [inView, setInView] = useState(false); - - useEffect(() => { - const element = ref.current; - if (!element) return; - - const observer = new IntersectionObserver( - ([entry]) => { - if (entry.isIntersecting) { - setInView(true); - if (triggerOnce && element) { - observer.unobserve(element); - } - } else if (!triggerOnce) { - setInView(false); - } - }, - { threshold, rootMargin } - ); - - observer.observe(element); - - return () => { - if (element) { - observer.unobserve(element); - } - }; - }, [threshold, triggerOnce, rootMargin]); - - return [ref, inView] as const; -} +export function useInViewAnimation<T extends HTMLElement = HTMLDivElement>( + options: { threshold?: number; triggerOnce?: boolean; rootMargin?: string } = {} +) { + const { threshold = 0.1, triggerOnce = true, rootMargin = '0px' } = options; + const ref = useRef<T>(null); + const inView = useInView(ref, { + once: triggerOnce, + amount: threshold, + margin: rootMargin + }); + return [ref, inView] as const; +}apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (2)
322-326: Redundant ternary expression.The ternary returns
testimonial.contentin both branches, making the condition unnecessary.🔎 Proposed fix
- <div className="text-pretty"> - {typeof testimonial.content === "string" - ? testimonial.content - : testimonial.content} - </div> + <div className="text-pretty"> + {testimonial.content} + </div>The same pattern appears at lines 335-339 and 351-355.
246-255: Consider safer handling of optionalpremiumPlanId.Using non-null assertion (
premiumPlanId!) whenplanIdOkis true is logically safe, but a fallback makes the code more defensive.🔎 Proposed fix
- <LazyPaymentFlow - planId={planIdOk ? premiumPlanId! : ""} + <LazyPaymentFlow + planId={premiumPlanId ?? ""}This achieves the same result without the non-null assertion, since an empty string is passed when
premiumPlanIdis undefined/null anyway.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx(1 hunks)apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx(1 hunks)apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx(1 hunks)apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx(1 hunks)apps/web/src/app/(main)/(landing)/pricing/_components/types.ts(1 hunks)apps/web/src/app/(main)/(landing)/pricing/page.tsx(1 hunks)apps/web/src/app/font-display-override.css(1 hunks)apps/web/src/app/globals.css(1 hunks)apps/web/src/components/payment/LazyPaymentFlow.tsx(1 hunks)apps/web/src/components/ui/CustomButtonStatic.tsx(1 hunks)apps/web/src/components/ui/HeaderStatic.tsx(1 hunks)apps/web/src/components/ui/flickering-grid.tsx(1 hunks)apps/web/src/components/utils/HashScrollHandler.tsx(1 hunks)apps/web/src/hooks/useInViewAnimation.ts(1 hunks)apps/web/src/lib/design-tokens.ts(1 hunks)apps/web/tailwind.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/web/src/components/ui/flickering-grid.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/tailwind.config.ts
- apps/web/src/lib/design-tokens.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
**/*[A-Z]*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Use PascalCase for component file names (e.g.,
UserProfile.tsx)
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
apps/web/src/components/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts,jsx,js}: Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale for section padding: p-4 (1rem) on mobile, p-[60px] on desktop
Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Use duration-100 (0.1s) for fast transitions, duration-300 (0.3s) for normal transitions, and duration-600 (0.6s) for slow transitions
Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Prefer functional components with TypeScript
Extract reusable logic into custom hooks
Prefer controlled components over uncontrolled
Include proper aria labels for accessibility
Ensure keyboard navigation works in interactive components
Maintain proper heading hierarchy in page components
Provide alt text for images
Use 'class:' instead of the ternary operator in class tags whenever possible
Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
Files:
apps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsx
apps/web/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts}: Use proper TypeScript types and avoid usinganytype
Use descriptive prop names and define prop types using TypeScript interfaces or types
Name components using PascalCase (e.g., UserProfile.tsx)
Files:
apps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsx
🧠 Learnings (33)
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Applied to files:
apps/web/src/hooks/useInViewAnimation.tsapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Extract reusable logic into custom hooks
Applied to files:
apps/web/src/hooks/useInViewAnimation.ts
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Extract reusable logic into custom hooks
Applied to files:
apps/web/src/hooks/useInViewAnimation.ts
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Ensure keyboard navigation works in interactive components
Applied to files:
apps/web/src/components/utils/HashScrollHandler.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Ensure keyboard navigation works
Applied to files:
apps/web/src/components/utils/HashScrollHandler.tsx
📚 Learning: 2025-12-17T12:39:29.991Z
Learnt from: huamanraj
Repo: apsinghdev/opensox PR: 262
File: apps/web/src/components/checkout/CheckoutWrapper.tsx:5-5
Timestamp: 2025-12-17T12:39:29.991Z
Learning: In Next.js apps, avoid using redirect() from next/navigation inside Client Components during render. It should not be used in event handlers like onClick or onSubmit; for those cases, use useRouter().push() or router.replace() instead. This guidance applies to TSX files (React components) across the codebase; implement in client components to handle conditional redirects during render, and use router-based navigation in handlers.
Applied to files:
apps/web/src/components/utils/HashScrollHandler.tsxapps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/data.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use animation durations: fast `duration-100` (0.1s), normal `duration-300` (0.3s), slow `duration-600` (0.6s)
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use descriptive prop names and define prop types using TypeScript interfaces or types
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Prefer functional components with TypeScript
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/app/(main)/(landing)/pricing/_components/types.tsapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use `font-sans` for standard UI text (Geist Sans) and `font-mono` for code, technical content, or monospace needs (DM Mono)
Applied to files:
apps/web/src/app/globals.cssapps/web/src/app/font-display-override.css
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Applied to files:
apps/web/src/app/font-display-override.css
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Optimize images using next/image
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Remove unused imports
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use dynamic imports for code splitting when appropriate
Applied to files:
apps/web/src/components/payment/LazyPaymentFlow.tsxapps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Maintain proper heading hierarchy in page components
Applied to files:
apps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Maintain proper heading hierarchy
Applied to files:
apps/web/src/components/ui/HeaderStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Include proper aria labels for accessibility
Applied to files:
apps/web/src/components/ui/HeaderStatic.tsxapps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use semantic color names that describe purpose, not appearance
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/page.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{tsx,ts} : Use descriptive prop names and define prop types using TypeScript interfaces or types
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use PascalCase for types and interfaces with descriptive names
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use proper TypeScript types and avoid using `any` type
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{ts,tsx} : Use PascalCase for types and interfaces with descriptive names
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*[Cc]omponent.{tsx,ts} : Keep components focused and single-responsibility
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Name components using PascalCase (e.g., UserProfile.tsx)
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
🧬 Code graph analysis (9)
apps/web/src/hooks/useInViewAnimation.ts (1)
apps/web/src/components/ui/number-ticker.tsx (2)
NumberTicker(8-59)latest(39-46)
apps/web/src/components/utils/HashScrollHandler.tsx (1)
apps/web/src/app/(main)/(landing)/pitch/page.tsx (1)
hash(20-31)
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx (4)
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts (1)
Feature(1-6)apps/web/src/hooks/useInViewAnimation.ts (1)
useInViewAnimation(16-51)apps/web/src/components/ui/ActiveTag.tsx (1)
ActiveTag(8-23)apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx (1)
CornerDownRightIcon(58-74)
apps/web/src/components/ui/CustomButtonStatic.tsx (3)
apps/web/src/lib/utils.ts (1)
cn(4-6)apps/web/src/components/ui/button.tsx (2)
props(44-53)ButtonProps(37-41)apps/web/src/components/ui/custom-button.tsx (1)
children(7-29)
apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx (1)
apps/web/src/components/icons/icons.tsx (1)
Target(165-172)
apps/web/src/components/payment/LazyPaymentFlow.tsx (1)
apps/web/src/components/payment/PaymentFlow.tsx (3)
data(41-253)PaymentFlowProps(12-20)error(126-136)
apps/web/src/components/ui/HeaderStatic.tsx (2)
apps/web/src/components/ui/flickering-grid.tsx (1)
FlickeringGrid(23-199)apps/web/src/components/ui/header.tsx (1)
title(7-44)
apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx (2)
apps/web/src/app/(main)/(landing)/pricing/_components/types.ts (1)
Feature(1-6)apps/web/src/components/landing-sections/how-it-works.tsx (1)
HowItWorks(33-66)
apps/web/src/app/(main)/(landing)/pricing/page.tsx (4)
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (3)
TestimonialsSection(304-362)AnimatedWhySection(42-84)PricingCardsSection(91-117)apps/web/src/components/utils/HashScrollHandler.tsx (1)
HashScrollHandler(6-22)apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx (1)
AnimatedFeaturesSection(12-92)apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx (2)
opensoxFeatures(3-50)whySub(52-68)
🔇 Additional comments (12)
apps/web/src/components/ui/CustomButtonStatic.tsx (2)
4-8: LGTM!The interface is well-defined with descriptive prop names and proper TypeScript types.
13-17: LGTM!The function signature uses proper naming conventions and TypeScript types.
apps/web/src/components/ui/HeaderStatic.tsx (1)
17-31: Nice performance optimization with conditional animation.The pattern of conditionally applying animation props based on the
animateflag, combined withwillChangehints, is excellent for reducing unnecessary animations on below-the-fold content. This directly supports the PR's performance goals.apps/web/src/components/payment/LazyPaymentFlow.tsx (1)
26-48: Excellent lazy loading strategy for performance.The pattern of showing a static button initially and only loading the PaymentFlow component on user interaction is a smart optimization that reduces the initial JavaScript bundle size and aligns well with the PR's performance goals.
apps/web/src/components/utils/HashScrollHandler.tsx (1)
6-22: Good extraction of reusable hash-scroll logic.This component correctly extracts the hash-based scroll behavior that was previously inline in other pages (e.g.,
apps/web/src/app/(main)/(landing)/pitch/page.tsxlines 19-30). The implementation properly handles pathname changes and provides smooth scrolling to hash targets.apps/web/src/app/(main)/(landing)/pricing/_components/types.ts (1)
1-6: LGTM - Clean type definition.The
Featureinterface is well-structured with descriptive field names and proper TypeScript types. The flexibledescriptionfield (string or ReactNode array) provides good API ergonomics for various content formats.apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx (1)
37-48: Nice staggered animation with performance hints.The combination of staggered animation delays (
index * 0.08) andwillChangehints creates smooth, performant entrance animations. This approach aligns well with the PR's goal of reducing lag on the pricing page.apps/web/src/app/font-display-override.css (1)
1-18: Remove unused font-display-override.css file.The file is not imported in the layout or stylesheets, so the @font-face overrides never apply. Additionally, the current font setup uses Next.js's className and CSS variable approach (
geistSans.classNameanddmMono.variablein layout.tsx), not direct font-family overrides. The identifiers in this file don't correspond to how fonts are actually loaded. Either delete this file or integrate font-display settings into the actual font configuration in layout.tsx using thedisplayoption.apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx (1)
1-74: Well-structured inline SVG icons for bundle optimization.The inline SVG approach eliminates the lucide-react dependency for these specific icons, which aligns with the PR's performance optimization goal. The icons properly use
currentColorfor inheritance and acceptclassNamefor Tailwind styling.apps/web/src/app/(main)/(landing)/pricing/page.tsx (1)
21-53: Good modular architecture with performance optimizations.The refactored page structure addresses the PR objectives well:
- Dynamic import for
TestimonialsSectiondefers below-fold content- Font preload improves LCP
- Data-driven composition reduces component complexity
planIdOkvalidation guards against undefined env variablesOne minor note: Line 40 uses
bg-[#151515]/20- consider extracting this to a design token if it's a recurring pattern, though the/20opacity modifier makes this less straightforward.apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (2)
42-84: Good use of performance optimizations in animations.The
willChange: 'opacity, transform'style hints and staggered animation delays demonstrate awareness of rendering performance, which aligns with the PR's goal of reducing lag. TheuseInViewAnimationhook ensures animations only trigger when visible.
119-190: Good adoption ofborder-gradientdesign token for card borders.The
before:bg-border-gradientclass (line 124) correctly uses the design token system for the gradient border effect, addressing the previous review feedback about hardcoded hex values in gradient borders.
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
Outdated
Show resolved
Hide resolved
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
Outdated
Show resolved
Hide resolved
|
@apsinghdev ok so i reiterated the page and improved the performance of the page, i separated the page into server/client components to reduce the LCP, unused js and css, and network chaining, and doing these changes have made so much improvements (additionally no visual style is changed and also utilized the already existing components as much as we can do), i tested it localhost and also on build, and the results were great, also i have attached the findings, on localhost: on localhost with build (this eliminates the effect of browser extensions and we see deployment like conditions) warnings: the current performance is already excellent, the remaining 93 KiB is mostly framework code that makes the application function properly, going below 50 KiB requires removing framer-motion, which is a significant trade-off (though i have reduced the use of framer-motion by altering the access techniques) |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (2)
237-242: Outdated discount deadline.The "Discounted till 10 December" text references a past date. This should be updated or made dynamic.
97-97: Replace hardcoded background color with design token.The hardcoded
bg-[#151515]/20violates the design system. Use a semantic token from the design system instead.#!/bin/bash # verify available background tokens in design system rg -nP 'bg-surface|bg-background|bg-panel' apps/web/src/lib/design-tokens.ts apps/web/tailwind.config.ts -A2 -B2Based on learnings, always reference colors from the design token system using Tailwind classes.
🧹 Nitpick comments (6)
apps/web/src/components/ui/CustomButtonStatic.tsx (2)
29-32: Replace inline styles with Tailwind utilities.The inline
styleprop violates the coding guideline: "Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags."Extend
tailwind.config.tsto expose these design tokens as Tailwind utilities (e.g.,bg-brand-purple-button-gradientandshadow-brand-purple-button), then use them in theclassNameinstead.🔎 Suggested approach
First, extend
apps/web/tailwind.config.ts:// in the theme.extend section backgroundImage: { 'brand-purple-button-gradient': `linear-gradient(to bottom, ${colors.brand.purple.button.gradient.from}, ${colors.brand.purple.button.gradient.to})` }, boxShadow: { 'brand-purple-button': `0px -2px 0px 0px ${colors.brand.purple.button.shadow} inset` }Then update the component:
- <Link - href={href} - className={cn( - "flex gap-2 items-center justify-center px-5 py-3 rounded-[16px] relative", - "border-x border-t-2 border-brand-purple", - "hover:opacity-90 transition-opacity duration-100", - "text-white font-medium", - className - )} - style={{ - background: `linear-gradient(to bottom, ${colors.brand.purple.button.gradient.from}, ${colors.brand.purple.button.gradient.to})`, - boxShadow: `0px -2px 0px 0px ${colors.brand.purple.button.shadow} inset`, - }} - > + <Link + href={href} + className={cn( + "flex gap-2 items-center justify-center px-5 py-3 rounded-[16px] relative", + "bg-brand-purple-button-gradient shadow-brand-purple-button", + "border-x border-t-2 border-brand-purple", + "hover:opacity-90 transition-opacity duration-100", + "text-white font-medium", + className + )} + >Then remove the unused
colorsimport.As per coding guidelines.
14-18: Consider adding an explicit return type.Adding
JSX.Elementas the return type would improve type safety and align with the guideline to define types for const functions.🔎 Suggested change
-export function CustomButtonStatic({ +export function CustomButtonStatic({ children, className, href, -}: CustomButtonStaticProps) { +}: CustomButtonStaticProps): JSX.Element {apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (4)
1-11: Consider reorganizing imports per coding guidelines.The import order should follow: React → third-party → local components → utils → types. Currently, local icons are imported before Next.js components.
🔎 Suggested import order
"use client"; import { motion } from "framer-motion"; -import { TargetIcon, CheckIcon, TerminalIcon } from "./icons"; import Image from "next/image"; import Link from "next/link"; import { useInViewAnimation } from "@/hooks/useInViewAnimation"; import { HeaderStatic } from "@/components/ui/HeaderStatic"; import { CustomButtonStatic } from "@/components/ui/CustomButtonStatic"; import { ActiveTag } from "@/components/ui/ActiveTag"; import { LazyPaymentFlow } from "@/components/payment/LazyPaymentFlow"; +import { TargetIcon, CheckIcon, TerminalIcon } from "./icons"; import { freePlanCard, premiumPlanCard, testimonials } from "./data";Based on coding guidelines, organize imports: React → third-party → local components → utils → types.
132-140: Reconsider image priority settings.Setting
priorityandfetchPriority="high"for the logo may unnecessarily prioritize this resource. Reserve these for truly critical above-the-fold content.🔎 Proposed change
<div className="w-12 h-12 relative"> <Image src="/assets/logo_var2.svg" alt="Opensox logo" fill - priority - fetchPriority="high" className="object-cover size-full" /> </div>
211-221: Reconsider image priority settings.Setting
priorityandfetchPriority="high"for the logo may unnecessarily prioritize this resource. Reserve these for truly critical above-the-fold content.🔎 Proposed change
<div className="w-12 h-12 relative"> <Image src="/assets/logo_var2.svg" alt="Opensox logo" fill - priority - fetchPriority="high" className="object-cover size-full" /> </div>
286-293: Fragile string comparison for feature detection.Checking
item === "Pro newsletter"is brittle and will break if the text changes. Consider adding anidorisActiveproperty to feature data.💡 Alternative approach
In your data file, add a property to identify active features:
// In data.tsx { text: "Pro newsletter", isActive: true }Then use:
- {item === "Pro newsletter" && <ActiveTag text="done" />} + {item.isActive && <ActiveTag text="done" />}
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx(1 hunks)apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx(1 hunks)apps/web/src/app/globals.css(1 hunks)apps/web/src/components/payment/LazyPaymentFlow.tsx(1 hunks)apps/web/src/components/ui/CustomButtonStatic.tsx(1 hunks)apps/web/src/components/ui/HeaderStatic.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/web/src/components/payment/LazyPaymentFlow.tsx
- apps/web/src/components/ui/HeaderStatic.tsx
- apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx
- apps/web/src/app/globals.css
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
apps/web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
apps/web/src/**/*.{ts,tsx}: Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g.,#5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Usefont-sansfor standard UI text (Geist Sans) andfont-monofor code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobilep-4(1rem) and desktopp-[60px]
Use appropriate border radius: small elementsrounded-lg, mediumrounded-xl, largerounded-2xl, buttonsrounded-[16px]
Use animation durations: fastduration-100(0.1s), normalduration-300(0.3s), slowduration-600(0.6s)
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoidany
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located insrc/store/)
Use absolute imports from@/prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
apps/web/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Optimize images using next/image
apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located insrc/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}
📄 CodeRabbit inference engine (.cursor/rules/general_rules.mdc)
**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
apps/web/src/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from@/prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')
Files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
**/*[A-Z]*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Use PascalCase for component file names (e.g.,
UserProfile.tsx)
Files:
apps/web/src/components/ui/CustomButtonStatic.tsx
apps/web/src/components/**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts,jsx,js}: Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale for section padding: p-4 (1rem) on mobile, p-[60px] on desktop
Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Use duration-100 (0.1s) for fast transitions, duration-300 (0.3s) for normal transitions, and duration-600 (0.6s) for slow transitions
Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Prefer functional components with TypeScript
Extract reusable logic into custom hooks
Prefer controlled components over uncontrolled
Include proper aria labels for accessibility
Ensure keyboard navigation works in interactive components
Maintain proper heading hierarchy in page components
Provide alt text for images
Use 'class:' instead of the ternary operator in class tags whenever possible
Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Always follow the design system defined inapps/web/src/lib/design-tokens.tsandapps/web/tailwind.config.ts
Files:
apps/web/src/components/ui/CustomButtonStatic.tsx
apps/web/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)
apps/web/src/components/**/*.{tsx,ts}: Use proper TypeScript types and avoid usinganytype
Use descriptive prop names and define prop types using TypeScript interfaces or types
Name components using PascalCase (e.g., UserProfile.tsx)
Files:
apps/web/src/components/ui/CustomButtonStatic.tsx
🧠 Learnings (27)
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*[Cc]omponent.{tsx,ts} : Keep components focused and single-responsibility
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts} : Use descriptive prop names and define prop types using TypeScript interfaces or types
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Prefer functional components with TypeScript
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Maintain proper heading hierarchy in page components
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : NEVER use hardcoded hex values (e.g., `#5519f7`) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use semantic color names that describe purpose, not appearance
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Use 'class:' instead of the ternary operator in class tags whenever possible
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-12-17T12:39:29.991Z
Learnt from: huamanraj
Repo: apsinghdev/opensox PR: 262
File: apps/web/src/components/checkout/CheckoutWrapper.tsx:5-5
Timestamp: 2025-12-17T12:39:29.991Z
Learning: In Next.js apps, avoid using redirect() from next/navigation inside Client Components during render. It should not be used in event handlers like onClick or onSubmit; for those cases, use useRouter().push() or router.replace() instead. This guidance applies to TSX files (React components) across the codebase; implement in client components to handle conditional redirects during render, and use router-based navigation in handlers.
Applied to files:
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsxapps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/components/**/*.{tsx,ts,jsx,js} : Extract reusable logic into custom hooks
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Always use lowercase when writing comments
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:38.559Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursor/rules/general_rules.mdc:0-0
Timestamp: 2025-11-25T07:34:38.559Z
Learning: Applies to **/*.{js,jsx,ts,tsx,py,java,go,rb,php} : Always use lowercase when writing comments
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Avoid unnecessary comments; code should be self-documenting when possible
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use UPPER_SNAKE_CASE for constants
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use UPPER_SNAKE_CASE for constants
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use comments to explain 'why', not 'what'
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:38.559Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursor/rules/general_rules.mdc:0-0
Timestamp: 2025-11-25T07:34:38.559Z
Learning: Applies to **/*.{js,jsx,ts,tsx,py,java,go,rb,php} : Avoid unnecessary comments; code should be self-documenting when possible
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts,jsx,js} : Use camelCase for functions and variables
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:35:19.071Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: apps/web/.cursor/rules/frontend_rules.mdc:0-0
Timestamp: 2025-11-25T07:35:19.071Z
Learning: Applies to apps/web/src/**/*.{tsx,ts} : Use PascalCase for types and interfaces with descriptive names
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
📚 Learning: 2025-11-25T07:34:30.473Z
Learnt from: CR
Repo: apsinghdev/opensox PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T07:34:30.473Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use appropriate border radius: small elements `rounded-lg`, medium `rounded-xl`, large `rounded-2xl`, buttons `rounded-[16px]`
Applied to files:
apps/web/src/components/ui/CustomButtonStatic.tsx
🧬 Code graph analysis (1)
apps/web/src/components/ui/CustomButtonStatic.tsx (1)
apps/web/src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (2)
apps/web/src/components/ui/CustomButtonStatic.tsx (1)
1-9: LGTM!The imports are well-organized following the correct order, and the
CustomButtonStaticPropsinterface uses proper TypeScript types with descriptive prop names.apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx (1)
42-84: Good animation performance practices.The use of
willChange: 'opacity, transform'and staggered delays optimizes rendering performance, aligning well with the PR's goal to reduce lag.
apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx
Outdated
Show resolved
Hide resolved
|
i have resolved all the potential issues |
3 participants
This PR addresses issue #251: the /pricing route was experiencing noticeable lag during scroll. Initial debugging reference: #164.
Summary
I was able to reproduce the lag on the pricing page. The animated shining border caused frequent paint and composite operations, which led to higher CPU usage and visible frame drops.
This PR replaces the animated border with a static one. The visual intent remains the same, while removing unnecessary rendering work.
Performance comparison
before:
after:
Closes #251
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.