feat: improve navbar scroll highlight and FAQ layout with guidelines #299
Conversation
|
@Harshit2569 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. |
WalkthroughRefactors FAQ accordion rendering and styling to use design-system tokens and responsive padding. Adds navbar scroll‑spy using IntersectionObserver, Escape-key mobile menu closing, and animated underline/active-state logic that considers both route and in‑page section visibility. Changes
Sequence DiagramsequenceDiagram
participant User as User (scroll / click / key)
participant DOM as Page Sections (FAQ, etc.)
participant Observer as IntersectionObserver
participant Navbar as Navbar Component
User->>DOM: Scrolls page
Observer->>DOM: Observe sections (threshold)
DOM-->>Observer: Section visibility change
Observer->>Navbar: Intersection callback (section id, isIntersecting)
Navbar->>Navbar: Update activeSection state
Navbar->>Navbar: Re-render links with active styling + animated underline
alt User clicks nav link (in-page)
User->>Navbar: Click anchor link
Navbar->>DOM: Scroll to section / set activeSection
Navbar->>Navbar: Render active underline
end
alt User presses Escape (mobile)
User->>Navbar: Press Escape
Navbar->>Navbar: Close mobile menu
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related issues
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
|
1 similar 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
53-62: Movelinksarray outside component to prevent unnecessary re-renders.The
linksarray is recreated on every render and used as a dependency in the scroll spyuseEffect(line 90), causing the IntersectionObserver to disconnect and reconnect on every render. This is a significant performance issue.Since the links are static configuration, move the array outside the component or wrap it in
useMemo.🔎 Proposed fix - move outside component (recommended)
+const NAVIGATION_LINKS = [ + { name: "Pricing", href: "/pricing" }, + { name: "Features", href: "/#features" }, + { name: "Demo", href: "/#demo" }, + { name: "How it works", href: "/#HIW" }, + { name: "FAQ", href: "/#faq" }, + { name: "Stats", href: "/#Stats" }, + { name: "Contact", href: "/#Contact" }, +]; + const Navbar = () => { const { scrollYProgress } = useScroll(); const pathname = usePathname(); const isPricingPage = pathname === "/pricing"; const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false); const [isOpen, setIsOpen] = useState(false); const [activeSection, setActiveSection] = useState(""); const { trackButtonClick, trackLinkClick } = useAnalytics(); - - const links = [ - { name: "Pricing", href: "/pricing" }, - { name: "Features", href: "/#features" }, - { name: "Demo", href: "/#demo" }, - { name: "How it works", href: "/#HIW" }, - { name: "FAQ", href: "/#faq" }, - { name: "Stats", href: "/#Stats" }, - { name: "Contact", href: "/#Contact" }, - - ];Then update the useEffect dependency:
- }, [links]); + }, []);And update references to use
NAVIGATION_LINKSinstead oflinks.
🧹 Nitpick comments (5)
apps/web/src/components/landing-sections/navbar.tsx (5)
34-34: Use lowercase for comments.The comment starts with an uppercase letter. Per coding guidelines, comments should be lowercase.
🔎 Proposed fix
- // Close mobile menu on Escape + // close mobile menu on escape key
46-46: Use lowercase for comments.Per coding guidelines, comments should start with lowercase letters.
🔎 Proposed fix
- // Show navbar when scrolling down (except on Pricing page) + // show navbar when scrolling down (except on pricing page)
128-156: Active section highlighting looks good with minor suggestion.The scroll spy integration with framer-motion's animated underline works well. The
layoutId="underline"enables smooth transitions between active links, and the design system color token is used correctly.Minor suggestion: The underline width of
55%(line 149) appears to be a magic number. Consider extracting it as a constant or adjusting to a more semantic value.💡 Optional: Extract magic number
+const ACTIVE_UNDERLINE_WIDTH = "55%"; // or consider "60%" or "w-3/5" for better semantics + const Navbar = () => { // ... rest of component {isActive && ( <motion.span layoutId="underline" - className="absolute left-0 right-0 bottom-0 mx-auto w-[55%] h-[2px] bg-brand-purple rounded-full" + className="absolute left-0 right-0 bottom-0 mx-auto w-[60%] h-[2px] bg-brand-purple rounded-full" transition={{ type: "spring", stiffness: 300, damping: 25 }} /> )}
12-12: Add type annotation for the component.Per coding guidelines, const functions should have type definitions. Consider adding an explicit return type or using
React.FC.🔎 Proposed fix
-const Navbar = () => { +const Navbar: React.FC = () => {Or with explicit return type:
-const Navbar = () => { +const Navbar = (): JSX.Element => {
183-214: Consider adding active state highlighting to mobile menu.The mobile menu links don't reflect the active section state, unlike the desktop navigation (lines 130-152). This creates an inconsistency in user experience.
🔎 Proposed enhancement for consistency
{links.map((link, index) => { + const isActive = + pathname === link.href || + (link.href.startsWith("/#") && + activeSection === link.href.replace("/#", "")); + return ( <Link key={index} href={link.href} onClick={() => setIsOpen(false)} - className="text-white hover:text-gray-300 text-lg" + className={cn( + "text-white hover:text-gray-300 text-lg transition-colors", + isActive && "text-brand-purple font-medium" + )} > {link.name} </Link> + ); })}
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/components/faq/FaqSection.tsx(1 hunks)apps/web/src/components/landing-sections/navbar.tsx(7 hunks)
🧰 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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/components/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.tsx
**/*[A-Z]*.{tsx,ts}
📄 CodeRabbit inference engine (.cursorrules)
Use PascalCase for component file names (e.g.,
UserProfile.tsx)
Files:
apps/web/src/components/faq/FaqSection.tsx
🧠 Learnings (9)
📚 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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/landing-sections/navbar.tsxapps/web/src/components/faq/FaqSection.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/faq/FaqSection.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/components/faq/FaqSection.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/components/faq/FaqSection.tsx
🧬 Code graph analysis (1)
apps/web/src/components/landing-sections/navbar.tsx (2)
apps/web/src/lib/utils.ts (1)
cn(4-6)apps/web/src/app/(main)/(landing)/page.tsx (1)
main(15-34)
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
53-62: Movelinksoutside component to prevent unnecessary re-renders.The
linksarray is redefined on every render, causing the scroll spy effect (line 104) to tear down and recreate the IntersectionObserver on every render. This is a performance issue and can cause flickering or missed scroll events.🔎 Proposed fix
Move the array outside the component and rename to match the constant naming convention:
+const NAVIGATION_LINKS = [ + { name: "Pricing", href: "/pricing" }, + { name: "Features", href: "/#features" }, + { name: "Demo", href: "/#demo" }, + { name: "How it works", href: "/#HIW" }, + { name: "FAQ", href: "/#faq" }, + { name: "Stats", href: "/#Stats" }, + { name: "Contact", href: "/#Contact" }, +] as const; + const Navbar = () => { const { scrollYProgress } = useScroll(); const pathname = usePathname(); const isPricingPage = pathname === "/pricing"; const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false); const [isOpen, setIsOpen] = useState(false); const [activeSection, setActiveSection] = useState(""); const { trackButtonClick, trackLinkClick } = useAnalytics(); // ... handlers ... - const links = [ - { name: "Pricing", href: "/pricing" }, - { name: "Features", href: "/#features" }, - { name: "Demo", href: "/#demo" }, - { name: "How it works", href: "/#HIW" }, - { name: "FAQ", href: "/#faq" }, - { name: "Stats", href: "/#Stats" }, - { name: "Contact", href: "/#Contact" }, - - ];Then update references from
linkstoNAVIGATION_LINKSon lines 67, 104, 143, and 204, and change the useEffect dependency to[].As per coding guidelines for constants and to prevent performance issues.
🧹 Nitpick comments (5)
apps/web/src/components/landing-sections/navbar.tsx (5)
1-11: Consider reorganizing imports per coding guidelines.The imports mix Next.js and third-party libraries. Per guidelines, organize as: React → third-party (framer-motion, lucide-react) → Next.js (Image, Link, usePathname) → local (utils, hooks).
🔎 Suggested import order
"use client"; import React, { useState, useEffect } from "react"; -import PrimaryButton from "../ui/custom-button"; import { motion, useScroll, useMotionValueEvent } from "framer-motion"; +import { Terminal, Github, Menu, X } from "lucide-react"; import Image from "next/image"; -import { Terminal, Github, Menu, X } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import PrimaryButton from "../ui/custom-button"; import { cn } from "@/lib/utils"; import { useAnalytics } from "@/hooks/useAnalytics";As per coding guidelines.
92-96: Consider multiple thresholds for smoother scroll detection.Using a single
threshold: 0.5means the observer only fires when a section crosses exactly 50% visibility. Multiple thresholds provide more granular updates and smoother active state transitions, especially during fast scrolling or with small sections.🔎 Proposed enhancement
const observer = new IntersectionObserver(handleIntersect, { root: null, rootMargin: "0px", - threshold: 0.5, + threshold: [0.3, 0.5, 0.7], });This fires the callback at 30%, 50%, and 70% visibility, giving the intersection ratio comparison (lines 80-81) more data points to work with.
53-62: Define TypeScript interface for navigation links.The
linksarray (which should beNAVIGATION_LINKS) lacks a type definition. This reduces type safety when mapping over links on lines 143 and 204.🔎 Proposed type definition
+interface NavigationLink { + name: string; + href: string; +} + -const NAVIGATION_LINKS = [ +const NAVIGATION_LINKS: readonly NavigationLink[] = [ { name: "Pricing", href: "/pricing" }, { name: "Features", href: "/#features" }, { name: "Demo", href: "/#demo" }, { name: "How it works", href: "/#HIW" }, { name: "FAQ", href: "/#faq" }, { name: "Stats", href: "/#Stats" }, { name: "Contact", href: "/#Contact" }, ] as const;As per coding guidelines for TypeScript usage.
204-212: Consider adding active state to mobile menu links.The desktop navigation (lines 144-156) highlights the active link with white text and medium font weight, but the mobile menu shows all links identically. This creates an inconsistent UX where mobile users can't see which section is currently active.
🔎 Proposed enhancement
{links.map((link, index) => { + const isActive = + pathname === link.href || + (link.href.startsWith("/#") && + activeSection === link.href.replace("/#", "")); + return ( <Link key={index} href={link.href} onClick={() => setIsOpen(false)} - className="text-white hover:text-gray-300 text-lg" + className={cn( + "text-white hover:text-gray-300 text-lg transition-colors", + isActive && "font-medium text-brand-purple" + )} > {link.name} </Link> + ); })}
61-61: Remove extra blank line.Minor formatting: extra blank line after the last array item.
{ name: "FAQ", href: "/#faq" }, { name: "Stats", href: "/#Stats" }, { name: "Contact", href: "/#Contact" }, - ];
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/landing-sections/navbar.tsx(7 hunks)
🧰 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/components/landing-sections/navbar.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/components/landing-sections/navbar.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/components/landing-sections/navbar.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Organize imports: react → third-party → local components → utils → types
Files:
apps/web/src/components/landing-sections/navbar.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/components/landing-sections/navbar.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/components/landing-sections/navbar.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/components/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/components/landing-sections/navbar.tsx
🧠 Learnings (8)
📚 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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.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/landing-sections/navbar.tsx
🧬 Code graph analysis (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
apps/web/src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
34-44: Excellent keyboard accessibility implementation.The Escape key handler for closing the mobile menu follows best practices with proper cleanup and blur management.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
1 participant
This PR implements scroll-aware navbar highlighting and improves FAQ layout for better readability and navigation clarity.
Changes included
Added scroll-based underline indicator for navbar items to highlight the active section.
Adjusted FAQ section alignment so its navbar item corresponds logically with its placement on the page.
Improved FAQ answer spacing and layout for enhanced readability.
Ensured smooth scrolling and responsive behavior across devices.
Issue Link
Related to #297
Before / After Behavior
Before:
Navbar items remain static during scrolling.
FAQ section order in the navbar does not match its placement on the page.
FAQ answers have poor spacing, making content harder to read.
After:
Navbar items dynamically underline based on scroll position.
FAQ section and navbar order are aligned logically.
FAQ answers have proper spacing for improved readability.
Edge Cases Handled
Page loads at a non-top scroll position.
Fast scrolling across multiple sections.
Two sections partially visible simultaneously.
Navbar clicks and scrolling both update the active state correctly.
Responsive behavior across desktop and mobile.
No layout shifts or flickering during scroll events.
Original
https://github.com/user-attachments/assets/df8f1fa6-3569-40b3-b966-5ae5fc69d673
Propesd solution
Screen.Recording.2025-12-20.132101.mp4
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.