Fix Career page layout and improve UI

[npsboy]

Fixes Issue

Closes #2615

Changes proposed

• The card layouts have been fixed.
• The 2x2 layout has been replaced with a 1x4 layout similar to popular career pages. E.g., Google.
• The descriptions for each role have been made concise and professional.
• The Cover image for the page has been replaced for a more modern look.

Screenshots

Before:

After:

Summary by CodeRabbit

• New Features

  • Added “Meet the Makers” gallery with story submission and a linked menu entry.
  • Certification page: real-time preview, PNG/PDF export and celebratory UI on generation.

• Style

  • Major visual refresh across Home, Career, Contributors, category and product cards with glassmorphism, gradients, overlays, hover animations and enhanced down-arrow bounce.
  • Richer interactive card behaviors (badges, overlays, hover actions).

• Chores

  • Switched site head management to react-helmet-async and added app-wide provider.
  • Added a smooth-bounce animation for UI elements.

[vercel[bot]]

@gouri138 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

Migrates head management to react-helmet-async with HelmetProvider, adds a Meet The Makers page and route, updates navbar links, and applies large UI redesigns across Home, Career, Certification, Contributors and several card components; also adds a Tailwind smooth-bounce animation.

Changes

Cohort / File(s)	Summary
Head management migration package.json, src/main.jsx, src/App.jsx, src/User/pages/.../*.jsx, src/User/pages/Order/*.jsx	Add react-helmet-async dependency; wrap app tree with HelmetProvider in main.jsx; replace many react-helmet imports with react-helmet-async.
New page & routing src/App.jsx, src/User/pages/MeetTheMakers/MeetTheMakers.jsx, src/User/components/Navbar/UserNavbar.jsx	Add new MeetTheMakers page, register /meet-the-makers route, and add navbar dropdown link; page is a client-only gallery + submission form.
Home & homepage card UI src/User/pages/Home/Home.jsx, src/User/components/HomPageCard/CategoryCard.jsx, src/User/components/HomPageCard/LatestInMarketCard.jsx, src/User/components/DownArrow/downArrow.jsx, tailwind.config.js	Large visual redesign to gradient/glassmorphism, richer interactive card overlays, updated DownArrow markup and new Tailwind smooth-bounce animation.
Career page redesign src/User/pages/Career-Page/careerPage.jsx	Replace hero asset/layout, rework leadership/join-our-team grid and cards, update copy and assets; UI/layout changes only.
Certification overhaul src/User/pages/Certification/Certification.jsx	Rebuild certificate flow: GitHub verification UI, preview, confetti/SweetAlert tweaks, and PNG/PDF export via html2canvas + jsPDF.
Contributors revamp src/User/pages/Contributors/Contributors.jsx	Visual redesign, show-all toggle state, updated contributor links and card visuals.
Category / Market pages Helmet updates src/User/pages/Latest_in_the_Market/*, src/User/pages/Popular_Categories/*, src/User/pages/Order/*	Replace react-helmet imports with react-helmet-async across many pages (no runtime logic changes).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Root as main.jsx
  participant Store as Provider
  participant Helmet as HelmetProvider
  participant Router as Router
  participant App as App

  User->>Root: Load app
  Root->>Store: Initialize store
  Store->>Helmet: Wrap app tree
  Helmet->>Router: Initialize routing
  Router->>App: Render routes (pages use Helmet)

sequenceDiagram
  autonumber
  actor User
  participant Page as MeetTheMakers.jsx

  User->>Page: Fill form (name, location, story)
  User->>Page: Submit
  Page->>Page: setState(submitted=true)
  Page-->>User: Show acknowledgement (pending admin approval)

sequenceDiagram
  autonumber
  actor User
  participant Cert as Certification.jsx
  participant GH as GitHub API

  User->>Cert: Enter GitHub username
  User->>Cert: Verify Contribution
  Cert->>GH: checkContribution / fetchGitHubName
  GH-->>Cert: contributor? / name
  alt Success
    Cert->>Cert: set userId/name
    User->>Cert: Generate Certificate
    Cert->>Cert: Render preview (ref)
    User->>Cert: Download PNG/PDF
    Cert-->>User: File download
  else Failure
    Cert-->>User: Error alert
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Fix the career page design and improve it (#2615)	✅

Assessment against linked issues: Out-of-scope changes

Code Change	Explanation
Add Meet The Makers page and route (src/User/pages/MeetTheMakers/MeetTheMakers.jsx, src/App.jsx)	New feature unrelated to the career page UI bug/fix.
Certification page overhaul (src/User/pages/Certification/Certification.jsx)	Adds certificate preview/export and GitHub verification not requested by #2615.
Home page and card redesigns (src/User/pages/Home/Home.jsx, src/User/components/HomPageCard/*)	Broad UI redesign beyond the career-page objective.
Global helmet migration (package.json, src/main.jsx, many page imports)	Project-wide infrastructure change not required by #2615.

Possibly related PRs

• codervivek5/VigyBag#2610 — Adds the same MeetTheMakers page and navbar link; likely duplicate or closely related changes.
• codervivek5/VigyBag#2616 — Modifies routing/App imports similar to this PR; may overlap on route/import adjustments.

Suggested reviewers

• codervivek5

Poem

I hopped through gradients, soft and bright,
Bounced a smooth-bounce arrow into flight,
Met makers' tales beneath the glow,
Careers polished — design in tow,
My whiskers twitch — the UI's light. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between b0296769eff012716f8ca01eaeeaf680e979c5be and 5df841872b3e5ca6a5ae932a8fdc3507a1985c97.

📒 Files selected for processing (1)

• src/User/pages/Career-Page/careerPage.jsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/User/pages/Career-Page/careerPage.jsx

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbit in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbit in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbit read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbit help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbit ignore or @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbit summary or @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbit or @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codervivek5]

Also solve the merge conflict and I suggest you that test it properly in your local because if any things will occur in the production then I have to revert it back

[npsboy]

Just to clarify — the only file I authored changes in is careerPage.jsx. The other commits and file changes are from upstream that came during a rebase, and were not written by me.

[npsboy]

I’ve resolved the merge conflict in package.json and tested it locally. Everything looks good now. Please let me know if you face any issues.

[npsboy]

Hi! I noticed CodeRabbit is generating a massive number of comments, sometimes even repeating the same feedback and, oddly enough, even generating poems. Though some suggestions are useful, the volume makes it hard to focus on the actual review. Would you be open to tuning or limiting Coderrabbit’s config so the feedback is less noisy?

[codervivek5]

Hi! I noticed CodeRabbit is generating a massive number of comments, sometimes even repeating the same feedback and, oddly enough, even generating poems. Though some suggestions are useful, the volume makes it hard to focus on the actual review. Would you be open to tuning or limiting Coderrabbit’s config so the feedback is less noisy?

Actually this is a exteral service so i can do anything in their responce .... you can update only required changes do not need to use the whole code generated by the code rabbit

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vigybag	Error			Aug 29, 2025 0:00am

[codervivek5]

[17:30:47.042] Running build in Washington, D.C., USA (East) – iad1 [17:30:47.043] Build machine configuration: 2 cores, 8 GB [17:30:47.058] Cloning github.com/codervivek5/VigyBag (Branch: main, Commit: 8f1b018) [17:30:52.873] Cloning completed: 5.814s [17:30:53.250] Restored build cache from previous deployment (Fv8NMEDsq32CmTfHDVk98CrmetDi) [17:30:53.952] Running "vercel build" [17:30:54.362] Vercel CLI 46.0.5 [17:30:55.151] Installing dependencies... [17:30:57.882] [17:30:57.884] added 2 packages, and removed 6 packages in 3s [17:30:57.884] [17:30:57.884] 182 packages are looking for funding [17:30:57.885] run npm fund for details [17:30:57.901] Running "npm run build" [17:30:58.297] [17:30:58.299] > [email protected] build [17:30:58.299] > vite build [17:30:58.300] [17:30:58.499] /vercel/path0/node_modules/rollup/dist/native.js:59 [17:30:58.499] throw new Error( [17:30:58.500] ^ [17:30:58.500] [17:30:58.500] Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory. [17:30:58.500] at requireWithFriendlyError (/vercel/path0/node_modules/rollup/dist/native.js:59:9) [17:30:58.500] at Object. (/vercel/path0/node_modules/rollup/dist/native.js:68:76) [17:30:58.500] at Module._compile (node:internal/modules/cjs/loader:1546:14) [17:30:58.500] at Module._extensions..js (node:internal/modules/cjs/loader:1691:10) [17:30:58.500] at Module.load (node:internal/modules/cjs/loader:1317:32) [17:30:58.500] at Module._load (node:internal/modules/cjs/loader:1127:12) [17:30:58.500] at TracingChannel.traceSync (node:diagnostics_channel:315:14) [17:30:58.501] at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) [17:30:58.501] at cjsLoader (node:internal/modules/esm/translators:329:5) [17:30:58.501] at ModuleWrap. (node:internal/modules/esm/translators:260:7) { [17:30:58.501] [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu' [17:30:58.501] Require stack: [17:30:58.501] - /vercel/path0/node_modules/rollup/dist/native.js [17:30:58.501] at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15) [17:30:58.501] at Module._load (node:internal/modules/cjs/loader:1074:27) [17:30:58.501] at TracingChannel.traceSync (node:diagnostics_channel:315:14) [17:30:58.501] at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) [17:30:58.501] at Module.require (node:internal/modules/cjs/loader:1339:12) [17:30:58.501] at require (node:internal/modules/helpers:126:16) [17:30:58.501] at requireWithFriendlyError (/vercel/path0/node_modules/rollup/dist/native.js:41:10) [17:30:58.502] at Object. (/vercel/path0/node_modules/rollup/dist/native.js:68:76) [17:30:58.502] at Module._compile (node:internal/modules/cjs/loader:1546:14) [17:30:58.502] at Module._extensions..js (node:internal/modules/cjs/loader:1691:10) { [17:30:58.502] code: 'MODULE_NOT_FOUND', [17:30:58.502] requireStack: [ '/vercel/path0/node_modules/rollup/dist/native.js' ] [17:30:58.502] } [17:30:58.502] } [17:30:58.502] [17:30:58.502] Node.js v22.7.0 [17:30:58.518] Error: Command "npm run build" exited with 1

look at this error uring eployement in vercel

[npsboy]

The Vercel build error looks related to Rollup dependencies (@rollup/rollup-linux-x64-gnu) and not to my changes — I only modified careerPage.jsx.