[Feature]: LeetCode Integration Information Page

[ruhelamahi7-code]

Before submitting

• I have searched existing issues and discussions to make sure this idea is not already covered.
• I have read the contribution guidelines.

Problem statement

CodeLens currently has dedicated integration information pages for Codeforces (/codeforces-integration) and GitHub (/github-integration), both already merged. The footer shows "LeetCode Auth" marked as "SOON" — but clicking it does nothing (disabled span), and there is no page explaining what the LeetCode integration is, why it exists, or how it works.

Users who land on CodeLens and want to understand the LeetCode integration have no dedicated place to learn about it, which creates an inconsistent experience compared to the other two integrations.

Proposed solution

Create a dedicated LeetCode Integration Information Page at /leetcode-integration, following the exact same architecture and brutalist design system as the already-merged Codeforces and GitHub integration pages.

File structure:
src/pages/LeetCodeIntegration.jsx
src/components/LeetCodeIntegrationSections/
├── HeroSection.jsx
├── WhyIntegrationSection.jsx
├── BenefitsSection.jsx
├── WhatIsLeetCodeSection.jsx
├── ImportanceForDevelopersSection.jsx
├── WhyCodeLensSupportsLeetCodeSection.jsx
├── IntegrationWorkflowSection.jsx
├── PrivacySection.jsx
└── GetStartedSection.jsx

Page sections:

1. Hero / Introduction
2. Why This Integration Exists
3. What Users Gain Inside CodeLens
4. What Is LeetCode
5. Importance of LeetCode for Developers
6. Why CodeLens Supports LeetCode
7. How the Integration Works
8. Privacy & Transparency
9. Getting Started / Connect Account CTA

Additional changes:

• Register /leetcode-integration route in frontend/src/App.jsx
• Update Footer.jsx so "LeetCode Auth" links to /leetcode-integration instead of remaining a disabled span

Alternative solutions considered

• Adding LeetCode content to an existing page: rejected — the Codeforces and GitHub pages are already standalone, and mixing integrations on one page would hurt readability and break the established pattern.
• A single large JSX file instead of section components: rejected — the existing integration pages use a composer pattern (page file only imports and renders sections), and consistency with that pattern is important for maintainability.

Use case or motivation

• Users who are deciding whether to connect their LeetCode account need a clear, honest explanation of what CodeLens does with their data and what they get in return.
• The footer already advertises "LeetCode Auth" — having it disabled with no destination page creates a broken experience that implies the feature is coming but gives users nothing to read.
• Completing this page makes all three integration footlinks functional and consistent, which improves trust in the platform overall.
• This directly follows the pattern established in PR feat: Add Codeforces Integration Information Page with 10 sections #250 (Codeforces) and PR feat: add GitHub Integration Information Page with 9 sections #251 (GitHub), so the implementation approach is well-understood and proven.

References or mockups

• Codeforces Integration Information Page — Issue Codeforces Integration Information Page #241, PR feat: Add Codeforces Integration Information Page with 10 sections #250 (merged)
• GitHub Integration Information Page — Issue GitHub Integration Information Page #242, PR feat: add GitHub Integration Information Page with 9 sections #251 (merged)
• Live references: /codeforces-integration and /github-integration on codelensx.vercel.app

Additional context

Design constraints (learned from previous integration page reviews):

• Strict brutalist system: black/white/gray only, no rounded corners, uppercase tracking-widest typography, thick borders
• Lucide icons only — no emoji anywhere in the UI
• No hardcoded numeric stats — use timeless qualitative phrasing instead (e.g. "millions of developers" not "50M+")
• Privacy section wording must be accurate and avoid absolute guarantees the backend cannot support
• Page composer file should only import and render section components — no monolithic JSX
• All content must be original and well-researched — no placeholder or AI marketing copy

[ruhelamahi7-code]

@kunalverma2512 I'd love to work on this issue — having just completed the Codeforces (#241) and GitHub (#242) integration pages, I'm very familiar with the architecture, design system, and review requirements. I can apply all the lessons from those two PRs directly to this one. Could you please assign it to me? 🙏

[kunalverma2512]

@ruhelamahi7-code you can work on this issue only when our application have that integration
So thanks for noticing but we have to wait untill our application is not integrated with leetcode

Thanks again for noticing and would say to see other areas where you can contribute and love to discuss for those issues.

[ruhelamahi7-code]

@kunalverma2512 Thank you for the clarification! I completely understand that this issue depends on the LeetCode integration. I'll explore other areas of the project where I can contribute in the meantime.

Also, if possible, please raise or suggest some issues that need work. I'd be happy to pick one up and contribute. Thanks again! 😊