[ui] refine the landing page

[apsinghdev]

Summary by CodeRabbit

Release Notes

• New Features

  • Added a “Check Pro” call-to-action that routes to the pricing page.

• UI & Navigation Updates

  • Updated the hero section headline and call-to-action layout, including an outbound link.
  • Adjusted the Bento layout proportions for improved section balance.
  • Updated the navbar links by adding “Blogs” and removing the Contribute option, while keeping Get Started.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
opensox-website	Ready	Preview, Comment	Jun 16, 2026 7:57am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2a21c795-bd14-475f-9004-e3ba6f0bc23f

📥 Commits

Reviewing files that changed from the base of the PR and between 4ce3aa8 and b1c9e2e.

📒 Files selected for processing (1)

• apps/web/src/components/landing-sections/Hero.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/landing-sections/Hero.tsx

---

📝 Walkthrough

Walkthrough

Three landing-section components are updated: the navbar removes the GitHub Contribute link, simplifies analytics, and adds a Blogs navigation entry; the Hero section changes the headline, replaces the description paragraph with an external gist link, and adds a Check Pro button linking to /pricing; the Bento section removes the local Notification component and equalizes the two panel widths from lg:w-1/3 to lg:w-1/2.

Changes

Landing Page UI Updates

Layer / File(s)	Summary
Navbar: remove Contribute, add Blogs link apps/web/src/components/landing-sections/navbar.tsx	Removes the Github icon import, simplifies analytics to only trackButtonClick for "Get Started", replaces prior section links with a "Blogs" entry pointing to /blog, and removes the GitHub "Contribute" external link from both desktop and mobile menus.
Hero: headline, description link, and Check Pro CTA apps/web/src/components/landing-sections/Hero.tsx	Adds ArrowRight and ArrowUpRight icon imports and initializes useRouter, introduces a handleCheckProClick analytics handler, changes the <h1> headline text to "Only platform you need to rock Open Source", replaces the description paragraph with an external gist <Link>, and adds a "Check Pro" button linking to /pricing alongside the existing "Get Started" CTA.
Bento: remove Notification component and equalize panel widths apps/web/src/components/landing-sections/Bento.tsx	Adds motion import, removes notification-related constants and animated list UI, changes both affected panel containers from lg:w-1/3 to lg:w-1/2, and deletes the trailing local Notification component definition.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• apsinghdev/opensox#324: Both PRs modify apps/web/src/components/landing-sections/navbar.tsx by changing the navbar link items, with this PR removing "Contribute" and adding "Blogs".

Poem

🐰 Hop hop, the landing page gleams anew,
Check Pro button shining, bold and true!
Contribute links gone, Blogs took their place,
Bento panels widened with elegant grace.
The Notification vanished, no need to fret —
A cleaner homepage, the best one yet! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title '[ui] refine the landing page' accurately reflects the main focus of the changeset—UI refinements across multiple landing page components (Bento, Hero, and Navbar).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/landing-pg

---

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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

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

14-14: ⚡ Quick win

use a semantic border token instead of a hardcoded hex value.

this updated class still uses border-[#252525], which conflicts with the design-system rule for component colors.

proposed fix

-                <div className="border-b lg:border-b-0 lg:border-r border-[`#252525`] lg:w-1/2 lg:aspect-square relative overflow-hidden p-2 flex-shrink-0 space-y-1 h-[400px] lg:h-full">
+                <div className="border-b lg:border-b-0 lg:border-r border-border lg:w-1/2 lg:aspect-square relative overflow-hidden p-2 flex-shrink-0 space-y-1 h-[400px] lg:h-full">

As per coding guidelines, landing components should use semantic design-token classes instead of hardcoded hex values.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/components/landing-sections/Bento.tsx` at line 14, In the
Bento.tsx file, the div element currently uses the hardcoded hex color value
`border-[`#252525`]` in the border class. Replace this hardcoded hex value with an
appropriate semantic border token from your design system. Update the className
to use the semantic token instead of the arbitrary hex value to comply with the
design-system guidelines for component colors.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/src/components/landing-sections/Hero.tsx`:
- Around line 126-131: The Link component wrapping PrimaryButtom creates nested
interactive elements (an anchor tag wrapping a button), which breaks keyboard
navigation and screen reader behavior. Remove the Link wrapper around
PrimaryButtom and instead apply the navigation and click handler directly to the
PrimaryButtom component itself. Transfer the href="/pricing" navigation intent
and the handleCheckProClick handler from the Link to the PrimaryButtom component
so it becomes the single interactive control, preserving both the navigation
behavior and accessibility semantics.

---

Nitpick comments:
In `@apps/web/src/components/landing-sections/Bento.tsx`:
- Line 14: In the Bento.tsx file, the div element currently uses the hardcoded
hex color value `border-[`#252525`]` in the border class. Replace this hardcoded
hex value with an appropriate semantic border token from your design system.
Update the className to use the semantic token instead of the arbitrary hex
value to comply with the design-system guidelines for component colors.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5d5246f4-3901-4e36-af82-70eb9d4a3a17

📥 Commits

Reviewing files that changed from the base of the PR and between 13a019a and 4ce3aa8.

📒 Files selected for processing (3)

• apps/web/src/components/landing-sections/Bento.tsx
• apps/web/src/components/landing-sections/Hero.tsx
• apps/web/src/components/landing-sections/navbar.tsx