Skip to content

fix(landing): improve cursor visibility, contrast & responsiveness#2420

Open
Rashi1404 wants to merge 1 commit into
Umbrella-io:mainfrom
Rashi1404:fix/landing-page-ui-ux-1446
Open

fix(landing): improve cursor visibility, contrast & responsiveness#2420
Rashi1404 wants to merge 1 commit into
Umbrella-io:mainfrom
Rashi1404:fix/landing-page-ui-ux-1446

Conversation

@Rashi1404

Copy link
Copy Markdown

Description

Fixes UI/UX issues on the landing page reported in #1446.

Changes Made

  • Cursor Visibility: Increased MouseSpotlight opacity from 0.05 to 0.18 and added a className="mouse-spotlight" for CSS targeting. The spotlight now remains visible on both light and dark backgrounds.
  • Text Contrast: Fixed hero heading gradient from hardcoded white (#fff) to var(--foreground) — this ensures the "YOUR CODE HAS A" text is readable across all themes (dark, light, nordic, cyberpunk).
  • Badge Styling: Updated "OPEN SOURCE • FREE FOREVER" badge to use color-mix(in srgb, var(--accent) 15%, transparent) for background and color-mix(in srgb, var(--accent) 40%, transparent) for border — theme-aware and clearly visible.
  • Description Text: Changed from var(--muted-foreground) to var(--foreground) with opacity: 0.85 for better readability while maintaining visual hierarchy.
  • Responsive Spacing: Changed hero section top padding from fixed 80px to clamp(100px, 12vh, 140px) for better mobile responsiveness and navbar clearance.
  • Secondary CTA: Fixed "Star on GitHub" button text color from var(--muted-foreground) to var(--foreground) for sufficient contrast.
  • Accessibility: Added landing-page specific focus-visible styles using var(--accent) for keyboard navigation, and replaced orphaned .custom-cursor CSS with properly scoped .lnd-root .mouse-spotlight.

Screenshots

before
image

after
image

Testing

  • Cursor visible on all sections (light & dark themes)
  • Text contrast meets WCAG AA standards (4.5:1 ratio)
  • Responsive on mobile (320px), tablet (768px), desktop (1440px)
  • Keyboard navigation focus indicators visible
  • Tested with classic-dark, modern-light-blue, nordic-frost, cyberpunk-matrix themes

Related Issue

Closes #1446

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) labels Jun 13, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Umbrella-io — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@github-actions github-actions Bot added type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts) labels Jun 13, 2026
@Rashi1404

Copy link
Copy Markdown
Author

@Priyanshu-byte-coder
kindly add more labels

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] -UI/UX Improvements Needed on Landing Page (Cursor Visibility, Contrast & Responsiveness)

1 participant