fix: add consistent hover animations to LearningTrack buttons

[maddysib]

What

Adds smooth "rise" hover animations to the LearningTrack page buttons for consistency.

Changes

• "Get Started Today" button: Added hover:-translate-y-1 hover:scale-105 hover:shadow-2xl active:scale-95
• "Learn More" button: Added same animation properties
• Upgraded base shadow from shadow-sm to shadow-lg for better depth perception
• Maintained all existing colors, dimensions, and dark mode support

Demo

Before

OSK.-.11.November.2025.mp4

After

OSK.-.11.November.2025.1.mp4

Why

The LearningTrack buttons previously only changed background color on hover, while other interactive elements (like ProgramCard buttons) have smooth lift animations. This PR makes the UI more consistent and polished.

Testing

• Tested locally at http://localhost:5173/learning
• Verified smooth 300ms transitions
• Confirmed no visual regression in dark mode
• Responsive on mobile devices

Files Modified

• src/pages/LearningTrack.jsx

Inspiration

Used the same hover pattern from src/components/ProgramCard.jsx for consistency across the codebase.

Summary by CodeRabbit

• Style
  • Enhanced call-to-action button styling with improved hover effects, shadow enhancements, and dark mode optimizations for better visual presentation.

[coderabbitai]

Walkthrough

Two CTA buttons in the LearningTrack component receive enhanced Tailwind CSS styling with additional hover effects, shadows, transformations, and dark-mode support. No functional logic or routing changes are introduced.

Changes

Cohort / File(s)	Change Summary
CTA Button Styling Updates src/pages/LearningTrack.jsx	Enhanced Tailwind CSS classes added to two CTA buttons with improved hover states, shadow effects, transform animations, and dark-mode styling

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Pure styling changes with no logic modifications
• Homogeneous edits applied to similar UI elements
• Visual-only enhancements requiring cosmetic validation

Possibly related PRs

• Open-Source-Kashmir/osk#118 — Modifies CTA button styling in the same file with similar visual behavior changes
• Open-Source-Kashmir/osk#158 — Updates the CTA section in LearningTrack with Tailwind classes and dark-mode styling adjustments

Suggested labels

hacktoberfest, hacktoberfest2025, hacktoberfest-accepted

Suggested reviewers

• oathar

Poem

🐰 A button dressed in finer threads,
With shadows deep and hover spreads,
Dark mode glows with gentle grace,
Animation quickens up the pace!
The CTA calls with style refined. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 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 main change: adding consistent hover animations to LearningTrack buttons. It is concise, specific, and directly reflects the modifications documented in the PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 0e2b5a3 and aa5a082.

📒 Files selected for processing (1)

• src/pages/LearningTrack.jsx (1 hunks)

🔇 Additional comments (2)

src/pages/LearningTrack.jsx (2)

442-444: Well-implemented hover animations on primary CTA.

The styling changes correctly add the rise-and-scale animation pattern with shadow enhancements. The shadow-lg base and hover:shadow-2xl provide good visual depth, while hover:-translate-y-1 hover:scale-105 active:scale-95 deliver the desired feedback loop. The existing transition-all duration-300 ensures smooth execution.

---

445-447: Solid secondary CTA styling with dark‑mode handling.

The animations and shadows mirror the primary button appropriately. Dark mode classes (dark:bg-transparent dark:text-white dark:hover:bg-slate-700) preserve usability and maintain visual consistency without regressions.

---

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