(SP 1) [Frontend] UI improvements for About page - icons, mobile UX, and performance

[yevheniidatsenko]

Description

This PR implements UI improvements for the About page based on design feedback and mobile optimization requirements.

Key changes:

• Improved visual consistency with updated icons and styling
• Enhanced mobile user experience
• Optimized theme switcher performance
• Fixed accessibility and readability issues

---

Changes

• Replace Banknote icon with BadgeDollarSign in pricing section for better visual representation
• Add Heart icon to sponsors badge ("Open Source Heroes")
• Update LinkedIn follower count from 1342 to 1400
• Update translations: "Latest Contributors" → "Open Source Heroes" (en/pl/uk)
• Fix Git topic card link to point to correct Q&A category
• Hide ParticleCanvas animation on mobile devices (performance optimization)
• Increase disclaimer text size from 10px to 12px for better readability
• Adjust fundsNote text size to 10px and match disclaimer color scheme
• Optimize theme toggle animation (restored smooth animation without performance lag)
• Fix mobile UI bugs in interactive game (increased text sizes from 7-8px to 9-11px, improved button touch targets)

---

Database Changes (if applicable)

• No database changes required

---

How Has This Been Tested?

• Tested locally on http://localhost:3001
• Verified in development environment
• Checked responsive layout (mobile viewport 390x844)
• Tested theme switcher performance (no hanging/freezing)
• Verified all icon changes render correctly
• Tested interactive game on mobile view

---

Checklist

Before submitting

• Code has been self-reviewed
• No TypeScript or console errors
• Code follows project conventions
• Scope is limited to this feature/fix
• No unrelated refactors included
• English used in code, commits, and docs
• New dependencies discussed with team (no new dependencies added)
• Database migration tested locally (N/A - no DB changes)
• GitHub Projects card moved to In Review

---

Reviewers

• @ViktorSvertoka
• @AndrewMotko

Summary by CodeRabbit

• New Features

  • Added category filtering to Git topic navigation in Q&A section
  • Enhanced theme toggle animations for smoother visual transitions
  • Updated sponsor badge text to "Open Source Heroes" across all language editions

• Style

  • Refined component spacing and typography adjustments
  • Updated icons in pricing and sponsors sections
  • Improved color consistency and visual alignment

• Bug Fixes

  • Optimized payment validation timing in checkout process

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ready	Preview, Comment	Feb 5, 2026 10:51pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR encompasses multiple focused updates: refactoring API checkout logic with upfront payment validation, applying UI styling refinements across the about section components, enhancing theme toggle animations, adjusting icon selections, updating routing parameters, and refreshing translations across English, Polish, and Ukrainian locales.

Changes

Cohort / File(s)	Summary
API Checkout Refactoring frontend/app/api/shop/checkout/route.ts	Restructured payment validation to check paymentsEnabled upfront before order creation, returning 503 with early exit. Removed post-order conditional error handling blocks (CHECKOUT_FAILED, PAYMENTS_DISABLED, ORDER_STATE_INVALID), consolidating logic into single code path.
About Section - UI Styling frontend/components/about/InteractiveGame.tsx, frontend/components/about/PricingSection.tsx, frontend/components/about/SponsorsWall.tsx	Updated font sizes (8px→9px in InteractiveGame; text-[10px]→text-xs in PricingSection), adjusted layout gaps (gap-3→gap-2), increased icon/button sizes, changed badge icons (Sparkles→BadgeDollarSign in PricingSection; Sparkles→Heart in SponsorsWall), and refined color classes.
Theme Animation Enhancement frontend/components/theme/ThemeToggle.tsx	Integrated AnimatePresence from framer-motion to coordinate theme indicator animations. Updated key from "theme-active" to "theme-indicator", reduced spring stiffness (400→300), and added mode="wait" for exit/enter animation synchronization.
Routing & Data frontend/data/about.ts, frontend/lib/about/stats.ts	Added category filter parameter to git topic href ('/q&a'→'/q&a/?category=git'); updated default LinkedIn follower count (1342→1400).
Localization Updates frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Updated sponsors badge text across all locales: "Latest Contributors"/"Ostatni kontrybutorzy"/"Останні контриб'ютори" → "Open Source Heroes"/"Bohaterowie Open Source"/"Герої Open Source".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• (SP 1) [Backend] Block checkout when PAYMENTS_ENABLED=false to preven… #279 — Directly modifies the checkout route with the same payment validation refactoring pattern
• (SP 2) [Frontend] Update Features section content and improve mobile UX #224 — Updates PricingSection component imports and ParticleCanvas visibility logic
• style: update dashboard UI and fix canonical Tailwind v4 classes #277 — Modifies the same localization files with related translation changes

Suggested labels

UI, performance

Suggested reviewers

• ViktorSvertoka
• AM1007

Poem

🐰 A rabbit hops through code today,
Checkout flows now find their way,
Icons swap to hearts so bright,
Animations spring with pure delight,
Heroes shine in every tongue! 🌟

🚥 Pre-merge checks | ✅ 3

✅ 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 covers most frontend UI improvements (icons, mobile UX) but omits significant changes like backend payment logic and translation updates, making it incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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
• Commit unit tests in branch feat/ui-improvements

---

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

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	6e18267
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/69851ec6b6f015000831e5e0
😎 Deploy Preview	https://deploy-preview-281--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.