Fix: Align Hero Section and Navbar Widths by dhananjay6561 · Pull Request #334 · keploy/blog-website

dhananjay6561 · 2026-02-24T12:47:14Z

Fix: Align Hero Section and Navbar Widths

Summary

Resolved visual misalignment between the floating navbar and the hero/content sections on the blog landing page. The hero section and testimonials section now align vertically with the navbar edges across all breakpoints.

Problem

The hero section ("Keploy Blog" heading, subtitle, and CTA buttons) extended beyond the navbar's horizontal bounds, creating inconsistent visual alignment.
The testimonials section ("What our community thinks") lacked horizontal padding, causing similar misalignment.
Code formatting inconsistencies in FloatingNavbarClient.tsx (trailing whitespace, inconsistent indentation).

Changes

Files Modified

File	Change
`components/navbar/FloatingNavbar.tsx`	Adjusted expanded navbar `max-width` from `1250px` → `1200px`; fixed indentation
`components/navbar/FloatingNavbarClient.tsx`	Code formatting cleanup — consistent indentation, trailing whitespace removal, spacing fixes
`components/testimonials.tsx`	Added responsive horizontal padding (`px-4 md:px-8 lg:px-16`) to testimonials wrapper
`pages/index.tsx`	Added responsive horizontal padding (`px-4 sm:px-8 lg:px-12 xl:px-16`) to hero section wrapper

Key Diff

# FloatingNavbar.tsx — navbar width
- : "w-[96%] max-w-[1250px]";
+ : "w-[96%] max-w-[1200px]";

# pages/index.tsx — hero section padding
- <div className="">
+ <div className="px-4 sm:px-8 lg:px-12 xl:px-16">

# components/testimonials.tsx — testimonials padding
- <div className="">
+ <div className="px-4 md:px-8 lg:px-16">

Visual Comparison

Desktop Responsiveness

Before	After

Tablet Responsiveness

Before	After

Phone Responsiveness

Before	After

Dark Mode

Before	After

Build Verification (`npm run build`)

Testing

Verified alignment on desktop (1440px+), tablet (768px), and mobile (375px) viewports.
No build errors or warnings introduced.

dhananjay6561 · 2026-02-24T12:47:47Z

Hi @amaan-bhati kindly review the PR

kilo-code-bot · 2026-02-24T12:48:56Z

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	1

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
`components/testimonials.tsx`	34	Avatar fallback comparison uses relative path vs absolute URL - may not work as intended

Summary of Changes

This PR includes several improvements:

✅ README.md - Comprehensive documentation overhaul with site map, API routes, and contributing guidelines

✅ Avatar handling - Replaced proxy-based avatar loading with direct loading + fallback chain (original → ui-avatars → local placeholder)

✅ Security - Added rel="noopener noreferrer" to external links in testimonials

✅ UI improvements - Added CSS mask for marquee fade effect, responsive padding adjustments

✅ Code cleanup - Removed unused useRouter import, formatting/whitespace fixes in navbar

✅ Local avatars - Added local avatar images for Twitter testimonials to reduce external dependencies

Files Reviewed (9 files)

