add development section in home page

[Piyushbijarania]

Addressed Issues:

add development section in home page

Screenshots/Recordings:

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

Checklist

• My PR addresses a single issue, fixes a single bug or makes a single improvement.
• My code follows the project's code style and conventions
• If applicable, I have made corresponding changes or additions to the documentation
• If applicable, I have made corresponding changes or additions to tests
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contribution Guidelines
• Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• New Features
  • Added a new “Development” section to the homepage.
  • Introduced a scrolling logo showcase that pauses on hover when needed.
  • Added a call-to-action link to explore applications.
  • Included supporting content highlighting key development principles.

[coderabbitai]

Warning

Review limit reached

@Piyushbijarania, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 17 minutes and 54 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: f5331d15-3d79-4e66-9ef1-f60350b8de18

📥 Commits

Reviewing files that changed from the base of the PR and between f17e291 and 95fed96.

📒 Files selected for processing (2)

• app/globals.css
• components/development.tsx

Walkthrough

The PR adds a new Development marketing section, its marquee animation utility, and renders that section on the home page after ResearchHighlights.

Changes

Development section rollout

Layer / File(s)	Summary
Section scaffold components/development.tsx	Defines the Development component imports, blockchain metadata, and the section header.
Principles grid components/development.tsx	Renders the three principle cards inside the Development section.
Marquee showcase components/development.tsx, app/globals.css	Renders the blockchain logo showcase and adds the marquee animation utilities used by that block.
Home page wiring app/page.tsx	Imports Development into the home page and renders it after ResearchHighlights.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• StabilityNexus/Website#55: Both PRs change the home page composition around ResearchHighlights, with this PR adding Development immediately after it.

Suggested labels

Typescript Lang

Poem

A bunny hopped by, ears in the air,
Saw logos glide with marquee flair.
From research blooms a brighter scene,
On the home page, crisp and clean.
Hop-hop—production, neat and sweet!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a development section to the home page.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/globals.css`:
- Around line 11-28: The marquee utility needs accessibility updates in the
globals stylesheet: the current .animate-marquee and .pause-on-hover:hover
.animate-marquee rules only support mouse hover and ignore reduced-motion users.
Update the marquee styles to add a prefers-reduced-motion override that disables
or removes the animation for users who request reduced motion, and extend the
pause selector in the pause-on-hover rule to also apply on :focus-within so
keyboard users can pause the logo strip while tabbing through it.

In `@components/development.tsx`:
- Line 149: The logo links in the Development component are suppressing keyboard
focus by using focus:outline-none without any replacement, so update the
affected link className styling to keep a visible focus indicator using a
focus-visible ring/border instead. Apply the same fix to each repeated logo link
instance in Development so the accessible focus state is consistent across all
logos.
- Around line 160-177: The duplicated marquee links in the blockchains map are
still exposed to keyboard and assistive tech, so the same logos are reachable
twice. Update the duplicate set in development.tsx so the repeated Link/Image
items are decorative only, removing them from the tab order and hiding them from
screen readers. Use the existing blockchains map and the duplicate marquee
rendering block to add the appropriate accessibility treatment to those repeated
items while leaving the primary set accessible.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 76a4da08-9f7d-4149-b429-795a60a37fbe

📥 Commits

Reviewing files that changed from the base of the PR and between 0c600a5 and f17e291.

📒 Files selected for processing (3)

• app/globals.css
• app/page.tsx
• components/development.tsx