Fix button hover text color and correct Tailwind hover usage

[Kartikey44]

Summary

This PR fixes the button hover behavior on the homepage by correcting Tailwind CSS usage and ensuring hover styles are applied reliably.

Changes

• Fixed incorrect group-hover usage by applying it to the correct elements
• Ensured button text turns black on hover without affecting background gradients
• Removed conflicting text color utilities
• Prevented overlay layers from blocking hover interactions

Result

• Hover effects now work consistently across all buttons
• No visual regressions to existing UI/UX
• Cleaner and more maintainable Tailwind classes

Screenshots

(Optional – add screenshots if required by the repo)

Summary by CodeRabbit

Release Notes

• New Features

  • Dynamic action buttons for flexible navigation
  • Matrix visual effect retained and applied to updated sections

• Style

  • Redesigned hero and info sections with a cleaner, simplified layout
  • Streamlined content and removed clutter for clearer hierarchy
  • Reorganized lower content into a concise info block with a “Read the Research Paper” link

• Accessibility

  • External links open in new tabs with appropriate attributes

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

[coderabbitai]

Walkthrough

Simplified the hero and lower-page layout in app/page.tsx: removed multiple decorative elements, consolidated hero content, replaced hard-coded buttons with a mapped array rendered via a Button+Link, introduced a matrix-effect wrapper and pointer-events adjustments, and replaced lengthy "How HodlCoin Works" content with a concise info block and research link.

Changes

Cohort / File(s)	Summary
Hero & Page Layout app/page.tsx	Consolidated hero content, removed extra logo/title variants and decorative glows, replaced explicit background gradients with simplified layers, added matrix-effect container and pointer-events-none for background layers, restructured lower content into a dedicated info section, and replaced three hard-coded buttons with a mapped array rendered via Button+Link components.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify responsive layout and visual regression for the hero and info sections.
• Confirm dynamic button array renders correct labels, hrefs, and target/rel attributes.
• Check matrix-effect wrapper layering and pointer-events adjustments don't block interactions.
• Validate the research paper link and any external link attributes.

Poem

🐰 I hopped through code with careful paws,
Cleared the glows and trimmed the claws,
Buttons aligned in tidy rows,
Matrix whispers where the soft wind blows,
A nimble page — a rabbit's cause.

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 'Fix button hover text color and correct Tailwind hover usage' directly matches the PR's main objective of fixing button hover behavior and correcting Tailwind CSS implementation, as confirmed by the PR objectives.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee79716 and f23c5c0.

📒 Files selected for processing (1)

• app/page.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/page.tsx (3)

hooks/useMatrixEffect.ts (1)

• useMatrixEffect (3-95)

components/ui/button.tsx (1)

• Button (56-56)

components/ui/card.tsx (1)

• Card (79-79)

🔇 Additional comments (3)

app/page.tsx (3)

15-26: Correct implementation of non-blocking overlay layers.

The background and effects layers correctly use pointer-events-none to prevent blocking user interactions with the content below. This aligns with the PR objective to ensure hover interactions work reliably.

---

45-70: Excellent implementation! All hover issues and past review comments addressed.

The button implementation correctly addresses all PR objectives and past review feedback:

✅ HTML semantics fixed: Using asChild prop ensures the Button renders as the Link element (avoiding invalid <button> inside <a>).

✅ Group-hover applied correctly: The group class is on the Button (which becomes the <a> element), enabling group-hover:text-black on the nested span and group-hover:opacity-100 on the overlay.

✅ Hover interactions work reliably: The overlay div has pointer-events-none, preventing it from blocking hover events on the button.

✅ Text color transitions correctly: Text starts as text-primary-foreground and transitions to black on hover via group-hover:text-black.

✅ Security attributes present: All external links include target="_blank" rel="noopener noreferrer".

The refactoring to use a mapped array also improves maintainability by eliminating code duplication.

---

84-88: Security attributes correctly added to all external research paper links.

Both research paper links now include rel="noopener noreferrer" alongside target="_blank", properly addressing the security concerns raised in past review comments.

Also applies to: 112-115

---

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: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72f97c5 and ee79716.

📒 Files selected for processing (1)

• app/page.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/page.tsx (3)

hooks/useMatrixEffect.ts (1)

• useMatrixEffect (3-95)

components/ui/button.tsx (1)

• Button (56-56)

components/ui/card.tsx (1)

• Card (79-79)

🔇 Additional comments (3)

app/page.tsx (3)

17-26: LGTM! Proper use of pointer-events-none.

The pointer-events-none classes on the background and effects layers correctly prevent these decorative elements from interfering with hover interactions on the content below. This aligns well with the PR's objective of fixing button hover behavior.

---

29-41: LGTM! Clear and concise hero content.

The simplified hero structure with a focused heading and subtitle improves readability and user experience.

---

74-79: LGTM! Consistent use of pointer-events-none.

The matrix effect container correctly uses pointer-events-none to ensure decorative elements don't interfere with user interactions, maintaining consistency with the hero section.

[Kartikey44]

All review comments have been addressed and checks are passing.
This PR is ready to merge. Thanks!