Fix hover flickering on “Learn More About Us” button

[prashantkumarniraj]

This PR fixes a hover flickering issue affecting the “Learn More About Us” button
in both light and dark modes.

The issue was caused by margin-based hover transitions on an absolutely positioned
background element, which triggered layout reflow and hover instability.
The fix replaces margin transitions with transform-based animations, ensuring
a smooth and stable hover effect without altering the visual design.

Fixes #572

Summary by CodeRabbit

• New Features

  • Centralized organization statistics configuration for dynamic display across pages.

• Updates

  • Updated Twitter branding to X across the application.
  • Improved accessibility with explicit aria-labels on social media links.
  • Refined contact and social link structures for better consistency.
  • Minor responsive design adjustments for improved layout.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new organization statistics configuration object is introduced and integrated across multiple pages. Social media icon references are updated from Twitter to X, and certain link components are restructured. The "Learn More About Us" button implementation is reworked, addressing a reported hover flickering issue.

Changes

Cohort / File(s)	Summary
Organization Statistics Configuration src/config/orgStats.js	New centralized config object exporting activeProjects, totalContributors, and communityCount metrics for reuse across the application.
Dynamic Statistics Integration src/pages/about.jsx, src/pages/index.jsx	Both pages import and utilize orgStats configuration to replace static numeric values with dynamic references, maintaining the original display format.
Component & Icon Updates src/components/Footer.jsx, src/pages/index.jsx	Social links restructured with explicit aria-labels and consistent anchor wrappers; Twitter icon updated from faTwitter to faXTwitter; mail contact link converted from Link component to standard anchor tag.
Button Structure Refinement src/pages/index.jsx	"Learn More About Us" button JSX restructured with additional nested spans and adjusted attributes to resolve hover flickering behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Stats now dance in config's home,
X replaces Twitter's chrome,
Links leap smooth without a flicker,
Button hovers grow much slicker,
AOSSIE's polish shines once more! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 4

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR addresses the hover flickering issue in #572 by reorganizing JSX structure on the button, but does not demonstrate the claimed fix of replacing margin-based transitions with transform-based animations.	Verify that the actual CSS changes use transform-based animations instead of margin transitions to fix the flickering, as stated in the PR objectives.
Out of Scope Changes check	⚠️ Warning	The PR includes multiple out-of-scope changes: updated Twitter icon (faTwitter to faXTwitter), replaced mail Link with anchor tag, added orgStats configuration, and updated multiple pages unrelated to the button flickering fix.	Isolate the button hover flickering fix in a separate commit or PR; move unrelated changes like icon updates, email link changes, and statistics configuration to their own PRs.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (7 files): ⚔️ README.md (content) ⚔️ package-lock.json (content) ⚔️ package.json (content) ⚔️ src/components/Footer.jsx (content) ⚔️ src/pages/about.jsx (content) ⚔️ src/pages/ideas/index.jsx (content) ⚔️ src/pages/index.jsx (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ 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 describes the primary change to fix hover flickering on the 'Learn More About Us' button, which is the main objective addressed in this PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch fix-hover-flicker-learn-more
• Post resolved changes as copyable diffs in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/pages/index.jsx (2)

107-110: ⚠️ Potential issue | 🟠 Major

Outer shadow span still uses margin-based hover — inconsistent with the flicker fix.

The PR objective is to replace margin transitions with transform-based animations to prevent layout reflow. The inner span (line 104) was correctly updated to use transition-transform with translate, but this outer span still uses group-hover:m-0 with transition-all, which triggers layout reflow on hover. This could still contribute to the flickering.

🔧 Proposed fix: convert margin animation to transform

                    <span
-                      className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[`#00843D`] transition-all duration-200 ease-linear group-hover:m-0 dark:bg-yellow-400"
+                      className="absolute bottom-0 right-0 -translate-x-0 -translate-y-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[`#00843D`] transition-transform duration-200 ease-linear will-change-transform group-hover:translate-x-[0.5rem] group-hover:translate-y-[0.75rem] dark:bg-yellow-400"
                      data-rounded="rounded-lg"
                    ></span>

Note: The exact translate values need to be tuned to match the visual effect that group-hover:m-0 was producing (resetting mb-3 mr-2 to m-0). The key point is to use transform instead of margin for the animation.

---

99-111: ⚠️ Potential issue | 🔴 Critical

Add missing button text and complete the hover flickering fix.

The button at lines 100–111 is missing its label: the "Learn More About Us" text was accidentally removed during the hover fix. Additionally, the flickering fix is incomplete—the inner span (line 104–106) was correctly changed to use transition-transform and group-hover:-translate-x-2/-y-2, but the outer shadow span (lines 107–110) still uses the problematic margin-based animation (transition-all and group-hover:m-0), which continues to cause layout reflow and flickering. Both the outer span's animation and the missing button text must be restored or corrected.

🧹 Nitpick comments (3)

src/components/Footer.jsx (1)

64-70: Aria-label says "Twitter" but the icon is now X (faXTwitter).

The icon was updated to faXTwitter to reflect the rebranding, but the aria-label still reads "Follow on Twitter". For consistency with the icon change, consider updating it to "Follow on X" (same applies to the identical link in src/pages/index.jsx at line 92).

src/pages/index.jsx (1)

104-106: Broken indentation makes the JSX nesting hard to follow.

The closing </span> tags on lines 105–106 lost their indentation, making it difficult to visually trace which opening tag each one corresponds to. This is especially important here since the button text appears to be missing — clean formatting would make the structural issue more obvious.

src/pages/about.jsx (1)

189-189: Redundant lg:text-6xl — already covered by sm:text-6xl.

Since sm:text-6xl applies from the sm breakpoint upward and lg > sm, the lg:text-6xl class is redundant here.

🧹 Remove redundant breakpoint class

-          <h1 className="font-mono text-2xl font-extrabold tracking-tighter text-[`#32a852`] dark:text-yellow-400 sm:text-6xl lg:text-6xl">
+          <h1 className="font-mono text-2xl font-extrabold tracking-tighter text-[`#32a852`] dark:text-yellow-400 sm:text-6xl">