feat: redesign DevCard with premium responsive UI and production stab…

[saidai-bhuvanesh]

…ility improvements

Summary

Closes #

---

Type of Change

• Bug fix
• New feature
• Refactor (no functional change)
• UI / Design change
• Tests only
• Documentation
• Infrastructure / DevOps
• Security

---

What Changed

---

How to Test

---

Checklist

• My code follows the project's coding style (pnpm -r run lint passes).
• TypeScript compiles without errors (pnpm -r run typecheck).
• I have added or updated tests for the changes I made.
• All tests pass locally (pnpm -r run test).
• I have updated documentation where necessary.
• No new console.log or debug statements left in the code.
• Breaking changes are documented in this PR description.

---

Screenshots / Recordings

---

Additional Context

[saidai-bhuvanesh]

Thank you for reviewing this PR.

This contribution focuses mainly on:

• Premium UI/UX improvements
• Responsive layout refinements
• SvelteKit stability and routing fixes
• TailwindCSS v4 cleanup
• Component alignment and interaction improvements

I validated the project locally using:

• pnpm check
• pnpm build
• pnpm dev:web

I’m happy to make further refinements or split changes into smaller PRs if required.

[ShantKhatri]

This is actually a huge change. Need some time and mentor to review this.

[KaparthyReddy]

Reviewed the PR locally by checking out the branch and running pnpm dev:web.

What works well:

• Premium dark UI looks polished and consistent throughout
• Hero section, identity card, and process steps all render cleanly
• Responsive layout holds up on mobile viewport
• Navigation and "JOIN NOW" CTA are well placed

Issues noticed:

• There is a large empty gap between the analytics mockup section and the
  "Features" section — looks like a layout/spacing issue that should be fixed
  before merging
• The PR description has empty "What Changed" bullets and unchecked checklist
  items. Would be good to fill those out so reviewers know exactly what files
  were touched and why.

Overall the UI direction is good and aligns with a premium redesign.
Fixing the spacing gap and completing the PR description would make this
merge-ready. Happy to proceed with issue #91 once this is resolved!

[shreyagoyal9]

Hi @ShantKhatri @saidai-bhuvanesh , I reviewed PR #61 in the context of issue #78 (Light Mode improvements). Here's my detailed feedback:

What looks good ✅

