fix: UI Responsiveness of Landing Page

[Janhvibabani]

Fix: Issue #141 (Mobile Responsiveness Issues in Hero, Navbar, and Footer)

This PR addresses the responsiveness problems reported in Issue # and includes layout fixes across the hero section, navbar, and footer for small screens.

---

Fix 1 — Added Top Margin for “Backed by User” Badge

The badge previously stuck to the very top on mobile due to height + overflow issues.
This has now been corrected with proper spacing.

---

Fix 2 — Corrected “Get Started” Button in Navbar

On small screens, the button was overflowing and splitting into two lines.
Padding and whitespace were adjusted to ensure the button remains inline and fits properly.

---

Fix 3 — Added Proper Spacing in Footer

The “Opensox AI” section and Platform column were too close, creating a cluttered appearance on mobile.
Extra spacing was added specifically for small screens.

---

Summary

• Hero section now has correct spacing
• Navbar CTA button renders properly on all screen sizes
• Footer spacing is fixed for a cleaner mobile experience

Let me know if any additional adjustments are needed!

Summary by CodeRabbit

• Style
  • Hero section now uses a flexible minimum height for improved responsiveness across viewport sizes.
  • Footer spacing adjusted to add breathing room between top-row elements on small screens while preserving layout on large screens.
  • Navigation bar button and icon sizing/text rendering refined for more consistent appearance and responsive behavior.

[vercel]

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

[coderabbitai]

Warning

Rate limit exceeded

@apsinghdev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 57 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between fdb794e and 5a53184.

📒 Files selected for processing (3)

• apps/web/src/components/landing-sections/Hero.tsx (1 hunks)
• apps/web/src/components/landing-sections/footer.tsx (1 hunks)
• apps/web/src/components/landing-sections/navbar.tsx (2 hunks)

Walkthrough

Three landing-page components receive styling adjustments: Hero switches to a minimum height, Footer adds responsive horizontal gap classes, and Navbar changes button/icon sizing and text wrapping implementation.

Changes

Cohort / File(s)	Summary
Hero layout refinement apps/web/src/components/landing-sections/Hero.tsx	Changed container class from h-[50dvh] to min-h-[50dvh] to make the section have a minimum height instead of a fixed height.
Footer responsive spacing apps/web/src/components/landing-sections/footer.tsx	Added gap-6 lg:gap-0 to the top-row container classes, introducing horizontal spacing on small/medium screens and removing it at the large breakpoint.
Navbar button & icon styling apps/web/src/components/landing-sections/navbar.tsx	Replaced button sizing prop usage with a classname prop on PrimaryButtom (note: nonstandard prop name), switched Terminal icon from size={20} to className-based w-4 h-4 md:w-5 md:h-5, and simplified the "Get Started" label to a single span (removed responsive inline wrapping).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Mixed styling edits across three components with one potential API/prop-name concern.
• Areas needing extra attention:
  • PrimaryButtom usage: classname vs standard className — verify component prop name and runtime styling.
  • Terminal icon sizing change: confirm icon supports className sizing.
  • Hero: ensure min-h-[50dvh] doesn't introduce undesired overflow on short viewports.
  • Footer: validate gap-6 lg:gap-0 produces intended spacing across breakpoints.

Possibly related issues

• Issue #141: Matches mobile layout fixes — Hero min-height, Navbar button wrapping/sizing, and Footer spacing adjustments address the reported problems.
• Issue #126: Footer spacing change (gap-6 lg:gap-0) aligns with the responsive footer padding/spacing concerns described.

Poem

🐰 I nudged the hero to stand a bit tall,
Gave the footer space to breathe on small,
The nav button learned a neater size,
Icons slimmed down to fit the eyes,
A hopping tweak — the page looks small-device ready!

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 'fix: UI Responsiveness of Landing Page' accurately describes the main objective of the pull request, which addresses mobile responsiveness issues across the hero section, navbar, and footer.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cla-assistant]

All committers have signed the CLA.

[cla-assistant]

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]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 12eb954 and 8949088.

📒 Files selected for processing (3)

• apps/web/src/components/landing-sections/Hero.tsx (1 hunks)
• apps/web/src/components/landing-sections/footer.tsx (1 hunks)
• apps/web/src/components/landing-sections/navbar.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/src/components/landing-sections/navbar.tsx (1)

apps/web/src/components/icons/icons.tsx (1)

• Terminal (1-5)

🔇 Additional comments (2)

apps/web/src/components/landing-sections/Hero.tsx (1)

11-11: LGTM! Good responsive design improvement.

Changing from fixed height (h-[50dvh]) to minimum height (min-h-[50dvh]) allows the hero section to grow on smaller screens when content needs more space, preventing the "Backed by User" badge and other elements from being cramped or cut off.

apps/web/src/components/landing-sections/footer.tsx (1)

23-23: LGTM! Improved mobile spacing.

Adding gap-6 provides better separation between the "Opensox AI" section and the navigation columns on mobile screens, while lg:gap-0 preserves the original layout on larger screens where justify-between handles the spacing.

[apsinghdev]

@Janhvibabani thanks for the contribution, janvi! just looking into it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
opensox-website	Ready	Preview	Comment	Nov 9, 2025 3:12pm