Add Navbar navigation to Pricing page (#255) #260

shaikrasheed6341 · 2025-12-11T13:25:29Z

Consistent UX- Users experience the same navbar design across all pages
Better Performance- Navbar in layout prevents re-mounting on navigation
Modern Design - Floating navbar with backdrop blur creates premium feel

Summary by CodeRabbit

New Features
- Navigation bar now appears on landing pages
Style
- Updated navbar styling for consistent appearance across pages
- Increased vertical spacing above header content

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…d header component (apsinghdev#255)

vercel · 2025-12-11T13:25:34Z

@shaikrasheed6341 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.

cla-assistant · 2025-12-11T13:25:44Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

cla-assistant · 2025-12-11T13:25:50Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

coderabbitai · 2025-12-11T13:55:40Z

Walkthrough

This pull request integrates a Navbar component into the landing page layout and updates styling across related UI components. The Navbar's conditional className logic is replaced with a fixed styling configuration, and spacing adjustments are applied to the Header. A whitespace cleanup is included in the pricing page.

Changes

Cohort / File(s)	Summary
Landing page integration `apps/web/src/app/(main)/(landing)/layout.tsx`	Adds import of Navbar component and renders `<Navbar />` within the Layout before {children}, integrating the navigation into the landing page.
Navbar styling refactor `apps/web/src/components/landing-sections/navbar.tsx`	Replaces conditional className composition that varied based on isPricingPage with a fixed, explicit className string. Removes dynamic layout branches and applies consistent fixed, rounded-top styling unconditionally.
Header spacing adjustment `apps/web/src/components/ui/header.tsx`	Adds top margin (mt-28) to the header container class for increased vertical spacing.
Pricing page formatting `apps/web/src/app/(main)/(landing)/pricing/page.tsx`	Whitespace/formatting adjustment in buttonClassName template literal; no semantic changes to class composition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Navbar styling logic simplification may warrant verification that the removed conditional branches (isPricingPage logic) don't break pricing page appearance
Layout integration should confirm the Navbar renders correctly before {children} without layout shifts
Spacing adjustment to Header should be visually verified to ensure proper viewport alignment

Possibly related PRs

Properly hide Navbar when it's not visible #205: Modifies Navbar animation behavior (sets display: none when hidden), directly affects the Navbar component being styled in this PR
navbar repetition fix #187: Also modifies landing Layout and Navbar styling along with Tailwind configuration, overlapping scope with layout and component changes
[imp]: add pitch to investors #250: Modifies the Header component prop types, directly related to the Header spacing adjustment in this PR

Poem

🐰 The navbar hops into place with style so fine,
No more jumping conditions—fixed layouts align.
Headers dance with spacing, breathing room they gain,
A tidier page awaits the web's domain. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Navbar navigation to Pricing page' accurately describes the main change: adding a Navbar component to the landing layout which makes it available on the Pricing page and other landing pages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

apps/web/src/app/(main)/(landing)/layout.tsx (1)
3-10: Add explicit return type to Layout function.

The Layout function lacks an explicit return type. As per coding guidelines, define a type when defining const functions.

Apply this diff:
-const Layout = ({ children }: { children: React.ReactNode }) => {
+const Layout = ({ children }: { children: React.ReactNode }): React.ReactElement => {
apps/web/src/components/landing-sections/navbar.tsx (1)
2-9: Reorder imports to follow project guidelines.

The imports should be organized as: React → third-party → local components → utils → types. Currently, framer-motion (third-party) appears after local components.

Apply this diff to correct the import order:
 "use client";
 import React, { useState } from "react";
-import PrimaryButton from "../ui/custom-button";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 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";

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 050e439 and b22a6a7.

📒 Files selected for processing (4)

apps/web/src/app/(main)/(landing)/layout.tsx (1 hunks)
apps/web/src/app/(main)/(landing)/pricing/page.tsx (1 hunks)
apps/web/src/components/landing-sections/navbar.tsx (1 hunks)
apps/web/src/components/ui/header.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

**/*.{ts,tsx,js,jsx}