Skip to content

feat: add "Top Rivalries" gaming-style marquee ticker to Compare page#3583

Open
code-with-abhi-i5 wants to merge 6 commits into
JhaSourav07:mainfrom
code-with-abhi-i5:feat/compare-rivalries-ticker
Open

feat: add "Top Rivalries" gaming-style marquee ticker to Compare page#3583
code-with-abhi-i5 wants to merge 6 commits into
JhaSourav07:mainfrom
code-with-abhi-i5:feat/compare-rivalries-ticker

Conversation

@code-with-abhi-i5
Copy link
Copy Markdown
Contributor

Description

This PR introduces a highly dynamic "Top Rivalries" marquee ticker at the top of the Developer Showdown page. It gives the page an immediate "Gaming Leaderboard" / "Live Broadcast" feel and solves the "blank slate" problem by giving users instantly clickable, high-profile developer match-ups to explore (e.g., Linus Torvalds vs Dan Abramov).

Fixes #3582

Pillar

  • 🎨 Pillar 1 — New Theme Design
  • 📐 Pillar 2 — Geometric SVG Improvement
  • 🕐 Pillar 3 — Timezone Logic Optimization
  • 🛠️ Other (Feature Enhancement — UX & Gamification)

Visual Preview

  • Full-width infinite scrolling marquee (framer-motion) above the search bar.
  • Smooth edge gradients using Tailwind (bg-gradient-to-r).
  • Interactive pills with hover states and custom Lucide icons.
  • Clicking a rivalry updates the URL and triggers the comparison automatically.

What's Changed

[NEW] components/TopRivalriesTicker.tsx

  • Created a self-contained Marquee component powered by framer-motion (x: ['0%', '-50%']).
  • Uses duplicated arrays ([...MOCK_RIVALRIES, ...MOCK_RIVALRIES]) to achieve a mathematically perfect, seamless infinite loop.
  • Added handleRivalryClick which uses next/navigation router to push the ?user1=...&user2=... parameters, triggering the existing Auto-Compare useEffect in CompareClient.

[MODIFY] app/compare/CompareClient.tsx

  • Wrapped the layout in a React Fragment (<>) to allow full-width bleeding of the ticker outside the max-w-5xl container.
  • Adjusted padding (pt-20 lg:pt-24) to position the ticker perfectly below the fixed Navbar.

Checklist before requesting a review:

  • I have read the CONTRIBUTING.md file.
  • I have tested these changes locally (localhost:3000/compare).
  • I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
  • My commits follow the Conventional Commits format (feat: add Top Rivalries ticker...).
  • I have started the repo.
  • I have made sure that I have only one commit to merge in this PR.
  • Marquee animation is smooth and seamless (no jitter at the loop point).
  • Clicking a rivalry correctly updates the URL and triggers the comparison fetch.
  • (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Jun 4, 2026

@code-with-abhi-i5 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add "Top Rivalries" gaming-style marquee ticker to Compare page

1 participant