• The new CSS variable system using TailwindCSS v4 @theme is much cleaner and more maintainable
• Light mode variables (--bg-main: #f8fafc, --text-main: #0f172a) look well-chosen for readability
• Glassmorphism utilities (glass, glass-morphic) are a nice touch for modern UI
• New BrandIcon.svelte component is reusable and well-structured
• Centralized api.ts and hooks.server.ts are good architectural additions
• Fluid typography helpers (text-fluid-h1, text-fluid-h2) improve responsiveness

Concerns / Issues noticed ⚠️

1. Light Mode coverage — Since this PR is a dependency for issue UI Improvement: Enhance Light Mode Design Across the Entire Website #78 (Light Mode redesign), I want to confirm: the :root variables define a light theme base, but several component-level styles (e.g. btn-premium-secondary) use hardcoded rgba(255,255,255,0.05) backgrounds that may not render well in light mode.

2. check_output.txt committed— A binary file apps/web/check_output.txt was included in the commit. This looks like a leftover debug artifact and should be removed before merging.

3. BASE_URL hardcoded in api.ts— http://localhost:3000 is hardcoded, which will break in any deployed environment. Should use an environment variable like import.meta.env.PUBLIC_API_URL.

4. Spacing gap — As @KaparthyReddy noted, there's an empty gap between the analytics mockup and Features section. Worth fixing before merge.

5. PR description is incomplete — The "What Changed", "How to Test", and checklist sections are all empty/unchecked across a +3,127 line change. This makes it very hard to review confidently.

6. Merge conflicts — The branch currently has unresolved conflicts with main that need to be addressed.

Suggestion 💡
Given the scale of this PR (27 files, 3,127 additions), splitting it into smaller PRs (e.g. CSS/theming separately from routing/auth fixes) would make review much safer and faster for maintainers.

Happy to help test or collaborate once these are addressed! 🙌

[Harxhit]

@saidai-bhuvanesh Please add a proper description to your PR.

[Harxhit]

Hi @ShantKhatri @saidai-bhuvanesh , I reviewed PR #61 in the context of issue #78 (Light Mode improvements). Here's my detailed feedback:

What looks good ✅

* The new CSS variable system using TailwindCSS v4 `@theme` is much cleaner and more maintainable

* Light mode variables (`--bg-main: #f8fafc`, `--text-main: #0f172a`) look well-chosen for readability

* Glassmorphism utilities (`glass`, `glass-morphic`) are a nice touch for modern UI

* New `BrandIcon.svelte` component is reusable and well-structured

* Centralized `api.ts` and `hooks.server.ts` are good architectural additions

* Fluid typography helpers (`text-fluid-h1`, `text-fluid-h2`) improve responsiveness

Concerns / Issues noticed ⚠️

1. Light Mode coverage — Since this PR is a dependency for issue [UI Improvement: Enhance Light Mode Design Across the Entire Website #78](https://github.com/Dev-Card/DevCard/issues/78) (Light Mode redesign), I want to confirm: the `:root` variables define a light theme base, but several component-level styles (e.g. `btn-premium-secondary`) use hardcoded `rgba(255,255,255,0.05)` backgrounds that may not render well in light mode.

2. `check_output.txt` committed— A binary file `apps/web/check_output.txt` was included in the commit. This looks like a leftover debug artifact and should be removed before merging.

3. `BASE_URL` hardcoded in `api.ts`— `http://localhost:3000` is hardcoded, which will break in any deployed environment. Should use an environment variable like `import.meta.env.PUBLIC_API_URL`.

4. Spacing gap — As @KaparthyReddy noted, there's an empty gap between the analytics mockup and Features section. Worth fixing before merge.

5. PR description is incomplete — The "What Changed", "How to Test", and checklist sections are all empty/unchecked across a +3,127 line change. This makes it very hard to review confidently.

6. Merge conflicts — The branch currently has unresolved conflicts with `main` that need to be addressed.

Suggestion 💡 Given the scale of this PR (27 files, 3,127 additions), splitting it into smaller PRs (e.g. CSS/theming separately from routing/auth fixes) would make review much safer and faster for maintainers.

Happy to help test or collaborate once these are addressed! 🙌

Please join our community channel we can discuss more -> https://discord.gg/cTpXtEyqd

[Harxhit]

Reviewed the PR locally by checking out the branch and running pnpm dev:web.

What works well:

* Premium dark UI looks polished and consistent throughout

* Hero section, identity card, and process steps all render cleanly

* Responsive layout holds up on mobile viewport

* Navigation and "JOIN NOW" CTA are well placed

Issues noticed:

* There is a large empty gap between the analytics mockup section and the
  "Features" section — looks like a layout/spacing issue that should be fixed
  before merging

* The PR description has empty "What Changed" bullets and unchecked checklist
  items. Would be good to fill those out so reviewers know exactly what files
  were touched and why.

Overall the UI direction is good and aligns with a premium redesign. Fixing the spacing gap and completing the PR description would make this merge-ready. Happy to proceed with issue #91 once this is resolved!

Please join our community channel -> https://discord.gg/cTpXtEyqd

[Harxhit]

@saidai-bhuvanesh As I can see you are still working on this PR I will marking it as draft . You can convert it to ready for review after you are done with your work.

[saidai-bhuvanesh]

Thanks for the review and for marking the PR as draft while the cleanup updates were being finalized.

I’ve now pushed the requested reviewer fixes and cleanup changes including:

• merge conflict resolution
• spacing/layout fixes
• light mode compatibility improvements
• environment variable cleanup
• removal of unnecessary artifacts
• Tailwind v4 styling cleanup

The project has also been revalidated locally using pnpm check/build/dev.

Please let me know if any additional refinements are still needed before I convert the PR back to ready for review 🙌

[Harxhit]

Thanks for the review and for marking the PR as draft while the cleanup updates were being finalized.

I’ve now pushed the requested reviewer fixes and cleanup changes including:

* merge conflict resolution

* spacing/layout fixes

* light mode compatibility improvements

* environment variable cleanup

* removal of unnecessary artifacts

* Tailwind v4 styling cleanup

The project has also been revalidated locally using pnpm check/build/dev.

Please let me know if any additional refinements are still needed before I convert the PR back to ready for review 🙌

Please change your PR description, as your changes are large and we need more time to review them. After updating the PR description, you can mark it for review.

[saidai-bhuvanesh]

🚀 Premium UI Upgrade & Reviewer Fixes (#61)

Overview

This PR finalizes the DevCard premium UI upgrade and addresses the reviewer feedback raised during review.

Key Changes

• synced branch with upstream/main
• resolved merge conflicts
• fixed spacing issue between analytics and features section
• improved light mode contrast and glass styling
• migrated hardcoded localhost URLs to environment-based fallback handling
• cleaned Tailwind v4 warnings and styling inconsistencies
• removed unnecessary debug artifacts
• improved responsive behavior across landing and auth pages

Validation

Validated locally using:

pnpm install
pnpm check
pnpm build
pnpm dev:web

Results:

• 0 TypeScript errors
• 0 Svelte warnings
• successful production build

Notes

This PR is currently marked as draft while final review and maintainer verification are ongoing.