Feat/issue 366 landing page UI redesign

[mohammed-danyal]

Summary

Redesigned and modernized the DevTrack landing page UI/UX to improve overall visual aesthetics, responsiveness, spacing consistency, CTA visibility, and developer-focused presentation while preserving the existing functionality and architecture.

This update focuses on creating a cleaner, more polished, and production-ready experience aligned with modern developer platforms.

Closes #366

#gssoc #gssoc26

---

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

---

Changes Made

• Redesigned the hero section with improved typography hierarchy and CTA emphasis
• Improved spacing consistency and visual rhythm across sections
• Modernized feature cards and component styling
• Enhanced responsiveness for mobile/tablet devices
• Added subtle hover states and UI transitions
• Improved section alignment and layout balance
• Refined CTA section for better conversion visibility
• Improved overall landing page visual polish while preserving branding
• Reused existing components/styles where possible
• Kept changes localized to frontend landing page components

---

How to Test

Steps for the reviewer to verify this works:

1. Clone the repository

2. Checkout the feature branch

3. Install dependencies using:

   npm install

4. Start the development server:

   npm run dev

5. Open the landing page locally

6. Verify:

   • improved UI hierarchy
   • responsive layouts
   • CTA visibility
   • hover interactions
   • spacing consistency
   • mobile responsiveness
   • overall visual polish

---

Screenshots (if UI change)

---

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@mohammed-danyal 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!

[mohammed-danyal]

@Priyanshu-byte-coder can you please gssoc:approved tag to the PR thank you

[Priyanshu-byte-coder]

Extensive hardcoded Tailwind/dark-mode colors — these bypass the CSS variable system:

1. Raw Tailwind color classes to replace with CSS vars:
   • bg-white/*, bg-white/80 → bg-[var(--background)] or bg-[var(--card-muted)]
   • dark:bg-slate-900/*, dark:bg-slate-950/*, bg-slate-900/80 → not needed when using CSS vars (vars handle dark/light automatically)
   • dark:bg-slate-800/*, bg-slate-50, bg-slate-50/50 → bg-[var(--card-muted)]
   • border-white/20, dark:border-slate-700/*, border-slate-200/20 → border-[var(--border)]
   • bg-indigo-500/20, bg-blue-500/10, bg-indigo-600/10 → use bg-[var(--accent)]/20 etc.
   • bg-white text-indigo-600, hover:bg-slate-100 → bg-[var(--background)] text-[var(--accent)], hover:bg-[var(--control-hover)]
   • bg-red-500/80, bg-yellow-500/80, bg-green-500/80 (macOS dots) → if kept, use var(--destructive), var(--warning), var(--success)
2. @apply rules using bg-white/50 dark:bg-slate-900/50 etc. → use @apply bg-[var(--card-muted)] instead

Remove all dark: classes — the CSS variable system in globals.css handles dark mode natively.

[mohammed-danyal]

@Priyanshu-byte-coder I've changed the files as per your requirements. thank you

[Priyanshu-byte-coder]

CSS variable violations block merge. All hardcoded Tailwind colors must use design system variables.

Found these violations:

to-blue-600             → to-[var(--accent)]
via-indigo-600          → via-[var(--accent)]/70 or a second accent var
via-indigo-500          → via-[var(--accent)]/60
hover:shadow-indigo-500/30 → hover:shadow-[color-mix(in_srgb,var(--accent)_30%,transparent)]

Affected lines include globals.css utility classes (.gradient-accent, .gradient-accent-lg, .btn-primary), and inline JSX classes in the landing page component.

All gradient endpoints must reference CSS variables so the theme system works correctly. A gradient from var(--accent) to var(--accent) with opacity change is acceptable:

background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));

Or add a secondary accent variable to globals.css if needed.

[mohammed-danyal]

@Priyanshu-byte-coder I've updated accordingly, can you check and let me know of any changes