feat: create Developer Portal / Documentation page (issue #178)

[REHAAANNN]

• Add comprehensive developer documentation portal
• Implement sidebar navigation with 6 main sections:
  • Quick Start guide with installation steps
  • Smart Contracts specs with Solidity examples
  • API Reference with Web3/Wagmi integration
  • Integration Guide for DApp developers
  • SDK & Tools documentation
  • Contributing guidelines
• Include code snippets for TypeScript, Solidity, and JavaScript
• Add Resources section with external links
• Add Developers link in header navigation
• Enable scrolling for documentation content
• Support dark mode throughout
• Use Framer Motion for smooth transitions
• Fully responsive design

Description

Include a summary of the change and which issue is fixed. List any dependencies that are required for this change.

Fixes # (issue)

Type of change

Please mark the options that are relevant.

• Updated UI/UX
• Improved the business logic of code
• Added new feature
• Other

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

Summary by CodeRabbit

• New Features
  • Added "Developers" navigation menu item to the header for quick access
  • Introduced new Developer Portal page featuring organized documentation sections with sidebar navigation and external resources links
  • Enhanced scrolling behavior for improved content accessibility

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@REHAAANNN has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 20 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 8c4f764 and ae82ef2.

📒 Files selected for processing (1)

• client/app/developers/page.tsx (1 hunks)

Walkthrough

A new Developers portal page is introduced at /developers with dedicated navigation access. The Header component adds a "Developers" menu item, and a new developers page implements a multi-section documentation portal with sidebar navigation, content rendering, resource links, and framer-motion animations.

Changes

Cohort / File(s)	Summary
Navigation Enhancement client/app/components/Header/Header.tsx	Added CodeBracketIcon import from heroicons and introduced a new "Developers" menu item (href: "/developers") to the navigation array, extending both desktop and mobile navigation.
Developer Portal Page client/app/developers/page.tsx	New client-side Next.js page implementing a Developer Portal with sidebar navigation sections (defined by docSections), active section state management, markdown-style content rendering, and a Resources & Links grid with external resource links. Includes framer-motion animations and responsive UI components.
Global CSS Adjustment client/app/globals.css	Changed body overflow behavior from overflow: hidden to overflow-y: auto, enabling vertical scrolling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

Areas requiring attention:

• Developer page component logic: Verify the content string parsing correctly handles markdown-like syntax (headers, lists, paragraphs) and properly filters code fences
• State management and animations: Confirm useState for active section updates state correctly and framer-motion animations apply as intended
• Responsive grid layout: Test the Resources & Links grid responsiveness across viewports
• Icon imports and usage: Ensure CodeBracketIcon integrates properly in the Header and all other icons used in the developers page are correctly imported

Poem

🐰 A new portal blooms, developers shall find,

With sidebar sections and resources aligned,

CodeBracket icons guide the way,

Through animated prose, with links at play,

Scroll flows freely, the journey's divine! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: a new Developer Portal page is created with documentation content, and a Developers link is added to the header navigation.

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

client/app/components/Header/Header.tsx (1)

7-23: Nav item looks good; consider active matching for future nested docs routes.
If /developers/* routes are expected later, pathname === item.href won’t highlight “Developers” on subpaths—pathname.startsWith("/developers") (or a small helper) would.

client/app/developers/page.tsx (2)

15-20: Avoid icon: any—type the HeroIcon component.
any defeats TS safety and makes later refactors riskier.

 interface DocSection {
   id: string;
   title: string;
-  icon: any;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   content: string;
 }

---

479-491: Sidebar buttons: add type="button" to be safe.
Prevents accidental form submission if this component ever ends up inside a <form>.

-                  <button
+                  <button
+                    type="button"
                     key={section.id}
                     onClick={() => setActiveSection(section.id)}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2d3a4dd and 8c4f764.

📒 Files selected for processing (3)

• client/app/components/Header/Header.tsx (1 hunks)
• client/app/developers/page.tsx (1 hunks)
• client/app/globals.css (1 hunks)

🔇 Additional comments (1)

client/app/globals.css (1)

5-9: Global overflow-y: auto may regress scroll-lock patterns (modals/drawers).
Since this is app-wide, please sanity-check overlays (e.g., sidebars/modals) to ensure background scroll isn’t re-enabled or creating “double scroll” with fixed headers.