(SP: 2) [Frontend] Refactor Home UI: button, cards and online counter

[YNazymko12]

Description

This PR improves the visual quality and consistency of key Home page UI elements, focusing on the primary button, code cards, and the online users counter.

Changes

Home Button

• Updated visual style
• Improved hover / active / focus states
• Better visual emphasis as primary CTA

Cards

• Fixed overflow issues so cards stay within container bounds
• Added subtle glow/highlight effects
• Improved visual consistency and layering

Online Users Counter

• Updated visual design
• Reduced font size
• Improved spacing and overall layout

Result

• Cleaner and more modern Home page appearance
• Better visual hierarchy
• Improved consistency between UI elements

Summary by CodeRabbit

• New Features

  • Added blog pagination for better navigation across posts
  • Enhanced cart checkout flow with improved state management
  • Implemented Redis caching for improved performance

• Bug Fixes

  • Fixed form field event handling in email, name, and password inputs
  • Improved rate limiting for AI explanation endpoint

• Documentation

  • Added environment variables for Redis configuration

• Chores

  • Added Netlify deployment configuration
  • Updated localization strings for pagination and orders
  • Version bumped to 0.5.1
  • Enhanced UI styling consistency across shop pages with new design tokens

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

[vercel]

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

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

[coderabbitai]

Caution

Review failed

Failed to post review comments

📝 Walkthrough

Walkthrough

Introduces blog pagination, refactors shop UI styling into a centralized design system, extracts cart checkout into a client component, adds Redis-backed QA caching, implements rate limiting on AI endpoint, and adds page metadata across shop admin routes.

Changes

