Homepage improvements, onboarding polish, and popup background fix

[moehdotdev]

This PR improves the homepage navigation and layout, refines the listing onboarding flow, and fixes an issue where Radix/shadcn popovers could appear transparent under Tailwind v4.

The goal is to make the homepage more usable on mobile, improve notification and menu interactions, and ensure UI surfaces render consistently across the app.

Popup background fix (shadcn + Tailwind v4)
Added a global CSS fix to ensure Radix portal components always render with an opaque background.

Problem
Under Tailwind v4’s @theme inline system, some shadcn components rendered transparent backgrounds when mounted in portals.

Affected components included:

• DropdownMenu
• Popover
• Select
• Tooltip
• Command

Solution
Added a global CSS rule that forces portal components to use explicit popover colors.

Result
Dropdowns and popovers no longer appear transparent and now render correctly in both light and dark themes.

Homepage navigation improvements

Notification panel behavior
Improved notification UX with better interaction handling.

Changes:

• Added outside click detection to close the notification panel
• Separated mobile and desktop notification triggers
• Notification panel closes automatically when opening the mobile menu

Result
This prevents overlapping UI states and makes the notification behavior more predictable.

Mobile navigation menu
Refactored the mobile hamburger dropdown.

New menu structure:

• Profile header (avatar + name)
• Manage account
• Create listing
• Theme toggle
• Account shortcuts
• Sign out

Additional improvements:

• Avatar component now shows fallback initials
• Theme toggle available directly in the menu
• Improved spacing and layout for mobile

Desktop header improvements
Desktop navigation actions are now more clearly separated.

Header now includes:

• Create listing button
• Theme toggle
• Notifications bell
• Account / sign in

Changes:

• Create listing button is desktop-only
• Notifications remain outside the dropdown menu
• Sign-in button appears when the user is not authenticated

Homepage layout improvements

Promotional banner
Added a homepage banner section below the header.

Features:

• Full-width responsive image
• Optimized loading using Next.js Image
• Can be used for featured deals or announcements

Category navigation improvements
Category navigation now includes:

• Horizontal scrolling
• Hidden scrollbars
• Gradient edge fades
• Left/right navigation buttons

This makes browsing categories easier when many are present.

Swipe card polish
Improved the swipe-style listing card UI.

Enhancements:

• Smoother swipe animations
• Clearer text layout
• Better mobile readability
• Improved gradient overlay for image readability

Listing onboarding improvements
Improved the create listing onboarding layout.

Changes:

• Page now uses a flex column layout to fill the viewport properly
• Improved spacing between form sections
• Clearer step content formatting
• Better preview step readability

Result
The onboarding flow is now more consistent with the rest of the app layout and works better on mobile screens.

Asset update
Updated convex.svg with a simplified logo version.

Benefits:

• Smaller SVG size
• Faster load time
• Cleaner design

Result
This PR improves several key UX areas across the application:

• Stable popup backgrounds across the UI
• Cleaner homepage navigation
• Better mobile menu experience
• Improved notification panel behavior
• Smoother listing onboarding flow
• Updated homepage visuals

Overall this makes homepage interactions more reliable and improves the browsing experience on both desktop and mobile.