README.md - Documentation overhaul
components/navbar/FloatingNavbarClient.tsx - Formatting fixes
components/testimonials.tsx - 1 suggestion (avatar fallback logic)
pages/index.tsx - Padding adjustments
services/Tweets.tsx - Local avatar paths
styles/index.css - Marquee mask CSS
package-lock.json - Dependency updates
public/avatars/* - New avatar assets

Fix these issues in Kilo Cloud

Copilot

Pull request overview

This PR aims to fix visual alignment between the floating navbar and key landing-page sections, and also refines the testimonials marquee presentation.

Changes:

Adjusts horizontal padding on the home hero and testimonials sections to align content with navbar edges.
Tweaks navbar width behavior and cleans up navbar client component formatting.
Updates testimonials marquee styling/behavior (masking + repeat/speed), and refreshes avatar handling/assets.

Reviewed changes

Copilot reviewed 8 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
styles/index.css	Adds `.marquee-mask` gradient mask used by the testimonials marquee.
services/Tweets.tsx	Reformats tweet data and switches several avatars to local `/blog/avatars/*` assets.
public/avatars/yadon.png	Adds a local avatar image asset.
public/avatars/kyongshiii06.png	Adds a local avatar image asset.
public/avatars/avatar-placeholder.svg	Adds a local placeholder avatar SVG.
pages/index.tsx	Adds responsive horizontal padding to the hero wrapper for alignment.
package-lock.json	Contains lockfile metadata churn (`"peer": true` removals).
components/testimonials.tsx	Adds wrapper padding, marquee mask usage, avatar fallback logic, and marquee repeat/speed changes.
components/navbar/FloatingNavbarClient.tsx	Formatting/spacing cleanup and minor JSX adjustments.
components/navbar/FloatingNavbar.tsx	Changes navbar width rules (including scrolled state) and indentation.
components/Marquee.tsx	Adds `will-change-transform` and backface-visibility for smoother animation.
README.md	Large documentation expansion (site map, structure, stack, etc.).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…d duration

Signed-off-by: Dhananjay Aggarwal <133662894+dhananjay6561@users.noreply.github.com>

Signed-off-by: dhananjay6561 <dhananjayaggarwal6561@gmail.com>

dhananjay6561 · 2026-03-03T09:53:11Z

Hi @amaan-bhati
I have resolved the conflicts and implemented the suggestions as suggested by the reviewers.
Switched to img.src.endsWith(localPlaceholder) as suggested.
Added pbs.twimg.com and ui-avatars.com to the img-src CSP allowlist in next.config.js

Here is the screenshot of CLI with succesful build

Signed-off-by: Dhananjay Aggarwal <133662894+dhananjay6561@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-12T08:08:45Z

      <Header />
      <Container>
-        <div className="">
+        <div className="px-4 sm:px-8 lg:px-12 xl:px-16">


The PR description focuses on layout alignment changes, but this PR also deletes README.md entirely. If this wasn’t intentional, please restore the README; if it was intentional, the PR description should mention the removal and where the setup/documentation has moved so onboarding/build instructions aren’t lost.

dhananjay6561 · 2026-04-06T12:06:25Z

Hey @dhananjay6561 👋 — thanks for putting this PR together, we appreciate the effort!

We've gone ahead and requested a Copilot review on this. Here's some context from the reviewer:

Deletes README.md — unacceptable in alignment fix. w-[99%] scrolled navbar too wide. Restore README, remove unrelated changes.

Once you've had a chance to go through the comments, please address the feedback and resolve the threads — and we'll get this across the line. Feel free to ask if anything's unclear. Happy coding! 💙

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-06T12:10:06Z

      <Container>
-        <div className="">
+        <div className="px-4 sm:px-8 lg:px-12 xl:px-16">
          <div className="home-container md:mb-0 mb-4 flex lg:flex-nowrap flex-wrap-reverse justify-evenly items-center">


This PR’s description focuses on layout alignment/formatting changes, but it also deletes the entire README.md from the repository. If this was not intentional, please restore the README or move the documentation change into a separate PR with rationale.

Copilot · 2026-04-06T12:10:07Z

      <div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent marquee-mask">

-        <Marquee pauseOnHover repeat={2} className="[--duration:17s]">
+        <Marquee pauseOnHover repeat={4} className="[--duration:30s]">
          {firstRow.map((tweet) => (
            <ReviewCard key={tweet.id} {...tweet} />
          ))}
        </Marquee>
-        <Marquee reverse pauseOnHover repeat={2} className="[--duration:17s]">
+        <Marquee reverse pauseOnHover repeat={4} className="[--duration:30s]">
          {secondRow.map((tweet) => (


repeat was increased from 2 to 4 for both marquees. In components/Marquee.tsx, repeat directly duplicates the children DOM (Array(repeat).map(...)), so this change multiplies the number of rendered ReviewCards and image requests. If the goal is just to slow the animation, consider keeping repeat smaller and adjusting --duration only (or otherwise justify the additional DOM/rendering cost).

Copilot · 2026-04-06T12:10:07Z

+          className={`fixed left-1/2 -translate-x-1/2 z-[1000] md:hidden transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-top-2 ${isScrolled ? 'w-[78%]' : 'w-[90%]'
+            }`}


In the mobile menu portal container className template string, the conditional expression is split across lines in a way that makes it easy to accidentally introduce whitespace/newlines into the class list (and is harder to read/maintain). Consider formatting this as a single ${isScrolled ? ... : ...} interpolation without embedded newlines to avoid brittle className output.

Suggested change

className={`fixed left-1/2 -translate-x-1/2 z-[1000] md:hidden transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-top-2 ${isScrolled ? 'w-[78%]' : 'w-[90%]'

}`}

className={`fixed left-1/2 -translate-x-1/2 z-[1000] md:hidden transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-top-2 ${isScrolled ? 'w-[78%]' : 'w-[90%]'}`}

dhananjay6561 added 4 commits February 23, 2026 15:26

fix: broken testimonial avatars + marquee UX improvements

a04007f

fix: address Copilot review feedback on PR keploy#330

2d6c05a

revamped README.md

c5d45a8

fix: align hero section and navbar widths

9d9d723

Copilot AI review requested due to automatic review settings February 24, 2026 12:47

Copilot started reviewing on behalf of dhananjay6561 February 24, 2026 12:47 View session

kilo-code-bot Bot reviewed Feb 24, 2026

View reviewed changes

Comment thread components/testimonials.tsx Outdated

Copilot AI reviewed Feb 24, 2026

View reviewed changes

Comment thread components/testimonials.tsx

Comment thread services/Tweets.tsx

Comment thread components/navbar/FloatingNavbar.tsx

Comment thread README.md Outdated

Comment thread components/testimonials.tsx

dhananjay6561 changed the title ~~Alignment fix~~ Align Hero Section and Navbar Widths Feb 24, 2026

dhananjay6561 changed the title ~~Align Hero Section and Navbar Widths~~ Fix: Align Hero Section and Navbar Widths Feb 24, 2026

dhananjay6561 and others added 3 commits March 2, 2026 23:15

fix: make testimonials marquee seamless by increasing repeat count an…

436e39e

…d duration

Merge branch 'main' into alignment-fix

bfde553

Signed-off-by: Dhananjay Aggarwal <133662894+dhananjay6561@users.noreply.github.com>

fix: use endsWith for avatar fallback check & add CSP for avatar domains

3ab2b74

Signed-off-by: dhananjay6561 <dhananjayaggarwal6561@gmail.com>

dhananjay6561 mentioned this pull request Mar 5, 2026

Fix navbar logo shrink problem #332

Closed

16 tasks

Delete README.md

3687abf

Signed-off-by: Dhananjay Aggarwal <133662894+dhananjay6561@users.noreply.github.com>

amaan-bhati requested a review from Copilot March 12, 2026 08:03

Copilot started reviewing on behalf of amaan-bhati March 12, 2026 08:04 View session

Merge branch 'main' into alignment-fix

514eeef

Signed-off-by: Dhananjay Aggarwal <133662894+dhananjay6561@users.noreply.github.com>

Copilot AI reviewed Mar 12, 2026

View reviewed changes

dhananjay6561 requested a review from Copilot April 6, 2026 12:06

dhananjay6561 mentioned this pull request Apr 6, 2026

chore: folder and slug instructions on readme #333

Open

Copilot started reviewing on behalf of dhananjay6561 April 6, 2026 12:07 View session

dhananjay6561 mentioned this pull request Apr 6, 2026

fix(navbar): align scrolled navbar width with content sections #339

Closed

Copilot AI reviewed Apr 6, 2026

View reviewed changes

		className={`fixed left-1/2 -translate-x-1/2 z-[1000] md:hidden transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-top-2 ${isScrolled ? 'w-[78%]' : 'w-[90%]'
		}`}

Conversation

dhananjay6561 commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix: Align Hero Section and Navbar Widths

Summary

Problem

Changes

Files Modified

Key Diff

Visual Comparison

Desktop Responsiveness

Tablet Responsiveness

Phone Responsiveness

Dark Mode

Build Verification (npm run build)

Testing

Uh oh!

dhananjay6561 commented Feb 24, 2026

Uh oh!

Uh oh!

kilo-code-bot Bot commented Feb 24, 2026

Code Review Summary

Overview

SUGGESTION

Summary of Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dhananjay6561 commented Mar 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

dhananjay6561 commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dhananjay6561 commented Feb 24, 2026 •

edited

Loading

Build Verification (`npm run build`)