Cohort / File(s)	Summary
Blog Pagination & Portable Text Rendering frontend/components/blog/BlogFilters.tsx, frontend/components/blog/BlogPagination.tsx, frontend/app/[locale]/blog/[slug]/PostDetails.tsx, frontend/messages/*.json (blog sections)	Introduces client-side pagination with category sticky scrolling. New BlogPagination component renders page buttons with ellipsis. PostDetails refactored to use renderPortableText pipeline supporting nested blocks, lists, images, and multi-mark formatting (link, strong, em, code, strike).
Shop Design System & CSS Variables frontend/lib/shop/ui-classes.ts, frontend/app/globals.css, netlify.toml	Creates centralized shop UI constants (SHOP_CTA_BASE, SHOP_CHIP_, SHOP_LINK_, SHOP_FOCUS, etc.) for consistent component styling. Adds CSS variables for hero buttons, cards, shadows, and success states in light/dark modes. Configures Netlify build with Node 20 and Next.js plugin.
Shop Admin & Product Pages Metadata frontend/app/[locale]/shop/admin/page.tsx, frontend/app/[locale]/shop/admin/orders/*.tsx, frontend/app/[locale]/shop/admin/products/*.tsx, frontend/app/[locale]/shop/products/page.tsx, frontend/app/[locale]/shop/orders/page.tsx, frontend/app/[locale]/shop/checkout/success/page.tsx, frontend/app/[locale]/shop/page.tsx	Adds Next.js metadata exports (title, description) to 10+ shop pages for improved SEO and page-level metadata configuration.
Shop Components Refactoring frontend/components/shop/add-to-cart-button.tsx, frontend/components/shop/product-card.tsx, frontend/components/shop/product-filters.tsx, frontend/components/shop/product-sort.tsx, frontend/components/shop/shop-hero.tsx, frontend/components/shop/catalog-load-more.tsx, frontend/components/shop/category-tile.tsx, frontend/components/shop/header/cart-button.tsx, frontend/components/shop/admin/*	Replaces inline Tailwind classes with composed UI-class constants for consistent styling. Adds layered CTA visuals (gradients, hover waves, insets), enhanced chip interactions, and responsive button layouts. Updates cart-button to use HeaderButton component with badges.
Cart & Checkout Flow frontend/app/[locale]/shop/cart/CartPageClient.tsx, frontend/app/[locale]/shop/cart/page.tsx, frontend/app/[locale]/shop/checkout/payment/StripePaymentClient.tsx, frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx, frontend/app/[locale]/shop/checkout/error/page.tsx	Extracts cart UI and checkout logic into CartPageClient component. Consolidates checkout flow handling (error states, Stripe integration, success navigation). Refactors payment pages to use new CTA styling constants and helper components. Updates error page with parsing helpers and metadata.
Home & Shared Components frontend/components/home/CodeCard.tsx, frontend/components/home/HeroCodeCards.tsx, frontend/components/home/HeroSection.tsx, frontend/components/home/InteractiveCTAButton.tsx, frontend/components/shared/Footer.tsx, frontend/components/shared/ThemeToggle.tsx, frontend/components/shared/OnlineCounterPopup.tsx, frontend/components/shared/HeaderButton.tsx	Redesigns CodeCard with compact layered card, adjusts hero section typography responsiveness. Replaces InteractiveCTAButton with framer-motion animations and particle effects. Updates Footer and ThemeToggle to use CSS variable-based theming. Overhauls OnlineCounterPopup UI with decorative layers. Extends HeaderButton with badge support (badge, badgeClassName, badgeAriaLabel).
API Routes & Caching Infrastructure frontend/app/api/ai/explain/route.ts, frontend/app/api/questions/[category]/route.ts, frontend/lib/cache/qa.ts, frontend/lib/redis.ts, frontend/lib/env/index.ts	Refactors AI explain route with Groq SDK, adds in-memory rate limiting (429 per IP), new GET health check, and centralized error handling. Integrates Redis-backed QA caching (buildQaCacheKey, getQaCache, setQaCache, invalidation helpers) with 12-hour TTL. Adds getRedisClient() accessor with caching. Expands serverEnvSchema with UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN.
Form Fields & Type Updates frontend/components/auth/fields/EmailField.tsx, frontend/components/auth/fields/NameField.tsx, frontend/components/auth/fields/PasswordField.tsx	Replaces event.target with event.currentTarget in validation handlers for consistent element access and validity checks.
Configuration & Dependencies README.md, frontend/.env.example, frontend/package.json, studio/package.json, frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json	Adds "develop" line and Netlify deployment badge to README. Adds UPSTASH_REDIS_REST environment variables. Adds @upstash/redis dependency, removes @netlify/plugin-nextjs from devDependencies. Bumps versions to 0.5.1. Adds blog pagination translations (Pagination, Previous, Next, Previous page, Next page) and orders table keys (Open order, Order ID) across all locales.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related issues

• (SP: 2) [Frontend] Refactor Home UI: button, cards and online counter #247: Implements home UI component redesigns (CodeCard, InteractiveCTAButton, OnlineCounterPopup, Footer styling) matching the button, card, and online-counter refresh requirements.

Possibly related PRs

• feat(Blog) #222: Modifies PostDetails.tsx portable text rendering; overlapping refactor of blog post body handling.
• feat(Blog):Adding pagination #244: Shares blog pagination code and multiple identical file modifications (BlogFilters, BlogPagination, messages, package.json, README).
• Release v0.5.1 (#229) #230: Overlaps on Upstash Redis infrastructure, QA cache utilities, package.json dependencies, and multiple frontend component updates.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 A rabbit's hop through code so bright,
New pagination springs to light,
Cart flows smooth, cache speeds the race,
Shop design shines with grace and space! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title references Home UI refactoring (button, cards, online counter), but the changeset includes extensive modifications far beyond the Home page—multiple shop pages with metadata exports, new cart client component, refactored checkout flows, new UI class library, Redis caching integration, and blog pagination. The title is misleading about the PR's true scope.	Revise the title to accurately reflect the broader scope, such as: '[Frontend] Refactor shop UI, add Redis caching, and improve home page styling' or break into multiple focused PRs.
Docstring Coverage	⚠️ Warning	Docstring coverage is 5.88% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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 yn/refactor/ui

---

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