feat(ui): enhance landing page styling and responsiveness

[BCA-krishna]

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

After

Closes #581

[vercel]

@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]

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

[github-actions]

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]

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.

[Priyanshu-byte-coder]

Hardcoded colors must be replaced with CSS vars:

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

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

[BCA-krishna]

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

[BCA-krishna]

Hi @Priyanshu-byte-coder,

All requested changes have been resolved:
✅ Replaced hardcoded Tailwind colors with CSS theme variables
✅ Fixed missing EOF newlines
✅ Resolved merge conflict in page.tsx

Could you please:

1. Approve the 2 pending workflows so CI can run
2. Re-review the updated changes

Thank you!

[Priyanshu-byte-coder]

A few issues to fix:

1. Hardcoded rgba colors — use CSS variable equivalents

• bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_70%)] → use color-mix(in srgb, var(--foreground) 8%, transparent)
• bg-[rgba(255,255,255,0.05)] → bg-[color-mix(in_srgb,var(--foreground)_5%,transparent)]
  These are hardcoded white — they'll look wrong in light mode.

2. animate-fade-in is undefined
No such class exists in Tailwind or this project's config. The animation will silently do nothing. Either define it in tailwind.config.ts or remove it.

3. Trailing blank lines
File ends with 2 extra blank lines. Should be exactly 1 newline at EOF.

4. Spurious blank line at start of file
A blank line was added before import Link. Please remove it.

[BCA-krishna]

Hi @Priyanshu-byte-coder 👋

I've addressed all the review suggestions:

1. ✅ Replaced hardcoded rgba(255,255,255,0.08) and rgba(255,255,255,0.05) with color-mix(in srgb, var(--foreground) 8%, transparent) and color-mix(in srgb, var(--foreground) 5%, transparent)
2. ✅ Removed animate-fade-in class (undefined in Tailwind/project config)
3. ✅ Fixed trailing blank lines — exactly 1 newline at EOF
4. ✅ Removed spurious blank line before import Link

Please review when you get a chance. Thank you! 🙏