Skip to content

feat(ui): enhance landing page styling and responsiveness#588

Open
BCA-krishna wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
BCA-krishna:feat/issue-581-ui-enhancement
Open

feat(ui): enhance landing page styling and responsiveness#588
BCA-krishna wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
BCA-krishna:feat/issue-581-ui-enhancement

Conversation

@BCA-krishna
Copy link
Copy Markdown

Description

Enhanced the landing page UI with modern styling improvements and better responsiveness.

Changes Made

  • Improved spacing and layout consistency
  • Added modern hover effects and smooth transitions
  • Enhanced feature cards with glassmorphism styling and animations
  • Improved button styling and responsiveness
  • Enhanced typography readability
  • Improved responsiveness for mobile and tablet devices
  • Added polished shadows, gradients, and hover interactions

Screenshots

Before

Screenshot 2026-05-21 at 7 02 51 PM

After

Screenshot 2026-05-21 at 8 36 06 PM

Closes #581

@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

@BCA-krishna is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature labels May 21, 2026
@github-actions
Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — 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

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

  • Make sure CI is passing (type-check + lint)
  • Double-check the PR description is filled out and the issue is linked
  • Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

@Priyanshu-byte-coder Priyanshu-byte-coder added the level:beginner GSSoC: Beginner difficulty (20 pts) label May 21, 2026
Copy link
Copy Markdown
Owner

@Priyanshu-byte-coder Priyanshu-byte-coder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two critical issues:

  1. Missing EOF newlines — multiple files end without a trailing newline.

  2. Hardcoded Tailwind colors break theming — the redesign uses from-slate-950 via-slate-900 to-slate-950, text-white, text-slate-300, etc. These bypass the theme system and will look wrong in light mode. All colors must go through CSS variables:

    • Background: use var(--background)
    • Text: use var(--foreground), var(--muted-foreground)
    • Avoid all raw slate-*, white, black Tailwind classes — use CSS vars instead.

Copy link
Copy Markdown
Owner

@Priyanshu-byte-coder Priyanshu-byte-coder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hardcoded colors must be replaced with CSS vars:

  1. Missing EOF newline
  2. Raw Tailwind/hardcoded colors:
    • text-whitetext-[var(--foreground)]
    • text-slate-300, text-slate-900text-[var(--muted-foreground)] / text-[var(--foreground)]
    • bg-white, bg-white/5, bg-white/10, border-white/20, hover:border-whitebg-[var(--background)], bg-[var(--card-muted)], border-[var(--border)]
    • hover:bg-slate-100hover:bg-[var(--control-hover)]
    • group-hover:text-blue-300group-hover:text-[var(--accent)]

CSS vars in globals.css handle dark/light automatically — no need for raw color classes.

@BCA-krishna
Copy link
Copy Markdown
Author

@Priyanshu-byte-coder Resolved the requested review changes:

  • replaced hardcoded Tailwind colors with CSS theme variables
  • fixed missing EOF newline issues
  • improved spacing, hover effects, and responsiveness while maintaining dark/light theme compatibility

All requested changes have been pushed to the PR branch.

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

Labels

gssoc26 GSSoC 2026 contribution level:beginner GSSoC: Beginner difficulty (20 pts) type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enhance Website UI with Modern CSS Styling

2 participants