From eb46ed1f31d52e0d971d0dc6fcc0888271fbfade Mon Sep 17 00:00:00 2001
From: Viktor Svertoka <victor.svertoka@gmail.com>
Date: Sat, 31 Jan 2026 12:35:55 +0200
Subject: [PATCH] Release v0.5.1 (#229)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* (SP: 1) [Security] Enforce origin posture for shop APIs (admin/checkout same-origin; internal/webhooks non-browser) + docs

* (SP: 1) [DB] Align stripe_events.order_id FK CASCADE across schema and migrations

* feat(i18n): localize quiz anti-cheat, header and blog filters (#175)

* feat(Blog): Adding last published post to the blog and category page, recommended posts, Changing styles to one unified format, Bug fixes

* Update leaderboard-style

* Update leaderboard-style

* teat(Blog): fix of hover on author, fix of the line

* (SP: 3) [Observability] Extend structured logging + correlation IDs across all shop routes; purge console.*; enforce explicit error codes

* (SP: 1) [Admin][Security] Add safe product delete (PRODUCT_IN_USE) + mobile cards UI; tighten env/docs, locale normalization, cache-control, and logging semantics

* fix: npm installing

* (SP: 1) [Admin] Align products list in use checks with DB column names (order_items/inventory_moves)

* fix:Update leaderboard: fixed background

* fix: remove email from CurrentUser type to prevent PII exposure

* refactor: align leaderboard UI with brand style (fixed bg, css vars, podium glow)

* (SP: 1) [Frontend] About Us Page. Fixed game, topics, mobile layout

- Fixed mobile tabs in FeaturesSection (icon-only on mobile)
- Fixed game bugs: collision detection, animation, scoring system
- Added multiple obstacle types with level progression
- Improved game sizing for mobile while preserving desktop
- Updated TopicsSection with local SVG icons and hover borders
- Made DynamicGridBackground static grid opt-in via showStaticGrid prop
- Limited SponsorsWall to display max 10 sponsors
- Optimized CommunitySection button layout for mobile

* refactor: update accent color hover effects to Footer

- Update Footer links to use --accent-primary on hover
- Update ThemeToggle icons to use --accent-primary on hover
- Both components adapt colors to light/dark theme

* refactor: improve accessibility

- Add focus-visible styles for keyboard navigation accessibility

* (SP: 1) [Shop] Fix Stripe checkout success redirect (remove duplicate locale /uk/uk) (#186)

* fix:leaderboard  update leaderboard-style

* fix:leaderboard  update leaderboard-style (#187)

* fix:leaderboard update leaderboard-style on mobile

* fix: resolve CodeRabbit issues and conflicts

* fix:leaderboard update leaderboard-style on mobile (#188)

* fix:leaderboard  update leaderboard-style

* fix:leaderboard update leaderboard-style on mobile

* fix: resolve CodeRabbit issues and conflicts

---------

Co-authored-by: Viktor Svertoka <victor.svertoka@gmail.com>

* (SP: 1) [Frontend] Changing hero headline on shop main page (#190)

* (SP: 1) [Shop] Fix checkout redirect 404 by removing duplicate locale in in-app routes and Stripe return_url

* (SP: 1) [Shop] Fix locale cart page and orderid page

* (SP: 1) [Frontend] Changin hero headline on shop main page

* (SP: 1) [Frontend] Fix styles shop home page, buttons (#191)

* fix: move row border to first cell to resolve CodeRabbit issue

* fix: move row border to first cell to resolve CodeRabbit issue new

* Feature/leaderboard style update (#192)

* (SP: 7) [UI] Quiz UI polish: tabs styling, category accents, color scheme (#181, #193, #194) (#195)

* Sanity (#196)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* (SP: 3) [AI] Add AI word helper with Groq integration (#200)

* (SP: 3) [AI] Add AI word helper with Groq integration

- Implement Groq API with Llama 3.1 70B model
- Add text selection detection on Q&A page
- Create floating "Explain" button
- Build draggable modal with 3-language support (uk/en/pl)
- Add localStorage caching for instant repeated lookups
- Implement guest CTA (login/signup)
- Add rate limiting (10 requests/min)
- Auth-gated feature (registered users only)

Components:
- SelectableText: Detects text selection
- FloatingExplainButton: Appears on selection
- AIWordHelper: Main modal with explanations

* (SP: 1) i18n: fix Polish locale and set EN as default

* Sanity (#202)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* Sanity (#203)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* (SP: 3) [Frontend] Refactor Header UI and navigation states (#201)

* (SP: 3) [Frontend] Refactor Header UI and navigation states

- Add icon to the language switcher

- Add GitHub icon with stars indicator (frontend only)

- Update logo styles

- Improve touch interaction styles

- Verify correct placement and alignment of all header components

- Make mobile header modal full-screen

- Disable background scroll when mobile menu is open

- Highlight active navigation item

- Update navigation styles:

- Highlight Shop link when user is on Home pages
- Highlight Home link when user is on Shop pages
- Style changes only, no routing or logic changes

* fix CodeRabbit

* update HeaderButton styles

* fix: add accessibility for HeaderButton

* (SP: 3) [Testing] Vitest config + unit + integration tests for quiz module (#204)

* feat(quiz-ui): quiz UI polish - tabs, category accents, color scheme (issues #181, #193, #194)

- Refactor QaTabButton to shared CategoryTabButton component
- Add category accent colors to QuizCard, buttons, progress indicators
- Standardize colors with CSS variables, traffic light timer
- Add DynamicGridBackground to quizzes list page
- Border-only answer feedback, semi-transparent progress styles

* docs: update .gitignore

* fix(quiz): align disqualification threshold with warning banner

Changed violationsCount > 3 to >= 3 in QuizResult points block
to match the warning banner threshold at line 124.

* feat(quiz-testing): add quiz unit tests

- Configure Vitest for quiz module
- Add test factories and setup utilities
- Add quiz-crypto tests (13 tests)
- Add quiz-session tests (12 tests)

* test(quiz): add integration tests for verify-answer API and useAntiCheat hook (#199)

- verify-answer.test.ts: 8 tests for API endpoint
  - Correct/wrong answer verification
  - Validation errors (missing fields, tampered data)
  - Security: rejects modified encrypted answers

- quiz-anticheat.test.ts: 10 tests for useAntiCheat hook
  - Detects copy, paste, context-menu, tab-switch events
  - Respects isActive flag
  - Reset and cleanup functionality

Total quiz tests: 52 (9 setup + 25 unit + 18 integration)

* test(quiz): expand test coverage to 90%+ with hooks, API routes, and UI flow

Add 28 new tests covering:
- useQuizSession hook (6 tests)
- useQuizGuards hook (8 tests)
- guest-quiz storage (5 tests)
- guest-result API route (5 tests)
- quiz-slug API route (3 tests)
- QuizContainer UI flow (1 test)

Coverage: 35% -> 90.94% (quiz scope)
Tests: 52 -> 80

* chore: remove coverage-quiz from git, add to .gitignore

* chore: add coverage-quiz to .gitignore, fix quiz guards test

* fix(leaderboard): improve table mobile

* fix(leaderboard): correct malformed shadow class syntax for avatar glow

* Feature/leaderboard style update (#206)

* fix:leaderboard  update leaderboard-style

* fix:leaderboard update leaderboard-style on mobile

* fix: resolve CodeRabbit issues and conflicts

* fix: move row border to first cell to resolve CodeRabbit issue

* fix: move row border to first cell to resolve CodeRabbit issue new

* fix(leaderboard): improve table mobile

* fix(leaderboard): correct malformed shadow class syntax for avatar glow

* test(q&a): add comprehensive qa tests and coverage setup (#208)

* test(q&a): add comprehensive qa tests and coverage setup

* test(q&a): align mocks and reset in qa tests

* (SP: 1) [Frontend] Remove Contacts References (#211)

* test(q&a): add comprehensive qa tests and coverage setup

* test(q&a): align mocks and reset in qa tests

* chore(nav): remove contacts page references

* Sanity (#209)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* chore(release): update changelog for v0.5.0

* chore(release): v0.5.0

* [Refactor] Code Quality Improvements: Accessibility, Mobile Support, … (#213)

* fix(leaderboard): adjust podium heights for better visibility on desktop

* Feature/leaderboard style update (#214)

* fix(leaderboard): fix layout centering

* feat(Blog) (#216)

* feat(Blog) (#218)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* feat(Blog): added tests

* feat(Blog): fix for big post on the post page, added tests

* feat(Blog): resolving comments

* feat(Blog): fixed hover for social links icins - dark theme

* (SP: 1) feat(i18n): translate 404 error page (#217)

- Add 404 translations (uk/en/pl)
- Implement [Global/Local/Combined] strategy
- Add helpful navigation links

* (SP: 2) [Frontend] Refactor Home HeroSection and Footer stylestor/home (#221)

* (SP:1) fix: 404 page layout (#219)

- 404 translations (uk/en/pl)
- Implement Global strategy

* feat(Blog) (#222)

* feat(Blog):fix for clickable link in post details, fix for author details

* feat(Blog):refactoring after removing author modal

* feat(Blog): fix unified date format

* feat(Blog): Fix for  click-outside-to-close search, recommended posts are limited to 3

* feat(Blog): selectedAuthorData fixed

* feat(Blog): Added description for /blog/[slug] metadata, Added Schema.org JSON‑LD for Article (BlogPosting) and BreadcrumbList , Added <time datetime> tags where blog dates renders

* feat(Blog): fix hover social links, fixed duplication not found search

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added: breadcrumbs to the post details page and updated the BreadcrumbList, logo to the cocial links in User info, Fixed: main container alignment, category navigation in breadcrumbs

* feat(Blog): Added scroll on the main blog page on filtering by author, fied breadcrumbs category translaion, added category to the recommended cards, fixed search for localisations

* feat(Blog): Changed image size on the post details page

* feat(Blog): added tests

* feat(Blog): fix for big post on the post page, added tests

* feat(Blog): resolving comments

* feat(Blog): fixed hover for social links icins - dark theme

* feat(Blog): bringing the style on the blog page to a single site style

* feat(blog): aligning syles

* feat(blog): resolving comment from CodeRabbit

* feat(blog):fix comment for deployment

* Update AI model from 'llama-3.3-70b-versatile' to 'llama3-70b-8192' (#223)

* (SP 2) [Frontend] Update Features section content and improve mobile UX (#224)

* (SP 2) [Frontend] Update Features section content and improve mobile UX

- Features Section: Refined feature content and visuals.
- Mobile UX: Improved responsive layout and scaling for feature cards and interactive elements.
- Visual Enhancements: Added dynamic particle background effects to the Pricing section.

* fix(review): address accessibility, security, and performance feedback

* fix(review): resolve accessibility and hydration issues

* fix(perf): implement frame-rate independent animations

* fix(review): address accessibility, security, and performance feedback

* fix(review): enable SSR for features section and support HiDPI canvas

* fix(review): correct HiDPI logic for particle canvas measurements

* (SP:3) feat(i18n): add UA and PL translations for shop/admin pages

Add comprehensive i18n support for shop and admin sections in 3 languages (en, uk,
  pl).

  Translation coverage:
  - Shop pages: main page, products, cart, checkout, orders
  - Admin pages: dashboard, products management, orders management
  - Navigation: header, mobile menu, category links
  - Product components: cards, filters, sort, badges (NEW/SALE)
  - Category names: Apparel, Lifestyle, Collectibles
  - All UI buttons, labels, and actions

  Key changes:
  - Added ~250+ translation keys to messages/en.json, messages/uk.json,
  messages/pl.json
  - Updated 20+ components to use useTranslations() and getTranslations()
  - Implemented color translation in cart and product detail pages
  - Translated hero message
  - Added badge translations

* fix(i18n): correct translation keys and localization in shop pages

  - Replace confusing error.order with success.orderLabel in checkout success page
  heading
  - Localize boolean stockRestored display (yes/no instead of true/false) in order
  details
  - Fix active state detection for shop category links in mobile menu using search
  params
  - Add missing translation keys (orderLabel, yes, no) to all locales (en, uk, pl)

* fix(netlify): resolve AI API crash and 404 locale/theme issues

AI fixes:
  - Extract getClientIp to separate file (avoid db import crash)
  - Add missing zod dependency to package.json

  404 page fixes:
  - Use NEXT_LOCALE cookie for locale detection on Netlify
  - Add theme detection script in root layout
  - Update styling with hero background and gradient text

* Update frontend/app/not-found.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* (SP:3) feat(i18n): translate about page and auth form validation messages

  - Add about page translations (EN, UK, PL)
  - Add auth.fields.validation translations for form errors

* fix(api): resolve Netlify 503 errors and harden AI explain endpoint

 - Use dynamic import for groq-sdk (Netlify compatibility)                                                    - Bypass rate limiting for unknown IPs (serverless safety)
  - Safe JSON parsing with request.text() + empty body check
  - Fix ReferenceError: remove undefined errorMessage variable
  - Remove sensitive debug info from client responses
  - Add i18n keys: pricing.heading, sponsors.ctaAriaLabel

* feat(api): add GET health check endpoint for ai-explain

* chore(release): v0.5.1

---------

Co-authored-by: liudmylasovetovs <milkaegik@gmail.com>
Co-authored-by: Tetiana Zorii <131365289+TiZorii@users.noreply.github.com>
Co-authored-by: Anna <komrakova.anna@gmail.com>
Co-authored-by: AlinaRyabova <alinavr7@gmail.com>
Co-authored-by: Yevhenii Datsenko <yevheniydatsenko@gmail.com>
Co-authored-by: YNazymko12 <yulychka12@gmail.com>
Co-authored-by: liudmylasovetovs <127711697+liudmylasovetovs@users.noreply.github.com>
Co-authored-by: AlinaRyabova <115992255+AlinaRyabova@users.noreply.github.com>
Co-authored-by: Lesia Soloviova <106915140+LesiaUKR@users.noreply.github.com>
Co-authored-by: Yuliia Nazymko <122815071+YNazymko12@users.noreply.github.com>
Co-authored-by: Yevhenii Datsenko <134847096+yevheniidatsenko@users.noreply.github.com>
Co-authored-by: tetiana zorii <tanyusha.zoriy@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 CHANGELOG.md                                  |  44 ++
 frontend/app/[locale]/about/page.tsx          |  13 +-
 .../app/[locale]/blog/[slug]/PostDetails.tsx  |   7 +-
 .../blog/category/[category]/page.tsx         | 162 ++---
 frontend/app/[locale]/blog/page.tsx           |  31 +-
 frontend/app/[locale]/not-found.tsx           |   8 -
 frontend/app/[locale]/page.tsx                |   2 +-
 .../shop/admin/orders/[id]/RefundButton.tsx   |  10 +-
 .../app/[locale]/shop/admin/orders/page.tsx   |  40 +-
 frontend/app/[locale]/shop/admin/page.tsx     |  14 +-
 .../app/[locale]/shop/admin/products/page.tsx |  74 +-
 frontend/app/[locale]/shop/cart/page.tsx      |  55 +-
 .../app/[locale]/shop/checkout/error/page.tsx |  40 +-
 .../shop/checkout/payment/[orderId]/page.tsx  |  61 +-
 .../[locale]/shop/checkout/success/page.tsx   |  47 +-
 .../app/[locale]/shop/orders/[id]/page.tsx    |  44 +-
 frontend/app/[locale]/shop/orders/page.tsx    |  69 +-
 frontend/app/[locale]/shop/page.tsx           |  27 +-
 .../[locale]/shop/products/[slug]/page.tsx    |  11 +-
 frontend/app/[locale]/shop/products/page.tsx  |   8 +-
 frontend/app/api/ai/explain/route.ts          | 170 ++++-
 frontend/app/globals.css                      | 233 +++++-
 frontend/app/layout.tsx                       |  19 +
 frontend/app/not-found.tsx                    |  75 ++
 .../components/about/CommunitySection.tsx     |  78 +-
 frontend/components/about/FeaturesSection.tsx | 664 ++++++++++--------
 frontend/components/about/HeroSection.tsx     |  55 +-
 frontend/components/about/InteractiveGame.tsx |  50 +-
 frontend/components/about/PricingSection.tsx  | 153 ++--
 frontend/components/about/SponsorsWall.tsx    |  38 +-
 frontend/components/about/TopicsSection.tsx   |  29 +-
 .../components/auth/fields/EmailField.tsx     |  15 +
 frontend/components/auth/fields/NameField.tsx |  13 +
 .../components/auth/fields/PasswordField.tsx  |  17 +
 frontend/components/blog/BlogFilters.tsx      |  47 +-
 frontend/components/blog/BlogPageHeader.tsx   |  25 +
 .../components/blog/FeaturedPostCtaButton.tsx |  26 +
 frontend/components/header/AppMobileMenu.tsx  |  53 +-
 frontend/components/header/MainSwitcher.tsx   |   6 +-
 frontend/components/home/CodeCard.tsx         |  30 +
 frontend/components/home/HeroBackground.tsx   |  19 +
 frontend/components/home/HeroCodeCards.tsx    |  56 ++
 frontend/components/home/HeroSection.tsx      |  58 ++
 .../components/home/InteractiveCTAButton.tsx  |  76 ++
 .../leaderboard/LeaderboardPodium.tsx         |   6 +-
 .../leaderboard/LeaderboardTable.tsx          |   3 +-
 frontend/components/q&a/AccordionList.tsx     |   4 +-
 .../components/q&a/FloatingExplainButton.tsx  |  11 +-
 .../components/q&a/HighlightCachedTerms.tsx   |  10 +
 frontend/components/q&a/SelectableText.tsx    |  47 +-
 frontend/components/shared/Footer.tsx         |  51 +-
 frontend/components/shared/HeroSection.tsx    | 250 -------
 .../components/shared/OnlineCounterPopup.tsx  |  12 +-
 .../components/shop/add-to-cart-button.tsx    |  73 +-
 .../shop/admin/admin-pagination.tsx           |  20 +-
 .../admin/admin-product-delete-button.tsx     |  22 +-
 .../admin/admin-product-status-toggle.tsx     |  12 +-
 .../shop/admin/shop-admin-topbar.tsx          |  15 +-
 .../components/shop/catalog-load-more.tsx     |   7 +-
 .../shop/catalog-products-client.tsx          |  12 +-
 frontend/components/shop/category-tile.tsx    |  16 +-
 frontend/components/shop/header/nav-links.tsx |  44 +-
 frontend/components/shop/product-card.tsx     |   6 +-
 frontend/components/shop/product-filters.tsx  |  24 +-
 frontend/components/shop/product-sort.tsx     |  19 +-
 frontend/components/shop/products-toolbar.tsx |  14 +-
 .../components/tests/blog/blog-card.test.tsx  |  80 +++
 .../tests/blog/blog-category-grid.test.tsx    |  38 +
 .../tests/blog/blog-category-links.test.tsx   |  59 ++
 .../tests/blog/blog-filters.test.tsx          | 137 ++++
 .../components/tests/blog/blog-grid.test.tsx  |  32 +
 .../tests/blog/blog-header-search.test.tsx    | 102 +++
 .../tests/blog/blog-nav-links.test.tsx        |  52 ++
 frontend/components/ui/gradient-badge.tsx     |  22 +
 frontend/components/ui/particle-canvas.tsx    | 368 ++++++++++
 frontend/components/ui/section-heading.tsx    |  25 +
 frontend/lib/ai/explainCache.ts               |  34 +-
 frontend/lib/home/cta-variants.ts             |  52 ++
 frontend/lib/security/client-ip.ts            |  48 ++
 frontend/lib/shop/data.ts                     |  13 -
 .../lib/tests/blog/blog-author-route.test.ts  |  42 ++
 .../lib/tests/blog/blog-search-route.test.ts  |  34 +
 frontend/messages/en.json                     | 538 +++++++++++++-
 frontend/messages/pl.json                     | 541 +++++++++++++-
 frontend/messages/uk.json                     | 543 +++++++++++++-
 frontend/package-lock.json                    | 144 +++-
 frontend/package.json                         |   8 +-
 frontend/project-structure.txt                | 285 +++++---
 frontend/proxy.ts                             |   5 +
 frontend/tsconfig.json                        |   4 +
 frontend/vitest.config.ts                     |   1 +
 frontend/vitest.setup.ts                      |   1 +
 studio/package-lock.json                      |  74 +-
 93 files changed, 5213 insertions(+), 1519 deletions(-)
 delete mode 100644 frontend/app/[locale]/not-found.tsx
 create mode 100644 frontend/app/not-found.tsx
 create mode 100644 frontend/components/blog/BlogPageHeader.tsx
 create mode 100644 frontend/components/blog/FeaturedPostCtaButton.tsx
 create mode 100644 frontend/components/home/CodeCard.tsx
 create mode 100644 frontend/components/home/HeroBackground.tsx
 create mode 100644 frontend/components/home/HeroCodeCards.tsx
 create mode 100644 frontend/components/home/HeroSection.tsx
 create mode 100644 frontend/components/home/InteractiveCTAButton.tsx
 delete mode 100644 frontend/components/shared/HeroSection.tsx
 create mode 100644 frontend/components/tests/blog/blog-card.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-category-grid.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-category-links.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-filters.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-grid.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-header-search.test.tsx
 create mode 100644 frontend/components/tests/blog/blog-nav-links.test.tsx
 create mode 100644 frontend/components/ui/gradient-badge.tsx
 create mode 100644 frontend/components/ui/particle-canvas.tsx
 create mode 100644 frontend/components/ui/section-heading.tsx
 create mode 100644 frontend/lib/home/cta-variants.ts
 create mode 100644 frontend/lib/security/client-ip.ts
 create mode 100644 frontend/lib/tests/blog/blog-author-route.test.ts
 create mode 100644 frontend/lib/tests/blog/blog-search-route.test.ts
 create mode 100644 frontend/vitest.setup.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef4f7f14..cd17b32d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -209,3 +209,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 - Improved accessibility and visual consistency across components
 - Resolved locale duplication in Stripe checkout redirects
 - Cleaned up redundant UI states, placeholders, and legacy styles
+
+## [0.5.1] - 2026-01-31
+
+### Added
+
+- Enhanced About page experience:
+  - Refreshed Features and Pricing sections with clearer messaging
+  - Interactive particle-based backgrounds with reduced-motion support
+  - New reusable UI components: `ParticleCanvas`, `GradientBadge`,
+    `SectionHeading`
+  - Improved mobile responsiveness and layout stability
+- Blog improvements:
+  - Dynamic grid backgrounds across blog pages
+  - Featured post CTA in blog hero
+  - Author filtering via URL with adaptive header behavior
+- Improved 404 error pages:
+  - Fully localized (uk / en / pl)
+  - Unified global rendering strategy
+  - Clear navigation actions back to Home
+- AI Word Helper updates:
+  - Switched model to `llama3-70b-8192` for improved response quality
+- Accessibility & UX:
+  - Better keyboard navigation for highlighted terms
+  - Improved touch and mobile interaction handling
+
+### Changed
+
+- Home page refinements:
+  - Hero section refactored into smaller reusable components
+  - Updated color palette, spacing, animations, and mobile behavior
+- Footer styling updated to match refreshed brand visuals
+- Blog layout aligned with updated design language and spacing rules
+- Default locale updated from `uk` to `en` with safer type validation
+- Internal codebase cleanup:
+  - Improved i18n defaults and validation
+  - Better cache initialization and error handling
+
+### Fixed
+
+- Fixed blog post image rendering for latest posts
+- Resolved layout centering issues on Leaderboard
+- Improved stability of text selection detection for AI helper
+- Fixed social icon hover styles in dark mode
+- Reduced visual overlap issues on small mobile screens
diff --git a/frontend/app/[locale]/about/page.tsx b/frontend/app/[locale]/about/page.tsx
index 5165b909..57c93a75 100644
--- a/frontend/app/[locale]/about/page.tsx
+++ b/frontend/app/[locale]/about/page.tsx
@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server"
 import { getPlatformStats } from "@/lib/about/stats"
 import { getSponsors } from "@/lib/about/github-sponsors"
 
@@ -7,6 +8,14 @@ import { FeaturesSection } from "@/components/about/FeaturesSection"
 import { PricingSection } from "@/components/about/PricingSection"
 import { CommunitySection } from "@/components/about/CommunitySection"
 
+export async function generateMetadata() {
+  const t = await getTranslations("about")
+  return {
+    title: t("metaTitle"),
+    description: t("metaDescription"),
+  }
+}
+
 export default async function AboutPage() {
   const [stats, sponsors] = await Promise.all([
     getPlatformStats(),
@@ -17,13 +26,13 @@ export default async function AboutPage() {
     <main className="min-h-screen bg-gray-50 dark:bg-black overflow-hidden text-gray-900 dark:text-white
       w-[100vw] relative left-[50%] right-[50%] -ml-[50vw] -mr-[50vw]"
     >
-      
+
       <HeroSection stats={stats} />
       <TopicsSection />
       <FeaturesSection />
       <PricingSection sponsors={sponsors} />
       <CommunitySection />
-      
+
     </main>
   )
 }
\ No newline at end of file
diff --git a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
index 80d13ea1..b274d1ec 100644
--- a/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
+++ b/frontend/app/[locale]/blog/[slug]/PostDetails.tsx
@@ -5,6 +5,7 @@ import { getTranslations } from 'next-intl/server';
 import { client } from '@/client';
 import { Link } from '@/i18n/routing';
 import { formatBlogDate } from '@/lib/blog/date';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 
 export const revalidate = 0;
 
@@ -289,7 +290,8 @@ export default async function PostDetails({
     : null;
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
       {breadcrumbsJsonLd && (
         <script
           type="application/ld+json"
@@ -501,7 +503,8 @@ export default async function PostDetails({
       {post.resourceLink && null}
 
       {(authorBio || authorName || authorMeta) && null}
-    </main>
+      </main>
+    </DynamicGridBackground>
   );
 }
 
diff --git a/frontend/app/[locale]/blog/category/[category]/page.tsx b/frontend/app/[locale]/blog/category/[category]/page.tsx
index 1e776344..ce23cd29 100644
--- a/frontend/app/[locale]/blog/category/[category]/page.tsx
+++ b/frontend/app/[locale]/blog/category/[category]/page.tsx
@@ -6,6 +6,8 @@ import { client } from '@/client';
 import { Link } from '@/i18n/routing';
 import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid';
 import { formatBlogDate } from '@/lib/blog/date';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
+import { FeaturedPostCtaButton } from '@/components/blog/FeaturedPostCtaButton';
 
 export const revalidate = 0;
 
@@ -85,89 +87,89 @@ export default async function BlogCategoryPage({
   const featuredDate = formatBlogDate(featuredPost?.publishedAt);
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      <nav className="mb-6" aria-label="Breadcrumb">
-        <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          <li className="flex items-center gap-2">
-            <Link
-              href="/blog"
-              className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
-            >
-              {tNav('blog')}
-            </Link>
-            <span>&gt;</span>
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-[var(--accent-primary)]" aria-current="page">
-              {categoryDisplay}
-            </span>
-          </li>
-        </ol>
-      </nav>
-      <h1 className="text-4xl font-bold mb-4 text-center">
-        {categoryDisplay}
-      </h1>
-      {featuredPost?.mainImage && (
-        <section className="mt-10">
-          <article className="group relative overflow-hidden rounded-3xl bg-white dark:bg-black">
-            <div className="h-[320px] w-full overflow-hidden sm:h-[380px] md:h-[450px] lg:h-[618px] max-h-[65vh]">
-              <Image
-                src={featuredPost.mainImage}
-                alt={featuredPost.title}
-                width={1400}
-                height={800}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
-                priority={false}
-              />
-            </div>
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-white/95 via-white/70 to-transparent dark:from-black/90 dark:via-black/60 sm:h-64" />
-            <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
-              {featuredPost.categories?.[0] && (
-                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {featuredPost.categories[0]}
-                </div>
-              )}
-              <h2 className="mt-2 text-3xl font-semibold text-gray-900 transition group-hover:text-[var(--accent-primary)] dark:text-white dark:group-hover:text-[var(--accent-primary)] sm:text-4xl">
-                {featuredPost.title}
-              </h2>
-              <div className="mt-3 flex items-center gap-3 text-sm text-gray-800 dark:text-gray-200">
-                {featuredPost.author?.image && (
-                  <Image
-                    src={featuredPost.author.image}
-                    alt={featuredPost.author.name || 'Author'}
-                    width={28}
-                    height={28}
-                    className="h-7 w-7 rounded-full object-cover"
-                  />
-                )}
-                {featuredPost.author?.name && (
-                  <span>{featuredPost.author.name}</span>
-                )}
-                {featuredPost.author?.name && featuredDate && <span>·</span>}
-                {featuredDate && featuredPost.publishedAt && (
-                  <time dateTime={featuredPost.publishedAt}>
-                    {featuredDate}
-                  </time>
-                )}
-              </div>
+    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <nav className="mb-6" aria-label="Breadcrumb">
+          <ol className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <li className="flex items-center gap-2">
               <Link
-                href={`/blog/${featuredPost.slug.current}`}
-                className="absolute bottom-6 right-6 inline-flex h-11 w-11 items-center justify-center rounded-full bg-[var(--accent-primary)] text-white opacity-0 transition group-hover:opacity-100 hover:brightness-110"
-                aria-label={featuredPost.title}
+                href="/blog"
+                className="transition hover:text-[var(--accent-primary)] hover:underline underline-offset-4"
               >
-                <span aria-hidden="true">↗</span>
+                {tNav('blog')}
               </Link>
-            </div>
-          </article>
-        </section>
-      )}
-      <div className="mt-12">
-        <BlogCategoryGrid posts={restPosts} />
-      </div>
-      {!posts.length && (
-        <p className="text-center text-gray-500 mt-10">{t('noPosts')}</p>
-      )}
-    </main>
+              <span>&gt;</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-[var(--accent-primary)]" aria-current="page">
+                {categoryDisplay}
+              </span>
+            </li>
+          </ol>
+        </nav>
+        <h1 className="text-4xl font-bold mb-4 text-left">
+          {categoryDisplay}
+        </h1>
+        {featuredPost?.mainImage && (
+          <section className="mt-10">
+            <article className="group relative overflow-hidden rounded-3xl bg-white dark:bg-black">
+              <div className="h-[320px] w-full overflow-hidden sm:h-[380px] md:h-[450px] lg:h-[618px] max-h-[65vh]">
+                <Image
+                  src={featuredPost.mainImage}
+                  alt={featuredPost.title}
+                  width={1400}
+                  height={800}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                  priority={false}
+                />
+              </div>
+              <div className="pointer-events-none absolute inset-x-0 bottom-0 h-56 bg-gradient-to-t from-white/95 via-white/70 to-transparent dark:from-black/90 dark:via-black/60 sm:h-64" />
+              <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
+                {featuredPost.categories?.[0] && (
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    {featuredPost.categories[0]}
+                  </div>
+                )}
+                <h2 className="mt-2 text-3xl font-semibold text-gray-900 transition group-hover:text-[var(--accent-primary)] dark:text-white dark:group-hover:text-[var(--accent-primary)] sm:text-4xl">
+                  {featuredPost.title}
+                </h2>
+                <div className="mt-3 flex items-center gap-3 text-sm text-gray-800 dark:text-gray-200">
+                  {featuredPost.author?.image && (
+                    <Image
+                      src={featuredPost.author.image}
+                      alt={featuredPost.author.name || 'Author'}
+                      width={28}
+                      height={28}
+                      className="h-7 w-7 rounded-full object-cover"
+                    />
+                  )}
+                  {featuredPost.author?.name && (
+                    <span>{featuredPost.author.name}</span>
+                  )}
+                  {featuredPost.author?.name && featuredDate && <span>·</span>}
+                  {featuredDate && featuredPost.publishedAt && (
+                    <time dateTime={featuredPost.publishedAt}>
+                      {featuredDate}
+                    </time>
+                  )}
+                </div>
+              </div>
+              <FeaturedPostCtaButton
+                href={`/blog/${featuredPost.slug.current}`}
+                label={featuredPost.title || 'Read more'}
+                className="!absolute !bottom-6 !right-6 z-10 h-11 w-11 rounded-full bg-[var(--accent-primary)] text-white opacity-0 shadow-sm transition group-hover:opacity-100 focus-visible:opacity-100 group-focus-within:opacity-100"
+              />
+            </article>
+          </section>
+        )}
+        <div className="mt-12">
+          <BlogCategoryGrid posts={restPosts} />
+        </div>
+        {!posts.length && (
+          <p className="text-center text-gray-500 mt-10">{t('noPosts')}</p>
+        )}
+      </main>
+    </DynamicGridBackground>
   );
 }
 
diff --git a/frontend/app/[locale]/blog/page.tsx b/frontend/app/[locale]/blog/page.tsx
index 67c9e354..caddd764 100644
--- a/frontend/app/[locale]/blog/page.tsx
+++ b/frontend/app/[locale]/blog/page.tsx
@@ -3,6 +3,8 @@ import { unstable_noStore as noStore } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 import { client } from '@/client';
 import BlogFilters from '@/components/blog/BlogFilters';
+import { BlogPageHeader } from '@/components/blog/BlogPageHeader';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 
 export const revalidate = 0;
 
@@ -22,12 +24,18 @@ export async function generateMetadata({
 
 export default async function BlogPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ locale: string }>;
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   noStore();
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'blog' });
+  const sp = searchParams ? await searchParams : undefined;
+  const authorParam =
+    typeof sp?.author === 'string' ? sp.author.trim() : '';
+  const hasAuthorFilter = authorParam.length > 0;
 
   const posts = await client.withConfig({ useCdn: false }).fetch(
     groq`
@@ -77,16 +85,17 @@ export default async function BlogPage({
   const featuredPost = posts?.[0];
 
   return (
-    <main className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      <h1 className="text-4xl font-bold mb-4 text-center">{t('title')}</h1>
-      <p className="mx-auto max-w-2xl text-center text-base text-gray-500 dark:text-gray-400">
-        {t('subtitle')}
-      </p>
-      <BlogFilters
-        posts={posts}
-        categories={categories}
-        featuredPost={featuredPost}
-      />
-    </main>
+    <DynamicGridBackground className="bg-gray-50 transition-colors duration-300 dark:bg-transparent py-10">
+      <main className="relative z-10 mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        {!hasAuthorFilter && (
+          <BlogPageHeader title={t('title')} subtitle={t('subtitle')} />
+        )}
+        <BlogFilters
+          posts={posts}
+          categories={categories}
+          featuredPost={featuredPost}
+        />
+      </main>
+    </DynamicGridBackground>
   );
 }
diff --git a/frontend/app/[locale]/not-found.tsx b/frontend/app/[locale]/not-found.tsx
deleted file mode 100644
index cc27de5c..00000000
--- a/frontend/app/[locale]/not-found.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const metadata = {
-  title: "404 | DevLovers",
-  description: "The page you are looking for does not exist on DevLovers.",
-};
-
-export default function NotFound() {
-  return <h1>404 — Page not found 😢</h1>;
-}
diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
index c7e1ee1c..072e55c3 100644
--- a/frontend/app/[locale]/page.tsx
+++ b/frontend/app/[locale]/page.tsx
@@ -1,5 +1,5 @@
 import { getTranslations } from 'next-intl/server';
-import HeroSection from '@/components/shared/HeroSection';
+import HeroSection from '@/components/home/HeroSection';
 
 export async function generateMetadata({
   params,
diff --git a/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx b/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
index b575bd6d..1f00101b 100644
--- a/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/[id]/RefundButton.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import { useId, useState, useTransition } from 'react';
+import { useTranslations } from 'next-intl';
 
 type Props = {
   orderId: string;
@@ -10,6 +11,7 @@ type Props = {
 
 export function RefundButton({ orderId, disabled }: Props) {
   const router = useRouter();
+  const t = useTranslations('shop.admin.refund');
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<string | null>(null);
   const errorId = useId();
@@ -59,13 +61,9 @@ export function RefundButton({ orderId, disabled }: Props) {
         aria-busy={isPending}
         aria-describedby={error ? errorId : undefined}
         className="rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
-        title={
-          disabled
-            ? 'Refund is only available for paid Stripe orders'
-            : undefined
-        }
+        title={disabled ? t('onlyForPaid') : undefined}
       >
-        {isPending ? 'Refunding…' : 'Refund'}
+        {isPending ? t('refunding') : t('refund')}
       </button>
 
       {error ? (
diff --git a/frontend/app/[locale]/shop/admin/orders/page.tsx b/frontend/app/[locale]/shop/admin/orders/page.tsx
index 40efe166..5cf475e6 100644
--- a/frontend/app/[locale]/shop/admin/orders/page.tsx
+++ b/frontend/app/[locale]/shop/admin/orders/page.tsx
@@ -1,4 +1,5 @@
 import { Link } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
 
 import { getAdminOrdersPage } from '@/db/queries/shop/admin-orders';
 import {
@@ -47,6 +48,7 @@ export default async function AdminOrdersPage({
 
   const { locale } = await params;
   const sp = await searchParams;
+  const t = await getTranslations('shop.admin.orders');
   const csrfToken = issueCsrfToken('admin:orders:reconcile-stale');
 
   const page = parsePage(sp.page);
@@ -74,7 +76,7 @@ export default async function AdminOrdersPage({
       itemCount: order.itemCount,
       paymentProvider: order.paymentProvider ?? '-',
       viewHref: `/shop/admin/orders/${order.id}`,
-      viewAriaLabel: `View order ${order.id}`,
+      viewAriaLabel: t('viewOrder', { id: order.id }),
     };
   });
 
@@ -91,7 +93,7 @@ export default async function AdminOrdersPage({
             id="admin-orders-title"
             className="text-2xl font-bold text-foreground"
           >
-            Admin · Orders
+            {t('title')}
           </h1>
 
           <form action="/api/shop/admin/orders/reconcile-stale" method="post">
@@ -100,17 +102,17 @@ export default async function AdminOrdersPage({
               type="submit"
               className="inline-flex w-full items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary sm:w-auto"
             >
-              Reconcile stale
+              {t('reconcileStale')}
             </button>
           </form>
         </header>
 
-        <section className="mt-6" aria-label="Orders list">
+        <section className="mt-6" aria-label={t('listCaption')}>
           {/* Mobile cards */}
           <div className="md:hidden">
             {viewModels.length === 0 ? (
               <div className="rounded-md border border-border p-4 text-sm text-muted-foreground">
-                No orders yet.
+                {t('empty')}
               </div>
             ) : (
               <ul className="space-y-3">
@@ -138,12 +140,12 @@ export default async function AdminOrdersPage({
 
                     <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                       <div>
-                        <dt className="text-muted-foreground">Items</dt>
+                        <dt className="text-muted-foreground">{t('table.items')}</dt>
                         <dd className="text-foreground">{vm.itemCount}</dd>
                       </div>
 
                       <div className="min-w-0">
-                        <dt className="text-muted-foreground">Provider</dt>
+                        <dt className="text-muted-foreground">{t('table.provider')}</dt>
                         <dd
                           className="truncate text-foreground"
                           title={vm.paymentProvider}
@@ -153,7 +155,7 @@ export default async function AdminOrdersPage({
                       </div>
 
                       <div className="col-span-2">
-                        <dt className="text-muted-foreground">Order ID</dt>
+                        <dt className="text-muted-foreground">{t('table.orderId')}</dt>
                         <dd
                           className="break-all font-mono text-[11px] text-muted-foreground"
                           title={vm.id}
@@ -169,7 +171,7 @@ export default async function AdminOrdersPage({
                         className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
                         aria-label={vm.viewAriaLabel}
                       >
-                        View
+                        {t('actions.view')}
                       </Link>
                     </div>
                   </li>
@@ -182,7 +184,7 @@ export default async function AdminOrdersPage({
           <div className="hidden md:block">
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-border text-sm">
-                <caption className="sr-only">Orders list</caption>
+                <caption className="sr-only">{t('listCaption')}</caption>
 
                 <thead className="bg-muted/50">
                   <tr>
@@ -190,43 +192,43 @@ export default async function AdminOrdersPage({
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Created
+                      {t('table.created')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Status
+                      {t('table.status')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Total
+                      {t('table.total')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Items
+                      {t('table.items')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Provider
+                      {t('table.provider')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Order ID
+                      {t('table.orderId')}
                     </th>
                     <th
                       scope="col"
                       className="px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Actions
+                      {t('table.actions')}
                     </th>
                   </tr>
                 </thead>
@@ -238,7 +240,7 @@ export default async function AdminOrdersPage({
                         className="px-3 py-6 text-muted-foreground"
                         colSpan={7}
                       >
-                        No orders yet.
+                        {t('empty')}
                       </td>
                     </tr>
                   ) : (
@@ -276,7 +278,7 @@ export default async function AdminOrdersPage({
                             className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
                             aria-label={vm.viewAriaLabel}
                           >
-                            View
+                            {t('actions.view')}
                           </Link>
                         </td>
                       </tr>
diff --git a/frontend/app/[locale]/shop/admin/page.tsx b/frontend/app/[locale]/shop/admin/page.tsx
index e9a771cf..1f980916 100644
--- a/frontend/app/[locale]/shop/admin/page.tsx
+++ b/frontend/app/[locale]/shop/admin/page.tsx
@@ -1,5 +1,6 @@
 // frontend/app/[locale]/shop/admin/page.tsx
 import { Link } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
 
 import { ShopAdminTopbar } from '@/components/shop/admin/shop-admin-topbar';
 import { guardShopAdminPage } from '@/lib/auth/guard-shop-admin-page';
@@ -8,6 +9,7 @@ export const dynamic = 'force-dynamic';
 
 export default async function ShopAdminHomePage() {
   await guardShopAdminPage();
+  const t = await getTranslations('shop.admin.page');
 
   return (
     <>
@@ -22,10 +24,10 @@ export default async function ShopAdminHomePage() {
             id="shop-admin-title"
             className="text-2xl font-bold text-foreground"
           >
-            Shop Admin
+            {t('title')}
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            Administrative tools for the merch shop.
+            {t('description')}
           </p>
         </header>
 
@@ -37,10 +39,10 @@ export default async function ShopAdminHomePage() {
                 className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50"
               >
                 <div className="text-base font-semibold text-foreground">
-                  Products
+                  {t('productsSection.title')}
                 </div>
                 <div className="mt-1 text-sm text-muted-foreground">
-                  Create, edit, activate, feature.
+                  {t('productsSection.description')}
                 </div>
               </Link>
             </li>
@@ -51,10 +53,10 @@ export default async function ShopAdminHomePage() {
                 className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50"
               >
                 <div className="text-base font-semibold text-foreground">
-                  Orders
+                  {t('ordersSection.title')}
                 </div>
                 <div className="mt-1 text-sm text-muted-foreground">
-                  Review and manage orders.
+                  {t('ordersSection.description')}
                 </div>
               </Link>
             </li>
diff --git a/frontend/app/[locale]/shop/admin/products/page.tsx b/frontend/app/[locale]/shop/admin/products/page.tsx
index fe910531..ee1fa46e 100644
--- a/frontend/app/[locale]/shop/admin/products/page.tsx
+++ b/frontend/app/[locale]/shop/admin/products/page.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/db/schema';
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { parsePage } from '@/lib/pagination';
+import { getTranslations } from 'next-intl/server';
 
 export const dynamic = 'force-dynamic';
 
@@ -37,6 +38,7 @@ export default async function AdminProductsPage({
 
   const { locale } = await params;
   const sp = await searchParams;
+  const t = await getTranslations('shop.admin.products');
 
   const page = parsePage(sp.page);
   const offset = (page - 1) * PAGE_SIZE;
@@ -102,23 +104,23 @@ export default async function AdminProductsPage({
             id="admin-products-title"
             className="text-2xl font-bold text-foreground"
           >
-            Admin · Products
+            {t('title')}
           </h1>
 
           <Link
             href="/shop/admin/products/new"
             className="inline-flex items-center justify-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
           >
-            New product
+            {t('newProduct')}
           </Link>
         </header>
 
-        <section className="mt-6" aria-label="Products list">
+        <section className="mt-6" aria-label={t('listCaption')}>
           {/* Mobile cards */}
           <div className="md:hidden">
             {rows.length === 0 ? (
               <div className="rounded-md border border-border p-4 text-sm text-muted-foreground">
-                No products yet.
+                {t('empty')}
               </div>
             ) : (
               <ul className="space-y-3">
@@ -157,7 +159,7 @@ export default async function AdminProductsPage({
 
                       <dl className="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">Category</dt>
+                          <dt className="text-muted-foreground">{t('table.category')}</dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.category ?? '-'}
@@ -167,7 +169,7 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div className="min-w-0">
-                          <dt className="text-muted-foreground">Type</dt>
+                          <dt className="text-muted-foreground">{t('table.type')}</dt>
                           <dd
                             className="truncate text-foreground"
                             title={row.type ?? '-'}
@@ -177,31 +179,31 @@ export default async function AdminProductsPage({
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">Stock</dt>
+                          <dt className="text-muted-foreground">{t('table.stock')}</dt>
                           <dd className="text-foreground">{row.stock}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">Badge</dt>
+                          <dt className="text-muted-foreground">{t('table.badge')}</dt>
                           <dd className="text-foreground">{badge}</dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">Active</dt>
+                          <dt className="text-muted-foreground">{t('table.active')}</dt>
                           <dd className="text-foreground">
-                            {row.isActive ? 'Yes' : 'No'}
+                            {row.isActive ? t('actions.yes') : t('actions.no')}
                           </dd>
                         </div>
 
                         <div>
-                          <dt className="text-muted-foreground">Featured</dt>
+                          <dt className="text-muted-foreground">{t('table.featured')}</dt>
                           <dd className="text-foreground">
-                            {row.isFeatured ? 'Yes' : 'No'}
+                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
                           </dd>
                         </div>
 
                         <div className="col-span-2">
-                          <dt className="text-muted-foreground">Created</dt>
+                          <dt className="text-muted-foreground">{t('table.created')}</dt>
                           <dd className="text-foreground">
                             {formatDate(row.createdAt, locale)}
                           </dd>
@@ -212,17 +214,17 @@ export default async function AdminProductsPage({
                         <Link
                           href={`/shop/products/${row.slug}`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={`View product ${row.title}`}
+                          aria-label={t('actions.viewProduct', { title: row.title })}
                         >
-                          View
+                          {t('actions.view')}
                         </Link>
 
                         <Link
                           href={`/shop/admin/products/${row.id}/edit`}
                           className="inline-flex items-center justify-center rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                          aria-label={`Edit product ${row.title}`}
+                          aria-label={t('actions.editProduct', { title: row.title })}
                         >
-                          Edit
+                          {t('actions.edit')}
                         </Link>
 
                         <AdminProductStatusToggle
@@ -250,7 +252,7 @@ export default async function AdminProductsPage({
           <div className="hidden md:block">
             <div className="overflow-x-auto">
               <table className="w-full table-fixed divide-y divide-border text-sm">
-                <caption className="sr-only">Products list</caption>
+                <caption className="sr-only">{t('listCaption')}</caption>
 
                 <thead className="bg-muted/50">
                   <tr>
@@ -258,67 +260,67 @@ export default async function AdminProductsPage({
                       scope="col"
                       className="w-[20%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Title
+                      {t('table.title')}
                     </th>
                     <th
                       scope="col"
                       className="w-[18%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Slug
+                      {t('table.slug')}
                     </th>
                     <th
                       scope="col"
                       className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Price
+                      {t('table.price')}
                     </th>
                     <th
                       scope="col"
                       className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Category
+                      {t('table.category')}
                     </th>
                     <th
                       scope="col"
                       className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Type
+                      {t('table.type')}
                     </th>
                     <th
                       scope="col"
                       className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Stock
+                      {t('table.stock')}
                     </th>
                     <th
                       scope="col"
                       className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Badge
+                      {t('table.badge')}
                     </th>
                     <th
                       scope="col"
                       className="w-[5%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Active
+                      {t('table.active')}
                     </th>
                     <th
                       scope="col"
                       className="w-[6%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Featured
+                      {t('table.featured')}
                     </th>
                     <th
                       scope="col"
                       className="w-[8%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Created
+                      {t('table.created')}
                     </th>
                     <th
                       scope="col"
                       className="w-[9%] px-3 py-2 text-left font-semibold text-foreground"
                     >
-                      Actions
+                      {t('table.actions')}
                     </th>
                   </tr>
                 </thead>
@@ -371,13 +373,13 @@ export default async function AdminProductsPage({
 
                         <td className="whitespace-nowrap px-3 py-2">
                           <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
-                            {row.isActive ? 'Yes' : 'No'}
+                            {row.isActive ? t('actions.yes') : t('actions.no')}
                           </span>
                         </td>
 
                         <td className="whitespace-nowrap px-3 py-2">
                           <span className="inline-flex rounded-full bg-muted px-2 py-1 text-xs font-medium text-foreground">
-                            {row.isFeatured ? 'Yes' : 'No'}
+                            {row.isFeatured ? t('actions.yes') : t('actions.no')}
                           </span>
                         </td>
 
@@ -390,17 +392,17 @@ export default async function AdminProductsPage({
                             <Link
                               href={`/shop/products/${row.slug}`}
                               className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={`View product ${row.title}`}
+                              aria-label={t('actions.viewProduct', { title: row.title })}
                             >
-                              View
+                              {t('actions.view')}
                             </Link>
 
                             <Link
                               href={`/shop/admin/products/${row.id}/edit`}
                               className="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary"
-                              aria-label={`Edit product ${row.title}`}
+                              aria-label={t('actions.editProduct', { title: row.title })}
                             >
-                              Edit
+                              {t('actions.edit')}
                             </Link>
 
                             <AdminProductStatusToggle
@@ -428,7 +430,7 @@ export default async function AdminProductsPage({
                         className="px-3 py-6 text-muted-foreground"
                         colSpan={11}
                       >
-                        No products yet.
+                        {t('empty')}
                       </td>
                     </tr>
                   ) : null}
diff --git a/frontend/app/[locale]/shop/cart/page.tsx b/frontend/app/[locale]/shop/cart/page.tsx
index 53007ac1..5f22926d 100644
--- a/frontend/app/[locale]/shop/cart/page.tsx
+++ b/frontend/app/[locale]/shop/cart/page.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
 import { useRouter } from '@/i18n/routing';
+import { useTranslations } from 'next-intl';
 
 import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react';
 
@@ -15,6 +16,8 @@ import { formatMoney } from '@/lib/shop/currency';
 export default function CartPage() {
   const { cart, updateQuantity, removeFromCart } = useCart();
   const router = useRouter();
+  const t = useTranslations('shop.cart');
+  const tColors = useTranslations('shop.catalog.colors');
   const [isCheckingOut, setIsCheckingOut] = useState(false);
   const [checkoutError, setCheckoutError] = useState<string | null>(null);
   const [createdOrderId, setCreatedOrderId] = useState<string | null>(null);
@@ -23,6 +26,16 @@ export default function CartPage() {
   const locale = params.locale ?? 'en';
   const shopBase = '/shop';
 
+  const translateColor = (color: string | null | undefined): string | null => {
+    if (!color) return null;
+    const colorSlug = color.toLowerCase();
+    try {
+      return tColors(colorSlug);
+    } catch {
+      return color; 
+    }
+  };
+
   async function handleCheckout() {
     setCheckoutError(null);
     setCreatedOrderId(null);
@@ -112,16 +125,16 @@ export default function CartPage() {
             aria-hidden="true"
           />
           <h1 className="mt-6 text-3xl font-bold tracking-tight text-foreground">
-            Your cart is empty
+            {t('empty')}
           </h1>
           <p className="mt-4 text-muted-foreground">
-            Looks like you haven&apos;t added any items to your cart yet.
+            {t('emptyDescription')}
           </p>
           <Link
             href={`/shop/products`}
             className="mt-8 inline-flex items-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90"
           >
-            Start shopping
+            {t('startShopping')}
           </Link>
         </div>
       </main>
@@ -131,11 +144,11 @@ export default function CartPage() {
   return (
     <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <h1 className="text-3xl font-bold tracking-tight text-foreground">
-        Your cart
+        {t('title')}
       </h1>
 
       <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_380px]">
-        <section aria-label="Cart items">
+        <section aria-label={t('itemsLabel')}>
           <ul className="space-y-4">
             {cart.removed.length > 0 && (
               <li
@@ -143,8 +156,7 @@ export default function CartPage() {
                 role="status"
                 aria-live="polite"
               >
-                Some items were removed from your cart because they are
-                unavailable or out of stock.
+                {t('alerts.itemsRemoved')}
               </li>
             )}
 
@@ -178,7 +190,7 @@ export default function CartPage() {
 
                         {(item.selectedSize || item.selectedColor) && (
                           <p className="mt-1 text-xs text-muted-foreground">
-                            {[item.selectedColor, item.selectedSize]
+                            {[translateColor(item.selectedColor), item.selectedSize]
                               .filter(Boolean)
                               .join(' / ')}
                           </p>
@@ -195,7 +207,7 @@ export default function CartPage() {
                           )
                         }
                         className="text-muted-foreground transition-colors hover:text-foreground"
-                        aria-label={`Remove ${item.title} from cart`}
+                        aria-label={t('actions.removeItem', { title: item.title })}
                       >
                         <Trash2 className="h-4 w-4" aria-hidden="true" />
                       </button>
@@ -215,7 +227,7 @@ export default function CartPage() {
                           }
                           disabled={item.quantity <= 1}
                           className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
-                          aria-label="Decrease quantity"
+                          aria-label={t('actions.decreaseQty')}
                         >
                           <Minus className="h-3 w-3" aria-hidden="true" />
                         </button>
@@ -236,7 +248,7 @@ export default function CartPage() {
                           }
                           disabled={item.quantity >= item.stock}
                           className="flex h-8 w-8 items-center justify-center rounded border border-border text-foreground transition-colors hover:bg-secondary disabled:opacity-60"
-                          aria-label="Increase quantity"
+                          aria-label={t('actions.increaseQty')}
                         >
                           <Plus className="h-3 w-3" aria-hidden="true" />
                         </button>
@@ -246,7 +258,7 @@ export default function CartPage() {
                             className="ml-3 text-xs text-muted-foreground"
                             role="status"
                           >
-                            Max {item.stock} in stock
+                            {t('actions.maxStock', { stock: item.stock })}
                           </span>
                         )}
                       </div>
@@ -274,12 +286,12 @@ export default function CartPage() {
             id="order-summary"
             className="text-lg font-semibold text-foreground"
           >
-            Order summary
+            {t('summary.heading')}
           </h2>
 
           <div className="mt-6 space-y-4">
             <div className="flex items-center justify-between text-sm">
-              <span className="text-muted-foreground">Subtotal</span>
+              <span className="text-muted-foreground">{t('summary.subtotal')}</span>
               <span className="font-medium text-foreground">
                 {formatMoney(
                   cart.summary.totalAmountMinor,
@@ -290,16 +302,16 @@ export default function CartPage() {
             </div>
 
             <div className="flex items-center justify-between text-sm">
-              <span className="text-muted-foreground">Shipping</span>
+              <span className="text-muted-foreground">{t('summary.shipping')}</span>
               <span className="text-muted-foreground">
-                Calculated at checkout
+                {t('summary.shippingCalc')}
               </span>
             </div>
 
             <div className="border-t border-border pt-4">
               <div className="flex items-center justify-between">
                 <span className="text-base font-semibold text-foreground">
-                  Total
+                  {t('summary.total')}
                 </span>
                 <span className="text-lg font-bold text-foreground">
                   {formatMoney(
@@ -320,12 +332,11 @@ export default function CartPage() {
               className="flex w-full items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-semibold uppercase tracking-wide text-accent-foreground transition-colors hover:bg-accent/90 disabled:opacity-60"
               aria-busy={isCheckingOut}
             >
-              {isCheckingOut ? 'Placing order...' : 'Place order'}
+              {isCheckingOut ? t('checkout.placing') : t('checkout.placeOrder')}
             </button>
 
             <p className="text-center text-xs text-muted-foreground">
-              You&apos;ll either be redirected to secure payment or see
-              confirmation if payment is not required in this environment.
+              {t('checkout.message')}
             </p>
 
             {/* Fallback CTA if navigation fails after order was created */}
@@ -335,7 +346,7 @@ export default function CartPage() {
                   href={`/shop/orders/${encodeURIComponent(createdOrderId)}`}
                   className="text-xs underline underline-offset-4"
                 >
-                  If you are not redirected automatically, open your order
+                  {t('checkout.notRedirected')}
                 </Link>
               </div>
             ) : null}
@@ -357,7 +368,7 @@ export default function CartPage() {
                       )}`}
                       className="text-xs underline underline-offset-4"
                     >
-                      Go to order
+                      {t('checkout.goToOrder')}
                     </Link>
                   </div>
                 ) : null}
diff --git a/frontend/app/[locale]/shop/checkout/error/page.tsx b/frontend/app/[locale]/shop/checkout/error/page.tsx
index b469c0bc..a3f9e6e2 100644
--- a/frontend/app/[locale]/shop/checkout/error/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/error/page.tsx
@@ -1,5 +1,6 @@
 // frontend/app/[locale]/shop/checkout/error/page.tsx
 import { Link } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
 
 import { formatMoney, resolveCurrencyFromLocale } from '@/lib/shop/currency';
 import { OrderNotFoundError } from '@/lib/services/errors';
@@ -33,6 +34,7 @@ export default async function CheckoutErrorPage({
   searchParams?: Promise<SearchParams> | SearchParams;
 }) {
   const { locale } = await params;
+  const t = await getTranslations('shop.checkout');
 
   const resolvedSearchParams: SearchParams | undefined =
     searchParams && typeof (searchParams as any).then === 'function'
@@ -52,10 +54,10 @@ export default async function CheckoutErrorPage({
             id="checkout-error-title"
             className="text-2xl font-bold text-foreground"
           >
-            Missing order id
+            {t('errors.missingOrderId')}
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            We couldn’t identify your order.
+            {t('errors.missingOrderIdDescription')}
           </p>
 
           <nav
@@ -66,13 +68,13 @@ export default async function CheckoutErrorPage({
               href="/shop/cart"
               className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
             >
-              Back to cart
+              {t('actions.backToCart')}
             </Link>
             <Link
               href="/shop/products"
               className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
-              Continue shopping
+              {t('actions.continueShopping')}
             </Link>
           </nav>
         </section>
@@ -96,10 +98,10 @@ export default async function CheckoutErrorPage({
               id="checkout-error-title"
               className="text-2xl font-bold text-foreground"
             >
-              Order not found
+              {t('errors.orderNotFound')}
             </h1>
             <p className="mt-2 text-sm text-muted-foreground">
-              We couldn’t find this order.
+              {t('errors.orderNotFoundDescription')}
             </p>
 
             <nav
@@ -110,13 +112,13 @@ export default async function CheckoutErrorPage({
                 href="/shop/cart"
                 className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
               >
-                Back to cart
+                {t('actions.backToCart')}
               </Link>
               <Link
                 href="/shop/products"
                 className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
               >
-                Continue shopping
+                {t('actions.continueShopping')}
               </Link>
             </nav>
           </section>
@@ -134,10 +136,10 @@ export default async function CheckoutErrorPage({
             id="checkout-error-title"
             className="text-2xl font-bold text-foreground"
           >
-            Unable to load order
+            {t('errors.unableToLoad')}
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
-            Please try again later.
+            {t('errors.tryAgainLater')}
           </p>
         </section>
       </main>
@@ -165,12 +167,12 @@ export default async function CheckoutErrorPage({
             id="checkout-error-title"
             className="text-3xl font-bold text-foreground"
           >
-            {isFailed ? 'Payment failed' : 'Payment status unclear'}
+            {isFailed ? t('error.paymentFailed') : t('error.paymentUnclear')}
           </h1>
           <p className="mt-2 text-sm text-muted-foreground">
             {isFailed
-              ? 'The payment for this order was not completed. You can try again or contact support.'
-              : 'We could not confirm a payment failure for this order.'}
+              ? t('error.paymentFailedDescription')
+              : t('error.paymentUnclearDescription')}
           </p>
         </header>
 
@@ -180,14 +182,14 @@ export default async function CheckoutErrorPage({
         >
           <dl className="space-y-2">
             <div className="flex items-center justify-between gap-4">
-              <dt className="text-muted-foreground">Order</dt>
+              <dt className="text-muted-foreground">{t('error.orderLabel')}</dt>
               <dd className="font-mono text-xs text-muted-foreground">
                 {order.id}
               </dd>
             </div>
 
             <div className="flex items-center justify-between gap-4">
-              <dt className="text-muted-foreground">Total</dt>
+              <dt className="text-muted-foreground">{t('error.totalLabel')}</dt>
               <dd className="font-semibold text-foreground">
                 {totalMinor == null
                   ? '-'
@@ -196,7 +198,7 @@ export default async function CheckoutErrorPage({
             </div>
 
             <div className="flex items-center justify-between gap-4">
-              <dt className="text-muted-foreground">Status</dt>
+              <dt className="text-muted-foreground">{t('error.statusLabel')}</dt>
               <dd className="font-semibold capitalize text-foreground">
                 {order.paymentStatus}
               </dd>
@@ -209,7 +211,7 @@ export default async function CheckoutErrorPage({
             href="/shop/cart"
             className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
           >
-            Back to cart
+            {t('actions.backToCart')}
           </Link>
 
           {isFailed && order.id ? (
@@ -217,7 +219,7 @@ export default async function CheckoutErrorPage({
               href={`/shop/checkout/payment/${order.id}`}
               className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
-              Retry payment
+              {t('error.retryPayment')}
             </Link>
           ) : null}
 
@@ -225,7 +227,7 @@ export default async function CheckoutErrorPage({
             href="/shop/products"
             className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
           >
-            Continue shopping
+            {t('actions.continueShopping')}
           </Link>
         </nav>
       </section>
diff --git a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
index e8c42322..a982b1cf 100644
--- a/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/payment/[orderId]/page.tsx
@@ -8,6 +8,7 @@ import { orderIdParamSchema } from '@/lib/validation/shop';
 import { getStripeEnv } from '@/lib/env/stripe';
 import { logError } from '@/lib/logging';
 import { ensureStripePaymentIntentForOrder } from '@/lib/services/orders/payment-attempts';
+import { getTranslations } from 'next-intl/server';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -27,16 +28,18 @@ function resolveClientSecret(
   return raw;
 }
 
-function buildStatusMessage(status: string) {
+async function buildStatusMessage(status: string) {
+  const t = await getTranslations('shop.checkout.payment.statusMessages');
+
   if (status === 'paid') {
-    return 'This order is already paid.';
+    return t('alreadyPaid');
   }
 
   if (status === 'failed') {
-    return 'The previous payment attempt failed. Please try again.';
+    return t('previousFailed');
   }
 
-  return 'Complete payment to finish your order.';
+  return t('completePayment');
 }
 
 function shouldClearCart(
@@ -91,26 +94,28 @@ export default async function PaymentPage(props: PaymentPageProps) {
   const { locale } = params;
   const shopBase = `/shop`;
 
+  const t = await getTranslations('shop.checkout');
+
   const orderId = getOrderId(params);
 
   if (!orderId) {
     return (
       <PageShell
-        title="Invalid order"
-        description="We couldn't identify your order. Please return to your cart."
+        title={t('errors.invalidOrder')}
+        description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
           <Link
             href={`${shopBase}/cart`}
             className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
           >
-            Go to cart
+            {t('actions.goToCart')}
           </Link>
           <Link
             href={`${shopBase}/products`}
             className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
           >
-            Continue shopping
+            {t('actions.continueShopping')}
           </Link>
         </nav>
       </PageShell>
@@ -125,8 +130,8 @@ export default async function PaymentPage(props: PaymentPageProps) {
     if (error instanceof OrderNotFoundError) {
       return (
         <PageShell
-          title="Order not found"
-          description="We couldn't find this order. It may have been removed or never existed."
+          title={t('errors.orderNotFound')}
+          description={t('notFoundOrder.message')}
         >
           <nav
             className="mt-6 flex justify-center gap-3"
@@ -136,13 +141,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
               href={`${shopBase}/cart`}
               className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
             >
-              Go to cart
+              {t('actions.goToCart')}
             </Link>
             <Link
               href={`${shopBase}/products`}
               className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
-              Continue shopping
+              {t('actions.continueShopping')}
             </Link>
           </nav>
         </PageShell>
@@ -151,8 +156,8 @@ export default async function PaymentPage(props: PaymentPageProps) {
 
     return (
       <PageShell
-        title="Unable to load order"
-        description="Please try again later."
+        title={t('errors.unableToLoad')}
+        description={t('errors.tryAgainLater')}
       />
     );
   }
@@ -193,8 +198,8 @@ export default async function PaymentPage(props: PaymentPageProps) {
       <>
         <ClearCartOnMount enabled={clearCart} />
         <PageShell
-          title="Order already paid"
-          description="We've already confirmed payment for this order."
+          title={t('payment.statusMessages.alreadyPaid')}
+          description={t('success.paymentConfirmed')}
         >
           <nav
             className="mt-6 flex justify-center gap-3"
@@ -204,13 +209,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
               href={`${shopBase}/checkout/success?orderId=${order.id}${cc}`}
               className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
-              View confirmation
+              {t('payment.viewConfirmation')}
             </Link>
             <Link
               href={`${shopBase}/products`}
               className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
             >
-              Continue shopping
+              {t('payment.continueShopping')}
             </Link>
           </nav>
         </PageShell>
@@ -229,13 +234,13 @@ export default async function PaymentPage(props: PaymentPageProps) {
 
       <header className="mb-6">
         <p className="text-sm font-semibold uppercase tracking-wide text-accent">
-          Secure checkout
+          {t('payment.title')}
         </p>
         <h1 id="pay-order-title" className="text-3xl font-bold text-foreground">
-          Pay for order #{order.id.slice(0, 8)}
+          {t('payment.payForOrder', { orderId: order.id.slice(0, 8) })}
         </h1>
         <p className="mt-2 text-sm text-muted-foreground">
-          {buildStatusMessage(order.paymentStatus)}
+          {await buildStatusMessage(order.paymentStatus)}
         </p>
       </header>
 
@@ -248,15 +253,15 @@ export default async function PaymentPage(props: PaymentPageProps) {
           aria-label="Payment details"
         >
           <h2 className="text-lg font-semibold text-foreground">
-            Payment details
+            {t('payment.paymentDetails')}
           </h2>
           <p className="mt-2 text-sm text-muted-foreground">
-            Complete payment to place your order.
+            {t('payment.completePayment')}
           </p>
 
           <div className="mt-6 rounded-md border border-border bg-muted/30 p-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Amount due</span>
+              <span className="text-sm text-muted-foreground">{t('payment.amountDue')}</span>
               <span className="text-xl font-bold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </span>
@@ -284,22 +289,22 @@ export default async function PaymentPage(props: PaymentPageProps) {
           aria-label="Order summary"
         >
           <h2 className="text-lg font-semibold text-foreground">
-            Order summary
+            {t('payment.orderSummary')}
           </h2>
 
           <dl className="mt-4 space-y-3 text-sm text-muted-foreground">
             <div className="flex items-center justify-between">
-              <dt>Items</dt>
+              <dt>{t('payment.items')}</dt>
               <dd className="font-medium text-foreground">{itemsCount}</dd>
             </div>
             <div className="flex items-center justify-between">
-              <dt>Total amount</dt>
+              <dt>{t('payment.totalAmount')}</dt>
               <dd className="font-semibold text-foreground">
                 {formatMoney(order.totalAmountMinor, order.currency, locale)}
               </dd>
             </div>
             <div className="flex items-center justify-between">
-              <dt>Status</dt>
+              <dt>{t('payment.status')}</dt>
               <dd className="font-semibold capitalize text-foreground">
                 {order.paymentStatus}
               </dd>
diff --git a/frontend/app/[locale]/shop/checkout/success/page.tsx b/frontend/app/[locale]/shop/checkout/success/page.tsx
index 44cac05f..67051968 100644
--- a/frontend/app/[locale]/shop/checkout/success/page.tsx
+++ b/frontend/app/[locale]/shop/checkout/success/page.tsx
@@ -1,5 +1,6 @@
 // frontend/app/[locale]/shop/checkout/success/page.tsx
 import { Link } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
 
 import OrderStatusAutoRefresh from './OrderStatusAutoRefresh';
 import { ClearCartOnMount } from '@/components/shop/clear-cart-on-mount';
@@ -77,26 +78,27 @@ export default async function CheckoutSuccessPage({
   const { locale } = await params;
   const resolvedParams = await searchParams;
   const clearCart = shouldClearCart(resolvedParams);
+  const t = await getTranslations('shop.checkout');
 
   const orderId = parseOrderId(resolvedParams);
   if (!orderId) {
     return (
       <CheckoutShell
-        title="Missing order id"
-        description="We couldn't identify your order. Please return to your cart or browse products."
+        title={t('errors.missingOrderId')}
+        description={t('missingOrder.message')}
       >
         <nav className="mt-6 flex justify-center gap-3" aria-label="Next steps">
           <Link
             href="/shop/products"
             className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
           >
-            Back to products
+            {t('actions.backToProducts')}
           </Link>
           <Link
             href="/shop/cart"
             className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
           >
-            Go to cart
+            {t('actions.goToCart')}
           </Link>
         </nav>
       </CheckoutShell>
@@ -112,8 +114,8 @@ export default async function CheckoutSuccessPage({
     if (error instanceof OrderNotFoundError) {
       return (
         <CheckoutShell
-          title="Order not found"
-          description="We couldn't find this order. It may have been removed or never existed."
+          title={t('errors.orderNotFound')}
+          description={t('notFoundOrder.message')}
         >
           <nav
             className="mt-6 flex justify-center gap-3"
@@ -123,13 +125,13 @@ export default async function CheckoutSuccessPage({
               href="/shop/products"
               className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
             >
-              Back to products
+              {t('actions.backToProducts')}
             </Link>
             <Link
               href="/shop/cart"
               className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
             >
-              Go to cart
+              {t('actions.goToCart')}
             </Link>
           </nav>
         </CheckoutShell>
@@ -138,8 +140,8 @@ export default async function CheckoutSuccessPage({
 
     return (
       <CheckoutShell
-        title="Unable to load order"
-        description="Please try again later."
+        title={t('errors.unableToLoad')}
+        description={t('errors.tryAgainLater')}
       />
     );
   }
@@ -159,27 +161,26 @@ export default async function CheckoutSuccessPage({
 
       <section className="rounded-lg border border-border bg-card p-8">
         <p className="text-sm font-semibold uppercase tracking-wide text-accent">
-          Thank you for your order
+          {t('success.title')}
         </p>
 
         <h1
           id="order-title"
           className="mt-2 text-3xl font-bold text-foreground"
         >
-          Order #{order.id.slice(0, 8)}
+          {t('success.orderLabel')} #{order.id.slice(0, 8)}
         </h1>
 
         <p className="mt-2 text-sm text-muted-foreground">
-          We&apos;ve received your order.
+          {t('success.received')}
           {order.paymentStatus === 'paid'
-            ? ' Payment has been confirmed.'
-            : ' Payment is still being processed. This page will update automatically.'}
+            ? ` ${t('success.paymentConfirmed')}`
+            : ` ${t('success.paymentProcessing')}`}
         </p>
 
         {paymentsDisabled ? (
           <p className="mt-3 text-sm text-amber-500" role="note">
-            Payments are disabled in this environment. You were not charged for
-            this order.
+            {t('success.paymentsDisabled')}
           </p>
         ) : null}
 
@@ -189,24 +190,24 @@ export default async function CheckoutSuccessPage({
         >
           <div className="rounded-md border border-border bg-muted/40 p-4">
             <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-              Order summary
+              {t('success.orderSummary')}
             </h2>
 
             <dl className="mt-3 space-y-2 text-sm">
               <div className="flex items-center justify-between">
-                <dt className="text-muted-foreground">Total amount</dt>
+                <dt className="text-muted-foreground">{t('success.totalAmount')}</dt>
                 <dd className="font-semibold text-foreground">
                   {formatMoney(totalMinor, order.currency, locale)}
                 </dd>
               </div>
 
               <div className="flex items-center justify-between">
-                <dt className="text-muted-foreground">Items</dt>
+                <dt className="text-muted-foreground">{t('success.items')}</dt>
                 <dd className="font-medium text-foreground">{itemsCount}</dd>
               </div>
 
               <div className="flex items-center justify-between">
-                <dt className="text-muted-foreground">Status</dt>
+                <dt className="text-muted-foreground">{t('success.status')}</dt>
                 <dd className="font-semibold capitalize text-foreground">
                   {order.paymentStatus}
                 </dd>
@@ -220,13 +221,13 @@ export default async function CheckoutSuccessPage({
             href="/shop/products"
             className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold uppercase tracking-wide text-accent-foreground hover:bg-accent/90"
           >
-            Continue shopping
+            {t('success.continueShopping')}
           </Link>
           <Link
             href="/shop/cart"
             className="inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-semibold uppercase tracking-wide text-foreground hover:bg-secondary"
           >
-            View cart
+            {t('success.viewCart')}
           </Link>
         </nav>
       </section>
diff --git a/frontend/app/[locale]/shop/orders/[id]/page.tsx b/frontend/app/[locale]/shop/orders/[id]/page.tsx
index 8849eedc..32f45078 100644
--- a/frontend/app/[locale]/shop/orders/[id]/page.tsx
+++ b/frontend/app/[locale]/shop/orders/[id]/page.tsx
@@ -4,6 +4,7 @@ import { Link } from '@/i18n/routing';
 import { notFound, redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
 import { and, eq } from 'drizzle-orm';
+import { getTranslations } from 'next-intl/server';
 
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
@@ -108,11 +109,12 @@ export default async function OrderDetailPage({
   noStore();
 
   const { locale, id } = await params;
+  const t = await getTranslations('shop.orders.detail');
 
   const user = await getCurrentUser();
   if (!user) {
     redirect(
-      `/${locale}/login?next=${encodeURIComponent(
+      `/${locale}/login?returnTo=${encodeURIComponent(
         `/${locale}/shop/orders/${id}`
       )}`
     );
@@ -207,7 +209,7 @@ export default async function OrderDetailPage({
       <header className="mb-6 flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h1 id="order-heading" className="truncate text-2xl font-semibold">
-            Order
+            {t('title')}
           </h1>
           <div className="mt-1 truncate text-xs opacity-80">{order.id}</div>
         </div>
@@ -220,10 +222,10 @@ export default async function OrderDetailPage({
             className="text-sm underline underline-offset-4"
             href="/shop/orders"
           >
-            My orders
+            {t('myOrders')}
           </Link>
           <Link className="text-sm underline underline-offset-4" href="/shop">
-            Shop
+            {t('shop')}
           </Link>
         </nav>
       </header>
@@ -233,30 +235,30 @@ export default async function OrderDetailPage({
         aria-labelledby="order-summary-heading"
       >
         <h2 id="order-summary-heading" className="sr-only">
-          Order summary
+          {t('orderSummary')}
         </h2>
 
         <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
-            <dt className="text-xs opacity-80">Total</dt>
+            <dt className="text-xs opacity-80">{t('total')}</dt>
             <dd className="text-sm font-medium">{totalFormatted}</dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">Payment status</dt>
+            <dt className="text-xs opacity-80">{t('paymentStatus')}</dt>
             <dd className="text-sm font-medium">
               {String(order.paymentStatus)}
             </dd>
           </div>
 
           <div>
-            <dt className="text-xs opacity-80">Created</dt>
+            <dt className="text-xs opacity-80">{t('created')}</dt>
             <dd className="text-sm">{createdFormatted}</dd>
           </div>
 
           {isAdmin && (
             <div>
-              <dt className="text-xs opacity-80">Provider</dt>
+              <dt className="text-xs opacity-80">{t('provider')}</dt>
               <dd className="text-sm">{String(order.paymentProvider)}</dd>
             </div>
           )}
@@ -265,13 +267,13 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">Payment reference</dt>
+              <dt className="text-xs opacity-80">{t('paymentReference')}</dt>
               <dd className="text-sm break-all">
                 {order.paymentIntentId ?? '—'}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">Idempotency key</dt>
+              <dt className="text-xs opacity-80">{t('idempotencyKey')}</dt>
               <dd className="text-sm break-all">{order.idempotencyKey}</dd>
             </div>
           </dl>
@@ -280,13 +282,13 @@ export default async function OrderDetailPage({
         {isAdmin && (
           <dl className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
-              <dt className="text-xs opacity-80">Stock restored</dt>
+              <dt className="text-xs opacity-80">{t('stockRestored')}</dt>
               <dd className="text-sm">
-                {order.stockRestored ? 'true' : 'false'}
+                {order.stockRestored ? t('yes') : t('no')}
               </dd>
             </div>
             <div>
-              <dt className="text-xs opacity-80">Restocked at</dt>
+              <dt className="text-xs opacity-80">{t('restockedAt')}</dt>
               <dd className="text-sm">{restockedFormatted}</dd>
             </div>
           </dl>
@@ -299,11 +301,11 @@ export default async function OrderDetailPage({
       >
         <div className="border-b p-4">
           <h2 id="order-items-heading" className="text-lg font-semibold">
-            Items
+            {t('items')}
           </h2>
         </div>
 
-        <ul className="divide-y" aria-label="Order items">
+        <ul className="divide-y" aria-label={t('items')}>
           {order.items.map(it => (
             <li key={it.id} className="p-4">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
@@ -316,25 +318,25 @@ export default async function OrderDetailPage({
                   </div>
                   <div className="mt-1 break-all text-xs opacity-80">
                     {it.productSku
-                      ? `SKU: ${it.productSku}`
-                      : `Product: ${it.productId}`}
+                      ? t('sku', { sku: it.productSku })
+                      : t('product', { productId: it.productId })}
                   </div>
                 </div>
 
                 <dl className="flex flex-col items-start gap-1 sm:items-end">
                   <div>
-                    <dt className="sr-only">Quantity</dt>
+                    <dt className="sr-only">{t('quantity')}</dt>
                     <dd className="text-sm">Qty: {it.quantity}</dd>
                   </div>
                   <div>
-                    <dt className="sr-only">Unit price</dt>
+                    <dt className="sr-only">{t('unitPrice')}</dt>
                     <dd className="text-sm opacity-80">
                       Unit:{' '}
                       {safeFormatMoneyMajor(it.unitPrice, currency, locale)}
                     </dd>
                   </div>
                   <div>
-                    <dt className="sr-only">Line total</dt>
+                    <dt className="sr-only">{t('lineTotal')}</dt>
                     <dd className="text-sm font-medium">
                       Line:{' '}
                       {safeFormatMoneyMajor(it.lineTotal, currency, locale)}
diff --git a/frontend/app/[locale]/shop/orders/page.tsx b/frontend/app/[locale]/shop/orders/page.tsx
index 551797b5..5f00dd1b 100644
--- a/frontend/app/[locale]/shop/orders/page.tsx
+++ b/frontend/app/[locale]/shop/orders/page.tsx
@@ -4,6 +4,7 @@ import { Link } from '@/i18n/routing';
 import { redirect } from 'next/navigation';
 import { unstable_noStore as noStore } from 'next/cache';
 import { desc, eq, sql } from 'drizzle-orm';
+import { getTranslations } from 'next-intl/server';
 
 import { db } from '@/db';
 import { orderItems, orders } from '@/db/schema';
@@ -32,25 +33,27 @@ function formatDateTime(d: Date, locale: string) {
   }
 }
 
-function statusLabel(status: PaymentStatus) {
+function statusLabel(
+  status: PaymentStatus,
+  t: Awaited<ReturnType<typeof getTranslations<'shop.orders'>>>
+) {
   switch (status) {
     case 'paid':
-      return 'Paid';
+      return t('paymentStatus.paid');
     case 'pending':
-      return 'Pending';
+      return t('paymentStatus.pending');
     case 'requires_payment':
-      return 'Payment required';
+      return t('paymentStatus.requiresPayment');
     case 'failed':
-      return 'Failed';
+      return t('paymentStatus.failed');
     case 'refunded':
-      return 'Refunded';
+      return t('paymentStatus.refunded');
     default:
       return String(status);
   }
 }
 
 function statusClassName(status: PaymentStatus) {
-  // Neutral “nav hover-ish” look as default; only make failures red.
   switch (status) {
     case 'failed':
       return 'border border-border bg-destructive/10 text-destructive';
@@ -80,15 +83,22 @@ function looksLikeUuid(s: string) {
   );
 }
 
-function buildOrderHeadline(primary: string | null, count: number, id: string) {
-  if (count === 0) return `Order ${shortOrderId(id)} (incomplete)`;
+function buildOrderHeadline(
+  primary: string | null,
+  count: number,
+  id: string,
+  t: Awaited<ReturnType<typeof getTranslations<'shop.orders'>>>
+) {
+  if (count === 0)
+    return t('orderHeadline.incomplete', { id: shortOrderId(id) });
 
   if (primary) {
-    if (count > 1) return `${primary} +${count - 1} more`;
+    if (count > 1)
+      return t('orderHeadline.withMore', { item: primary, count: count - 1 });
     return primary;
   }
 
-  return `Order ${shortOrderId(id)}`;
+  return t('orderHeadline.default', { id: shortOrderId(id) });
 }
 
 export default async function MyOrdersPage({
@@ -99,12 +109,11 @@ export default async function MyOrdersPage({
   noStore();
 
   const { locale } = await params;
+  const t = await getTranslations('shop.orders');
 
   const user = await getCurrentUser();
   if (!user) {
-    redirect(
-      `/login?next=${encodeURIComponent(`/shop/orders`)}`
-    );
+    redirect(`/${locale}/login?returnTo=${encodeURIComponent(`/${locale}/shop/orders`)}`);
   }
 
   let rows: Array<{
@@ -114,7 +123,7 @@ export default async function MyOrdersPage({
     paymentStatus: PaymentStatus;
     createdAt: Date;
     primaryItemLabel: string | null;
-    itemCount: unknown; // neon може повернути bigint/string
+    itemCount: unknown; 
   }> = [];
 
   try {
@@ -126,8 +135,6 @@ export default async function MyOrdersPage({
         paymentStatus: orders.paymentStatus,
         createdAt: orders.createdAt,
 
-        // Беремо "перший" non-null label детерміновано (ORDER BY order_items.id),
-        // без fallback на productId (UUID не повинен ставати назвою).
         primaryItemLabel: sql<string | null>`
           (
             array_agg(
@@ -174,29 +181,29 @@ export default async function MyOrdersPage({
       <header className="mb-6 flex items-start justify-between gap-3">
         <div className="min-w-0">
           <h1 id="my-orders-heading" className="text-2xl font-semibold">
-            My orders
+            {t('title')}
           </h1>
           <p className="mt-1 text-sm text-muted-foreground">
-            Your most recent orders (up to 50).
+            {t('subtitle')}
           </p>
         </div>
 
         <nav aria-label="Orders navigation" className="flex items-center gap-3">
           <Link className="text-sm underline underline-offset-4" href="/shop">
-            Back to shop
+            {t('backToShop')}
           </Link>
         </nav>
       </header>
 
       {rows.length === 0 ? (
         <section className="rounded-md border p-4" aria-label="No orders">
-          <p className="text-sm text-muted-foreground">No orders yet.</p>
+          <p className="text-sm text-muted-foreground">{t('empty.message')}</p>
           <div className="mt-3">
             <Link
               className="text-sm underline underline-offset-4"
               href="/shop/products"
             >
-              Browse products
+              {t('empty.browseProducts')}
             </Link>
           </div>
         </section>
@@ -204,7 +211,7 @@ export default async function MyOrdersPage({
         <section className="rounded-md border" aria-label="Orders list">
           <div className="overflow-x-auto">
             <table className="w-full border-collapse">
-              <caption className="sr-only">List of your orders</caption>
+              <caption className="sr-only">{t('table.caption')}</caption>
 
               <thead className="border-b border-border">
                 <tr>
@@ -212,25 +219,25 @@ export default async function MyOrdersPage({
                     scope="col"
                     className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
                   >
-                    Items
+                    {t('table.items')}
                   </th>
                   <th
                     scope="col"
                     className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
                   >
-                    Date
+                    {t('table.date')}
                   </th>
                   <th
                     scope="col"
                     className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground"
                   >
-                    Status
+                    {t('table.status')}
                   </th>
                   <th
                     scope="col"
                     className="px-4 py-3 text-right text-xs font-semibold text-muted-foreground"
                   >
-                    Total
+                    {t('table.total')}
                   </th>
                 </tr>
               </thead>
@@ -248,7 +255,7 @@ export default async function MyOrdersPage({
                       ? rawPrimary
                       : null;
 
-                  const headline = buildOrderHeadline(primary, count, o.id);
+                  const headline = buildOrderHeadline(primary, count, o.id, t);
 
                   return (
                     <tr
@@ -260,13 +267,13 @@ export default async function MyOrdersPage({
                           href={href}
                           className="block max-w-[24rem] truncate font-medium underline underline-offset-4"
                           title={headline}
-                          aria-label={`Open order ${o.id}`}
+                          aria-label={t('table.openOrder', { id: o.id })}
                         >
                           {headline}
                         </Link>
 
                         <div className="mt-1 text-xs text-muted-foreground">
-                          <span className="sr-only">Order id: </span>
+                          <span className="sr-only">{t('table.orderId')}: </span>
                           <span className="break-all">
                             {shortOrderId(o.id)}
                           </span>
@@ -285,7 +292,7 @@ export default async function MyOrdersPage({
                             o.paymentStatus
                           )}`}
                         >
-                          {statusLabel(o.paymentStatus)}
+                          {statusLabel(o.paymentStatus, t)}
                         </span>
                       </td>
 
diff --git a/frontend/app/[locale]/shop/page.tsx b/frontend/app/[locale]/shop/page.tsx
index eaaaaf80..c715c1c2 100644
--- a/frontend/app/[locale]/shop/page.tsx
+++ b/frontend/app/[locale]/shop/page.tsx
@@ -3,6 +3,7 @@ import { ProductCard } from '@/components/shop/product-card';
 import { Hero } from '@/components/shop/shop-hero';
 import { CategoryTile } from '@/components/shop/category-tile';
 import { getHomepageContent } from '@/lib/shop/data';
+import { getTranslations } from 'next-intl/server';
 
 export default async function HomePage({
   params,
@@ -11,14 +12,15 @@ export default async function HomePage({
 }) {
   const { locale } = await params;
   const content = await getHomepageContent(locale);
+  const t = await getTranslations('shop.page');
 
   return (
     <>
       <Hero
-        headline={content.hero.headline}
-        subheadline={content.hero.subheadline}
-        ctaText={content.hero.ctaText}
-        ctaLink={content.hero.ctaLink}
+        headline={t('comingSoon.headline')}
+        subheadline={t('comingSoon.subheadline')}
+        ctaText={t('comingSoon.cta')}
+        ctaLink="/shop/products"
       />
 
       <section
@@ -31,15 +33,15 @@ export default async function HomePage({
               id="new-arrivals-heading"
               className="text-2xl font-bold tracking-tight text-foreground"
             >
-              New Arrivals
+              {t('newArrivals')}
             </h2>
 
             <Link
               href="/shop/products?filter=new"
               className="text-sm font-medium text-muted-foreground hover:text-foreground"
-              aria-label="View all new arrivals"
+              aria-label={t('viewAll')}
             >
-              View all <span aria-hidden="true">→</span>
+              {t('viewAll')} <span aria-hidden="true">→</span>
             </Link>
           </header>
 
@@ -63,7 +65,7 @@ export default async function HomePage({
               id="shop-by-category-heading"
               className="text-2xl font-bold tracking-tight text-foreground"
             >
-              Shop by Category
+              {t('shopByCategory')}
             </h2>
           </header>
 
@@ -86,21 +88,20 @@ export default async function HomePage({
             id="shop-cta-heading"
             className="text-2xl font-bold tracking-tight sm:text-3xl"
           >
-            Code. Create. Collect.
+            {t('hero.headline')}
           </h2>
 
           <p className="mx-auto mt-4 max-w-xl text-background/80">
-            Join thousands of developers who express their passion through
-            premium merch.
+            {t('hero.subheadline')}
           </p>
 
           <div className="mt-8">
             <Link
               href="/shop/products"
               className="inline-flex items-center gap-2 rounded-md bg-[color:var(--shop-cta-bg)] px-6 py-3 text-sm font-semibold uppercase tracking-wide text-[color:var(--shop-cta-fg)] transition-opacity hover:opacity-90"
-              aria-label="Browse all products"
+              aria-label={t('hero.cta')}
             >
-              Browse all products
+              {t('hero.cta')}
             </Link>
           </div>
         </div>
diff --git a/frontend/app/[locale]/shop/products/[slug]/page.tsx b/frontend/app/[locale]/shop/products/[slug]/page.tsx
index efe19bb1..6f8b7eab 100644
--- a/frontend/app/[locale]/shop/products/[slug]/page.tsx
+++ b/frontend/app/[locale]/shop/products/[slug]/page.tsx
@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
 
 import { AddToCartButton } from '@/components/shop/add-to-cart-button';
 import { getProductPageData } from '@/lib/shop/data';
@@ -18,6 +19,8 @@ export default async function ProductPage({
   params: Promise<{ slug: string; locale: string }>;
 }) {
   const { slug, locale } = await params;
+  const t = await getTranslations('shop.products');
+  const tProduct = await getTranslations('shop.product');
 
   // P0-5 canonical gate:
   // - slug AND is_active=true
@@ -46,7 +49,7 @@ export default async function ProductPage({
             className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
           >
             <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-            Back to all products
+            {t('backToProducts')}
           </Link>
         </nav>
 
@@ -77,7 +80,7 @@ export default async function ProductPage({
               role="status"
               aria-live="polite"
             >
-              This product is not available in your locale/currency.
+              {t('notAvailable')}
             </div>
 
             {p.description && (
@@ -99,7 +102,7 @@ export default async function ProductPage({
           className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-          Back to all products
+          {t('backToProducts')}
         </Link>
       </nav>
 
@@ -113,7 +116,7 @@ export default async function ProductPage({
                   : 'bg-foreground text-background'
               }`}
             >
-              {product.badge}
+              {tProduct(`badges.${product.badge}`)}
             </span>
           )}
 
diff --git a/frontend/app/[locale]/shop/products/page.tsx b/frontend/app/[locale]/shop/products/page.tsx
index ff653207..1ed22509 100644
--- a/frontend/app/[locale]/shop/products/page.tsx
+++ b/frontend/app/[locale]/shop/products/page.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from 'react';
 import { redirect } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
 
 import { ProductFilters } from '@/components/shop/product-filters';
 import { CatalogProductsClient } from '@/components/shop/catalog-products-client';
@@ -27,6 +28,7 @@ export default async function ProductsPage({
 }: ProductsPageProps & { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const resolvedSearchParams = (await searchParams) ?? {};
+  const t = await getTranslations('shop.products');
 
   // canonicalize: infinite-load page should not be shareable as ?page=N
   if (resolvedSearchParams.page) {
@@ -69,7 +71,7 @@ export default async function ProductsPage({
     <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
-          All Products
+          {t('title')}
         </h1>
 
         <Suspense fallback={null}>
@@ -95,10 +97,10 @@ export default async function ProductsPage({
               role="status"
             >
               <p className="text-lg font-medium text-foreground">
-                No products found
+                {t('noProductsFound')}
               </p>
               <p className="mt-2 text-sm text-muted-foreground">
-                Try adjusting your filters to find what you&apos;re looking for.
+                {t('adjustFilters')}
               </p>
             </div>
           ) : (
diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index cebfff7e..d91ff8b5 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -1,16 +1,59 @@
+export const runtime = 'nodejs';
+
 import { NextRequest, NextResponse } from 'next/server';
-import Groq from 'groq-sdk';
 import { z } from 'zod';
 import {
   createExplainPrompt,
   type ExplanationResponse,
 } from '@/lib/ai/prompts';
+import { getClientIp } from '@/lib/security/client-ip';
+
+// =============================================================================
+// SERVER-SIDE LOGGING (sanitized - no sensitive data exposed)
+// =============================================================================
+function logEnvironmentDiagnostics() {
+  const apiKey = process.env.GROQ_API_KEY;
+  console.log('[ENV] GROQ_API_KEY configured:', !!apiKey);
+  console.log('[ENV] NODE_ENV:', process.env.NODE_ENV);
+}
+
+function logRequestDiagnostics(request: NextRequest) {
+  console.log('[REQ] Method:', request.method);
+  console.log('[REQ] URL path:', new URL(request.url).pathname);
+}
+
+function logBodyParsingResult(success: boolean, error?: unknown) {
+  console.log('[BODY] Parse success:', success);
+  if (error) {
+    console.log('[BODY] Parse error:', error instanceof Error ? error.message : 'Unknown error');
+  }
+}
+
+function logGroqInitialization(success: boolean, error?: unknown) {
+  console.log('[GROQ] Init success:', success);
+  if (error) {
+    const err = error as Error & { status?: number; code?: string };
+    console.log('[GROQ] Init error:', err.name, err.message);
+  }
+}
+
+function logGroqApiCall(phase: 'start' | 'success' | 'error', details?: unknown) {
+  if (phase === 'start') {
+    console.log('[GROQ] Starting API call');
+  } else if (phase === 'success') {
+    console.log('[GROQ] API call successful');
+  } else if (phase === 'error') {
+    const err = details as Error & { status?: number; code?: string };
+    console.log('[GROQ] API error:', err?.name, err?.message);
+  }
+}
+// =============================================================================
 
 const rateLimiter = new Map<string, { count: number; resetAt: number }>();
 const MAX_REQUESTS_PER_WINDOW = 10;
-const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000; 
+const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000;
 
-const CLEANUP_INTERVAL_MS = 5 * 60 * 1000; 
+const CLEANUP_INTERVAL_MS = 5 * 60 * 1000;
 let lastCleanup = Date.now();
 
 function cleanupRateLimiter() {
@@ -36,15 +79,13 @@ const requestSchema = z.object({
     .optional(),
 });
 
-function getClientIp(request: NextRequest): string {
-  const forwarded = request.headers.get('x-forwarded-for');
-  if (forwarded) {
-    return forwarded.split(',')[0].trim();
+
+function checkRateLimit(ip: string): { allowed: boolean; remaining: number; resetIn: number; skipped: boolean } {
+  // Bypass rate limiting for unknown IPs (serverless safety)
+  if (ip === 'unknown') {
+    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW, resetIn: RATE_LIMIT_WINDOW_MS, skipped: true };
   }
-  return request.headers.get('x-real-ip') || 'unknown';
-}
 
-function checkRateLimit(ip: string): { allowed: boolean; remaining: number; resetIn: number } {
   cleanupRateLimiter();
 
   const now = Date.now();
@@ -52,12 +93,12 @@ function checkRateLimit(ip: string): { allowed: boolean; remaining: number; rese
 
   if (!entry || now > entry.resetAt) {
     rateLimiter.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS });
-    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW - 1, resetIn: RATE_LIMIT_WINDOW_MS };
+    return { allowed: true, remaining: MAX_REQUESTS_PER_WINDOW - 1, resetIn: RATE_LIMIT_WINDOW_MS, skipped: false };
   }
 
   if (entry.count >= MAX_REQUESTS_PER_WINDOW) {
     const resetIn = entry.resetAt - now;
-    return { allowed: false, remaining: 0, resetIn };
+    return { allowed: false, remaining: 0, resetIn, skipped: false };
   }
 
   entry.count++;
@@ -65,6 +106,7 @@ function checkRateLimit(ip: string): { allowed: boolean; remaining: number; rese
     allowed: true,
     remaining: MAX_REQUESTS_PER_WINDOW - entry.count,
     resetIn: entry.resetAt - now,
+    skipped: false,
   };
 }
 
@@ -95,16 +137,22 @@ function parseExplanationResponse(content: string): ExplanationResponse {
 }
 
 export async function POST(request: NextRequest) {
+  logEnvironmentDiagnostics();
+  logRequestDiagnostics(request);
+
   const apiKey = process.env.GROQ_API_KEY;
   if (!apiKey) {
-    console.error('GROQ_API_KEY is not configured');
+    console.error('[FATAL] GROQ_API_KEY is not configured. Check environment variables.');
     return NextResponse.json(
-      { error: 'AI service not configured', code: 'SERVICE_UNAVAILABLE' },
+      {
+        error: 'AI service not configured',
+        code: 'SERVICE_UNAVAILABLE',
+      },
       { status: 503 }
     );
   }
 
-  const clientIp = getClientIp(request);
+  const clientIp = getClientIp(request) ?? 'unknown';
   const rateLimit = checkRateLimit(clientIp);
 
   if (!rateLimit.allowed) {
@@ -126,10 +174,21 @@ export async function POST(request: NextRequest) {
     );
   }
 
+  // Safe JSON body parsing for Netlify
   let body: unknown;
   try {
-    body = await request.json();
-  } catch {
+    const text = await request.text();
+    if (!text || text.trim() === '') {
+      console.log('[BODY] Empty request body received');
+      return NextResponse.json(
+        { error: 'Request body is empty', code: 'EMPTY_BODY' },
+        { status: 400 }
+      );
+    }
+    body = JSON.parse(text);
+    logBodyParsingResult(true);
+  } catch (parseError) {
+    logBodyParsingResult(false, parseError);
     return NextResponse.json(
       { error: 'Invalid JSON body', code: 'INVALID_JSON' },
       { status: 400 }
@@ -150,11 +209,46 @@ export async function POST(request: NextRequest) {
 
   const { term, context } = validationResult.data;
 
-  const groq = new Groq({ apiKey });
+  // Dynamic import for Netlify compatibility
+  let Groq: typeof import('groq-sdk').default;
+  try {
+    const groqModule = await import('groq-sdk');
+    Groq = groqModule.default;
+  } catch (importError) {
+    console.error('[SDK_IMPORT_ERROR] Failed to import groq-sdk:',
+      importError instanceof Error ? importError.message : String(importError)
+    );
+    return NextResponse.json(
+      {
+        error: 'Failed to load AI client',
+        code: 'SDK_IMPORT_ERROR',
+      },
+      { status: 503 }
+    );
+  }
+
+  let groq: InstanceType<typeof Groq>;
+  try {
+    groq = new Groq({ apiKey });
+    logGroqInitialization(true);
+  } catch (initError) {
+    logGroqInitialization(false, initError);
+    console.error('[SDK_INIT_ERROR] Failed to initialize Groq client:',
+      initError instanceof Error ? initError.message : String(initError)
+    );
+    return NextResponse.json(
+      {
+        error: 'Failed to initialize AI client',
+        code: 'SDK_INIT_ERROR',
+      },
+      { status: 503 }
+    );
+  }
 
   try {
     const prompt = createExplainPrompt({ term, context });
 
+    logGroqApiCall('start');
     const chatCompletion = await groq.chat.completions.create({
       messages: [
         {
@@ -162,15 +256,17 @@ export async function POST(request: NextRequest) {
           content: prompt,
         },
       ],
-      model: 'llama-3.3-70b-versatile',
+      model: 'llama3-70b-8192',
       temperature: 0.7,
       max_tokens: 1500,
       top_p: 1,
     });
+    logGroqApiCall('success', chatCompletion);
 
     const content = chatCompletion.choices[0]?.message?.content;
 
     if (!content) {
+      console.error('[ERROR] No content in Groq response');
       throw new Error('No content in response');
     }
 
@@ -185,17 +281,8 @@ export async function POST(request: NextRequest) {
       },
     });
   } catch (error) {
-    console.error('Groq API error:', error);
-
-    const errorMessage =
-      error instanceof Error ? error.message : 'Unknown error';
-    const errorName = error instanceof Error ? error.name : 'UnknownError';
-
-    console.error('Error details:', {
-      name: errorName,
-      message: errorMessage,
-      stack: error instanceof Error ? error.stack : undefined,
-    });
+    logGroqApiCall('error', error);
+    console.error('[GROQ_ERROR]', error instanceof Error ? error.message : 'Unknown error');
 
     if (error instanceof Error) {
       if (
@@ -203,8 +290,12 @@ export async function POST(request: NextRequest) {
         error.message.includes('authentication') ||
         error.message.includes('Invalid API Key')
       ) {
+        console.error('[AUTH_ERROR] API key authentication failed');
         return NextResponse.json(
-          { error: 'AI service authentication failed', code: 'AUTH_ERROR' },
+          {
+            error: 'AI service authentication failed',
+            code: 'AUTH_ERROR',
+          },
           { status: 503 }
         );
       }
@@ -222,7 +313,6 @@ export async function POST(request: NextRequest) {
           {
             error: 'AI model not available',
             code: 'MODEL_ERROR',
-            details: errorMessage,
           },
           { status: 503 }
         );
@@ -233,10 +323,22 @@ export async function POST(request: NextRequest) {
       {
         error: 'Failed to generate explanation',
         code: 'AI_ERROR',
-        details:
-          process.env.NODE_ENV === 'development' ? errorMessage : undefined,
       },
       { status: 500 }
     );
   }
 }
+
+export async function GET() {
+  return NextResponse.json(
+    {
+      status: 'ok',
+      service: 'ai-explain',
+      env: {
+        hasGroqKey: !!process.env.GROQ_API_KEY,
+        nodeEnv: process.env.NODE_ENV,
+      },
+    },
+    { status: 200 }
+  );
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a56f36df..702d39a7 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -30,8 +30,7 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --animate-float-soft: float-soft 8s ease-in-out infinite;
-  --animate-pulse-soft: pulse-soft 2.8s ease-in-out infinite;
+  --animate-wave-clip: wave-clip 5s ease-in-out infinite;
 }
 
 @theme {
@@ -154,51 +153,221 @@
   user-select: none; /* Standard */
 }
 
-@keyframes float-soft {
+@keyframes progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+@keyframes shrink {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes wave-clip {
   0%,
   100% {
-    transform: translateY(8px) scale(1);
+    clip-path: polygon(
+      0% 50%,
+      15% 48%,
+      32% 52%,
+      54% 60%,
+      70% 62%,
+      84% 60%,
+      100% 55%,
+      100% 100%,
+      0% 100%
+    );
   }
   50% {
-    transform: translateY(-16px) scale(1.04);
+    clip-path: polygon(
+      0% 65%,
+      16% 70%,
+      34% 72%,
+      51% 68%,
+      67% 58%,
+      84% 52%,
+      100% 48%,
+      100% 100%,
+      0% 100%
+    );
   }
 }
 
-@keyframes pulse-soft {
-  0%,
+@keyframes slide-up-gradient {
+  0% {
+    clip-path: inset(100% 0 0 0);
+  }
   100% {
-    opacity: 0.2;
-    transform: scale(1);
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes wave-slide-up {
+  0% {
+    clip-path: polygon(
+      0% 100%,
+      10% 100%,
+      20% 100%,
+      30% 100%,
+      40% 100%,
+      50% 100%,
+      60% 100%,
+      70% 100%,
+      80% 100%,
+      90% 100%,
+      100% 100%,
+      100% 100%,
+      0% 100%
+    );
   }
   50% {
-    opacity: 0.4;
-    transform: scale(1.08);
+    clip-path: polygon(
+      0% 60%,
+      10% 50%,
+      20% 45%,
+      30% 48%,
+      40% 55%,
+      50% 50%,
+      60% 45%,
+      70% 48%,
+      80% 52%,
+      90% 50%,
+      100% 55%,
+      100% 100%,
+      0% 100%
+    );
+  }
+  100% {
+    clip-path: polygon(
+      0% 0%,
+      10% 0%,
+      20% 0%,
+      30% 0%,
+      40% 0%,
+      50% 0%,
+      60% 0%,
+      70% 0%,
+      80% 0%,
+      90% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%
+    );
   }
 }
 
-@keyframes progress {
-  from {
-    width: 100%;
+@keyframes text-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
   }
-  to {
-    width: 0%;
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
-@keyframes shimmer {
+
+@keyframes card-breathe {
   0% {
-    background-position: 200% 0;
+    transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
+  }
+  50% {
+    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05)
+      rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
   }
   100% {
-    background-position: -200% 0;
+    transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
   }
 }
 
-@keyframes shrink {
-  from {
-    transform: scaleX(1);
+@layer utilities {
+  .wave-text-gradient {
+    animation: wave-clip 5s ease-in-out infinite;
   }
-  to {
-    transform: scaleX(0);
+
+  .animate-slide-up-gradient {
+    animation: slide-up-gradient 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-wave-slide-up {
+    animation: wave-slide-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-text-fade-in {
+    animation: text-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  .animate-card-breathe {
+    animation: card-breathe 6s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  .left-4 .animate-card-breathe,
+  .md\:left-6 .animate-card-breathe,
+  .lg\:left-8 .animate-card-breathe,
+  .xl\:left-12 .animate-card-breathe {
+    --card-x: -30px;
+    --card-y: -25px;
+    --card-rotate: -10deg;
+    --card-rotate-offset: -3deg;
+    animation-delay: 0s;
+  }
+
+  .right-4 .animate-card-breathe,
+  .md\:right-6 .animate-card-breathe,
+  .lg\:right-8 .animate-card-breathe,
+  .xl\:right-12 .animate-card-breathe {
+    --card-x: 30px;
+    --card-y: 25px;
+    --card-rotate: 8deg;
+    --card-rotate-offset: 3deg;
+    animation-delay: 0.8s;
+  }
+
+  /* Feature bubble floating animation */
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  /* Slow spinning for orbit rings */
+  .animate-spin-slow {
+    animation: spin 20s linear infinite;
+  }
+  
+  .animate-spin-slower {
+    animation: spin 30s linear infinite reverse;
+  }
+
+  /* Dashed line flow animation */
+  .animate-dash-flow {
+    animation: dash-flow 2s linear infinite;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes dash-flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 20;
   }
 }
 
@@ -218,13 +387,11 @@
   --color-ring: var(--foreground);
 
   --card: var(--background);
-    /* CTA button: light theme (section is black) -> pink bg + white text */
+  /* CTA button: light theme (section is black) -> pink bg + white text */
   --shop-cta-bg: #ff2d55;
   --shop-cta-fg: oklch(0.985 0 0);
-
 }
 
-
 .dark .shop-scope {
   /* dark: shop accent = magenta */
   --accent: var(--accent-primary);
@@ -241,10 +408,9 @@
   /* keep borders closer to previous shop look, derived (no hex) */
   --border: color-mix(in oklab, var(--foreground) 18%, var(--background));
   --input: color-mix(in oklab, var(--foreground) 18%, var(--background));
-    /* CTA button: dark theme (section becomes white) -> black bg + white text */
+  /* CTA button: dark theme (section becomes white) -> black bg + white text */
   --shop-cta-bg: var(--background);
   --shop-cta-fg: var(--foreground);
-
 }
 
 /* about-community */
@@ -292,3 +458,12 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-float,
+  .animate-spin-slow,
+  .animate-spin-slower,
+  .animate-dash-flow {
+    animation: none !important;
+  }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index c92fb3b7..e5ee2c7a 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -34,6 +34,25 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="uk" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var theme = localStorage.getItem('theme') || 'system';
+                  if (theme === 'system') {
+                    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  }
+                  if (theme === 'dark') {
+                    document.documentElement.classList.add('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body
         suppressHydrationWarning
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-50 text-gray-900 dark:bg-neutral-950 dark:text-gray-100 transition-colors duration-300`}
diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
new file mode 100644
index 00000000..e08cf31b
--- /dev/null
+++ b/frontend/app/not-found.tsx
@@ -0,0 +1,75 @@
+import { cookies } from 'next/headers';
+
+import ukMessages from '@/messages/uk.json';
+import enMessages from '@/messages/en.json';
+import plMessages from '@/messages/pl.json';
+
+type Locale = 'uk' | 'en' | 'pl';
+
+const locales: Locale[] = ['uk', 'en', 'pl'];
+
+const messages = {
+  uk: ukMessages.notFound,
+  en: enMessages.notFound,
+  pl: plMessages.notFound,
+};
+
+export default async function NotFound() {
+  const cookieStore = await cookies();
+  const localeCookie = cookieStore.get('NEXT_LOCALE')?.value;
+  const locale: Locale =
+    localeCookie && locales.includes(localeCookie as Locale)
+      ? (localeCookie as Locale)
+      : 'en';
+  const t = messages[locale];
+
+  return (
+    <main className="relative min-h-screen flex items-center justify-center overflow-hidden bg-background transition-colors duration-300">
+      <div className="pointer-events-none absolute inset-0 opacity-60">
+        <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-[var(--accent-primary)]/20 blur-3xl" />
+        <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-[var(--accent-hover)]/15 blur-3xl" />
+        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+      </div>
+
+      <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
+        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[80%] top-[40%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[18%] top-[60%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+      </div>
+
+      <div className="relative z-10 text-center px-6 py-12">
+        <div className="relative inline-block mt-4">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight">
+            <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+              DevL
+            </span>
+            <span className="relative inline-block text-red-500 text-[1em] leading-none" style={{ verticalAlign: 'baseline' }}>
+              Ø
+            </span>
+            <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+              vers
+            </span>
+
+          </h1>
+        </div>
+
+        <h2 className="mt-6 text-2xl md:text-3xl font-bold text-foreground">
+          {t.title}
+        </h2>
+
+        <p className="mt-4 max-w-md mx-auto text-muted-foreground">
+          {t.description}
+        </p>
+
+        <a
+          href={`/${locale}`}
+          className="mt-8 inline-flex items-center justify-center rounded-full bg-[var(--accent-primary)] hover:bg-[var(--accent-hover)] px-6 py-3 text-sm font-medium text-white transition-colors"
+        >
+          {t.backHome}
+        </a>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index f8232dd5..91c38756 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -1,33 +1,35 @@
 "use client"
 
-import { MessageCircle, Github, ArrowRight, ExternalLink } from "lucide-react"
-import { TESTIMONIALS, type Testimonial } from "@/data/about" 
-
+import { Github, ArrowRight, ExternalLink, MessageCircle } from "lucide-react"
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+import { TESTIMONIALS, type Testimonial } from "@/data/about"
+import { GradientBadge } from "@/components/ui/gradient-badge"
+import { SectionHeading } from "@/components/ui/section-heading"
 
 export function CommunitySection() {
+  const t = useTranslations("about.community")
+
   return (
-    <section className="w-full py-16 md:py-24 relative overflow-hidden bg-gray-50 dark:bg-transparent">
-        
+    <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent">
+
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[80px] rounded-full pointer-events-none" />
 
         <div className="w-full relative z-10">
-            
-            <div className="max-w-7xl mx-auto px-4 mb-12 text-center">
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 text-gray-500 dark:text-gray-400 text-[10px] font-bold uppercase tracking-widest mb-4">
-                    <MessageCircle size={10} /> Community Love
-                </div>
-                
-                <h2 className="text-3xl md:text-4xl font-black tracking-tight text-gray-900 dark:text-white mb-4">
-                    Approved by <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">Survivors</span>
-                </h2>
-                <p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto text-base font-light leading-relaxed">
-                    Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers.
-                </p>
+
+            <div className="container-main mb-12 text-center">
+                <GradientBadge icon={MessageCircle} text={t("badge")} className="mb-4" />
+
+                <SectionHeading
+                    title={t("title")}
+                    highlight={t("titleHighlight")}
+                    subtitle={t("subtitle")}
+                    className="mb-0"
+                />
             </div>
 
-            <div className="relative w-full pause-on-hover mb-16">
-                
+            <div className="relative w-full pause-on-hover mb-8 md:mb-16">
+
                 <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-r from-gray-50 dark:from-background to-transparent" />
                 <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-l from-gray-50 dark:from-background to-transparent" />
 
@@ -45,31 +47,31 @@ export function CommunitySection() {
                 </div>
             </div>
 
-            <div className="max-w-7xl mx-auto px-4 text-center">
-                <div className="flex flex-col items-center gap-3 md:hidden">
-                    <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        Have a success story or feature request?
-                    </span>
+            <div className="container-main text-center">
+                <div className="flex flex-col items-center gap-2 md:hidden">
                     <Link
                         href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                         target="_blank"
-                        className="group inline-flex items-center gap-2 px-5 py-3 rounded-full
-                            bg-gray-900 dark:bg-white text-white dark:text-black
-                            text-xs font-bold uppercase tracking-wider
+                        rel="noopener noreferrer"
+                        className="group inline-flex items-center gap-1.5 px-4 py-2 rounded-full
+                            border border-gray-200 dark:border-white/10
+                            bg-white/50 dark:bg-white/5
+                            text-[10px] font-bold uppercase tracking-wider
+                            text-gray-700 dark:text-gray-300
                             transition-all duration-300
-                            hover:bg-[#1e5eff] dark:hover:bg-[#ff2d55]
-                            hover:text-white dark:hover:text-white
-                            hover:scale-[1.02]"
+                            hover:border-[#1e5eff]/40 dark:hover:border-[#ff2d55]/40
+                            hover:text-[#1e5eff] dark:hover:text-[#ff2d55]"
                     >
-                        <Github size={14} />
-                        Join Discussion
-                        <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
+                        <Github size={12} />
+                        {t("joinDiscussion")}
+                        <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
                     </Link>
                 </div>
 
                 <Link
                     href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                     target="_blank"
+                    rel="noopener noreferrer"
                     className="group relative hidden md:inline-flex items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
                     bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10
                     transition-all duration-300 ease-out
@@ -78,7 +80,7 @@ export function CommunitySection() {
                     hover:shadow-[0_0_30px_-5px_rgba(30,94,255,0.15)] dark:hover:shadow-[0_0_30px_-5px_rgba(255,45,85,0.15)]"
                 >
                     <span className="text-sm text-gray-700 dark:text-gray-200 font-medium">
-                        Have a success story or feature request?
+                        {t("successStory")}
                     </span>
 
                     <span className="flex items-center gap-2 px-5 py-2.5 rounded-full
@@ -89,13 +91,13 @@ export function CommunitySection() {
                         group-hover:text-white dark:group-hover:text-white"
                     >
                         <Github size={14} />
-                        Join Discussion
+                        {t("joinDiscussion")}
                         <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
                     </span>
                 </Link>
 
-                <p className="mt-6 text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest font-bold opacity-60">
-                    We read every single thread
+                <p className="mt-3 md:mt-6 text-[8px] md:text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest md:font-bold md:opacity-60 opacity-70">
+                    {t("readThreads")}
                 </p>
             </div>
 
@@ -114,7 +116,7 @@ function TestimonialCard({
   color
 }: Testimonial) {
   return (
-    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#0f0f0f] p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
+    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
       <div className="mb-3 flex items-start justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 border border-gray-200 dark:border-white/5 text-xs font-bold text-gray-700 dark:text-gray-200">
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 3d1839b5..093bd2c9 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -1,336 +1,418 @@
 "use client"
 
-import { useState } from "react"
-import { motion, AnimatePresence } from "framer-motion"
+import { useState, useEffect } from "react"
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
 import { Link } from "@/i18n/routing"
-import { MessageCircle, Brain, Trophy, User, ShoppingBag } from "lucide-react"
+import { useTranslations } from "next-intl"
+import {
+    MessageCircle, Brain, Trophy, User, ShoppingBag, BookOpen,
+    Globe, Cpu, Shield, Languages, Clock, Lightbulb, Target,
+    Medal, Users, Flame, Zap, BarChart3, TrendingUp, Tag, History,
+    CreditCard, Package, Sparkles, PenTool, CalendarDays,
+    Search, Save, Activity, UserCircle, Bell,
+    LucideIcon
+} from "lucide-react"
+import { SectionHeading } from "@/components/ui/section-heading"
 
-const tMock = (key: string) => {
-    const map: any = {
-        "title": "Everything you need to",
-        "titleHighlight": "get hired",
-        "subtitle": "Stop searching for scattered info. We curated the ultimate toolkit to crack technical interviews.",
-        
-        "qa.title": "Q&A",
-        "qa.description": "No fluff. Just a massive library of real interview questions with precise, recruiter-approved answers.",
-        
-        "quiz.title": "Quizzes",
-        "quiz.description": "Validate your confidence. Fast-paced interactive quizzes to spot your weak points before the interviewer does.",
-        
-        "leaderboard.title": "Leaderboard",
-        "leaderboard.description": "Gamify your prep. Earn points for every correct answer, keep your streak alive, and rank up against others.",
-        
-        "profile.title": "Analytics",
-        "profile.description": "Don't fly blind. Visualize your progress with detailed charts to see exactly which topics you've mastered.",
-        
-        "shop.title": "Shop",
-        "shop.description": "Upgrade your setup. High-quality developer apparel, desk accessories, and digital assets available for purchase.",
-    }
-    return map[key] || key
+interface Feature {
+    icon: LucideIcon
+    labelKey: string
+    descKey: string
+    x: number
+    y: number
+    size: number
 }
 
-export function FeaturesSection() {
-  const t = tMock 
-  const [activeTab, setActiveTab] = useState("qa")
+interface Page {
+    id: string
+    icon: LucideIcon
+    href: string
+    features: Feature[]
+}
 
-  const features = [
-    { id: "qa", icon: MessageCircle, href: "/q&a" },
-    { id: "quiz", icon: Brain, href: "/quizzes" },
-    { id: "leaderboard", icon: Trophy, href: "/leaderboard" },
-    { id: "profile", icon: User, href: "/profile" },
-    { id: "shop", icon: ShoppingBag, href: "/shop" },
-  ]
+const decorativeDots = [
+    { x: '5%', y: '20%', size: 8 },
+    { x: '10%', y: '75%', size: 6 },
+    { x: '18%', y: '40%', size: 5 },
+    { x: '92%', y: '25%', size: 7 },
+    { x: '88%', y: '70%', size: 6 },
+    { x: '82%', y: '45%', size: 5 },
+    { x: '7%', y: '55%', size: 7 },
+    { x: '95%', y: '55%', size: 8 },
+    { x: '15%', y: '85%', size: 6 },
+    { x: '85%', y: '15%', size: 5 },
+    { x: '3%', y: '35%', size: 6 },
+    { x: '97%', y: '80%', size: 7 },
+]
 
-  const activeFeature = features.find((f) => f.id === activeTab)
-  const activeHref = activeFeature ? activeFeature.href : "/"
+const pages: Page[] = [
+    {
+        id: "qa",
+        icon: MessageCircle,
+        href: "/q&a",
+        features: [
+            { icon: Globe, labelKey: "bubbles.qa.languages.label", descKey: "bubbles.qa.languages.desc", x: -120, y: -120, size: 88 },
+            { icon: Cpu, labelKey: "bubbles.qa.aiHelper.label", descKey: "bubbles.qa.aiHelper.desc", x: 120, y: -120, size: 88 },
+            { icon: Lightbulb, labelKey: "bubbles.qa.smartCache.label", descKey: "bubbles.qa.smartCache.desc", x: -120, y: 120, size: 88 },
+            { icon: Search, labelKey: "bubbles.qa.techFilter.label", descKey: "bubbles.qa.techFilter.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "quiz",
+        icon: Brain,
+        href: "/quizzes",
+        features: [
+            { icon: Clock, labelKey: "bubbles.quiz.smartTimer.label", descKey: "bubbles.quiz.smartTimer.desc", x: -120, y: -120, size: 88 },
+            { icon: Shield, labelKey: "bubbles.quiz.antiCheat.label", descKey: "bubbles.quiz.antiCheat.desc", x: 120, y: -120, size: 88 },
+            { icon: Save, labelKey: "bubbles.quiz.autoSync.label", descKey: "bubbles.quiz.autoSync.desc", x: -120, y: 120, size: 88 },
+            { icon: BarChart3, labelKey: "bubbles.quiz.tracking.label", descKey: "bubbles.quiz.tracking.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "leaderboard",
+        icon: Trophy,
+        href: "/leaderboard",
+        features: [
+            { icon: Medal, labelKey: "bubbles.leaderboard.podium.label", descKey: "bubbles.leaderboard.podium.desc", x: -120, y: -120, size: 88 },
+            { icon: Globe, labelKey: "bubbles.leaderboard.globalRank.label", descKey: "bubbles.leaderboard.globalRank.desc", x: 120, y: -120, size: 88 },
+            { icon: Zap, labelKey: "bubbles.leaderboard.xpSystem.label", descKey: "bubbles.leaderboard.xpSystem.desc", x: -120, y: 120, size: 88 },
+            { icon: Activity, labelKey: "bubbles.leaderboard.liveFeed.label", descKey: "bubbles.leaderboard.liveFeed.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "profile",
+        icon: User,
+        href: "/dashboard",
+        features: [
+            { icon: BarChart3, labelKey: "bubbles.profile.statsHub.label", descKey: "bubbles.profile.statsHub.desc", x: -120, y: -120, size: 88 },
+            { icon: History, labelKey: "bubbles.profile.history.label", descKey: "bubbles.profile.history.desc", x: 120, y: -120, size: 88 },
+            { icon: UserCircle, labelKey: "bubbles.profile.identity.label", descKey: "bubbles.profile.identity.desc", x: -120, y: 120, size: 88 },
+            { icon: Bell, labelKey: "bubbles.profile.reminders.label", descKey: "bubbles.profile.reminders.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "blog",
+        icon: BookOpen,
+        href: "/blog",
+        features: [
+            { icon: TrendingUp, labelKey: "bubbles.blog.techTrends.label", descKey: "bubbles.blog.techTrends.desc", x: -120, y: -120, size: 88 },
+            { icon: PenTool, labelKey: "bubbles.blog.tutorials.label", descKey: "bubbles.blog.tutorials.desc", x: 120, y: -120, size: 88 },
+            { icon: BookOpen, labelKey: "bubbles.blog.deepDives.label", descKey: "bubbles.blog.deepDives.desc", x: -120, y: 120, size: 88 },
+            { icon: Users, labelKey: "bubbles.blog.community.label", descKey: "bubbles.blog.community.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+    {
+        id: "shop",
+        icon: ShoppingBag,
+        href: "/shop",
+        features: [
+            { icon: Sparkles, labelKey: "bubbles.shop.newDrops.label", descKey: "bubbles.shop.newDrops.desc", x: -120, y: -120, size: 88 },
+            { icon: Tag, labelKey: "bubbles.shop.curated.label", descKey: "bubbles.shop.curated.desc", x: 120, y: -120, size: 88 },
+            { icon: CreditCard, labelKey: "bubbles.shop.checkout.label", descKey: "bubbles.shop.checkout.desc", x: -120, y: 120, size: 88 },
+            { icon: Package, labelKey: "bubbles.shop.premium.label", descKey: "bubbles.shop.premium.desc", x: 120, y: 120, size: 88 },
+        ]
+    },
+]
 
-  return (
-    <section className="relative w-full py-24 overflow-hidden bg-gray-50 dark:bg-transparent">
-      
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-[10%] left-1/2 -translate-x-1/2 w-full max-w-4xl h-[500px] rounded-full blur-[120px] opacity-30 
-          bg-[#1e5eff]/15 dark:bg-[#ff2d55]/15 mix-blend-multiply dark:mix-blend-screen" 
-        />
-      </div>
+function FeatureBubble({ feature, index, href, isMobile, t }: { feature: Feature; index: number; href: string; isMobile: boolean; t: (key: string) => string }) {
+    const Icon = feature.icon
+    const floatDelay = index * 0.5
+    const floatDuration = 3 + index * 0.3
 
-      <div className="relative container mx-auto px-4 max-w-5xl z-10 flex flex-col items-center">
-        
-        <div className="mb-12 text-center max-w-3xl">
-          <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-tight text-gray-900 dark:text-white">
-            {t("title")} <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">{t("titleHighlight")}</span>
-          </h2>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
-            {t("subtitle")}
-          </p>
-        </div>
+    const scaleX = isMobile ? 0.55 : 1
+    const scaleY = isMobile ? 1.3 : 1
+    const posX = feature.x * scaleX
+    const posY = feature.y * scaleY
 
-        <div className="w-full relative mb-10 group perspective-1000">
-          
-          <div className="absolute -inset-1 rounded-xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700
-             bg-gradient-to-t from-[#1e5eff]/20 to-transparent dark:from-[#ff2d55]/20" 
-          />
+    const shouldReduceMotion = useReducedMotion()
 
-          <Link href={activeHref} className="block relative w-full focus:outline-none cursor-pointer">
-            <div className="relative w-full aspect-video rounded-xl overflow-hidden shadow-2xl transition-all duration-500 group-hover:scale-[1.01] 
-              border border-gray-200 dark:border-white/10
-              bg-white dark:bg-[#0f0f0f]
-              group-hover:shadow-[0_0_40px_-10px_rgba(30,94,255,0.3)] dark:group-hover:shadow-[0_0_40px_-10px_rgba(255,45,85,0.3)]"
+    return (
+        <motion.div
+            className="absolute"
+            style={{ left: '50%', top: '50%' }}
+            initial={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+            animate={{
+                x: `calc(-50% + ${posX}%)`,
+                y: `calc(-50% + ${posY}%)`,
+                opacity: 1,
+                scale: 1,
+            }}
+            exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
+            transition={shouldReduceMotion ? { duration: 0 } : {
+                x: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
+                y: { delay: 0.1 + index * 0.08, duration: 0.6, type: "spring", bounce: 0.3 },
+                opacity: { delay: 0.1 + index * 0.08, duration: 0.3 },
+                scale: { delay: 0.1 + index * 0.08, duration: 0.5, type: "spring", bounce: 0.4 },
+            }}
+        >
+            <div
+                className="animate-float motion-reduce:animate-none"
+                style={{ animationDelay: `${floatDelay}s`, animationDuration: `${floatDuration}s` }}
             >
-              
-              <div className="absolute top-0 left-0 w-full h-10 flex items-center px-4 z-20 backdrop-blur-md
-                border-b border-gray-200 dark:border-white/5
-                bg-white/90 dark:bg-[#1a1a1a]/95"
-              >
-                <div className="flex gap-2 opacity-100 dark:opacity-70 group-hover:opacity-100 transition-opacity">
-                  <div className="w-3 h-3 rounded-full bg-[#ff5f56] border border-black/5" />
-                  <div className="w-3 h-3 rounded-full bg-[#ffbd2e] border border-black/5" />
-                  <div className="w-3 h-3 rounded-full bg-[#27c93f] border border-black/5" />
-                </div>
-                
-                <div className="ml-4 px-3 py-1 rounded-md text-[10px] font-mono flex items-center select-none transition-colors
-                  border border-gray-200 dark:border-white/5
-                  bg-gray-50 dark:bg-black/40 
-                  text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-300"
-                >
-                  <span className="text-gray-400 dark:text-gray-600 mr-1">https://</span>
-                  devlovers.net/{activeTab}
-                </div>
-              </div>
-
-              <div className="absolute inset-0 pt-10 w-full h-full bg-white dark:bg-[#0f0f0f]">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={activeTab}
-                    initial={{ opacity: 0, scale: 1.02, filter: "blur(4px)" }}
-                    animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-                    exit={{ opacity: 0, scale: 0.98, filter: "blur(4px)" }}
-                    transition={{ duration: 0.35, ease: "easeInOut" }}
-                    className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden"
-                  >
-                    <div className="absolute inset-0 bg-[size:24px_24px]
-                      bg-[linear-gradient(to_right,#00000008_1px,transparent_1px),linear-gradient(to_bottom,#00000008_1px,transparent_1px)]
-                      dark:bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)]" 
-                    />
-                    
-                    <div className="z-10 w-full h-full flex items-center justify-center p-8">
-                        {activeTab === 'qa' && <QAVisual />}
-                        {activeTab === 'quiz' && <QuizVisual />}
-                        {activeTab === 'leaderboard' && <LeaderboardVisual />}
-                        {activeTab === 'profile' && <ProfileVisual />}
-                        {activeTab === 'shop' && <ShopVisual />}
+                <Link href={href} className="group block">
+                    <div className="flex items-center gap-2 md:gap-3 px-2 md:px-3 py-2 md:py-2.5 w-[140px] md:w-[180px] bg-white dark:bg-neutral-900 border border-gray-200 dark:border-white/10 shadow-lg dark:shadow-black/30 rounded-xl md:rounded-2xl cursor-pointer transition-all duration-200 group-hover:border-[#1e5eff]/40 dark:group-hover:border-[#ff2d55]/40 group-hover:shadow-[0_8px_30px_rgba(30,94,255,0.25)] dark:group-hover:shadow-[0_8px_30px_rgba(255,45,85,0.25)] group-hover:scale-105">
+                        <div
+                            className="flex items-center justify-center shrink-0 w-8 h-8 md:w-10 md:h-10 bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 rounded-lg md:rounded-xl transition-transform duration-200 group-hover:rotate-6 group-hover:scale-110"
+                        >
+                            <Icon className="w-4 h-4 md:w-5 md:h-5 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
+                        </div>
+                        <div className="min-w-0">
+                            <div className="text-xs md:text-sm font-bold text-gray-800 dark:text-white">{t(feature.labelKey)}</div>
+                            <div className="text-[10px] md:text-xs text-gray-500 dark:text-gray-400">{t(feature.descKey)}</div>
+                        </div>
                     </div>
-
-                    <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
-                  </motion.div>
-                </AnimatePresence>
-              </div>
+                </Link>
             </div>
-          </Link>
-        </div>
-
-        <div className="flex justify-center mb-8">
-          <div className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full
-            border border-gray-200 dark:border-white/10
-            bg-white dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none"
-          >
-            {features.map((feature) => {
-              const isActive = activeTab === feature.id
-              return (
-                <button
-                  key={feature.id}
-                  onClick={() => setActiveTab(feature.id)}
-                  className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
-                    isActive
-                      ? "text-white"
-                      : "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
-                  }`}
-                >
-                  {isActive && (
-                    <motion.div
-                      layoutId="activeTabBackground"
-                      className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
-                      initial={false}
-                      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-                      style={{ borderRadius: 9999 }}
-                    />
-                  )}
-                  <span className="relative z-10 flex items-center gap-2">
-                      <feature.icon size={18} className="md:w-4 md:h-4" />
-                      <span className="hidden md:inline">{t(`${feature.id}.title`)}</span>
-                  </span>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-
-        <div className="max-w-2xl mx-auto text-center relative h-20 w-full overflow-hidden">
-           <AnimatePresence mode="wait">
-            <motion.div
-              key={activeTab}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              transition={{ duration: 0.2 }}
-              className="absolute w-full top-0 left-0 flex justify-center"
-            >
-              <p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed font-light">
-                {t(`${activeTab}.description`)}
-              </p>
-            </motion.div>
-          </AnimatePresence>
-        </div>
-      </div>
-    </section>
-  )
+        </motion.div>
+    )
 }
 
-function QAVisual() {
+function CentralIcon({ page }: { page: Page }) {
+    const Icon = page.icon
+    
     return (
-        <div className="w-full max-w-sm space-y-3">
+        <motion.div
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ duration: 0.5, type: "spring", bounce: 0.3 }}
+            className="relative flex items-center justify-center z-30"
+        >
             <motion.div 
-                initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}
-                className="bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 w-full"
+                className="absolute w-60 h-60 rounded-full blur-3xl"
+                animate={{ opacity: [0.15, 0.25, 0.15], scale: [1, 1.1, 1] }}
+                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
             >
-                <div className="flex items-center gap-2 mb-2">
-                     <div className="w-2 h-2 rounded-full bg-red-500" />
-                     <div className="text-[10px] uppercase font-bold text-gray-400">Question</div>
-                </div>
-                <div className="h-2 w-3/4 bg-gray-200 dark:bg-white/20 rounded mb-2" />
-                <div className="h-2 w-1/2 bg-gray-200 dark:bg-white/20 rounded" />
+                <div className="w-full h-full rounded-full bg-[#1e5eff] dark:bg-[#ff2d55]" />
             </motion.div>
             
-            <motion.div 
-                 initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}
-                 className="flex justify-center"
-            >
-                <div className="w-[1px] h-4 bg-gray-300 dark:bg-white/20" />
-            </motion.div>
+            <div className="relative w-36 h-36 md:w-40 md:h-40 rounded-full flex items-center justify-center border border-gray-100 dark:border-white/10 bg-white/80 dark:bg-neutral-900/60 backdrop-blur-xl shadow-2xl dark:shadow-black/40">
+                <div className="absolute inset-2 rounded-full bg-gradient-to-br from-[#1e5eff]/10 to-[#1e5eff]/5 dark:from-[#ff2d55]/10 dark:to-[#ff2d55]/5" />
+                <Icon className="relative z-10 w-16 h-16 text-[#1e5eff] dark:text-[#ff2d55]" strokeWidth={1.5} />
+            </div>
+        </motion.div>
+    )
+}
 
-            <motion.div 
-                initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}
-                className="bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 p-4 rounded-xl shadow-sm border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 w-full"
-            >
-                <div className="flex items-center gap-2 mb-2">
-                     <div className="w-2 h-2 rounded-full bg-green-500" />
-                     <div className="text-[10px] uppercase font-bold text-[#1e5eff] dark:text-[#ff2d55]">Correct Answer</div>
-                </div>
-                <div className="h-2 w-full bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded mb-2" />
-                <div className="h-2 w-5/6 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded mb-2" />
-                <div className="h-2 w-2/3 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded" />
-            </motion.div>
+function DecorativeDots() {
+    return (
+        <div className="absolute inset-0 pointer-events-none z-0" aria-hidden="true">
+            {decorativeDots.map((dot, i) => (
+                <div
+                    key={i}
+                    className="absolute rounded-full bg-[#1e5eff]/40 dark:bg-[#ff2d55]/40 animate-float"
+                    style={{
+                        left: dot.x,
+                        top: dot.y,
+                        width: dot.size,
+                        height: dot.size,
+                        animationDelay: `${i * 0.3}s`,
+                        animationDuration: `${3 + i * 0.2}s`,
+                    }}
+                />
+            ))}
         </div>
     )
 }
 
-function QuizVisual() {
+function OrbitRings() {
     return (
-        <div className="relative w-full max-w-sm h-48 flex items-center justify-center">
-            <motion.div 
-                initial={{ rotate: -5, scale: 0.9 }} animate={{ rotate: -5, scale: 0.95 }} 
-                className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 shadow opacity-60"
-            />
-            <motion.div 
-                 initial={{ rotate: 5, scale: 0.95 }} animate={{ rotate: 5, scale: 0.98 }} 
-                 className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 shadow opacity-80"
-            />
-             <motion.div 
-                 initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }}
-                 className="absolute inset-0 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/10 shadow-xl p-6 flex flex-col items-center justify-center text-center"
-            >
-                <Brain className="w-12 h-12 text-[#1e5eff] dark:text-[#ff2d55] mb-4 opacity-80" />
-                <div className="h-2 w-3/4 bg-gray-100 dark:bg-white/10 rounded mb-2" />
-                <div className="h-2 w-1/2 bg-gray-100 dark:bg-white/10 rounded mb-6" />
-                <div className="flex gap-2 w-full">
-                    <div className="h-8 flex-1 rounded bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/5" />
-                    <div className="h-8 flex-1 rounded bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 border border-[#1e5eff]/30 dark:border-[#ff2d55]/30" />
-                </div>
-            </motion.div>
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none" aria-hidden="true">
+            <div className="absolute w-[55%] h-[55%] rounded-full border border-dashed border-gray-300/50 dark:border-white/10 animate-spin-slow" />
+            <div className="absolute w-[75%] h-[75%] rounded-full border border-dashed border-gray-200/50 dark:border-white/[0.07] animate-spin-slower" />
+            <div className="absolute w-[95%] h-[95%] rounded-full border border-gray-100/50 dark:border-white/[0.03]" />
         </div>
     )
 }
 
-function LeaderboardVisual() {
+function ConnectingLines() {
+    const lines = [
+        { x2: "15%", y2: "15%", delay: "0s" },
+        { x2: "85%", y2: "15%", delay: "0.5s" },
+        { x2: "15%", y2: "85%", delay: "1s" },
+        { x2: "85%", y2: "85%", delay: "1.5s" },
+    ]
+    
     return (
-        <div className="flex items-end gap-4 h-32">
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "40%" }} transition={{ delay: 0.2 }}
-                className="w-16 bg-gray-200 dark:bg-white/10 rounded-t-lg relative group"
-            >
-                 <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-gray-400 font-bold">3</div>
-            </motion.div>
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "100%" }} transition={{ delay: 0.4, type: "spring" }}
-                className="w-16 bg-gradient-to-t from-[#1e5eff] to-[#60a5fa] dark:from-[#ff2d55] dark:to-[#ff7c9c] rounded-t-lg relative shadow-lg shadow-blue-500/20 dark:shadow-pink-500/20"
-            >
-                <Trophy className="absolute -top-8 left-1/2 -translate-x-1/2 w-6 h-6 text-[#1e5eff] dark:text-[#ff2d55]" />
-                <div className="absolute top-2 left-1/2 -translate-x-1/2 text-white font-bold">1</div>
-            </motion.div>
-            <motion.div 
-                initial={{ height: 0 }} animate={{ height: "70%" }} transition={{ delay: 0.3 }}
-                className="w-16 bg-gray-300 dark:bg-white/20 rounded-t-lg relative"
-            >
-                 <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-gray-400 font-bold">2</div>
-            </motion.div>
-        </div>
+        <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true">
+            <defs>
+                <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0.3" />
+                    <stop offset="100%" className="[stop-color:#1e5eff] dark:[stop-color:#ff2d55]" stopOpacity="0" />
+                </linearGradient>
+            </defs>
+            {lines.map((line, i) => (
+                <line 
+                    key={i}
+                    x1="50%" y1="50%" x2={line.x2} y2={line.y2} 
+                    stroke="url(#lineGradient)" 
+                    strokeWidth="1" 
+                    strokeDasharray="4 4" 
+                    className="animate-dash-flow" 
+                    style={{ animationDelay: line.delay }} 
+                />
+            ))}
+        </svg>
     )
 }
 
-function ProfileVisual() {
+function TabButton({
+    page,
+    isActive,
+    onClick,
+    onKeyDown,
+    t
+}: {
+    page: Page;
+    isActive: boolean;
+    onClick: () => void
+    onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void
+    t: (key: string) => string
+}) {
     return (
-        <div className="w-full max-w-md bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 p-4 shadow-sm">
-            <div className="flex items-center gap-4 mb-6">
-                <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-white/10" />
-                <div className="space-y-2">
-                    <div className="h-3 w-32 bg-gray-200 dark:bg-white/20 rounded" />
-                    <div className="h-2 w-20 bg-gray-100 dark:bg-white/10 rounded" />
-                </div>
-            </div>
-            <div className="space-y-3">
-                <div className="flex justify-between text-xs text-gray-400">
-                    <span>JS</span>
-                    <span>85%</span>
-                </div>
-                <div className="w-full h-2 bg-gray-100 dark:bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
-                        initial={{ width: 0 }} animate={{ width: "85%" }} transition={{ duration: 1, delay: 0.2 }}
-                        className="h-full bg-yellow-400 rounded-full" 
-                    />
-                </div>
-                 <div className="flex justify-between text-xs text-gray-400">
-                    <span>React</span>
-                    <span>60%</span>
-                </div>
-                <div className="w-full h-2 bg-gray-100 dark:bg-white/5 rounded-full overflow-hidden">
-                    <motion.div 
-                        initial={{ width: 0 }} animate={{ width: "60%" }} transition={{ duration: 1, delay: 0.4 }}
-                        className="h-full bg-blue-400 rounded-full" 
-                    />
-                </div>
-            </div>
-        </div>
+        <button
+            type="button"
+            id={`${page.id}-tab`}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            role="tab"
+            aria-selected={isActive}
+            aria-controls={`${page.id}-panel`}
+            tabIndex={isActive ? 0 : -1}
+            className={`relative p-2.5 md:px-5 md:py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
+                isActive
+                    ? "text-white"
+                    : "text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10"
+            }`}
+        >
+            {isActive && (
+                <motion.div
+                    layoutId="activeTabBackground"
+                    className="absolute inset-0 bg-[#1e5eff] dark:bg-[#ff2d55] shadow-lg shadow-[#1e5eff]/25 dark:shadow-[#ff2d55]/25"
+                    initial={false}
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                    style={{ borderRadius: 9999 }}
+                />
+            )}
+            <span className="relative z-10 flex items-center gap-2">
+                <page.icon size={18} className="md:w-4 md:h-4" aria-hidden="true" />
+                <span className="hidden md:inline">{t(`${page.id}.title`)}</span>
+            </span>
+        </button>
     )
 }
 
-function ShopVisual() {
+export function FeaturesSection() {
+    const t = useTranslations("about.features")
+    const [activeTab, setActiveTab] = useState("qa")
+    const [isMobile, setIsMobile] = useState(() =>
+        typeof window !== "undefined" ? window.innerWidth < 768 : false
+    )
+    const activePage = pages.find(p => p.id === activeTab) || pages[0]
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768)
+        checkMobile()
+        window.addEventListener('resize', checkMobile)
+        return () => window.removeEventListener('resize', checkMobile)
+    }, [])
+
+    const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+        if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return
+        event.preventDefault()
+        const dir = event.key === "ArrowRight" ? 1 : -1
+        const nextIndex = (index + dir + pages.length) % pages.length
+        const nextId = pages[nextIndex].id
+        setActiveTab(nextId)
+        setTimeout(() => {
+             document.getElementById(`${nextId}-tab`)?.focus()
+        }, 0)
+    }
+
+
+
     return (
-        <div className="flex gap-4">
-            {[1, 2].map((i) => (
-                <motion.div 
-                    key={i}
-                    initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.1 }}
-                    className="w-36 bg-white dark:bg-neutral-800 rounded-xl border border-gray-200 dark:border-white/5 p-3 shadow-sm hover:-translate-y-1 transition-transform relative"
-                >
-                    <div className="w-full aspect-square bg-gray-100 dark:bg-white/5 rounded-lg mb-3 flex items-center justify-center">
-                        <ShoppingBag className="w-6 h-6 text-gray-300" />
+        <section className="relative w-full py-20 lg:py-28 overflow-hidden bg-gray-50 dark:bg-transparent">
+            <DecorativeDots />
+
+            <div className="absolute inset-0 -z-10 pointer-events-none" aria-hidden="true">
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-[400px] rounded-full blur-[150px] opacity-20 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20" />
+            </div>
+
+            <div className="relative container-main z-10 flex flex-col items-center">
+                <SectionHeading
+                    title={t("title")}
+                    highlight={t("titleHighlight")}
+                    subtitle={t("subtitle")}
+                />
+
+                <div className="w-full max-w-md mx-auto aspect-square relative mb-4">
+                    <OrbitRings />
+                    <ConnectingLines />
+
+                    <div className="absolute inset-0 flex items-center justify-center z-30 pointer-events-none">
+                        <AnimatePresence mode="wait">
+                            <CentralIcon key={activeTab} page={activePage} />
+                        </AnimatePresence>
                     </div>
-                    <div className="h-2 w-3/4 bg-gray-200 dark:bg-white/20 rounded mb-2" />
-                    <div className="flex justify-between items-center mt-2">
-                         <div className="h-3 w-10 bg-[#1e5eff]/20 dark:bg-[#ff2d55]/20 rounded" />
-                         <div className="text-[10px] font-bold text-gray-400">$25</div>
+
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key={activeTab}
+                            role="tabpanel"
+                            id={`${activeTab}-panel`}
+                            aria-labelledby={`${activeTab}-tab`}
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            className="absolute inset-0"
+                        >
+                            {activePage.features.map((feature, i) => (
+                                <FeatureBubble
+                                    key={feature.labelKey}
+                                    feature={feature}
+                                    index={i}
+                                    href={activePage.href}
+                                    isMobile={isMobile}
+                                    t={t}
+                                />
+                            ))}
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+
+                <div className="flex justify-center mb-8">
+                    <div role="tablist" aria-label="Feature categories" className="inline-flex gap-1 md:gap-2 p-1.5 rounded-full border border-gray-200 dark:border-white/10 bg-white/20 dark:bg-white/5 backdrop-blur-md shadow-sm dark:shadow-none">
+                        {pages.map((page, index) => (
+                            <TabButton
+                                key={page.id}
+                                page={page}
+                                isActive={activeTab === page.id}
+                                onClick={() => setActiveTab(page.id)}
+                                onKeyDown={(e) => onTabKeyDown(e, index)}
+                                t={t}
+                            />
+                        ))}
                     </div>
-                </motion.div>
-            ))}
-        </div>
+                </div>
+
+                <div className="max-w-2xl mx-auto text-center relative h-20 md:h-16 w-full mb-4">
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key={activeTab}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -10 }}
+                            transition={{ duration: 0.2 }}
+                            className="absolute w-full top-0 left-0 flex justify-center"
+                        >
+                            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300 leading-relaxed font-light">
+                                {t(`${activeTab}.description`)}
+                            </p>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+            </div>
+        </section>
     )
 }
\ No newline at end of file
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index d3765e89..7bb783ee 100644
--- a/frontend/components/about/HeroSection.tsx
+++ b/frontend/components/about/HeroSection.tsx
@@ -2,11 +2,14 @@
 
 import { motion } from "framer-motion"
 import { CheckCircle, Users, Star, Linkedin, ArrowDown } from "lucide-react"
+import { useTranslations } from "next-intl"
 import { InteractiveGame } from "./InteractiveGame"
 import type { PlatformStats } from "@/lib/about/stats"
 import { DynamicGridBackground } from "@/components/shared/DynamicGridBackground"
 
 export function HeroSection({ stats }: { stats?: PlatformStats }) {
+  const t = useTranslations("about.hero")
+
   const data = stats || {
     questionsSolved: "850+",
     githubStars: "120+",
@@ -17,69 +20,69 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
   return (
     <DynamicGridBackground showStaticGrid className="flex min-h-[calc(100svh)] items-center justify-center bg-gray-50 transition-colors duration-300 dark:bg-transparent pt-20 pb-10">
       <div className="relative z-10 grid w-full max-w-[1600px] grid-cols-1 items-center px-4 sm:px-6 lg:px-8 xl:grid-cols-12 xl:gap-8 h-full">
-        
+
         <div className="hidden h-full flex-col justify-center gap-24 xl:col-span-3 xl:flex">
              <motion.div initial={{ x: -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="self-end">
-                <GlassWidget icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label="Quizzes Passed" value={data.questionsSolved} />
+                <GlassWidget icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label={t("stats.quizzesPassed")} value={data.questionsSolved} />
              </motion.div>
              <motion.div initial={{ x: -50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="self-start">
-                <GlassWidget icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label="GitHub Stars" value={data.githubStars} />
+                <GlassWidget icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label={t("stats.githubStars")} value={data.githubStars} />
              </motion.div>
         </div>
 
         <div className="flex flex-col items-center text-center xl:col-span-6">
-            
+
             <div className="scale-90 md:scale-100 mb-6">
                 <InteractiveGame />
             </div>
 
-            <motion.h1 
+            <motion.h1
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ duration: 0.6 }}
-              className="mt-4 mb-8 text-4xl font-black tracking-tight text-gray-900 dark:text-white md:text-6xl lg:text-7xl max-w-5xl text-balance leading-[1.1]"
+              className="mt-4 mb-8 text-4xl font-black tracking-tight text-gray-900 dark:text-white md:text-5xl lg:text-6xl xl:text-7xl max-w-5xl text-balance leading-[1.1]"
             >
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">
-                Debug your skills
-              </span> before the recruiter does.
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
+                {t("titleHighlight")} <br/>
+              </span> {t("titleRest")}
             </motion.h1>
-            
-            <motion.p 
+
+            <motion.p
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               transition={{ duration: 0.6, delay: 0.1 }}
-              className="max-w-3xl text-base font-light leading-relaxed text-gray-600 text-balance dark:text-gray-400 md:text-xl mb-10"
+              className="max-w-3xl text-sm font-light leading-relaxed text-gray-700 text-balance dark:text-gray-300 md:text-lg lg:text-xl mb-10"
             >
-              Stop guessing. We decoded the chaotic interview process into a structured roadmap. <strong className="font-medium text-gray-900 dark:text-gray-200">Compile your scattered knowledge</strong> into a production-ready skillset and land that offer.
+              {t("description")} <strong className="font-medium text-gray-900 dark:text-gray-200">{t("descriptionHighlight")}</strong> {t("descriptionRest")}
             </motion.p>
 
-            <motion.div 
+            <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.3 }}
                 className="grid w-full max-w-lg grid-cols-2 gap-4 xl:hidden"
             >
-                <MobileStatItem icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label="Quizzes" value={data.questionsSolved} />
-                <MobileStatItem icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label="Stars" value={data.githubStars} />
-                <MobileStatItem icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label="Users" value={data.activeUsers} />
-                <MobileStatItem icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label="Followers" value={data.linkedinFollowers} />
+                <MobileStatItem icon={CheckCircle} color="text-green-500" bg="bg-green-500/10" label={t("stats.quizzes")} value={data.questionsSolved} />
+                <MobileStatItem icon={Star} color="text-yellow-500" bg="bg-yellow-500/10" label={t("stats.stars")} value={data.githubStars} />
+                <MobileStatItem icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label={t("stats.users")} value={data.activeUsers} />
+                <MobileStatItem icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label={t("stats.followers")} value={data.linkedinFollowers} />
             </motion.div>
 
-            <motion.div 
+            <motion.div
                 animate={{ y: [0, 10, 0] }}
                 transition={{ duration: 2, repeat: Infinity }}
                 className="mt-16 text-gray-400 dark:text-gray-600 hidden xl:block"
             >
-                <ArrowDown className="h-6 w-6" />
+                <ArrowDown className="h-6 w-6" aria-hidden="true" />
             </motion.div>
         </div>
 
         <div className="hidden h-full flex-col justify-center gap-24 xl:col-span-3 xl:flex">
              <motion.div initial={{ x: 50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.3 }} className="self-start">
-                <GlassWidget icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label="Active Users" value={data.activeUsers} />
+                <GlassWidget icon={Users} color="text-[#ff2d55]" bg="bg-[#ff2d55]/10" label={t("stats.activeUsers")} value={data.activeUsers} />
              </motion.div>
              <motion.div initial={{ x: 50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.5 }} className="self-end">
-                <GlassWidget icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label="LinkedIn Followers" value={data.linkedinFollowers} />
+                <GlassWidget icon={Linkedin} color="text-blue-600" bg="bg-blue-600/10" label={t("stats.linkedinFollowers")} value={data.linkedinFollowers} />
              </motion.div>
         </div>
 
@@ -92,9 +95,9 @@ function GlassWidget({ icon: Icon, color, bg, label, value }: any) {
     return (
         <motion.div 
             whileHover={{ y: -5 }}
-            className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/60 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-[#111]/60 dark:hover:border-[#ff2d55]/30 dark:shadow-black/50"
+            className="flex min-w-[220px] items-center gap-4 rounded-2xl border border-gray-100 bg-white/10 p-5 shadow-xl backdrop-blur-xl transition-all hover:border-[#1e5eff]/30 dark:border-white/5 dark:bg-neutral-900/10 dark:hover:border-[#ff2d55]/30 dark:shadow-black/50"
         >
-            <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`}>
+            <div className={`flex h-12 w-12 items-center justify-center rounded-xl ${bg} ${color}`} aria-hidden="true">
                 <Icon size={24} />
             </div>
             <div className="flex flex-col items-start">
@@ -107,8 +110,8 @@ function GlassWidget({ icon: Icon, color, bg, label, value }: any) {
 
 function MobileStatItem({ icon: Icon, color, bg, label, value }: any) {
     return (
-        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/60 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-[#111]/60">
-            <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`}>
+        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-white/10 p-3 shadow-sm backdrop-blur-xl dark:border-white/5 dark:bg-neutral-900/10">
+            <div className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${bg} ${color}`} aria-hidden="true">
                 <Icon size={20} />
             </div>
             <div className="flex flex-col items-start overflow-hidden">
diff --git a/frontend/components/about/InteractiveGame.tsx b/frontend/components/about/InteractiveGame.tsx
index 47f34c70..b85afd4b 100644
--- a/frontend/components/about/InteractiveGame.tsx
+++ b/frontend/components/about/InteractiveGame.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { Heart, Bug, Play, X, RotateCcw, Zap, Skull, Rabbit } from "lucide-react"
+import { useTranslations } from "next-intl"
 
 const GAME_WIDTH_DESKTOP = 540
 const GAME_WIDTH_MOBILE = 320
@@ -37,10 +38,10 @@ const OBSTACLE_CONFIGS: Record<ObstacleType, Omit<Obstacle, 'x'>> = {
 }
 
 const LEVEL_THRESHOLDS = [
-    { score: 0, types: ['ground'] as ObstacleType[], name: 'Level 1', baseSpeed: 3.5 },
-    { score: 8, types: ['ground', 'fast'] as ObstacleType[], name: 'Level 2', baseSpeed: 4 },
-    { score: 18, types: ['ground', 'fast', 'flying'] as ObstacleType[], name: 'Level 3', baseSpeed: 4.5 },
-    { score: 30, types: ['ground', 'fast', 'flying', 'tall'] as ObstacleType[], name: 'Level 4', baseSpeed: 5 },
+    { score: 0, types: ['ground'] as ObstacleType[], nameKey: 'level1', baseSpeed: 3.5 },
+    { score: 8, types: ['ground', 'fast'] as ObstacleType[], nameKey: 'level2', baseSpeed: 4 },
+    { score: 18, types: ['ground', 'fast', 'flying'] as ObstacleType[], nameKey: 'level3', baseSpeed: 4.5 },
+    { score: 30, types: ['ground', 'fast', 'flying', 'tall'] as ObstacleType[], nameKey: 'level4', baseSpeed: 5 },
 ]
 
 function getBaseSpeed(score: number): number {
@@ -63,14 +64,14 @@ function getAvailableTypes(score: number): ObstacleType[] {
     return types
 }
 
-function getCurrentLevel(score: number): string {
-    let name = 'Level 1'
+function getCurrentLevelKey(score: number): string {
+    let nameKey = 'level1'
     for (const level of LEVEL_THRESHOLDS) {
         if (score >= level.score) {
-            name = level.name
+            nameKey = level.nameKey
         }
     }
-    return name
+    return nameKey
 }
 
 function getRandomObstacle(score: number, gameWidth: number): Obstacle {
@@ -100,6 +101,7 @@ function getRandomObstacle(score: number, gameWidth: number): Obstacle {
 }
 
 export function InteractiveGame() {
+    const t = useTranslations("about.arcade")
     const [mode, setMode] = useState<'idle' | 'preview' | 'playing'>('idle')
     const [gameOver, setGameOver] = useState(false)
     const [score, setScore] = useState(0)
@@ -138,7 +140,7 @@ export function InteractiveGame() {
     const requestRef = useRef<number | null>(null)
     const pillRef = useRef<HTMLDivElement>(null)
     const hasPassedRef = useRef(false)
-    const prevLevelRef = useRef('Level 1')
+    const prevLevelRef = useRef('level1')
 
     const exitGame = useCallback(() => {
         setMode('idle')
@@ -149,7 +151,7 @@ export function InteractiveGame() {
         setGameSpeed(3.5)
         isJumpingRef.current = false
         hasPassedRef.current = false
-        prevLevelRef.current = 'Level 1'
+        prevLevelRef.current = 'level1'
         if (requestRef.current !== null) cancelAnimationFrame(requestRef.current)
     }, [gameWidth])
 
@@ -162,7 +164,7 @@ export function InteractiveGame() {
         isJumpingRef.current = false
         hasPassedRef.current = false
         lastTimeRef.current = 0
-        prevLevelRef.current = 'Level 1'
+        prevLevelRef.current = 'level1'
     }, [gameWidth])
 
     const handleGameOver = useCallback((finalScore: number) => {
@@ -181,9 +183,9 @@ export function InteractiveGame() {
     }, [mode, gameOver])
 
     useEffect(() => {
-        const currentLevel = getCurrentLevel(score)
-        if (currentLevel !== prevLevelRef.current && score > 0) {
-            prevLevelRef.current = currentLevel
+        const currentLevelKey = getCurrentLevelKey(score)
+        if (currentLevelKey !== prevLevelRef.current && score > 0) {
+            prevLevelRef.current = currentLevelKey
             setLevelUpFlash(true)
             setTimeout(() => setLevelUpFlash(false), 500)
         }
@@ -385,12 +387,12 @@ export function InteractiveGame() {
                         <div className="flex items-center gap-2 md:gap-3">
                             <Heart className="h-4 w-4 md:h-5 md:w-5 fill-[#ff005b] text-[#ff005b]" strokeWidth={0} />
                             <span className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.15em] md:tracking-[0.2em] text-neutral-600 dark:text-neutral-300">
-                                DevLovers Arcade
+                                {t("title")}
                             </span>
                         </div>
                         <div className="flex items-center gap-2 opacity-50">
                             <span className="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" />
-                            <span className="text-[8px] md:text-[9px] font-mono text-neutral-400">READY</span>
+                            <span className="text-[8px] md:text-[9px] font-mono text-neutral-400">{t("ready")}</span>
                         </div>
                     </motion.div>
                 ) : (
@@ -404,10 +406,10 @@ export function InteractiveGame() {
                                 <div className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500 shadow-[0_0_8px_#22c55e]' : 'bg-red-500'}`} />
                                 <div className="flex flex-col">
                                     <span className="text-[8px] font-mono font-bold text-neutral-400 uppercase tracking-wider">
-                                        {getCurrentLevel(score)}
+                                        {t(getCurrentLevelKey(score))}
                                     </span>
                                     <span className="text-[10px] font-bold text-neutral-700 dark:text-white leading-none">
-                                        {gameOver ? "CRASHED" : "RUNNING"}
+                                        {gameOver ? t("crashed") : t("running")}
                                     </span>
                                 </div>
                             </div>
@@ -415,20 +417,20 @@ export function InteractiveGame() {
                             <div className="flex md:hidden items-center gap-2">
                                 <div className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500' : 'bg-red-500'}`} />
                                 <span className="text-[8px] font-mono font-bold text-neutral-400 uppercase">
-                                    {getCurrentLevel(score)}
+                                    {t(getCurrentLevelKey(score))}
                                 </span>
                             </div>
 
                             <div className="flex items-center gap-3 md:gap-6 md:absolute md:left-1/2 md:-translate-x-1/2">
                                 <div className="flex flex-col items-center">
-                                    <span className="text-[7px] md:text-[8px] font-bold text-neutral-400 uppercase tracking-widest">High</span>
+                                    <span className="text-[7px] md:text-[8px] font-bold text-neutral-400 uppercase tracking-widest">{t("high")}</span>
                                     <span suppressHydrationWarning className="font-mono text-[10px] md:text-xs font-bold text-neutral-500">
                                         {highScore.toString().padStart(3, '0')}
                                     </span>
                                 </div>
                                 <div className="w-[1px] h-3 md:h-4 bg-neutral-300 dark:bg-white/20" />
                                 <div className="flex flex-col items-center">
-                                    <span className="text-[7px] md:text-[8px] font-bold text-[#ff005b] uppercase tracking-widest">Score</span>
+                                    <span className="text-[7px] md:text-[8px] font-bold text-[#ff005b] uppercase tracking-widest">{t("score")}</span>
                                     <span className="font-mono text-sm md:text-lg font-black text-neutral-800 dark:text-white leading-none">
                                         {score.toString().padStart(3, '0')}
                                     </span>
@@ -481,7 +483,7 @@ export function InteractiveGame() {
                                 <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
                                     <div className="bg-white/90 dark:bg-neutral-800/90 border border-neutral-200 dark:border-white/10 px-5 py-2 rounded-lg shadow-xl flex items-center gap-2">
                                         <Play size={10} fill="currentColor" className="text-[#ff005b]" />
-                                        <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-800 dark:text-white">Click to Start</span>
+                                        <span className="text-[10px] font-bold uppercase tracking-widest text-neutral-800 dark:text-white">{t("clickToStart")}</span>
                                     </div>
                                 </motion.div>
                             )}
@@ -493,14 +495,14 @@ export function InteractiveGame() {
                                 >
                                     <div className="flex items-center gap-2 mb-4 text-[#ff005b]">
                                         <Zap size={18} fill="currentColor" />
-                                        <span className="text-sm font-black uppercase tracking-widest">System Failure</span>
+                                        <span className="text-sm font-black uppercase tracking-widest">{t("systemFailure")}</span>
                                     </div>
                                     <div className="flex gap-3">
                                         <button
                                             onClick={(e) => {e.stopPropagation(); handleRetry();}}
                                             className="px-6 py-2.5 bg-[#ff005b] text-white text-[10px] font-bold uppercase tracking-widest rounded-lg shadow-lg hover:brightness-110 active:scale-95 transition-all flex items-center gap-2"
                                         >
-                                            <RotateCcw size={12} /> Retry
+                                            <RotateCcw size={12} /> {t("retry")}
                                         </button>
                                     </div>
                                 </motion.div>
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index 15b74862..1e6382ca 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -1,149 +1,168 @@
 "use client"
-
+import { useState } from "react"
 import { motion } from "framer-motion"
 import { Check, Heart, X, Sparkles, Server, ArrowRight } from "lucide-react"
-import type { Sponsor } from "@/lib/about/github-sponsors" 
-import { SponsorsWall } from "./SponsorsWall"
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+import type { Sponsor } from "@/lib/about/github-sponsors"
+import { SponsorsWall } from "./SponsorsWall"
+import { GradientBadge } from "@/components/ui/gradient-badge"
+import { SectionHeading } from "@/components/ui/section-heading"
+import { ParticleCanvas } from "@/components/ui/particle-canvas"
+
 interface PricingSectionProps {
   sponsors?: Sponsor[]
 }
 
 export function PricingSection({ sponsors = [] }: PricingSectionProps) {
+    const t = useTranslations("about.pricing")
+    const [activeShape, setActiveShape] = useState<"brackets" | "heart" | null>(null)
+
+    const juniorFeatures = [
+        t("junior.features.unlimited"),
+        t("junior.features.fullAccess"),
+        t("junior.features.noCard"),
+        t("junior.features.noGuilt"),
+    ]
+
+    const heroFeatures = [
+        t("hero.features.servers"),
+        t("hero.features.coffee"),
+        t("hero.features.badge"),
+        t("hero.features.feeling"),
+    ]
+
     return (
-        <section className="w-full py-24 relative overflow-hidden bg-gray-50 dark:bg-transparent">
-            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[100px] rounded-full pointer-events-none" />
+        <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent" aria-labelledby="pricing-heading">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[100px] rounded-full pointer-events-none" aria-hidden="true" />
 
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+            <div className="absolute inset-0 pointer-events-none z-0">
+                <ParticleCanvas activeShape={activeShape} className="w-full h-full" />
+            </div>
+
+            <div className="container-main relative z-10">
                 <div className="text-center mb-16">
-                    <motion.div 
-                        initial={{ opacity: 0, y: 10 }} 
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
                         whileInView={{ opacity: 1, y: 0 }}
-                        className="inline-flex items-center gap-2 px-3 py-1 rounded-full 
-                            border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 
-                            bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 
-                            text-[#1e5eff] dark:text-[#ff2d55] 
-                            text-[10px] font-bold uppercase tracking-widest mb-4"
                     >
-                        <Sparkles size={12} /> No Hidden Fees
+                        <h2 id="pricing-heading" className="sr-only">{t("heading")}</h2>
+                        <GradientBadge icon={Sparkles} text={t("badge")} className="mb-4" />
                     </motion.div>
-                    <h2 className="text-4xl md:text-5xl font-black tracking-tight text-gray-900 dark:text-white mb-6">
-                        Invest in your brain, <br />
-                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-gray-500 to-gray-700 dark:from-neutral-400 dark:to-neutral-600">not our subscriptions.</span>
-                    </h2>
-                    <p className="text-gray-700 dark:text-neutral-400 max-w-2xl mx-auto text-lg font-light">
-                        We believe knowledge should be accessible. So we don&apos;t sell courses. But servers heat up and coffee runs out. The choice is yours.
-                    </p>
+
+                    <SectionHeading
+                        title={t("title")}
+                        highlight={t("titleHighlight")}
+                        subtitle={t("subtitle")}
+                    />
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-24">
-                    
-                    <motion.div 
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12 max-w-4xl mx-auto mb-6">
+
+                    <motion.div
                         whileHover={{ y: -5 }}
-                        className="flex flex-col p-8 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50 backdrop-blur-sm shadow-sm"
+                        onMouseEnter={() => setActiveShape("brackets")}
+                        onMouseLeave={() => setActiveShape(null)}
+                        onFocus={() => setActiveShape("brackets")}
+                        onBlur={() => setActiveShape(null)}
+                        className="flex flex-col p-8 lg:p-10 rounded-3xl border border-gray-200 dark:border-neutral-800 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md shadow-sm relative z-10"
                     >
                         <div className="mb-6">
-                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Junior Engineer</h3>
-                            <p className="text-sm text-gray-600 dark:text-neutral-400">For those who want an offer, not expenses.</p>
+                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{t("junior.title")}</h3>
+                            <p className="text-sm text-gray-600 dark:text-neutral-400">{t("junior.description")}</p>
                         </div>
                         <div className="mb-8">
-                            <span className="text-5xl font-black text-gray-900 dark:text-white">$0</span>
-                            <span className="text-gray-500 dark:text-neutral-500 font-mono text-sm ml-2">/ forever</span>
+                            <span className="text-4xl lg:text-5xl font-black text-gray-900 dark:text-white">{t("junior.price")}</span>
+                            <span className="text-gray-500 dark:text-neutral-500 font-mono text-sm ml-2">{t("junior.period")}</span>
                         </div>
-                        
+
                         <ul className="space-y-4 mb-8 flex-1">
-                            {[
-                                "Unlimited Questions",
-                                "Full Quiz Access",
-                                "No Credit Card Required",
-                                "0% Guilt Trip",
-                            ].map((item) => (
+                            {juniorFeatures.map((item) => (
                                 <li key={item} className="flex items-center gap-3 text-sm text-gray-700 dark:text-neutral-300">
-                                    <div className="p-1 rounded-full bg-green-500/10 text-green-500">
+                                    <div className="p-1 rounded-full bg-green-500/10 text-green-500" aria-hidden="true">
                                         <Check size={12} />
                                     </div>
                                     {item}
                                 </li>
                             ))}
                              <li className="flex items-center gap-3 text-sm text-gray-400 dark:text-neutral-500 line-through decoration-gray-300 dark:decoration-neutral-700">
-                                    <div className="p-1 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-400 dark:text-neutral-600">
+                                    <div className="p-1 rounded-full bg-gray-100 dark:bg-neutral-800 text-gray-400 dark:text-neutral-600" aria-hidden="true">
                                         <X size={12} />
                                     </div>
-                                    Personal Yacht
+                                    {t("junior.noYacht")}
                                 </li>
                         </ul>
 
                         <Link href="/" className="w-full py-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 hover:bg-gray-100 dark:hover:bg-white/10 text-gray-900 dark:text-white font-bold text-center transition-all uppercase tracking-widest text-xs">
-                            Start Learning
+                            {t("junior.cta")}
                         </Link>
                     </motion.div>
 
-                    <motion.div 
+                    <motion.div
                         whileHover={{ y: -5 }}
-                        className="relative flex flex-col p-8 rounded-3xl overflow-hidden backdrop-blur-sm
+                        onMouseEnter={() => setActiveShape("heart")}
+                        onMouseLeave={() => setActiveShape(null)}
+                        onFocus={() => setActiveShape("heart")}
+                        onBlur={() => setActiveShape(null)}
+                        className="relative flex flex-col p-8 lg:p-10 rounded-3xl overflow-hidden backdrop-blur-md z-10
                             border border-[#1e5eff]/30 dark:border-[#ff2d55]/30
-                            bg-gradient-to-b from-[#1e5eff]/5 to-white dark:from-[#ff2d55]/10 dark:to-neutral-900/50"
+                            bg-gradient-to-b from-[#1e5eff]/5 to-white/10 dark:from-[#ff2d55]/10 dark:to-neutral-900/10"
                     >
                         <div className="absolute top-0 right-0 px-3 py-1 rounded-bl-xl uppercase tracking-widest text-[10px] font-bold text-white
                             bg-[#1e5eff] dark:bg-[#ff2d55]"
                         >
-                            High Impact
+                            {t("hero.badge")}
                         </div>
 
                         <div className="mb-6">
                             <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                                Open Source Hero 
-                                <Heart size={18} className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]" />
+                                {t("hero.title")}
+                                <Heart size={18} className="fill-[#1e5eff] text-[#1e5eff] dark:fill-[#ff2d55] dark:text-[#ff2d55]" aria-label="Supporter" />
                             </h3>
-                            <p className="text-sm text-neutral-500 dark:text-neutral-400">For those who already landed an offer thanks to us.</p>
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400">{t("hero.description")}</p>
                         </div>
                         <div className="mb-8">
-                            <span className="text-5xl font-black text-[#1e5eff] dark:text-[#ff2d55]">$$$</span>
-                            <span className="text-neutral-500 font-mono text-sm ml-2">/ karma points</span>
+                            <span className="text-4xl lg:text-5xl font-black text-[#1e5eff] dark:text-[#ff2d55]">{t("hero.price")}</span>
+                            <span className="text-neutral-500 font-mono text-sm ml-2">{t("hero.period")}</span>
                         </div>
-                        
+
                         <ul className="space-y-4 mb-8 flex-1">
-                            {[
-                                "Keep Servers Alive",
-                                "Buy Coffee for Mentors",
-                                "Profile Badge (Big Flex)",
-                                "Warm Fuzzy Feeling",
-                            ].map((item) => (
+                            {heroFeatures.map((item) => (
                                 <li key={item} className="flex items-center gap-3 text-sm text-gray-900 dark:text-white font-medium">
-                                    <div className="p-1 rounded-full bg-[#1e5eff]/20 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]">
+                                    <div className="p-1 rounded-full bg-[#1e5eff]/20 text-[#1e5eff] dark:bg-[#ff2d55]/20 dark:text-[#ff2d55]" aria-hidden="true">
                                         <Sparkles size={12} />
                                     </div>
                                     {item}
                                 </li>
                             ))}
                             <li className="flex items-center gap-3 text-sm text-gray-600 dark:text-neutral-400 italic">
-                                    <div className="p-1 rounded-full bg-gray-200 dark:bg-neutral-800 text-gray-500 dark:text-neutral-500">
+                                    <div className="p-1 rounded-full bg-gray-200 dark:bg-neutral-800 text-gray-500 dark:text-neutral-500" aria-hidden="true">
                                         <Server size={12} />
                                     </div>
-                                    We actually pay for Drizzle
+                                    {t("hero.drizzle")}
                                 </li>
                         </ul>
 
-                        <Link 
-                            href="https://github.com/sponsors/DevLoversTeam" 
-                            target="_blank" 
+                        <Link
+                            href="https://github.com/sponsors/DevLoversTeam"
+                            target="_blank"
                             rel="noopener noreferrer"
                             className="group w-full py-4 rounded-xl text-white font-bold flex items-center justify-center gap-2 transition-all uppercase tracking-widest text-xs
                                 bg-[#1e5eff] hover:bg-[#1e5eff]/90 shadow-[0_0_20px_rgba(30,94,255,0.3)] hover:shadow-[0_0_30px_rgba(30,94,255,0.5)]
                                 dark:bg-[#ff2d55] dark:hover:bg-[#ff2d55]/90 dark:shadow-[0_0_20px_rgba(255,45,85,0.3)] dark:hover:shadow-[0_0_30px_rgba(255,45,85,0.5)]"
                         >
-                            Support the Project <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform"/>
+                            {t("hero.cta")} <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                         </Link>
                     </motion.div>
 
                 </div>
-                
-                <p className="text-center text-gray-500 dark:text-neutral-600 text-xs mb-12 font-mono">
-                    *No developers were harmed in the making of this pricing table. Only caffeine levels were impacted.
+
+                <p className="text-center text-gray-400 dark:text-neutral-600 text-[10px] mb-16 font-mono max-w-lg mx-auto leading-relaxed">
+                    {t("disclaimer")}
                 </p>
 
                 <SponsorsWall sponsors={sponsors} />
-                
+
             </div>
         </section>
     )
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index 07415439..8eb1cba7 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -4,8 +4,10 @@ import { motion } from "framer-motion"
 import Image from "next/image"
 import Link from "next/link"
 import { Plus, Crown, Sparkles } from "lucide-react"
+import { useTranslations } from "next-intl"
 import { cn } from "@/lib/utils"
 import type { Sponsor } from "@/lib/about/github-sponsors"
+import { GradientBadge } from "@/components/ui/gradient-badge"
 
 interface SponsorsWallProps {
   sponsors?: Sponsor[]
@@ -14,22 +16,20 @@ interface SponsorsWallProps {
 const MAX_SPONSORS = 10
 
 export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
+  const t = useTranslations("about.sponsors")
   const displaySponsors = sponsors.slice(0, MAX_SPONSORS)
 
   return (
     <div className="w-full mt-16 flex flex-col items-center">
-      <div className="flex items-center gap-2 mb-4 opacity-60">
-        <Sparkles size={10} className="text-[#1e5eff] dark:text-[#ff2d55]" />
-        <span className="text-[10px] font-mono uppercase tracking-widest text-gray-500">
-           Latest Contributors
-        </span>
+      <div className="mb-4 opacity-100">
+          <GradientBadge icon={Sparkles} text={t("badge")} />
       </div>
 
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, y: 10 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
-        className="group relative flex items-center p-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-[#0a0a0a]/60 backdrop-blur-xl shadow-sm hover:shadow-lg hover:border-[#1e5eff]/20 dark:hover:border-[#ff2d55]/20 transition-all duration-300"
+        className="group relative flex items-center p-2 rounded-full border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-xl shadow-sm hover:shadow-lg hover:border-[#1e5eff]/20 dark:hover:border-[#ff2d55]/20 transition-all duration-300"
       >
         <div className="flex -space-x-3 md:-space-x-4 pl-2">
             {displaySponsors.map((sponsor) => (
@@ -38,34 +38,36 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
 
              {displaySponsors.length === 0 && (
                 <div className="w-9 h-9 rounded-full bg-gray-100 dark:bg-white/5 border-2 border-white dark:border-black flex items-center justify-center">
-                    <span className="text-[8px] text-gray-400">You?</span>
+                    <span className="text-[8px] text-gray-400">{t("emptySlot")}</span>
                 </div>
              )}
         </div>
 
         <div className="h-6 w-[1px] bg-gray-200 dark:bg-white/10 mx-4" />
 
-        <Link 
-            href="https://github.com/sponsors/DevLoversTeam" 
+        <Link
+            href="https://github.com/sponsors/DevLoversTeam"
             target="_blank"
+            rel="noopener noreferrer"
+            aria-label={t("ctaAriaLabel")}
             className="relative flex items-center justify-center w-10 h-10 rounded-full border-2 border-dashed border-gray-300 dark:border-white/20 hover:border-[#1e5eff] dark:hover:border-[#ff2d55] bg-transparent hover:bg-[#1e5eff]/5 dark:hover:bg-[#ff2d55]/5 transition-all group/cta"
         >
-            <Plus size={16} className="text-gray-400 group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55] transition-colors" />
-            
+            <Plus size={16} className="text-gray-400 group-hover/cta:text-[#1e5eff] dark:group-hover/cta:text-[#ff2d55] transition-colors" aria-hidden="true" />
+
             <div className="absolute bottom-full mb-3 left-1/2 -translate-x-1/2 px-2 py-1 bg-[#1e5eff] dark:bg-[#ff2d55] text-white text-[10px] font-bold rounded opacity-0 group-hover/cta:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
-                Your Spot
+                {t("yourSpot")}
                 <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-[#1e5eff] dark:border-t-[#ff2d55]" />
             </div>
         </Link>
 
-        <Link href="https://github.com/sponsors/DevLoversTeam" target="_blank" className="hidden sm:block ml-3 mr-2 text-xs font-bold text-gray-500 hover:text-[#1e5eff] dark:hover:text-[#ff2d55] transition-colors">
-            Join the club
+        <Link href="https://github.com/sponsors/DevLoversTeam" target="_blank" rel="noopener noreferrer" className="hidden sm:block ml-3 mr-2 text-xs font-bold text-gray-500 hover:text-[#1e5eff] dark:hover:text-[#ff2d55] transition-colors">
+            {t("joinClub")}
         </Link>
 
       </motion.div>
 
-      <p className="mt-4 text-[10px] text-gray-400 font-mono">
-         100% of funds go to server costs & coffee
+      <p className="mt-4 text-[10px] text-gray-500 dark:text-neutral-500 font-mono">
+         {t("fundsNote")}
       </p>
 
     </div>
@@ -91,7 +93,7 @@ function SponsorItem({ sponsor }: { sponsor: Sponsor }) {
             
             {sponsor.tierColor === 'gold' && (
                  <div className="absolute inset-0 bg-black/10 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
-                    <Crown size={12} className="text-white fill-white" />
+                    <Crown size={12} className="text-white fill-white" aria-label="Gold Tier Sponsor" />
                  </div>
             )}
         </div>
diff --git a/frontend/components/about/TopicsSection.tsx b/frontend/components/about/TopicsSection.tsx
index 48b70326..fce47870 100644
--- a/frontend/components/about/TopicsSection.tsx
+++ b/frontend/components/about/TopicsSection.tsx
@@ -2,34 +2,37 @@
 
 import { motion } from "framer-motion"
 import { ArrowUpRight } from "lucide-react"
-import { TOPICS, type Topic } from "@/data/about" 
+import { useTranslations } from "next-intl"
+import { TOPICS, type Topic } from "@/data/about"
 import Image from "next/image"
-import Link from "next/link" 
+import Link from "next/link"
 
 export function TopicsSection() {
+    const t = useTranslations("about.topics")
+
     return (
-        <section id="topics" className="w-full py-24 bg-gray-50 dark:bg-transparent">
-            <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
-                    
+        <section id="topics" className="w-full py-20 lg:py-28 bg-gray-50 dark:bg-transparent">
+            <div className="container-main">
+
                     <div className="mb-16 md:flex md:justify-between md:items-end">
                         <div className="max-w-2xl">
-                            <motion.div 
+                            <motion.div
                                 initial={{ opacity: 0, x: -20 }}
                                 whileInView={{ opacity: 1, x: 0 }}
                                 className="text-blue-600 dark:text-[#ff2d55] font-bold uppercase tracking-widest text-xs mb-4"
                             >
-                                / The Ecosystem
+                                {t("pretitle")}
                             </motion.div>
-                            <h2 className="text-4xl md:text-5xl font-black text-black dark:text-white tracking-tighter">
-                                Master your <br />
-                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">
-                                    entire stack
+                            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-black dark:text-white tracking-tighter">
+                                {t("titleStart")} <br />
+                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
+                                    {t("titleHighlight")}
                                 </span>
                             </h2>
                         </div>
-                        
+
                         <p className="hidden md:block text-neutral-600 dark:text-neutral-400 max-w-sm text-base font-normal mt-4 md:mt-0 md:mb-2">
-                             From frontend frameworks to backend logic. <br/> We cover the key technologies for 2026.
+                             {t("description")}
                         </p>
                     </div>
 
diff --git a/frontend/components/auth/fields/EmailField.tsx b/frontend/components/auth/fields/EmailField.tsx
index d0613826..972b448e 100644
--- a/frontend/components/auth/fields/EmailField.tsx
+++ b/frontend/components/auth/fields/EmailField.tsx
@@ -11,6 +11,19 @@ export function EmailField({
 }: EmailFieldProps) {
     const t = useTranslations("auth.fields");
 
+    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+        const input = e.target;
+        if (input.validity.valueMissing) {
+            input.setCustomValidity(t("validation.required"));
+        } else if (input.validity.typeMismatch) {
+            input.setCustomValidity(t("validation.invalidEmail"));
+        }
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+        e.currentTarget.setCustomValidity("");
+    };
+
     return (
         <input
             name="email"
@@ -18,6 +31,8 @@ export function EmailField({
             placeholder={t("email")}
             required
             className="w-full rounded border px-3 py-2"
+            onInvalid={handleInvalid}
+            onInput={handleInput}
             onChange={
                 onChange
                     ? e => onChange(e.target.value)
diff --git a/frontend/components/auth/fields/NameField.tsx b/frontend/components/auth/fields/NameField.tsx
index 40f931fb..b143b0e0 100644
--- a/frontend/components/auth/fields/NameField.tsx
+++ b/frontend/components/auth/fields/NameField.tsx
@@ -11,6 +11,17 @@ export function NameField({
 }: NameFieldProps) {
     const t = useTranslations("auth.fields");
 
+    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+        const input = e.target;
+        if (input.validity.valueMissing) {
+            input.setCustomValidity(t("validation.required"));
+        }
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+        e.currentTarget.setCustomValidity("");
+    };
+
     return (
         <input
             name={name}
@@ -18,6 +29,8 @@ export function NameField({
             placeholder={t("name")}
             required
             className="w-full rounded border px-3 py-2"
+            onInvalid={handleInvalid}
+            onInput={handleInput}
         />
     );
 }
\ No newline at end of file
diff --git a/frontend/components/auth/fields/PasswordField.tsx b/frontend/components/auth/fields/PasswordField.tsx
index b4c101d2..cbc36d87 100644
--- a/frontend/components/auth/fields/PasswordField.tsx
+++ b/frontend/components/auth/fields/PasswordField.tsx
@@ -15,6 +15,21 @@ export function PasswordField({
     const t = useTranslations("auth.fields");
     const [visible, setVisible] = useState(false);
 
+    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+        const input = e.target;
+        if (input.validity.valueMissing) {
+            input.setCustomValidity(t("validation.required"));
+        } else if (input.validity.tooShort && minLength) {
+            input.setCustomValidity(
+                t("validation.passwordTooShort", { minLength })
+            );
+        }
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+        e.currentTarget.setCustomValidity("");
+    };
+
     return (
         <div className="relative">
             <input
@@ -24,6 +39,8 @@ export function PasswordField({
                 required
                 minLength={minLength}
                 className="w-full rounded border px-3 py-2 pr-10"
+                onInvalid={handleInvalid}
+                onInput={handleInput}
             />
 
             <button
diff --git a/frontend/components/blog/BlogFilters.tsx b/frontend/components/blog/BlogFilters.tsx
index a499d36c..2ff2bff1 100644
--- a/frontend/components/blog/BlogFilters.tsx
+++ b/frontend/components/blog/BlogFilters.tsx
@@ -74,7 +74,7 @@ type Category = {
 };
 
 const SOCIAL_ICON_CLASSNAME =
-  'h-3.5 w-3.5 text-gray-900 dark:text-gray-100 transition-colors group-hover:text-[var(--accent-primary)]';
+  'h-3.5 w-3.5 text-gray-900 dark:text-gray-100 transition-colors group-hover:text-[var(--accent-primary)] dark:group-hover:text-[var(--accent-primary)]';
 
 function SocialIcon({ platform }: { platform?: string }) {
   const normalized = (platform || '').trim().toLowerCase();
@@ -109,7 +109,7 @@ function SocialIcon({ platform }: { platform?: string }) {
     return (
       <span
         aria-hidden="true"
-        className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border border-current text-[8px] font-semibold text-gray-900 transition-colors group-hover:text-[var(--accent-primary)] dark:text-gray-100"
+        className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border border-current text-[8px] font-semibold text-gray-900 transition-colors group-hover:text-[var(--accent-primary)] dark:text-gray-100 dark:group-hover:text-[var(--accent-primary)]"
       >
         B
       </span>
@@ -194,9 +194,16 @@ export default function BlogFilters({
     const name = author.name || '';
     const norm = normalizeAuthor(name);
     if (!norm) return;
-    setSelectedAuthor(prev =>
-      prev?.norm === norm ? null : { name, norm, data: author }
-    );
+    const isSame = selectedAuthor?.norm === norm;
+    setSelectedAuthor(isSame ? null : { name, norm, data: author });
+    const params = new URLSearchParams(searchParams?.toString() || '');
+    if (isSame) {
+      params.delete('author');
+    } else {
+      params.set('author', name);
+    }
+    const nextPath = params.toString() ? `${pathname}?${params}` : pathname;
+    router.replace(nextPath);
   };
 
   const clearAll = () => {
@@ -382,7 +389,7 @@ export default function BlogFilters({
   }, [selectedAuthorData]);
 
   return (
-    <div className="mt-8">
+    <div className="mt-4">
       {!resolvedAuthor && featuredPost && (
         <section className="mb-12">
           <div className="grid gap-8 md:grid-cols-[1.3fr_1fr] md:items-stretch lg:grid-cols-[1.4fr_1fr]">
@@ -400,21 +407,23 @@ export default function BlogFilters({
                 </div>
               </Link>
             )}
-            <div className="pt-2 flex flex-col h-full">
+            <div className="relative flex flex-col h-full pt-8">
               {featuredPost.categories?.[0] && (
-                <div className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--accent-primary)] -mt-2">
+                <div className="absolute top-0 left-0 text-xs font-bold uppercase tracking-[0.2em] text-[var(--accent-primary)]">
                   {featuredPost.categories[0]}
                 </div>
               )}
-              <Link
-                href={`/blog/${featuredPost.slug.current}`}
-                className="mt-3 block text-3xl font-semibold leading-tight text-gray-900 transition hover:underline underline-offset-4 dark:text-gray-100 md:text-4xl"
-              >
-                {featuredPost.title}
-              </Link>
-              <p className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 whitespace-pre-line">
-                {plainTextExcerpt(featuredPost.body)}
-              </p>
+              <div className="my-auto">
+                <Link
+                  href={`/blog/${featuredPost.slug.current}`}
+                  className="mt-3 block text-3xl font-semibold leading-tight text-gray-900 transition hover:underline underline-offset-4 dark:text-gray-100 md:text-4xl"
+                >
+                  {featuredPost.title}
+                </Link>
+                <p className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 whitespace-pre-line">
+                  {plainTextExcerpt(featuredPost.body)}
+                </p>
+              </div>
               {featuredPost.publishedAt && (
                 <div className="mt-auto pt-8 flex items-center justify-between text-xs tracking-[0.25em] text-gray-500 dark:text-gray-400">
                   <time
@@ -535,7 +544,7 @@ export default function BlogFilters({
               className={
                 !resolvedCategory
                   ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium text-[var(--accent-primary)] transition whitespace-nowrap sm:border-[var(--accent-primary)]'
-                  : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 hover:text-[var(--accent-primary)] transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200'
+                  : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200 hover:bg-secondary hover:text-foreground'
               }
             >
               {t('all')}
@@ -554,7 +563,7 @@ export default function BlogFilters({
                 className={
                   resolvedCategory?.norm === category.norm
                     ? 'rounded-full border border-transparent px-4 py-2 text-sm font-medium text-[var(--accent-primary)] transition whitespace-nowrap sm:border-[var(--accent-primary)]'
-                    : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 hover:text-[var(--accent-primary)] transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200'
+                    : 'rounded-full border border-transparent px-4 py-2 text-sm text-gray-600 transition whitespace-nowrap dark:text-gray-300 sm:border-gray-300 sm:text-gray-700 sm:dark:border-gray-700 sm:dark:text-gray-200 hover:bg-secondary hover:text-foreground'
                 }
               >
                 {getCategoryLabel(category.name)}
diff --git a/frontend/components/blog/BlogPageHeader.tsx b/frontend/components/blog/BlogPageHeader.tsx
new file mode 100644
index 00000000..3a2ff306
--- /dev/null
+++ b/frontend/components/blog/BlogPageHeader.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+type BlogPageHeaderProps = {
+  title: string;
+  subtitle: string;
+};
+
+export function BlogPageHeader({ title, subtitle }: BlogPageHeaderProps) {
+  const searchParams = useSearchParams();
+  const authorParam = (searchParams?.get('author') || '').trim();
+  if (authorParam) return null;
+
+  return (
+    <>
+      <h1 className="text-5xl font-extrabold mb-3 text-center leading-[1.1] bg-gradient-to-b from-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent">
+        {title}
+      </h1>
+      <p className="mx-auto mb-10 max-w-2xl text-center text-base text-gray-500 dark:text-gray-400">
+        {subtitle}
+      </p>
+    </>
+  );
+}
diff --git a/frontend/components/blog/FeaturedPostCtaButton.tsx b/frontend/components/blog/FeaturedPostCtaButton.tsx
new file mode 100644
index 00000000..76d3fe3f
--- /dev/null
+++ b/frontend/components/blog/FeaturedPostCtaButton.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { ArrowUpRight } from 'lucide-react';
+import { HeaderButton } from '@/components/shared/HeaderButton';
+
+type FeaturedPostCtaButtonProps = {
+  href: string;
+  label: string;
+  className?: string;
+};
+
+export function FeaturedPostCtaButton({
+  href,
+  label,
+  className,
+}: FeaturedPostCtaButtonProps) {
+  return (
+    <HeaderButton
+      href={href}
+      variant="icon"
+      icon={ArrowUpRight}
+      label={label}
+      className={className}
+    />
+  );
+}
diff --git a/frontend/components/header/AppMobileMenu.tsx b/frontend/components/header/AppMobileMenu.tsx
index 1ceac0be..45b91f45 100644
--- a/frontend/components/header/AppMobileMenu.tsx
+++ b/frontend/components/header/AppMobileMenu.tsx
@@ -3,10 +3,10 @@
 import { Menu, X, LogIn, ShoppingBag, Home } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
 import { Link, usePathname } from '@/i18n/routing';
 
 import { SITE_LINKS } from '@/lib/navigation';
-import { NAV_LINKS } from '@/components/shop/header/nav-links';
 import { LogoutButton } from '@/components/auth/logoutButton';
 import { HeaderButton } from '@/components/shared/HeaderButton';
 
@@ -26,7 +26,13 @@ export function AppMobileMenu({
   blogCategories = [],
 }: Props) {
   const t = useTranslations('navigation');
+  const tAria = useTranslations('aria');
+  const tMobileMenu = useTranslations('mobileMenu');
+  const tCategories = useTranslations('shop.catalog.categories');
+  const tProducts = useTranslations('shop.products');
   const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentCategory = searchParams.get('category');
   const [open, setOpen] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
 
@@ -55,11 +61,18 @@ export function AppMobileMenu({
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [open]);
 
+  const shopLinks = useMemo(() => [
+    { href: '/shop/products', label: tProducts('title'), category: null },
+    { href: '/shop/products?category=apparel', label: tCategories('apparel'), category: 'apparel' },
+    { href: '/shop/products?category=lifestyle', label: tCategories('lifestyle'), category: 'lifestyle' },
+    { href: '/shop/products?category=collectibles', label: tCategories('collectibles'), category: 'collectibles' },
+  ], [tProducts, tCategories]);
+
   const links = useMemo(() => {
-    if (variant === 'shop') return NAV_LINKS;
+    if (variant === 'shop') return shopLinks;
     if (variant === 'platform') return SITE_LINKS;
     return [];
-  }, [variant]);
+  }, [variant, shopLinks]);
 
   useEffect(() => {
     if (open) {
@@ -104,7 +117,7 @@ export function AppMobileMenu({
         style={{
           color: open ? 'var(--accent-primary)' : 'var(--muted-foreground)',
         }}
-        aria-label="Toggle menu"
+        aria-label={tAria('toggleMenu')}
         aria-expanded={open ? 'true' : 'false'}
         aria-controls={open ? 'app-mobile-nav' : undefined}
       >
@@ -137,16 +150,20 @@ export function AppMobileMenu({
                   <HeaderButton href="/" icon={Home} onClick={close}>
                     {t('home')}
                   </HeaderButton>
-                  {links.map(link => (
-                    <Link
-                      key={link.href}
-                      href={link.href}
-                      onClick={close}
-                      className={linkClass(pathname === link.href)}
-                    >
-                      {'labelKey' in link ? t(link.labelKey) : link.label}
-                    </Link>
-                  ))}
+                  {links.map(link => {
+                    const isActive = pathname === '/shop/products' &&
+                      ('category' in link ? link.category === currentCategory : currentCategory === null);
+                    return (
+                      <Link
+                        key={link.href}
+                        href={link.href}
+                        onClick={close}
+                        className={linkClass(isActive)}
+                      >
+                        {'labelKey' in link ? t(link.labelKey) : link.label}
+                      </Link>
+                    );
+                  })}
                 </>
               ) : null}
 
@@ -205,7 +222,7 @@ export function AppMobileMenu({
                   onClick={close}
                   className={linkClass(pathname === '/shop/admin/products/new')}
                 >
-                  New product
+                  {tMobileMenu('newProduct')}
                 </Link>
               ) : null}
 
@@ -224,12 +241,12 @@ export function AppMobileMenu({
                   {showAdminLink ? (
                     <Link
                       href="/shop/admin"
-                      aria-label="Shop admin"
-                      title="Shop admin"
+                      aria-label={tAria('shopAdmin')}
+                      title={tAria('shopAdmin')}
                       onClick={close}
                       className={linkClass(pathname === '/shop/admin')}
                     >
-                      Admin
+                      {tMobileMenu('admin')}
                     </Link>
                   ) : null}
 
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 52dd41d5..63a313e0 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -61,11 +61,7 @@ export function MainSwitcher({
   }
 
   return (
-    <main
-      className={
-        isQa || isHome ? 'mx-auto min-h-[80vh]' : 'mx-auto px-6 min-h-[80vh]'
-      }
-    >
+    <main className={isQa || isHome ? 'mx-auto' : 'mx-auto px-6 min-h-[80vh]'}>
       {children}
     </main>
   );
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
new file mode 100644
index 00000000..6f3b1157
--- /dev/null
+++ b/frontend/components/home/CodeCard.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+interface CodeCardProps {
+  fileName: string;
+  snippet: ReactNode;
+  className?: string;
+}
+
+export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
+  return (
+    <div
+      className={`pointer-events-none absolute hidden md:block ${className}`}
+      aria-hidden="true"
+    >
+      <div className="rounded-2xl border border-border bg-card/60 backdrop-blur-xl shadow-xl dark:shadow-black/50 px-5 py-4 min-w-[230px] animate-card-breathe">
+        <div className="flex items-center justify-between mb-3 text-[10px] text-muted-foreground">
+          <div className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-red-400/90" />
+            <span className="h-2 w-2 rounded-full bg-yellow-400/90" />
+            <span className="h-2 w-2 rounded-full bg-green-400/90" />
+          </div>
+          <span className="font-medium">{fileName}</span>
+        </div>
+        <code className="text-[11px] whitespace-pre leading-relaxed font-mono text-foreground/90">
+          {snippet}
+        </code>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/home/HeroBackground.tsx b/frontend/components/home/HeroBackground.tsx
new file mode 100644
index 00000000..56caf61b
--- /dev/null
+++ b/frontend/components/home/HeroBackground.tsx
@@ -0,0 +1,19 @@
+export function HeroBackground() {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 opacity-60">
+        <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-[var(--accent-primary)]/20 blur-3xl" />
+        <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-[var(--accent-hover)]/15 blur-3xl" />
+        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+      </div>
+
+      <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
+        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute left-[80%] top-[40%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
+        <span className="absolute left-[18%] top-[60%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+      </div>
+    </>
+  );
+}
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
new file mode 100644
index 00000000..7c4fd1b6
--- /dev/null
+++ b/frontend/components/home/HeroCodeCards.tsx
@@ -0,0 +1,56 @@
+import { CodeCard } from './CodeCard';
+
+export function HeroCodeCards() {
+  return (
+    <>
+      <CodeCard
+        fileName="arrays.ts"
+        className="left-4 md:left-10 lg:left-8 xl:left-12 -top-2 md:-top-12 lg:-top-8 xl:-top-12 rotate-[-10deg]"
+        snippet={
+          <>
+            <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;a&apos;
+            </span>
+            ,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;b&apos;
+            </span>
+            ,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">
+              &apos;c&apos;
+            </span>
+            ]{'\n'}
+            <span className="text-[var(--accent-primary)]">type</span> Arr2 = [
+            <span className="text-amber-500 dark:text-amber-400">3</span>,{' '}
+            <span className="text-amber-500 dark:text-amber-400">2</span>,{' '}
+            <span className="text-amber-500 dark:text-amber-400">1</span>]
+          </>
+        }
+      />
+
+      <CodeCard
+        fileName="utils.js"
+        className="right-4 md:right-4 lg:right-8 xl:right-12 -bottom-2 md:-bottom-6 lg:-bottom-8 xl:-bottom-12 rotate-[8deg]"
+        snippet={
+          <>
+            <span className="text-[var(--accent-primary)]">function</span> sum(
+            <span className="text-emerald-500 dark:text-emerald-400">
+              a
+            </span>,{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">b</span>){' '}
+            {'{'}
+            {'\n'}
+            {'  '}
+            <span className="text-[var(--accent-primary)]">return</span>{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">a</span>{' '}
+            <span className="text-purple-500 dark:text-purple-400">+</span>{' '}
+            <span className="text-emerald-500 dark:text-emerald-400">b</span>;
+            {'\n'}
+            {'}'}
+          </>
+        }
+      />
+    </>
+  );
+}
diff --git a/frontend/components/home/HeroSection.tsx b/frontend/components/home/HeroSection.tsx
new file mode 100644
index 00000000..78946cce
--- /dev/null
+++ b/frontend/components/home/HeroSection.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { HeroBackground } from './HeroBackground';
+import { HeroCodeCards } from './HeroCodeCards';
+import { InteractiveCTAButton } from './InteractiveCTAButton';
+
+export default function HeroSection() {
+  const t = useTranslations('homepage');
+
+  return (
+    <section
+      className="
+        relative
+        overflow-hidden
+        min-h-[calc(100vh-260px)]
+sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
+        flex
+        items-center
+        bg-gray-50 dark:bg-black
+        transition-colors duration-300
+      "
+    >
+      <HeroBackground />
+
+      <div className="relative max-w-5xl mx-auto w-full px-6 py-8 sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32 flex flex-col items-center text-center">
+        <HeroCodeCards />
+
+        <p className="text-[11px] sm:text-xs md:text-sm tracking-[0.35em] uppercase text-foreground font-bold">
+          {t('subtitle')}
+        </p>
+
+        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16 relative inline-block">
+          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tight relative inline-block">
+            <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+              DevLovers
+            </span>
+
+            <span
+              className="absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent wave-text-gradient"
+              aria-hidden="true"
+            >
+              DevLovers
+            </span>
+          </h1>
+        </div>
+
+        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 max-w-2xl text-sm sm:text-base md:text-lg text-muted-foreground font-light">
+          {t('description')}
+        </p>
+
+        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
+          <InteractiveCTAButton />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
new file mode 100644
index 00000000..f6c84014
--- /dev/null
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/routing';
+import { createCTAVariants } from '@/lib/home/cta-variants';
+
+export function InteractiveCTAButton() {
+  const t = useTranslations('homepage');
+
+  const [index, setIndex] = React.useState(0);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const variants = createCTAVariants(t('cta'));
+  const current = variants[index];
+  const nextIndex = (index + 1) % variants.length;
+  const next = variants[nextIndex];
+
+  const handleEnter = () => {
+    if (!window.matchMedia('(hover: hover)').matches) return;
+    if (isHovered) return;
+    setIsHovered(true);
+  };
+
+  const handleLeave = () => {
+    if (!window.matchMedia('(hover: hover)').matches) return;
+    if (!isHovered) return;
+    setIndex(nextIndex);
+    setIsHovered(false);
+  };
+
+  return (
+    <Link
+      href="/q&a"
+      onMouseEnter={handleEnter}
+      onMouseLeave={handleLeave}
+      className={`
+        group relative inline-flex items-center overflow-hidden rounded-2xl
+        px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
+        text-xs md:text-sm font-semibold tracking-[0.25em] uppercase text-white
+        ${current.shadow} ${current.shadowDark}
+        transition-shadow duration-700 ease-out
+        active:scale-95
+active:brightness-110
+active:shadow-xl
+
+        focus-visible:outline-none focus-visible:ring-2 ${current.ring} focus-visible:ring-offset-2
+      `}
+    >
+      <span
+        className={`absolute inset-0 bg-gradient-to-r ${current.gradient} ${current.gradientDark}`}
+      />
+
+      {isHovered && (
+        <span
+          className={`absolute inset-0 bg-gradient-to-r ${next.gradient} ${next.gradientDark} animate-wave-slide-up`}
+        />
+      )}
+
+      <span
+        className="pointer-events-none absolute inset-[2px] rounded-2xl
+        bg-gradient-to-r from-white/20 via-white/5 to-white/20
+        opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity"
+      />
+
+      <span className="relative z-10">
+        <span
+          key={isHovered ? nextIndex : index}
+          className={`inline-block ${isHovered ? 'animate-text-fade-in' : ''}`}
+        >
+          {isHovered ? next.text : current.text}
+        </span>
+      </span>
+    </Link>
+  );
+}
diff --git a/frontend/components/leaderboard/LeaderboardPodium.tsx b/frontend/components/leaderboard/LeaderboardPodium.tsx
index febd3937..67d9d294 100644
--- a/frontend/components/leaderboard/LeaderboardPodium.tsx
+++ b/frontend/components/leaderboard/LeaderboardPodium.tsx
@@ -8,7 +8,7 @@ import { User } from './types';
 
 const rankConfig = {
   1: {
-    height: '100%',
+    height: '70%',
     delay: 0.4,
     style: {
       border: 'border-yellow-400 dark:border-yellow-500',
@@ -19,7 +19,7 @@ const rankConfig = {
     },
   },
   2: {
-    height: '50%',
+    height: '40%',
     delay: 0.2,
     style: {
       border: 'border-slate-300 dark:border-slate-500',
@@ -30,7 +30,7 @@ const rankConfig = {
     },
   },
   3: {
-    height: '35%',
+    height: '20%',
     delay: 0.6,
     style: {
       border: 'border-orange-300 dark:border-orange-500',
diff --git a/frontend/components/leaderboard/LeaderboardTable.tsx b/frontend/components/leaderboard/LeaderboardTable.tsx
index 903c17b9..ed7361b8 100644
--- a/frontend/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/components/leaderboard/LeaderboardTable.tsx
@@ -31,7 +31,7 @@ export function LeaderboardTable({
   const isUserInTop = currentUserRank > 0 && currentUserRank <= 10;
 
   return (
-    <div className="w-full max-w-4xl flex flex-col gap-4">
+    <div className="w-full flex flex-col gap-4">
       <div className="bg-white dark:bg-white/5 backdrop-blur-md rounded-2xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-lg dark:shadow-2xl">
         <div className="w-full">
           <table className="w-full text-left border-separate border-spacing-0 table-fixed">
@@ -107,6 +107,7 @@ function TableRow({
   const leftBorderClass = isCurrentUser
     ? 'border-l-[1px] sm:border-l-[1px] border-l-transparent'
     : 'border-l-[1px] sm:border-l-[1px] border-l-transparent';
+
   const rightBorderClass = isCurrentUser
     ? 'border-r-[1px] sm:border-r-[1px] border-r-transparent'
     : 'border-r-[1px] sm:border-r-[1px] border-r-transparent';
diff --git a/frontend/components/q&a/AccordionList.tsx b/frontend/components/q&a/AccordionList.tsx
index 3eaa136f..93fdf257 100644
--- a/frontend/components/q&a/AccordionList.tsx
+++ b/frontend/components/q&a/AccordionList.tsx
@@ -20,7 +20,7 @@ import SelectableText from '@/components/q&a/SelectableText';
 import FloatingExplainButton from '@/components/q&a/FloatingExplainButton';
 import AIWordHelper from '@/components/q&a/AIWordHelper';
 import HighlightCachedTerms from '@/components/q&a/HighlightCachedTerms';
-import { getCachedTerms } from '@/lib/ai/explainCache';
+import { getCachedTerms, CACHE_KEY } from '@/lib/ai/explainCache';
 import type {
   AnswerBlock,
   BulletListBlock,
@@ -315,7 +315,7 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
 
   useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
-      if (e.key === 'ai-word-explanations') {
+      if (e.key === CACHE_KEY) {
         refreshCachedTerms();
       }
     };
diff --git a/frontend/components/q&a/FloatingExplainButton.tsx b/frontend/components/q&a/FloatingExplainButton.tsx
index 68db8a90..a5f8d0ef 100644
--- a/frontend/components/q&a/FloatingExplainButton.tsx
+++ b/frontend/components/q&a/FloatingExplainButton.tsx
@@ -17,15 +17,20 @@ export default function FloatingExplainButton({
 }: FloatingExplainButtonProps) {
   const t = useTranslations('aiHelper');
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const onDismissRef = useRef(onDismiss);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  });
 
   useEffect(() => {
     const handleScroll = () => {
-      onDismiss();
+      onDismissRef.current();
     };
 
     const handleClickOutside = (e: MouseEvent) => {
       if (buttonRef.current && !buttonRef.current.contains(e.target as Node)) {
-        onDismiss();
+        onDismissRef.current();
       }
     };
 
@@ -39,7 +44,7 @@ export default function FloatingExplainButton({
       window.removeEventListener('scroll', handleScroll, true);
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [onDismiss]);
+  }, []);
 
   return (
     <button
diff --git a/frontend/components/q&a/HighlightCachedTerms.tsx b/frontend/components/q&a/HighlightCachedTerms.tsx
index a680f2b1..b8bd4776 100644
--- a/frontend/components/q&a/HighlightCachedTerms.tsx
+++ b/frontend/components/q&a/HighlightCachedTerms.tsx
@@ -77,15 +77,25 @@ export default function HighlightCachedTerms({
         return (
           <span
             key={index}
+            role="button"
+            tabIndex={0}
             onClick={e => {
               e.stopPropagation();
               onTermClick?.(segment.originalTerm || segment.text);
             }}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                onTermClick?.(segment.originalTerm || segment.text);
+              }
+            }}
             className={cn(
               'cursor-pointer',
               'border-b border-dashed border-emerald-500/60',
               'bg-emerald-50/50 dark:bg-emerald-900/20',
               'hover:bg-emerald-100 dark:hover:bg-emerald-900/40',
+              'focus:outline-none focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-1',
               'transition-colors duration-150',
               'rounded-sm px-0.5 -mx-0.5'
             )}
diff --git a/frontend/components/q&a/SelectableText.tsx b/frontend/components/q&a/SelectableText.tsx
index 61297ada..02075661 100644
--- a/frontend/components/q&a/SelectableText.tsx
+++ b/frontend/components/q&a/SelectableText.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useCallback, useRef } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 
 interface SelectableTextProps {
   children: ReactNode;
@@ -16,23 +16,32 @@ export default function SelectableText({
   minSelectionLength = 2,
 }: SelectableTextProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const onTextSelectRef = useRef(onTextSelect);
+  const onSelectionClearRef = useRef(onSelectionClear);
 
-  const handleMouseUp = useCallback(() => {
-    setTimeout(() => {
+  // Keep refs updated with latest callbacks
+  useEffect(() => {
+    onTextSelectRef.current = onTextSelect;
+    onSelectionClearRef.current = onSelectionClear;
+  });
+
+  useEffect(() => {
+    const handleSelectionChange = () => {
       const selection = window.getSelection();
 
       if (!selection || selection.isCollapsed) {
-        onSelectionClear();
+        onSelectionClearRef.current();
         return;
       }
 
       const selectedText = selection.toString().trim();
 
       if (selectedText.length < minSelectionLength) {
-        onSelectionClear();
+        onSelectionClearRef.current();
         return;
       }
 
+      // Check if selection is within our container
       if (containerRef.current) {
         const range = selection.getRangeAt(0);
         const selectionContainer = range.commonAncestorContainer;
@@ -40,22 +49,28 @@ export default function SelectableText({
         if (!containerRef.current.contains(selectionContainer)) {
           return;
         }
-      }
 
-      const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
+        const rect = range.getBoundingClientRect();
+
+        const position = {
+          x: rect.left + rect.width / 2,
+          y: rect.top,
+        };
+
+        onTextSelectRef.current(selectedText, position);
+      }
+    };
 
-      const position = {
-        x: rect.left + rect.width / 2,
-        y: rect.top,
-      };
+    // Use selectionchange event - works on desktop (mouse/keyboard) and mobile (touch)
+    document.addEventListener('selectionchange', handleSelectionChange);
 
-      onTextSelect(selectedText, position);
-    }, 10);
-  }, [onTextSelect, onSelectionClear, minSelectionLength]);
+    return () => {
+      document.removeEventListener('selectionchange', handleSelectionChange);
+    };
+  }, [minSelectionLength]);
 
   return (
-    <div ref={containerRef} onMouseUp={handleMouseUp} className="cursor-text">
+    <div ref={containerRef} className="cursor-text">
       {children}
     </div>
   );
diff --git a/frontend/components/shared/Footer.tsx b/frontend/components/shared/Footer.tsx
index 5c802d6e..a355efa4 100644
--- a/frontend/components/shared/Footer.tsx
+++ b/frontend/components/shared/Footer.tsx
@@ -20,27 +20,7 @@ export default function Footer() {
   const t = useTranslations('footer');
 
   return (
-    <footer className="relative overflow-hidden border-t border-gray-200/70 dark:border-neutral-800/70">
-      <div
-        className="
-    absolute inset-0
-    bg-white
-    dark:bg-neutral-950/70
-    dark:backdrop-blur
-  "
-      />
-
-      <div
-        aria-hidden="true"
-        className="
-    pointer-events-none absolute inset-0
-    hidden dark:block
-    opacity-40
-    [background-image:radial-gradient(circle_at_20%_30%,rgba(59,130,246,0.20)_0,transparent_35%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.18)_0,transparent_38%),radial-gradient(circle,rgba(148,163,184,0.18)_1px,transparent_1px)]
-    [background-size:900px_420px,900px_420px,22px_22px]
-  "
-      />
-
+    <footer className="relative overflow-hidden border-t border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/50">
       <div className="container-main relative py-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-3">
@@ -58,14 +38,24 @@ export default function Footer() {
             <p className="text-sm text-slate-500 dark:text-slate-400">
               <Link
                 href="/privacy-policy"
-                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
+                className="
+transition-colors
+hover:[color:var(--accent-hover)]
+active:[color:var(--accent-hover)]
+focus-visible:[color:var(--accent-hover)]
+"
               >
                 {t('privacyPolicy')}
               </Link>
               <span className="px-2 opacity-60">|</span>
               <Link
                 href="/terms-of-service"
-                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
+                className="
+transition-colors
+hover:[color:var(--accent-hover)]
+active:[color:var(--accent-hover)]
+focus-visible:[color:var(--accent-hover)]
+"
               >
                 {t('termsOfService')}
               </Link>
@@ -96,13 +86,20 @@ export default function Footer() {
                       rounded-full border border-gray-200/60
                       bg-white/40
                       text-slate-600
-                      transition-all
-                      hover:-translate-y-0.5
                       dark:border-neutral-800/60
                       dark:bg-neutral-950/30
                       dark:text-slate-300
-                      [&:hover]:!text-[var(--accent-hover)]
-                      [&:hover]:!border-[var(--accent-hover)]
+                      transition-all
+
+hover:-translate-y-0.5
+hover:!text-[var(--accent-hover)]
+hover:!border-[var(--accent-hover)]
+
+active:!text-[var(--accent-hover)]
+active:!border-[var(--accent-hover)]
+active:scale-95
+
+
                     "
                   >
                     <Icon className="h-5 w-5" />
diff --git a/frontend/components/shared/HeroSection.tsx b/frontend/components/shared/HeroSection.tsx
deleted file mode 100644
index 3601f4af..00000000
--- a/frontend/components/shared/HeroSection.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { useTranslations } from 'next-intl';
-import { Link } from '@/i18n/routing';
-
-interface CodeCardProps {
-  fileName: string;
-  snippet: ReactNode;
-  className?: string;
-}
-
-function CodeCard({ fileName, snippet, className }: CodeCardProps) {
-  return (
-    <div
-      className={`pointer-events-none absolute hidden md:block ${className}`}
-      aria-hidden="true"
-    >
-      <div
-        className="
-          rounded-[2rem]
-          border border-slate-200/70 dark:border-slate-700/80
-          bg-gradient-to-b
-          from-white via-slate-50 to-white
-          dark:from-slate-900/95 dark:via-slate-950/95 dark:to-slate-950/95
-          shadow-[0_18px_45px_rgba(15,23,42,0.18)]
-          dark:shadow-[0_22px_60px_rgba(56,189,248,0.45)]
-          px-5 py-4
-          min-w-[230px]
-          animate-float-soft
-        "
-      >
-        <div className="flex items-center justify-between mb-3 text-[10px] text-slate-500 dark:text-slate-300">
-          <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-rose-400/90" />
-            <span className="h-2 w-2 rounded-full bg-amber-300/90" />
-            <span className="h-2 w-2 rounded-full bg-emerald-400/90" />
-          </div>
-          <span className="font-medium">{fileName}</span>
-        </div>
-        <code
-          className="
-            text-[11px] whitespace-pre leading-relaxed font-mono
-            text-slate-700 dark:text-slate-100/90
-          "
-        >
-          {snippet}
-        </code>
-      </div>
-    </div>
-  );
-}
-
-export default function HeroSection() {
-  const t = useTranslations('homepage');
-
-  return (
-    <section
-      className="
-        relative
-        overflow-hidden
-        min-h-[100vh]
-        flex
-        items-center
-      "
-    >
-      <div
-        className="
-          absolute inset-0
-          bg-gradient-to-b
-          from-sky-50 via-white to-rose-50
-          dark:from-slate-950 dark:via-slate-950 dark:to-black
-        "
-      />
-      <div className="pointer-events-none absolute inset-0 opacity-70">
-        <div className="absolute -top-32 left-1/2 h-96 w-[36rem] -translate-x-1/2 rounded-full bg-sky-300/30 blur-3xl dark:bg-sky-500/25" />
-        <div className="absolute bottom-[-12rem] left-1/4 h-[22rem] w-[22rem] rounded-full bg-pink-300/30 blur-3xl dark:bg-fuchsia-500/25" />
-        <div className="absolute bottom-[-10rem] right-0 h-[26rem] w-[26rem] rounded-full bg-violet-300/40 blur-3xl dark:bg-violet-500/25" />
-      </div>
-      <div className="pointer-events-none absolute inset-0 opacity-70 dark:opacity-100">
-        <span className="absolute left-[10%] top-[18%] h-1 w-1 rounded-full bg-sky-300/70 dark:bg-sky-400" />
-        <span className="absolute left-[35%] top-[8%] h-1 w-1 rounded-full bg-fuchsia-300/70 dark:bg-fuchsia-400" />
-        <span className="absolute left-[70%] top-[16%] h-1 w-1 rounded-full bg-amber-300/70 dark:bg-amber-300" />
-        <span className="absolute left-[80%] top-[40%] h-0.5 w-0.5 rounded-full bg-sky-300/70 dark:bg-sky-400" />
-        <span className="absolute left-[18%] top-[60%] h-0.5 w-0.5 rounded-full bg-violet-300/70 dark:bg-violet-400" />
-      </div>
-      <div
-        className="
-          relative
-          max-w-5xl mx-auto
-          w-full
-          px-6
-          py-24 md:py-32
-          flex flex-col items-center text-center
-        "
-      >
-        <CodeCard
-          fileName="arrays.ts"
-          className="left-8 -top-4 rotate-[-10deg]"
-          snippet={
-            <>
-              <span className="text-sky-500 dark:text-sky-400">type</span> Arr1
-              = [
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;a&apos;
-              </span>
-              ,{' '}
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;b&apos;
-              </span>
-              ,{' '}
-              <span className="text-pink-500 dark:text-pink-400">
-                &apos;c&apos;
-              </span>
-              ]{'\n'}
-              <span className="text-sky-500 dark:text-sky-400">type</span> Arr2
-              = [<span className="text-amber-500 dark:text-amber-400">3</span>,{' '}
-              <span className="text-amber-500 dark:text-amber-400">2</span>,{' '}
-              <span className="text-amber-500 dark:text-amber-400">1</span>]
-            </>
-          }
-        />
-        <CodeCard
-          fileName="utils.js"
-          className="right-8 -bottom-4 rotate-[8deg]"
-          snippet={
-            <>
-              <span className="text-sky-500 dark:text-sky-400">function</span>{' '}
-              sum(
-              <span className="text-emerald-500 dark:text-emerald-400">
-                a
-              </span>,{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">b</span>){' '}
-              {'{'}
-              {'\n'}
-              {'  '}
-              <span className="text-sky-500 dark:text-sky-400">
-                return
-              </span>{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">a</span>{' '}
-              <span className="text-pink-500 dark:text-pink-400">+</span>{' '}
-              <span className="text-emerald-500 dark:text-emerald-400">b</span>;
-              {'\n'}
-              {'}'}
-            </>
-          }
-        />
-        <p
-          className="
-    text-[11px] sm:text-xs md:text-sm
-    tracking-[0.35em]
-    uppercase
-    text-emerald-600/90
-    dark:text-emerald-300/80
-  "
-        >
-          {t('subtitle')}
-        </p>
-        <div className="mt-10 sm:mt-12">
-          <div className="-rotate-2 inline-block">
-            <h1
-              className="
-                text-5xl sm:text-6xl md:text-7xl
-                font-black
-                tracking-tight
-                drop-shadow-[0_0_22px_rgba(129,140,248,0.55)]
-              "
-            >
-              <span
-                className="
-                  bg-gradient-to-r
-                  from-sky-400 via-violet-400 to-pink-400
-                  dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500
-                  bg-clip-text
-                  text-transparent
-                "
-              >
-                DevLovers
-              </span>
-            </h1>
-          </div>
-        </div>
-        <p
-          className="
-            mt-8 sm:mt-10
-            max-w-2xl
-            text-base sm:text-lg
-            text-slate-700 dark:text-slate-200
-          "
-        >
-          {t('description')}
-        </p>
-        <div className="mt-12">
-          <Link
-            href="/q&a"
-            className="
-              group
-              relative
-              inline-flex items-center
-              rounded-full
-              px-10 md:px-12
-              py-3.5 md:py-4
-              text-xs md:text-sm
-              font-semibold
-              tracking-[0.25em]
-              uppercase
-              text-white
-              bg-gradient-to-r
-              from-sky-500 via-indigo-500 to-pink-500
-              shadow-[0_18px_45px_rgba(56,189,248,0.45)]
-              dark:shadow-[0_22px_60px_rgba(129,140,248,0.6)]
-              transition
-              hover:scale-105
-              hover:shadow-[0_24px_60px_rgba(56,189,248,0.6)]
-              focus-visible:outline-none
-              focus-visible:ring-2
-              focus-visible:ring-ring
-              focus-visible:ring-offset-2
-            "
-          >
-            <span
-              className="
-                pointer-events-none
-                absolute inset-[2px]
-                rounded-full
-                bg-gradient-to-r
-                from-white/30 via-white/10 to-white/30
-                opacity-40
-                group-hover:opacity-60
-                transition-opacity
-                motion-safe:animate-pulse-soft
-              "
-              aria-hidden="true"
-            />
-            <span className="relative z-10">{t('cta')}</span>
-            <span
-              className="
-                relative z-10 ml-4
-                h-px w-6
-                bg-white/70
-                group-hover:w-10
-                transition-all
-              "
-            />
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/frontend/components/shared/OnlineCounterPopup.tsx b/frontend/components/shared/OnlineCounterPopup.tsx
index 4dddd1d9..206285e1 100644
--- a/frontend/components/shared/OnlineCounterPopup.tsx
+++ b/frontend/components/shared/OnlineCounterPopup.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Users, Sparkles } from 'lucide-react';
 
 export function OnlineCounterPopup() {
+  const t = useTranslations('onlineCounter');
   const [online, setOnline] = useState<number | null>(null);
   const [show, setShow] = useState(false);
 
@@ -32,11 +34,11 @@ export function OnlineCounterPopup() {
   };
 
   const getText = (count: number) => {
-    if (count === 1) return 'на крок до цілі';
-    if (count === 2) return 'йдуть до мрії';
-    if (count <= 5) return 'на шляху до оффера';
-    if (count <= 10) return 'ближчі до dream job';
-    return 'крокує до успіху';
+    if (count === 1) return t('one');
+    if (count === 2) return t('two');
+    if (count <= 5) return t('upToFive');
+    if (count <= 10) return t('upToTen');
+    return t('many');
   };
 
   return (
diff --git a/frontend/components/shop/add-to-cart-button.tsx b/frontend/components/shop/add-to-cart-button.tsx
index 2f5f8793..4724f6cc 100644
--- a/frontend/components/shop/add-to-cart-button.tsx
+++ b/frontend/components/shop/add-to-cart-button.tsx
@@ -4,6 +4,7 @@ import { useId, useState } from 'react';
 import type { ShopProduct } from '@/lib/shop/data';
 import { cn } from '@/lib/utils';
 import { Check, Minus, Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { useCart } from './cart-provider';
 
@@ -13,6 +14,8 @@ interface AddToCartButtonProps {
 
 export function AddToCartButton({ product }: AddToCartButtonProps) {
   const { addToCart } = useCart();
+  const t = useTranslations('shop.product');
+  const tColors = useTranslations('shop.catalog.colors');
   const [selectedSize, setSelectedSize] = useState<string | undefined>(
     product.sizes?.[0]
   );
@@ -22,6 +25,15 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
   const [quantity, setQuantity] = useState(1);
   const [added, setAdded] = useState(false);
 
+  const translateColor = (color: string): string => {
+    const colorSlug = color.toLowerCase();
+    try {
+      return tColors(colorSlug);
+    } catch {
+      return color; 
+    }
+  };
+
   const handleAddToCart = () => {
     if (!product.inStock) return;
 
@@ -45,7 +57,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
   const quantityGroupId = useId();
 
   return (
-    <section className="mt-8 space-y-6" aria-label="Purchase options">
+    <section className="mt-8 space-y-6" aria-label={t('purchaseOptions')}>
       {/* Colors */}
       {product.colors && product.colors.length > 0 ? (
         <fieldset className="min-w-0">
@@ -53,7 +65,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
             id={colorGroupId}
             className="text-sm font-medium text-foreground"
           >
-            Color
+            {t('color')}
           </legend>
 
           <div
@@ -61,26 +73,29 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
             role="radiogroup"
             aria-labelledby={colorGroupId}
           >
-            {product.colors.map(color => (
-              <button
-                key={color}
-                type="button"
-                onClick={() => setSelectedColor(color)}
-                role="radio"
-                aria-checked={selectedColor === color}
-                className={cn(
-                  'h-9 w-9 rounded-full border-2 transition-all',
-                  selectedColor === color
-                    ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
-                    : 'border-border hover:border-muted-foreground'
-                )}
-                style={{
-                  background: colorMap[color] || color,
-                }}
-                title={color}
-                aria-label={color}
-              />
-            ))}
+            {product.colors.map(color => {
+              const translatedColor = translateColor(color);
+              return (
+                <button
+                  key={color}
+                  type="button"
+                  onClick={() => setSelectedColor(color)}
+                  role="radio"
+                  aria-checked={selectedColor === color}
+                  className={cn(
+                    'h-9 w-9 rounded-full border-2 transition-all',
+                    selectedColor === color
+                      ? 'border-accent ring-2 ring-accent ring-offset-2 ring-offset-background'
+                      : 'border-border hover:border-muted-foreground'
+                  )}
+                  style={{
+                    background: colorMap[color] || color,
+                  }}
+                  title={translatedColor}
+                  aria-label={translatedColor}
+                />
+              );
+            })}
           </div>
         </fieldset>
       ) : null}
@@ -92,7 +107,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
             id={sizeGroupId}
             className="text-sm font-medium text-foreground"
           >
-            Size
+            {t('size')}
           </legend>
 
           <div
@@ -127,7 +142,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
           id={quantityGroupId}
           className="text-sm font-medium text-foreground"
         >
-          Quantity
+          {t('quantity')}
         </h3>
 
         <div className="mt-3 flex items-center gap-3">
@@ -135,7 +150,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
             type="button"
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
             className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
-            aria-label="Decrease quantity"
+            aria-label={t('decreaseQuantity')}
           >
             <Minus className="h-4 w-4" aria-hidden="true" />
           </button>
@@ -148,7 +163,7 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
             type="button"
             onClick={() => setQuantity(quantity + 1)}
             className="flex h-10 w-10 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-secondary"
-            aria-label="Increase quantity"
+            aria-label={t('increaseQuantity')}
           >
             <Plus className="h-4 w-4" aria-hidden="true" />
           </button>
@@ -170,14 +185,14 @@ export function AddToCartButton({ product }: AddToCartButtonProps) {
         )}
       >
         {!product.inStock ? (
-          'Sold Out'
+          t('soldOut')
         ) : added ? (
           <>
             <Check className="h-5 w-5" aria-hidden="true" />
-            Added to cart
+            {t('addedToCart')}
           </>
         ) : (
-          'Add to cart'
+          t('addToCart')
         )}
       </button>
     </section>
diff --git a/frontend/components/shop/admin/admin-pagination.tsx b/frontend/components/shop/admin/admin-pagination.tsx
index 14b63b32..c4535a3c 100644
--- a/frontend/components/shop/admin/admin-pagination.tsx
+++ b/frontend/components/shop/admin/admin-pagination.tsx
@@ -1,5 +1,6 @@
 import { Link } from '@/i18n/routing';
 import { cn } from '@/lib/utils';
+import { getTranslations } from 'next-intl/server';
 
 type AdminPaginationProps = {
   basePath: string; // e.g. "/shop/admin/products"
@@ -13,13 +14,14 @@ function pageHref(basePath: string, page: number) {
   return `${basePath}?page=${page}`;
 }
 
-export function AdminPagination({
+export async function AdminPagination({
   basePath,
   page,
   hasNext,
   className,
 }: AdminPaginationProps) {
   const hasPrev = page > 1;
+  const t = await getTranslations('shop.admin.pagination');
 
   const disabledClass =
     'inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground opacity-60';
@@ -27,28 +29,28 @@ export function AdminPagination({
     'inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary';
 
   return (
-    <nav aria-label="Pagination" className={cn('mt-6', className)}>
+    <nav aria-label={t('label')} className={cn('mt-6', className)}>
       <ul className="flex items-center justify-between gap-3">
         <li>
           {hasPrev ? (
             <Link
               href={pageHref(basePath, page - 1)}
               rel="prev"
-              aria-label="Previous page"
+              aria-label={t('previousPage')}
               className={linkClass}
             >
-              Previous
+              {t('previous')}
             </Link>
           ) : (
             <span aria-disabled="true" className={disabledClass}>
-              Previous
+              {t('previous')}
             </span>
           )}
         </li>
 
         <li>
           <span aria-current="page" className="text-sm text-muted-foreground">
-            Page {page}
+            {t('page', { page })}
           </span>
         </li>
 
@@ -57,14 +59,14 @@ export function AdminPagination({
             <Link
               href={pageHref(basePath, page + 1)}
               rel="next"
-              aria-label="Next page"
+              aria-label={t('nextPage')}
               className={linkClass}
             >
-              Next
+              {t('next')}
             </Link>
           ) : (
             <span aria-disabled="true" className={disabledClass}>
-              Next
+              {t('next')}
             </span>
           )}
         </li>
diff --git a/frontend/components/shop/admin/admin-product-delete-button.tsx b/frontend/components/shop/admin/admin-product-delete-button.tsx
index 23b43240..065b6b11 100644
--- a/frontend/components/shop/admin/admin-product-delete-button.tsx
+++ b/frontend/components/shop/admin/admin-product-delete-button.tsx
@@ -2,6 +2,7 @@
 
 import { useId, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 
 interface AdminProductDeleteButtonProps {
   id: string;
@@ -15,6 +16,7 @@ export function AdminProductDeleteButton({
   csrfToken,
 }: AdminProductDeleteButtonProps) {
   const router = useRouter();
+  const t = useTranslations('shop.admin.deleteProduct');
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -25,13 +27,11 @@ export function AdminProductDeleteButton({
     setError(null);
 
     if (!csrfToken) {
-      setError('Security token missing. Refresh the page.');
+      setError(t('securityMissing'));
       return;
     }
 
-    const ok = window.confirm(
-      `Delete product "${title}"? This cannot be undone.`
-    );
+    const ok = window.confirm(t('confirmDelete', { title }));
     if (!ok) return;
 
     setIsLoading(true);
@@ -57,30 +57,28 @@ export function AdminProductDeleteButton({
           response.status === 403 &&
           (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')
         ) {
-          setError('Security token expired. Refresh the page and retry.');
+          setError(t('securityExpired'));
           return;
         }
 
         if (response.status === 404) {
-          setError('Product not found (already deleted).');
+          setError(t('notFound'));
           router.refresh();
           return;
         }
         if (response.status === 409 && code === 'PRODUCT_IN_USE') {
-          setError(
-            'Cannot delete: this product is referenced by other records.'
-          );
+          setError(t('referenced'));
           return;
         }
 
-        setError('Failed to delete product');
+        setError(t('failedDelete'));
         return;
       }
 
       // refresh server component data
       router.refresh();
     } catch {
-      setError('Failed to delete product');
+      setError(t('failedDelete'));
     } finally {
       setIsLoading(false);
     }
@@ -96,7 +94,7 @@ export function AdminProductDeleteButton({
         aria-describedby={error ? errorId : undefined}
         className="whitespace-nowrap rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
       >
-        {isLoading ? 'Deleting' : 'Delete'}
+        {isLoading ? t('deleting') : t('delete')}
       </button>
 
       {error ? (
diff --git a/frontend/components/shop/admin/admin-product-status-toggle.tsx b/frontend/components/shop/admin/admin-product-status-toggle.tsx
index 413e9087..62899c1c 100644
--- a/frontend/components/shop/admin/admin-product-status-toggle.tsx
+++ b/frontend/components/shop/admin/admin-product-status-toggle.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useId, useState } from 'react';
+import { useTranslations } from 'next-intl';
 
 interface AdminProductStatusToggleProps {
   id: string;
@@ -16,6 +17,7 @@ export function AdminProductStatusToggle({
   const [isActive, setIsActive] = useState(initialIsActive);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const t = useTranslations('shop.admin.statusToggle');
 
   const errorId = useId();
 
@@ -24,7 +26,7 @@ export function AdminProductStatusToggle({
     setError(null);
 
     if (!csrfToken) {
-      setError('Security token missing. Refresh the page.');
+      setError(t('securityMissing'));
       setIsLoading(false);
       return;
     }
@@ -47,11 +49,11 @@ export function AdminProductStatusToggle({
         }
 
         if (response.status === 403 && (code === 'CSRF_MISSING' || code === 'CSRF_INVALID')) {
-          setError('Security token expired. Refresh the page and retry.');
+          setError(t('securityExpired'));
           return;
         }
 
-        setError('Failed to update status');
+        setError(t('failedUpdate'));
         return;
       }
 
@@ -60,13 +62,13 @@ export function AdminProductStatusToggle({
         setIsActive(data.product.isActive);
       }
     } catch {
-      setError('Failed to update status');
+      setError(t('failedUpdate'));
     } finally {
       setIsLoading(false);
     }
   };
 
-  const buttonLabel = isLoading ? 'Updating' : isActive ? 'Deactivate' : 'Activate';
+  const buttonLabel = isLoading ? t('updating') : isActive ? t('deactivate') : t('activate');
 
   return (
     <div className="flex min-w-0 flex-col gap-1">
diff --git a/frontend/components/shop/admin/shop-admin-topbar.tsx b/frontend/components/shop/admin/shop-admin-topbar.tsx
index d1b3f5fb..21ca8c50 100644
--- a/frontend/components/shop/admin/shop-admin-topbar.tsx
+++ b/frontend/components/shop/admin/shop-admin-topbar.tsx
@@ -1,11 +1,14 @@
 import { Link } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
+
+export async function ShopAdminTopbar() {
+  const t = await getTranslations('shop.admin.topbar');
 
-export function ShopAdminTopbar() {
   return (
     <header className="border-b border-border bg-background">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <nav
-          aria-label="Shop admin"
+          aria-label={t('label')}
           className="flex flex-wrap items-center justify-between gap-3 py-3"
         >
           <ol className="flex flex-wrap items-center gap-3">
@@ -14,7 +17,7 @@ export function ShopAdminTopbar() {
                 href="/shop/admin"
                 className="text-sm font-semibold text-foreground hover:underline"
               >
-                Admin
+                {t('admin')}
               </Link>
             </li>
 
@@ -27,7 +30,7 @@ export function ShopAdminTopbar() {
                 href="/shop/admin/products"
                 className="text-sm font-medium text-muted-foreground hover:text-foreground"
               >
-                Products
+                {t('products')}
               </Link>
             </li>
 
@@ -36,7 +39,7 @@ export function ShopAdminTopbar() {
                 href="/shop/admin/orders"
                 className="text-sm font-medium text-muted-foreground hover:text-foreground"
               >
-                Orders
+                {t('orders')}
               </Link>
             </li>
           </ol>
@@ -46,7 +49,7 @@ export function ShopAdminTopbar() {
               href="/shop"
               className="inline-flex items-center rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
             >
-              Back to shop
+              {t('backToShop')}
             </Link>
           </div>
         </nav>
diff --git a/frontend/components/shop/catalog-load-more.tsx b/frontend/components/shop/catalog-load-more.tsx
index b3b9c546..385a6c60 100644
--- a/frontend/components/shop/catalog-load-more.tsx
+++ b/frontend/components/shop/catalog-load-more.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
+
 interface CatalogLoadMoreProps {
   hasMore: boolean;
   isLoading: boolean;
@@ -11,6 +13,9 @@ export function CatalogLoadMore({
   isLoading,
   onLoadMore,
 }: CatalogLoadMoreProps) {
+  const t = useTranslations('shop.products');
+  const tCommon = useTranslations('common');
+
   if (!hasMore) return null;
 
   return (
@@ -22,7 +27,7 @@ export function CatalogLoadMore({
         aria-busy={isLoading}
         className="rounded-md border border-border px-6 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-70"
       >
-        {isLoading ? 'Loading...' : 'Load more'}
+        {isLoading ? tCommon('loading') : t('loadMore')}
       </button>
     </div>
   );
diff --git a/frontend/components/shop/catalog-products-client.tsx b/frontend/components/shop/catalog-products-client.tsx
index 3c0f1691..44c5c2a8 100644
--- a/frontend/components/shop/catalog-products-client.tsx
+++ b/frontend/components/shop/catalog-products-client.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { useSearchParams, type ReadonlyURLSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 
 import { CatalogLoadMore } from '@/components/shop/catalog-load-more';
 import { ProductCard } from '@/components/shop/product-card';
@@ -31,6 +32,7 @@ export function CatalogProductsClient({
   initialCatalog: CatalogPayload;
 }) {
   const searchParams = useSearchParams();
+  const t = useTranslations('shop.catalog');
 
   const baseQuery = React.useMemo(
     () => stripPageParam(searchParams),
@@ -83,7 +85,7 @@ export function CatalogProductsClient({
       });
 
       if (!res.ok) {
-        setError(`Failed to load more (HTTP ${res.status})`);
+        setError(t('loadMoreFailedHttp', { status: res.status }));
         return;
       }
 
@@ -105,7 +107,7 @@ export function CatalogProductsClient({
         baseQuery,
         nextPage,
       });
-      setError('Failed to load more');
+      setError(t('loadMoreFailed'));
     } finally {
       if (activeQueryRef.current === requestQueryKey) {
         setIsLoadingMore(false);
@@ -114,10 +116,10 @@ export function CatalogProductsClient({
   };
 
   return (
-    <section aria-label="Catalog results">
+    <section aria-label={t('results')}>
       <ul
         className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
-        aria-label="Products"
+        aria-label={t('products')}
       >
         {products.map(p => (
           <li key={p.id} className="min-w-0">
@@ -128,7 +130,7 @@ export function CatalogProductsClient({
 
       <nav
         className="mt-12 flex flex-col items-center gap-3"
-        aria-label="Catalog pagination"
+        aria-label={t('pagination')}
       >
         <CatalogLoadMore
           hasMore={hasMore}
diff --git a/frontend/components/shop/category-tile.tsx b/frontend/components/shop/category-tile.tsx
index dc09b519..86028f62 100644
--- a/frontend/components/shop/category-tile.tsx
+++ b/frontend/components/shop/category-tile.tsx
@@ -1,18 +1,24 @@
 import Image from 'next/image';
 import { Link } from '@/i18n/routing';
 import type { ShopCategory } from '@/lib/shop/data';
+import { getTranslations } from 'next-intl/server';
 
 interface CategoryTileProps {
   category: ShopCategory;
 }
 
-export function CategoryTile({ category }: CategoryTileProps) {
+export async function CategoryTile({ category }: CategoryTileProps) {
+  const t = await getTranslations('shop.products');
+  const tCategories = await getTranslations('shop.catalog.categories');
+  const tCategoryTile = await getTranslations('shop.categoryTile');
   const href = `/shop/products?category=${encodeURIComponent(category.slug)}`;
 
+  const categoryName = tCategories(category.slug);
+
   return (
     <Link
       href={href}
-      aria-label={`Shop category: ${category.name}`}
+      aria-label={tCategoryTile('shopCategory', { name: categoryName })}
       className={[
         // IMPORTANT: make it block-level so aspect-ratio + Image fill work correctly
         'group relative block w-full',
@@ -22,7 +28,7 @@ export function CategoryTile({ category }: CategoryTileProps) {
     >
       <Image
         src={category.image || '/placeholder.svg'}
-        alt={category.name}
+        alt={categoryName}
         fill
         className="object-cover transition-transform duration-500 group-hover:scale-105"
         sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
@@ -35,14 +41,14 @@ export function CategoryTile({ category }: CategoryTileProps) {
 
       <div className="absolute bottom-0 left-0 p-5 sm:p-6">
         <h3 className="text-xl font-bold text-white sm:text-2xl">
-          {category.name}
+          {categoryName}
         </h3>
 
         <span
           className="mt-2 inline-flex items-center gap-1 text-sm font-medium text-white/90 opacity-0 transition-opacity group-hover:opacity-100"
           aria-hidden="true"
         >
-          Shop now <span>→</span>
+          {t('shopNow')} <span>→</span>
         </span>
       </div>
     </Link>
diff --git a/frontend/components/shop/header/nav-links.tsx b/frontend/components/shop/header/nav-links.tsx
index 2a499f2a..f86fe203 100644
--- a/frontend/components/shop/header/nav-links.tsx
+++ b/frontend/components/shop/header/nav-links.tsx
@@ -3,35 +3,13 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Home } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { usePathname } from '@/i18n/routing';
-import { CATEGORIES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
 import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
 import { HeaderButton } from '@/components/shared/HeaderButton';
 
-const NAV_LINKS = [
-  { href: '/shop/products', label: 'All Products' },
-  {
-    href: '/shop/products?category=apparel',
-    label:
-      CATEGORIES.find(category => category.slug === 'apparel')?.label ??
-      'Apparel',
-  },
-  {
-    href: '/shop/products?category=lifestyle',
-    label:
-      CATEGORIES.find(category => category.slug === 'lifestyle')?.label ??
-      'Lifestyle',
-  },
-  {
-    href: '/shop/products?category=collectibles',
-    label:
-      CATEGORIES.find(category => category.slug === 'collectibles')?.label ??
-      'Collectibles',
-  },
-] as const;
-
 interface NavLinksProps {
   className?: string;
   onNavigate?: () => void;
@@ -54,9 +32,19 @@ export function NavLinks({
   const searchParams = useSearchParams();
   const currentCategory = searchParams.get('category');
   const isHomeActive = pathname.startsWith('/shop');
+  const t = useTranslations('shop.catalog.categories');
+  const tProducts = useTranslations('shop.products');
+  const tNav = useTranslations('shop.admin.navigation');
+
+  const navLinks = useMemo(() => [
+    { href: '/shop/products', label: tProducts('title'), slug: 'all' },
+    { href: '/shop/products?category=apparel', label: t('apparel'), slug: 'apparel' },
+    { href: '/shop/products?category=lifestyle', label: t('lifestyle'), slug: 'lifestyle' },
+    { href: '/shop/products?category=collectibles', label: t('collectibles'), slug: 'collectibles' },
+  ], [t, tProducts]);
 
   const computed = useMemo(() => {
-    return NAV_LINKS.map(link => {
+    return navLinks.map(link => {
       const linkPath = link.href.split('?')[0] ?? link.href;
       const linkCategory = getLinkCategory(link.href);
 
@@ -66,11 +54,11 @@ export function NavLinks({
 
       return { ...link, isActive };
     });
-  }, [pathname, currentCategory]);
+  }, [pathname, currentCategory, navLinks]);
 
   return (
     <nav
-      aria-label="Shop navigation"
+      aria-label={tNav('shopNav')}
       className={cn('flex items-center gap-2', className)}
     >
       <ul className="flex items-center gap-2">
@@ -82,7 +70,7 @@ export function NavLinks({
               icon={Home}
               className={cn(isHomeActive && '[color:var(--accent-primary)]')}
             >
-              Home
+              {tNav('home')}
             </HeaderButton>
           </li>
         ) : null}
@@ -102,5 +90,3 @@ export function NavLinks({
     </nav>
   );
 }
-
-export { NAV_LINKS };
diff --git a/frontend/components/shop/product-card.tsx b/frontend/components/shop/product-card.tsx
index cf451bc2..aed911ee 100644
--- a/frontend/components/shop/product-card.tsx
+++ b/frontend/components/shop/product-card.tsx
@@ -6,6 +6,7 @@ import type { ShopProduct } from '@/lib/shop/data';
 import { cn } from '@/lib/utils';
 import { useParams } from 'next/navigation';
 import { formatMoney } from '@/lib/shop/currency';
+import { useTranslations } from 'next-intl';
 
 const PLACEHOLDER = '/placeholder.svg';
 const allowedHosts = new Set(['res.cloudinary.com', 'cdn.sanity.io']); // додай/прибери за потреби
@@ -38,6 +39,7 @@ interface ProductCardProps {
 export function ProductCard({ product }: ProductCardProps) {
   const params = useParams<{ locale?: string }>();
   const locale = params.locale ?? 'en';
+  const t = useTranslations('shop.product');
 
   const src = safeImageSrc(product.image);
 
@@ -54,7 +56,7 @@ export function ProductCard({ product }: ProductCardProps) {
             product.badge === 'NEW' && 'bg-foreground text-background'
           )}
         >
-          {product.badge}
+          {t(`badges.${product.badge}`)}
         </span>
       )}
 
@@ -90,7 +92,7 @@ export function ProductCard({ product }: ProductCardProps) {
 
         {!product.inStock && (
           <p className="mt-2 text-xs text-muted-foreground" role="status">
-            Sold out
+            {t('soldOut')}
           </p>
         )}
       </div>
diff --git a/frontend/components/shop/product-filters.tsx b/frontend/components/shop/product-filters.tsx
index 5beca515..e8734097 100644
--- a/frontend/components/shop/product-filters.tsx
+++ b/frontend/components/shop/product-filters.tsx
@@ -2,6 +2,7 @@
 
 import { useId } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 
 import { CATEGORIES, COLORS, PRODUCT_TYPES, SIZES } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
@@ -10,6 +11,10 @@ export function ProductFilters() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const t = useTranslations('shop.filters');
+  const tCategories = useTranslations('shop.catalog.categories');
+  const tTypes = useTranslations('shop.catalog.productTypes');
+  const tColors = useTranslations('shop.catalog.colors');
   const currentCategory = searchParams.get('category') || 'all';
   const currentType = searchParams.get('type');
   const currentColor = searchParams.get('color');
@@ -32,14 +37,14 @@ export function ProductFilters() {
   };
 
   return (
-    <aside className="space-y-8" aria-label="Product filters">
+    <aside className="space-y-8" aria-label={t('label')}>
       {/* Category */}
       <section aria-labelledby={categoryGroupId}>
         <h3
           id={categoryGroupId}
           className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
-          Category
+          {t('category')}
         </h3>
 
         <ul className="mt-4 space-y-2" role="list">
@@ -56,7 +61,7 @@ export function ProductFilters() {
                     : 'text-muted-foreground hover:text-foreground'
                 )}
               >
-                {cat.label}
+                {tCategories(cat.slug === 'new-arrivals' ? 'newArrivals' : cat.slug === 'best-sellers' ? 'bestSellers' : cat.slug)}
               </button>
             </li>
           ))}
@@ -69,7 +74,7 @@ export function ProductFilters() {
           id={typeGroupId}
           className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
-          Type
+          {t('type')}
         </h3>
 
         <ul className="mt-4 space-y-2" role="list">
@@ -91,7 +96,7 @@ export function ProductFilters() {
                       : 'text-muted-foreground hover:text-foreground'
                   )}
                 >
-                  {type.label}
+                  {tTypes(type.slug)}
                 </button>
               </li>
             );
@@ -105,12 +110,13 @@ export function ProductFilters() {
           id={colorGroupId}
           className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
-          Color
+          {t('color')}
         </h3>
 
         <div className="mt-4 flex flex-wrap gap-2">
           {COLORS.map(color => {
             const isSelected = currentColor === color.slug;
+            const colorLabel = tColors(color.slug);
 
             return (
               <button
@@ -127,8 +133,8 @@ export function ProductFilters() {
                     : 'border-border hover:border-muted-foreground'
                 )}
                 style={{ background: color.hex }}
-                title={color.label}
-                aria-label={color.label}
+                title={colorLabel}
+                aria-label={colorLabel}
               />
             );
           })}
@@ -141,7 +147,7 @@ export function ProductFilters() {
           id={sizeGroupId}
           className="text-sm font-semibold uppercase tracking-wide text-foreground"
         >
-          Size
+          {t('size')}
         </h3>
 
         <div className="mt-4 flex flex-wrap gap-2">
diff --git a/frontend/components/shop/product-sort.tsx b/frontend/components/shop/product-sort.tsx
index d9d2a60c..5640c4aa 100644
--- a/frontend/components/shop/product-sort.tsx
+++ b/frontend/components/shop/product-sort.tsx
@@ -5,6 +5,7 @@
 import { useId } from 'react';
 import { useRouter } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 
 import { SORT_OPTIONS } from '@/lib/config/catalog';
 import { cn } from '@/lib/utils';
@@ -16,6 +17,8 @@ type ProductSortProps = {
 export function ProductSort({ className }: ProductSortProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const t = useTranslations('shop.sort');
+  const tOptions = useTranslations('shop.catalog.sort');
 
   // IMPORTANT: when using '@/i18n/routing' router, do NOT prefix locale manually.
   const basePath = '/shop/products';
@@ -25,6 +28,16 @@ export function ProductSort({ className }: ProductSortProps) {
 
   const selectId = useId();
 
+  const getOptionLabel = (value: string) => {
+    const keyMap: Record<string, string> = {
+      'featured': 'featured',
+      'price-asc': 'priceAsc',
+      'price-desc': 'priceDesc',
+      'newest': 'newest',
+    };
+    return tOptions(keyMap[value] || 'featured');
+  };
+
   const handleSort = (value: string) => {
     const params = new URLSearchParams(searchParams.toString());
     params.delete('page');
@@ -45,10 +58,10 @@ export function ProductSort({ className }: ProductSortProps) {
         'flex w-full flex-col gap-1 sm:w-auto sm:flex-row sm:items-center sm:gap-2',
         className
       )}
-      aria-label="Sort products"
+      aria-label={t('label')}
     >
       <label htmlFor={selectId} className="text-sm text-muted-foreground">
-        Sort by:
+        {t('sortBy')}
       </label>
 
       <select
@@ -67,7 +80,7 @@ export function ProductSort({ className }: ProductSortProps) {
       >
         {SORT_OPTIONS.map(option => (
           <option key={option.value} value={option.value}>
-            {option.label}
+            {getOptionLabel(option.value)}
           </option>
         ))}
       </select>
diff --git a/frontend/components/shop/products-toolbar.tsx b/frontend/components/shop/products-toolbar.tsx
index a647c1a8..c3efbfcd 100644
--- a/frontend/components/shop/products-toolbar.tsx
+++ b/frontend/components/shop/products-toolbar.tsx
@@ -2,12 +2,14 @@
 
 import React from 'react';
 import { Filter, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { ProductSort } from '@/components/shop/product-sort';
 import { ProductFilters } from '@/components/shop/product-filters';
 
 export function ProductsToolbar() {
   const [open, setOpen] = React.useState(false);
+  const t = useTranslations('shop.toolbar');
 
   const dialogTitleId = React.useId();
   const dialogId = React.useId();
@@ -129,10 +131,10 @@ export function ProductsToolbar() {
 
   return (
     <>
-      {/* No w-full here: on mobile header stretches items; on desktop it stays content-sized (fixes “center gap”). */}
+      {/* No w-full here: on mobile header stretches items; on desktop it stays content-sized (fixes "center gap"). */}
       <div
         role="group"
-        aria-label="Product listing controls"
+        aria-label={t('label')}
         className="flex flex-wrap items-end gap-3"
       >
         <div className="min-w-0 flex-1 sm:flex-none sm:min-w-[260px]">
@@ -144,12 +146,12 @@ export function ProductsToolbar() {
           type="button"
           onClick={() => setOpen(true)}
           className="inline-flex h-10 shrink-0 items-center gap-2 rounded-md border border-border px-3 text-sm text-muted-foreground transition-colors hover:border-foreground hover:text-foreground lg:hidden"
-          aria-label="Open filters"
+          aria-label={t('openFilters')}
           aria-controls={dialogId}
           aria-expanded={open}
         >
           <Filter className="h-4 w-4" aria-hidden="true" />
-          Filters
+          {t('filters')}
         </button>
       </div>
 
@@ -176,7 +178,7 @@ export function ProductsToolbar() {
                 id={dialogTitleId}
                 className="text-sm font-semibold text-foreground"
               >
-                Filters
+                {t('filters')}
               </h2>
 
               <button
@@ -184,7 +186,7 @@ export function ProductsToolbar() {
                 type="button"
                 onClick={close}
                 className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                aria-label="Close"
+                aria-label={t('close')}
               >
                 <X className="h-5 w-5" aria-hidden="true" />
               </button>
diff --git a/frontend/components/tests/blog/blog-card.test.tsx b/frontend/components/tests/blog/blog-card.test.tsx
new file mode 100644
index 00000000..29ec1a99
--- /dev/null
+++ b/frontend/components/tests/blog/blog-card.test.tsx
@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { Author, Post } from '@/components/blog/BlogFilters';
+import BlogCard from '@/components/blog/BlogCard';
+
+vi.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: any) => <img {...props} />,
+}));
+
+vi.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@/lib/blog/date', () => ({
+  formatBlogDate: () => '01.01.2026',
+}));
+
+describe('BlogCard', () => {
+  it('renders title, excerpt, category badge and author', () => {
+    const author: Author = {
+      name: 'Анна',
+      image: 'https://example.com/anna.jpg',
+    };
+    const post: Post = {
+      _id: '1',
+      title: 'Пост про співбесіду',
+      slug: { current: 'interview' },
+      publishedAt: '2026-01-01',
+      categories: ['Growth'],
+      body: [
+        {
+          _type: 'block',
+          children: [{ _type: 'span', text: 'Опис поста' }],
+        },
+      ],
+      author,
+      mainImage: 'https://example.com/image.jpg',
+    };
+
+    const onAuthorSelect = vi.fn();
+
+    render(
+      <BlogCard post={post} onAuthorSelect={onAuthorSelect} />
+    );
+
+    expect(screen.getByText('Пост про співбесіду')).toBeInTheDocument();
+    expect(screen.getByText('Опис поста')).toBeInTheDocument();
+    expect(screen.getByText('Career')).toBeInTheDocument();
+    expect(screen.getByText('Анна')).toBeInTheDocument();
+    expect(screen.getByText('01.01.2026')).toBeInTheDocument();
+  });
+
+  it('calls onAuthorSelect when author is clicked', () => {
+    const author: Author = { name: 'Анна' };
+    const post: Post = {
+      _id: '1',
+      title: 'Пост',
+      slug: { current: 'post' },
+      author,
+    };
+
+    const onAuthorSelect = vi.fn();
+
+    render(
+      <BlogCard post={post} onAuthorSelect={onAuthorSelect} />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Анна' }));
+    expect(onAuthorSelect).toHaveBeenCalledWith(author);
+  });
+});
diff --git a/frontend/components/tests/blog/blog-category-grid.test.tsx b/frontend/components/tests/blog/blog-category-grid.test.tsx
new file mode 100644
index 00000000..ec9e4bb3
--- /dev/null
+++ b/frontend/components/tests/blog/blog-category-grid.test.tsx
@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { Author, Post } from '@/components/blog/BlogFilters';
+import { BlogCategoryGrid } from '@/components/blog/BlogCategoryGrid';
+
+const pushMock = vi.fn();
+
+vi.mock('@/i18n/routing', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}));
+
+vi.mock('@/components/blog/BlogGrid', () => ({
+  __esModule: true,
+  default: ({ onAuthorSelect }: { onAuthorSelect: (author: Author) => void }) => (
+    <button
+      type="button"
+      onClick={() => onAuthorSelect({ name: 'Анна' })}
+    >
+      select-author
+    </button>
+  ),
+}));
+
+describe('BlogCategoryGrid', () => {
+  it('pushes author filter when author selected', () => {
+    const posts: Post[] = [
+      { _id: '1', title: 'Post', slug: { current: 'post' } },
+    ];
+
+    render(<BlogCategoryGrid posts={posts} />);
+
+    fireEvent.click(screen.getByText('select-author'));
+    expect(pushMock).toHaveBeenCalledWith('/blog?author=%D0%90%D0%BD%D0%BD%D0%B0');
+  });
+});
diff --git a/frontend/components/tests/blog/blog-category-links.test.tsx b/frontend/components/tests/blog/blog-category-links.test.tsx
new file mode 100644
index 00000000..fff8f846
--- /dev/null
+++ b/frontend/components/tests/blog/blog-category-links.test.tsx
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BlogCategoryLinks } from '@/components/blog/BlogCategoryLinks';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      'categories.tech': 'Технології',
+      'categories.career': 'Кар\'єра',
+      'categories.insights': 'Інсайти',
+      'categories.news': 'Новини',
+      'categories.growth': 'Кар\'єра',
+      home: 'Головна',
+    };
+    return map[key] || key;
+  },
+}));
+
+vi.mock('@/i18n/routing', () => ({
+  usePathname: () => '/blog/category/tech',
+}));
+
+vi.mock('@/components/shared/AnimatedNavLink', () => ({
+  AnimatedNavLink: ({ href, children, isActive }: any) => (
+    <a href={href} data-active={isActive ? 'true' : 'false'}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock('@/components/shared/HeaderButton', () => ({
+  HeaderButton: ({ href, children }: any) => <a href={href}>{children}</a>,
+}));
+
+vi.mock('@/lib/utils', () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('BlogCategoryLinks', () => {
+  it('renders home and category links with slugs', () => {
+    render(
+      <BlogCategoryLinks
+        categories={[
+          { _id: '1', title: 'Tech' },
+          { _id: '2', title: 'Growth' },
+        ]}
+      />
+    );
+
+    expect(screen.getByText('Головна')).toBeInTheDocument();
+    expect(screen.getByText('Технології')).toBeInTheDocument();
+    expect(screen.getByText("Кар'єра")).toBeInTheDocument();
+    expect(screen.getByText('Технології').closest('a')).toHaveAttribute(
+      'href',
+      '/blog/category/tech'
+    );
+  });
+});
diff --git a/frontend/components/tests/blog/blog-filters.test.tsx b/frontend/components/tests/blog/blog-filters.test.tsx
new file mode 100644
index 00000000..cd340651
--- /dev/null
+++ b/frontend/components/tests/blog/blog-filters.test.tsx
@@ -0,0 +1,137 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { Author, Post } from '@/components/blog/BlogFilters';
+import BlogFilters from '@/components/blog/BlogFilters';
+
+let searchParams = new URLSearchParams();
+const replaceMock = vi.fn();
+
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => searchParams,
+}));
+
+vi.mock('@/i18n/routing', () => ({
+  Link: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+  usePathname: () => '/blog',
+  useRouter: () => ({
+    replace: replaceMock,
+  }),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      'categories.tech': 'Технології',
+      'categories.career': 'Кар\'єра',
+      'categories.insights': 'Інсайти',
+      'categories.news': 'Новини',
+      author: 'Автор',
+      blog: 'Блог',
+      noPosts: 'Статей не знайдено',
+      all: 'Усі',
+      articlesBy: 'Статті',
+      articlesPublished: 'Опубліковано',
+    };
+    return map[key] || key;
+  },
+  useLocale: () => 'uk',
+}));
+
+vi.mock('@/components/blog/BlogGrid', () => ({
+  default: ({ posts }: { posts: Post[] }) => (
+    <ul data-testid="blog-grid">
+      {posts.map(post => (
+        <li key={post._id}>{post.title}</li>
+      ))}
+    </ul>
+  ),
+}));
+
+afterEach(() => {
+  replaceMock.mockReset();
+  searchParams = new URLSearchParams();
+  vi.restoreAllMocks();
+});
+
+describe('BlogFilters', () => {
+  it('filters posts by search query in title or body', () => {
+    searchParams = new URLSearchParams({ search: 'співбесіди' });
+    const posts: Post[] = [
+      {
+        _id: '1',
+        title: 'Як підготуватися до співбесіди',
+        slug: { current: 'interview' },
+        body: [
+          {
+            _type: 'block',
+            children: [{ _type: 'span', text: 'Поради для співбесіди' }],
+          },
+        ],
+      },
+      {
+        _id: '2',
+        title: 'CSS підказки',
+        slug: { current: 'css-tips' },
+        body: [
+          {
+            _type: 'block',
+            children: [{ _type: 'span', text: 'Про Flexbox' }],
+          },
+        ],
+      },
+    ];
+
+    render(<BlogFilters posts={posts} categories={[]} />);
+
+    const grid = screen.getByTestId('blog-grid');
+    expect(grid).toHaveTextContent('Як підготуватися до співбесіди');
+    expect(grid).not.toHaveTextContent('CSS підказки');
+  });
+
+  it('filters posts by author and renders author heading', async () => {
+    searchParams = new URLSearchParams({ author: 'Анна' });
+    const posts: Post[] = [
+      {
+        _id: '1',
+        title: 'Пост Анни',
+        slug: { current: 'anna-post' },
+        author: { name: 'Анна' },
+      },
+      {
+        _id: '2',
+        title: 'Пост Віктора',
+        slug: { current: 'viktor-post' },
+        author: { name: 'Віктор' },
+      },
+    ];
+
+    const authorPayload: Author = {
+      name: 'Анна',
+      jobTitle: 'QA',
+      company: 'DevLovers',
+    };
+
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => authorPayload,
+    });
+    vi.stubGlobal('fetch', fetchMock as typeof fetch);
+
+    render(<BlogFilters posts={posts} categories={[]} />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalled();
+    });
+
+    expect(
+      screen.getByRole('heading', { name: 'Анна' })
+    ).toBeInTheDocument();
+
+    const grid = screen.getByTestId('blog-grid');
+    expect(grid).toHaveTextContent('Пост Анни');
+    expect(grid).not.toHaveTextContent('Пост Віктора');
+  });
+});
diff --git a/frontend/components/tests/blog/blog-grid.test.tsx b/frontend/components/tests/blog/blog-grid.test.tsx
new file mode 100644
index 00000000..105844e3
--- /dev/null
+++ b/frontend/components/tests/blog/blog-grid.test.tsx
@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import type { Post } from '@/components/blog/BlogFilters';
+import BlogGrid from '@/components/blog/BlogGrid';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => (key === 'noPosts' ? 'Статей не знайдено' : key),
+}));
+
+vi.mock('@/components/blog/BlogCard', () => ({
+  default: ({ post }: { post: Post }) => <div>{post.title}</div>,
+}));
+
+describe('BlogGrid', () => {
+  it('renders empty state when no posts', () => {
+    render(<BlogGrid posts={[]} onAuthorSelect={() => {}} />);
+    expect(screen.getByText('Статей не знайдено')).toBeInTheDocument();
+  });
+
+  it('renders posts list', () => {
+    const posts: Post[] = [
+      { _id: '1', title: 'Post 1', slug: { current: 'p1' } },
+      { _id: '2', title: 'Post 2', slug: { current: 'p2' } },
+    ];
+
+    render(<BlogGrid posts={posts} onAuthorSelect={() => {}} />);
+
+    expect(screen.getByText('Post 1')).toBeInTheDocument();
+    expect(screen.getByText('Post 2')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/components/tests/blog/blog-header-search.test.tsx b/frontend/components/tests/blog/blog-header-search.test.tsx
new file mode 100644
index 00000000..f8689757
--- /dev/null
+++ b/frontend/components/tests/blog/blog-header-search.test.tsx
@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
+
+const pushMock = vi.fn();
+const replaceMock = vi.fn();
+
+vi.mock('@/i18n/routing', () => ({
+  useRouter: () => ({
+    push: pushMock,
+    replace: replaceMock,
+  }),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      searchPlaceholder: 'Пошук',
+      noMatches: 'Нічого не знайдено',
+    };
+    return map[key] || key;
+  },
+  useLocale: () => 'uk',
+}));
+
+afterEach(() => {
+  pushMock.mockReset();
+  replaceMock.mockReset();
+  vi.restoreAllMocks();
+});
+
+describe('BlogHeaderSearch', () => {
+  it('shows results when query matches title or body words', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [
+        {
+          _id: '1',
+          title: 'Як підготуватися до співбесіди',
+          body: [
+            {
+              _type: 'block',
+              children: [{ text: 'Поради для співбесіди' }],
+            },
+          ],
+          slug: { current: 'interview' },
+        },
+        {
+          _id: '2',
+          title: 'Docker для початківців',
+          body: [
+            {
+              _type: 'block',
+              children: [{ text: 'Контейнери' }],
+            },
+          ],
+          slug: { current: 'docker' },
+        },
+      ],
+    });
+    vi.stubGlobal('fetch', fetchMock as typeof fetch);
+
+    render(<BlogHeaderSearch />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Search blog' }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalled();
+    });
+
+    const input = screen.getByPlaceholderText('Пошук');
+    fireEvent.change(input, { target: { value: 'співбесіди' } });
+
+    expect(
+      await screen.findByText('Як підготуватися до співбесіди')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Docker для початківців')).toBeNull();
+  });
+
+  it('shows empty state when no results', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [],
+    });
+    vi.stubGlobal('fetch', fetchMock as typeof fetch);
+
+    render(<BlogHeaderSearch />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Search blog' }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalled();
+    });
+
+    fireEvent.change(screen.getByPlaceholderText('Пошук'), {
+      target: { value: 'немає' },
+    });
+
+    expect(await screen.findByText('Нічого не знайдено')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/components/tests/blog/blog-nav-links.test.tsx b/frontend/components/tests/blog/blog-nav-links.test.tsx
new file mode 100644
index 00000000..40f8acbb
--- /dev/null
+++ b/frontend/components/tests/blog/blog-nav-links.test.tsx
@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { BlogNavLinks } from '@/components/blog/BlogNavLinks';
+
+const fetchMock = vi.fn();
+
+vi.mock('@/client', () => ({
+  client: {
+    fetch: () => fetchMock(),
+  },
+}));
+
+vi.mock('@/i18n/routing', () => ({
+  usePathname: () => '/blog',
+  Link: ({ href, children, ...rest }: any) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => new URLSearchParams({ category: 'Tech' }),
+}));
+
+vi.mock('@/lib/utils', () => ({
+  cn: (...args: unknown[]) => args.flat().filter(Boolean).join(' '),
+}));
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
+describe('BlogNavLinks', () => {
+  it('renders category links and marks active', async () => {
+    fetchMock.mockResolvedValueOnce([
+      { _id: '1', title: 'Tech' },
+      { _id: '2', title: 'News' },
+    ]);
+
+    render(<BlogNavLinks />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Tech')).toBeInTheDocument();
+    });
+
+    const techLink = screen.getByText('Tech').closest('a');
+    expect(techLink).toHaveAttribute('aria-current', 'page');
+    expect(techLink).toHaveAttribute('href', '/blog?category=Tech');
+  });
+});
diff --git a/frontend/components/ui/gradient-badge.tsx b/frontend/components/ui/gradient-badge.tsx
new file mode 100644
index 00000000..8780c377
--- /dev/null
+++ b/frontend/components/ui/gradient-badge.tsx
@@ -0,0 +1,22 @@
+import { LucideIcon } from "lucide-react"
+
+interface GradientBadgeProps {
+  icon?: LucideIcon
+  text: string
+  className?: string
+}
+
+export function GradientBadge({ icon: Icon, text, className = "" }: GradientBadgeProps) {
+  return (
+    <div 
+      className={`inline-flex items-center gap-2 px-3 py-1 rounded-full 
+        border border-[#1e5eff]/20 dark:border-[#ff2d55]/20 
+        bg-[#1e5eff]/10 dark:bg-[#ff2d55]/10 
+        text-[#1e5eff] dark:text-[#ff2d55] 
+        text-[10px] font-bold uppercase tracking-widest ${className}`}
+    >
+      {Icon && <Icon size={12} aria-hidden="true" />}
+      {text}
+    </div>
+  )
+}
diff --git a/frontend/components/ui/particle-canvas.tsx b/frontend/components/ui/particle-canvas.tsx
new file mode 100644
index 00000000..50b04c35
--- /dev/null
+++ b/frontend/components/ui/particle-canvas.tsx
@@ -0,0 +1,368 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+interface ParticleCanvasProps {
+  activeShape: "brackets" | "heart" | null
+  className?: string
+}
+
+interface Point {
+  x: number
+  y: number
+  z: number
+  vx: number
+  vy: number
+  vz: number
+  floatX: number
+  floatY: number
+  floatVx: number
+  floatVy: number
+}
+
+interface Point3D {
+  x: number
+  y: number
+  z: number
+}
+
+// Generate Code Brackets {} shape
+function generateBracketsPoints(count: number): Point3D[] {
+  const points: Point3D[] = []
+  const halfCount = Math.floor(count / 2)
+
+  const generateBrace = (flipX: boolean) => {
+    for (let i = 0; i < halfCount; i++) {
+      const t = (i / halfCount) * Math.PI * 2 - Math.PI
+
+      let x: number
+      let y: number
+
+      if (t < -Math.PI / 2) {
+        const localT = (t + Math.PI) / (Math.PI / 2)
+        x = 0.3 * Math.cos(localT * Math.PI / 2)
+        y = -0.8 + 0.3 * Math.sin(localT * Math.PI / 2)
+      } else if (t < 0) {
+        const localT = (t + Math.PI / 2) / (Math.PI / 2)
+        x = 0.3 - 0.5 * localT
+        y = -0.5 + 0.5 * localT
+      } else if (t < Math.PI / 2) {
+        const localT = t / (Math.PI / 2)
+        x = -0.2 + 0.5 * localT
+        y = 0.5 * localT
+      } else {
+        const localT = (t - Math.PI / 2) / (Math.PI / 2)
+        x = 0.3 * Math.cos((1 - localT) * Math.PI / 2)
+        y = 0.5 + 0.3 * (1 - Math.cos(localT * Math.PI / 2))
+      }
+
+      const z = (Math.random() - 0.5) * 0.3
+      const finalX = flipX ? -x + 0.6 : x - 0.6
+
+      points.push({
+        x: finalX + (Math.random() - 0.5) * 0.05,
+        y: y + (Math.random() - 0.5) * 0.05,
+        z: z,
+      })
+    }
+  }
+
+  generateBrace(false)
+  generateBrace(true)
+  return points
+}
+
+// Generate 3D Heart shape
+function generateHeartPoints(count: number): Point3D[] {
+  const points: Point3D[] = []
+  const layers = 8
+  const pointsPerLayer = Math.floor(count / layers)
+
+  for (let layer = 0; layer < layers; layer++) {
+    const depthRatio = layer / (layers - 1)
+    const z = (depthRatio - 0.5) * 0.6
+    const layerScale = 1 - Math.abs(depthRatio - 0.5) * 0.3
+
+    for (let i = 0; i < pointsPerLayer; i++) {
+      const t = (i / pointsPerLayer) * Math.PI * 2
+      const x = 16 * Math.pow(Math.sin(t), 3)
+      const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
+
+      points.push({
+        x: (x / 17) * layerScale + (Math.random() - 0.5) * 0.08,
+        y: (y / 17) * layerScale + (Math.random() - 0.5) * 0.08,
+        z: z + (Math.random() - 0.5) * 0.08,
+      })
+    }
+  }
+  return points
+}
+
+const SHAPE_POINTS_BRACKETS = generateBracketsPoints(800)
+const SHAPE_POINTS_HEART = generateHeartPoints(800)
+
+// Smooth ease in-out
+function easeInOutCubic(t: number): number {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+}
+
+export function ParticleCanvas({ activeShape, className }: ParticleCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const particles = useRef<Point[]>([])
+  const animationFrameId = useRef<number | undefined>(undefined)
+  const timeRef = useRef(0)
+  const lastTimeRef = useRef<number>(0)
+
+  // Simple transition: 0 = floating, 1 = shape
+  const transitionRef = useRef(0)
+  const targetTransitionRef = useRef(0)
+  const prevShapeRef = useRef<"brackets" | "heart" | null>(null)
+  const justLeftShapeRef = useRef(false)
+  const activeShapeRef = useRef<"brackets" | "heart" | null>(activeShape)
+
+  const getThemeColors = () => {
+    const isDark = document.documentElement.classList.contains("dark")
+    return {
+      isDark,
+      r: isDark ? 255 : 30,
+      g: isDark ? 45 : 94,
+      b: isDark ? 85 : 255,
+    }
+  }
+
+  useEffect(() => {
+    activeShapeRef.current = activeShape
+    const wasInShape = targetTransitionRef.current === 1
+    targetTransitionRef.current = activeShape ? 1 : 0
+    if (activeShape) {
+      prevShapeRef.current = activeShape
+      justLeftShapeRef.current = false
+    } else if (wasInShape) {
+      justLeftShapeRef.current = true
+      // Gentle nudge instead of hard push
+      particles.current.forEach(p => {
+        p.vx *= 0.5
+        p.vy *= 0.5
+      })
+    }
+  }, [activeShape])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    let logicalWidth = 0
+    let logicalHeight = 0
+
+    const resizeCanvas = () => {
+      logicalWidth = canvas.parentElement?.offsetWidth || window.innerWidth
+      logicalHeight = canvas.parentElement?.offsetHeight || window.innerHeight
+      const dpr = window.devicePixelRatio || 1
+      
+      canvas.width = logicalWidth * dpr
+      canvas.height = logicalHeight * dpr
+      canvas.style.width = `${logicalWidth}px`
+      canvas.style.height = `${logicalHeight}px`
+      
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      initParticles(logicalWidth, logicalHeight)
+    }
+
+    const initParticles = (width: number, height: number) => {
+      const count = 800
+      particles.current = []
+
+      for (let i = 0; i < count; i++) {
+        const floatX = Math.random() * width
+        const floatY = Math.random() * height
+        
+        const speed = 0.2 + Math.random() * 0.3
+        const angle = Math.random() * Math.PI * 2
+
+        particles.current.push({
+          x: floatX,
+          y: floatY,
+          z: 0,
+          vx: 0,
+          vy: 0,
+          vz: 0,
+          floatX,
+          floatY,
+          floatVx: Math.cos(angle) * speed,
+          floatVy: Math.sin(angle) * speed,
+        })
+      }
+    }
+
+    const draw = (timestamp: number) => {
+      if (!canvas || !ctx) return
+      
+      if (!lastTimeRef.current) lastTimeRef.current = timestamp
+      const rawDeltaTime = (timestamp - lastTimeRef.current) / 1000
+      const deltaTime = Math.min(rawDeltaTime, 0.05)
+      lastTimeRef.current = timestamp
+
+      ctx.clearRect(0, 0, logicalWidth, logicalHeight)
+
+      timeRef.current += deltaTime
+
+      // Linear transition - no initial freeze
+      const inSpeed = 0.012
+      const outSpeed = 0.006 // Slower out
+      if (targetTransitionRef.current > transitionRef.current) {
+        // Going IN
+        transitionRef.current = Math.min(targetTransitionRef.current, transitionRef.current + inSpeed)
+      } else if (targetTransitionRef.current < transitionRef.current) {
+        // Going OUT - slow and smooth
+        transitionRef.current = Math.max(targetTransitionRef.current, transitionRef.current - outSpeed)
+      }
+
+      // Apply smooth easing
+      const rawProgress = Math.max(0, Math.min(1, transitionRef.current))
+      const progress = easeInOutCubic(rawProgress)
+
+      const { r, g, b, isDark } = getThemeColors()
+
+      const isMobileView = logicalWidth < 768
+
+      const currentShape = activeShapeRef.current || prevShapeRef.current
+      const shapePoints =
+        currentShape === "brackets"
+          ? SHAPE_POINTS_BRACKETS
+          : currentShape === "heart"
+            ? SHAPE_POINTS_HEART
+            : null
+
+      // 3D rotation - always moving
+      const angle = timeRef.current * 0.4
+      const cos = Math.cos(angle)
+      const sin = Math.sin(angle)
+
+      particles.current.forEach((p, i) => {
+        // Always update floating positions
+        p.floatX += p.floatVx
+        p.floatY += p.floatVy
+
+        if (p.floatX < 0 || p.floatX > logicalWidth) {
+          p.floatVx *= -1
+          p.floatX = Math.max(0, Math.min(logicalWidth, p.floatX))
+        }
+        if (p.floatY < 0 || p.floatY > logicalHeight) {
+          p.floatVy *= -1
+          p.floatY = Math.max(0, Math.min(logicalHeight, p.floatY))
+        }
+
+        // Calculate shape position
+        let shapeX = p.floatX
+        let shapeY = p.floatY
+
+        if (isMobileView) {
+          // Mobile: show both shapes - first half brackets, second half heart
+          const halfCount = Math.floor(particles.current.length / 2)
+          const isFirstHalf = i < halfCount
+          const localIndex = isFirstHalf ? i : i - halfCount
+          const mobileShapePoints = isFirstHalf ? SHAPE_POINTS_BRACKETS : SHAPE_POINTS_HEART
+          const shapePoint = mobileShapePoints[localIndex % mobileShapePoints.length]
+          
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
+          const rotatedY = shapePoint.y
+          const perspective = 3
+          const scale = perspective / (perspective + rotatedZ)
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.7
+          
+          // Position: centered on each card
+          const centerX = logicalWidth / 2
+          const centerY = isFirstHalf ? logicalHeight * 0.32 : logicalHeight * 0.68
+          
+          shapeX = centerX + rotatedX * shapeScale * scale
+          shapeY = centerY + rotatedY * shapeScale * scale
+        } else if (shapePoints) {
+          // Desktop: original hover behavior
+          let centerX = logicalWidth / 2
+          const centerY = logicalHeight / 2
+          if (currentShape === "brackets") centerX = logicalWidth * 0.25
+          if (currentShape === "heart") centerX = logicalWidth * 0.75
+          
+          const shapePoint = shapePoints[i % shapePoints.length]
+          const rotatedX = shapePoint.x * cos - shapePoint.z * sin
+          const rotatedZ = shapePoint.x * sin + shapePoint.z * cos
+          const rotatedY = shapePoint.y
+          const perspective = 3
+          const scale = perspective / (perspective + rotatedZ)
+          const shapeScale = Math.min(logicalWidth, logicalHeight) * 0.35
+          shapeX = centerX + rotatedX * shapeScale * scale
+          shapeY = centerY + rotatedY * shapeScale * scale
+        }
+
+        // Target position - on mobile always full shape, on desktop based on hover progress
+        const effectiveProgress = isMobileView ? 1 : progress
+        const targetX = p.floatX + (shapeX - p.floatX) * effectiveProgress
+        const targetY = p.floatY + (shapeY - p.floatY) * effectiveProgress
+
+        // Smooth spring physics - gentle force, high damping
+        const springForce = 0.04 // Gentle spring
+        const damping = 0.92 // High damping for smooth motion
+        
+        // Add spring force toward target
+        p.vx += (targetX - p.x) * springForce
+        p.vy += (targetY - p.y) * springForce
+        
+        // Apply damping
+        p.vx *= damping
+        p.vy *= damping
+        
+        // Update position
+        p.x += p.vx
+        p.y += p.vy
+
+        // Alpha - on mobile always visible, on desktop based on progress
+        const alpha = isMobileView ? 0.3 : (0.15 + 0.45 * progress)
+
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 1.5, 0, Math.PI * 2)
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`
+        ctx.fill()
+      })
+
+      // Connecting lines when in shape
+      if (progress > 0.5 && shapePoints) {
+        const lineAlpha = (progress - 0.5) * 0.2
+        ctx.globalAlpha = lineAlpha
+        ctx.lineWidth = 0.5
+        ctx.strokeStyle = isDark ? "#ff2d55" : "#1e5eff"
+        ctx.beginPath()
+
+        for (let i = 0; i < particles.current.length; i += 4) {
+          const p1 = particles.current[i]
+          for (let j = 1; j <= 4; j++) {
+            const p2 = particles.current[(i + j) % particles.current.length]
+            const distSq = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2
+            if (distSq < 35 * 35) {
+              ctx.moveTo(p1.x, p1.y)
+              ctx.lineTo(p2.x, p2.y)
+            }
+          }
+        }
+        ctx.stroke()
+        ctx.globalAlpha = 1.0
+      }
+
+      animationFrameId.current = requestAnimationFrame(draw)
+    }
+
+    resizeCanvas()
+    window.addEventListener("resize", resizeCanvas)
+    animationFrameId.current = requestAnimationFrame(draw)
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas)
+      if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current)
+    }
+  }, [])
+
+  return <canvas ref={canvasRef} className={className} aria-hidden="true" />
+}
diff --git a/frontend/components/ui/section-heading.tsx b/frontend/components/ui/section-heading.tsx
new file mode 100644
index 00000000..c3719324
--- /dev/null
+++ b/frontend/components/ui/section-heading.tsx
@@ -0,0 +1,25 @@
+interface SectionHeadingProps {
+  title: string
+  highlight?: string
+  subtitle?: string
+  align?: "left" | "center"
+  className?: string
+}
+
+export function SectionHeading({ title, highlight, subtitle, align = "center", className = "" }: SectionHeadingProps) {
+  return (
+    <div className={`mb-12 ${align === "center" ? "text-center mx-auto" : ""} max-w-3xl ${className}`}>
+      <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6 tracking-tight text-gray-900 dark:text-white leading-[1.1]">
+        {title} 
+        {highlight && (
+          <> <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] via-[#1e5eff]/70 to-[#1e5eff] dark:from-[#ff2d55] dark:via-[#ff2d55]/70 dark:to-[#ff2d55] bg-[length:200%_auto] animate-gradient">{highlight}</span></>
+        )}
+      </h2>
+      {subtitle && (
+        <p className="text-lg md:text-xl text-gray-700 dark:text-neutral-300 font-light leading-relaxed max-w-2xl mx-auto">
+          {subtitle}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/lib/ai/explainCache.ts b/frontend/lib/ai/explainCache.ts
index 0f287e58..4baef045 100644
--- a/frontend/lib/ai/explainCache.ts
+++ b/frontend/lib/ai/explainCache.ts
@@ -1,6 +1,6 @@
 import type { ExplanationResponse } from './prompts';
 
-const CACHE_KEY = 'ai-word-explanations';
+export const CACHE_KEY = 'ai-word-explanations';
 const CACHE_VERSION = 1;
 
 interface CacheEntry {
@@ -21,27 +21,49 @@ function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof localStorage !== 'undefined';
 }
 
+function isValidCacheData(data: unknown): data is CacheData {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'version' in data &&
+    typeof (data as CacheData).version === 'number' &&
+    'entries' in data &&
+    typeof (data as CacheData).entries === 'object' &&
+    (data as CacheData).entries !== null
+  );
+}
+
+function getDefaultCache(): CacheData {
+  return { version: CACHE_VERSION, entries: {} };
+}
+
 function readCache(): CacheData {
   if (!isBrowser()) {
-    return { version: CACHE_VERSION, entries: {} };
+    return getDefaultCache();
   }
 
   try {
     const raw = localStorage.getItem(CACHE_KEY);
     if (!raw) {
-      return { version: CACHE_VERSION, entries: {} };
+      return getDefaultCache();
     }
 
-    const data = JSON.parse(raw) as CacheData;
+    const data: unknown = JSON.parse(raw);
+
+    if (!isValidCacheData(data)) {
+      localStorage.removeItem(CACHE_KEY);
+      return getDefaultCache();
+    }
 
     if (data.version !== CACHE_VERSION) {
       localStorage.removeItem(CACHE_KEY);
-      return { version: CACHE_VERSION, entries: {} };
+      return getDefaultCache();
     }
 
     return data;
   } catch {
-    return { version: CACHE_VERSION, entries: {} };
+    localStorage.removeItem(CACHE_KEY);
+    return getDefaultCache();
   }
 }
 
diff --git a/frontend/lib/home/cta-variants.ts b/frontend/lib/home/cta-variants.ts
new file mode 100644
index 00000000..ef0bc67f
--- /dev/null
+++ b/frontend/lib/home/cta-variants.ts
@@ -0,0 +1,52 @@
+export interface CTAVariant {
+  text: string;
+  gradient: string;
+  gradientDark: string;
+  shadow: string;
+  shadowDark: string;
+  ring: string;
+}
+
+export const createCTAVariants = (ctaText: string): CTAVariant[] => [
+  {
+    text: `${ctaText} 1`,
+    gradient: 'from-[var(--accent-primary)] to-[var(--accent-hover)]',
+    gradientDark:
+      'dark:from-[var(--accent-primary)] dark:to-[var(--accent-hover)]',
+    shadow: 'shadow-[0_18px_45px_rgba(30,94,255,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)]',
+    ring: 'focus-visible:ring-[var(--accent-primary)]',
+  },
+  {
+    text: `${ctaText} 2`,
+    gradient: 'from-[#60a5fa] to-[#3b82f6]',
+    gradientDark: 'dark:from-[#ff6b9d] dark:to-[#ff477e]',
+    shadow: 'shadow-[0_18px_45px_rgba(96,165,250,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(255,107,157,0.5)]',
+    ring: 'focus-visible:ring-[#60a5fa] dark:focus-visible:ring-[#ff6b9d]',
+  },
+  {
+    text: `${ctaText} 3`,
+    gradient: 'from-[#2563eb] to-[#1e40af]',
+    gradientDark: 'dark:from-[#f87171] dark:to-[#ef4444]',
+    shadow: 'shadow-[0_18px_45px_rgba(37,99,235,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(239,68,68,0.5)]',
+    ring: 'focus-visible:ring-[#2563eb] dark:focus-visible:ring-[#f87171]',
+  },
+  {
+    text: `${ctaText} 4`,
+    gradient: 'from-[#3b82f6] to-[#2563eb]',
+    gradientDark: 'dark:from-[#fb7185] dark:to-[#e11d48]',
+    shadow: 'shadow-[0_18px_45px_rgba(59,130,246,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(225,29,72,0.5)]',
+    ring: 'focus-visible:ring-[#3b82f6] dark:focus-visible:ring-[#fb7185]',
+  },
+  {
+    text: `${ctaText} 5`,
+    gradient: 'from-[#2563eb] to-[#1d4ed8]',
+    gradientDark: 'dark:from-[#fca5a5] dark:to-[#ef4444]',
+    shadow: 'shadow-[0_18px_45px_rgba(37,99,235,0.35)]',
+    shadowDark: 'dark:shadow-[0_22px_60px_rgba(239,68,68,0.5)]',
+    ring: 'focus-visible:ring-[#2563eb] dark:focus-visible:ring-[#fca5a5]',
+  },
+];
diff --git a/frontend/lib/security/client-ip.ts b/frontend/lib/security/client-ip.ts
new file mode 100644
index 00000000..3505d759
--- /dev/null
+++ b/frontend/lib/security/client-ip.ts
@@ -0,0 +1,48 @@
+import 'server-only';
+
+import type { NextRequest } from 'next/server';
+import { isIP } from 'node:net';
+
+function envBool(name: string, fallback: boolean): boolean {
+  const raw = (process.env[name] ?? '').trim().toLowerCase();
+  if (!raw) return fallback;
+
+  if (raw === '1' || raw === 'true' || raw === 'yes' || raw === 'on')
+    return true;
+  if (raw === '0' || raw === 'false' || raw === 'no' || raw === 'off')
+    return false;
+
+  return fallback;
+}
+
+export function getClientIpFromHeaders(headers: Headers): string | null {
+  const trustForwarded = envBool(
+    'TRUST_FORWARDED_HEADERS',
+    process.env.NODE_ENV !== 'production'
+  );
+  const trustCf = envBool('TRUST_CF_CONNECTING_IP', false);
+
+  if (trustCf) {
+    const cf = (headers.get('cf-connecting-ip') ?? '').trim();
+    if (cf && isIP(cf)) return cf;
+  }
+
+  if (!trustForwarded) return null;
+
+  const xr = (headers.get('x-real-ip') ?? '').trim();
+  if (xr && isIP(xr)) return xr;
+
+  const xff = (headers.get('x-forwarded-for') ?? '').trim();
+  if (xff) {
+    for (const part of xff.split(',')) {
+      const candidate = part.trim();
+      if (candidate && isIP(candidate)) return candidate;
+    }
+  }
+
+  return null;
+}
+
+export function getClientIp(request: NextRequest): string | null {
+  return getClientIpFromHeaders(request.headers);
+}
diff --git a/frontend/lib/shop/data.ts b/frontend/lib/shop/data.ts
index 1154ef01..284307eb 100644
--- a/frontend/lib/shop/data.ts
+++ b/frontend/lib/shop/data.ts
@@ -33,12 +33,6 @@ export interface ShopCategory {
 }
 
 export interface HomepageContent {
-  hero: {
-    headline: string;
-    subheadline: string;
-    ctaText: string;
-    ctaLink: string;
-  };
   newArrivals: ShopProduct[];
   categories: readonly ShopCategory[];
 }
@@ -297,13 +291,6 @@ export async function getHomepageContent(
   const newArrivals = fillTo(featuredProducts, newestCatalog.products, 4);
 
   return {
-    hero: {
-      headline: 'Coming soon...',
-      subheadline:
-        'Our shop is launching soon. Stay tuned for the latest products and exclusive offers!',
-      ctaText: 'Shop now',
-      ctaLink: '/shop/products',
-    },
     newArrivals,
     categories: CATEGORY_TILES,
   };
diff --git a/frontend/lib/tests/blog/blog-author-route.test.ts b/frontend/lib/tests/blog/blog-author-route.test.ts
new file mode 100644
index 00000000..af84420e
--- /dev/null
+++ b/frontend/lib/tests/blog/blog-author-route.test.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+const fetchMock = vi.fn();
+
+vi.mock('@/client', () => ({
+  client: {
+    withConfig: () => ({
+      fetch: fetchMock,
+    }),
+  },
+}));
+
+import { GET } from '@/app/api/blog-author/route';
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
+describe('GET /api/blog-author', () => {
+  it('returns 400 when name is missing', async () => {
+    const response = await GET(
+      new Request('http://localhost/api/blog-author?locale=uk')
+    );
+
+    expect(response.status).toBe(400);
+  });
+
+  it('returns author payload when name is provided', async () => {
+    fetchMock.mockResolvedValueOnce({ name: 'Анна' });
+
+    const response = await GET(
+      new Request('http://localhost/api/blog-author?name=%D0%90%D0%BD%D0%BD%D0%B0&locale=uk')
+    );
+    const data = await response.json();
+
+    expect(fetchMock).toHaveBeenCalledWith(expect.any(String), {
+      name: 'Анна',
+      locale: 'uk',
+    });
+    expect(data).toEqual({ name: 'Анна' });
+  });
+});
diff --git a/frontend/lib/tests/blog/blog-search-route.test.ts b/frontend/lib/tests/blog/blog-search-route.test.ts
new file mode 100644
index 00000000..06eda6a8
--- /dev/null
+++ b/frontend/lib/tests/blog/blog-search-route.test.ts
@@ -0,0 +1,34 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+const fetchMock = vi.fn();
+
+vi.mock('@/client', () => ({
+  client: {
+    withConfig: () => ({
+      fetch: fetchMock,
+    }),
+  },
+}));
+
+import { GET } from '@/app/api/blog-search/route';
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
+describe('GET /api/blog-search', () => {
+  it('returns items for requested locale', async () => {
+    fetchMock.mockResolvedValueOnce([
+      { _id: '1', title: 'Post', slug: { current: 'post' } },
+    ]);
+
+    const response = await GET(
+      new Request('http://localhost/api/blog-search?locale=uk')
+    );
+    const data = await response.json();
+
+    expect(fetchMock).toHaveBeenCalledWith(expect.any(String), { locale: 'uk' });
+    expect(data).toHaveLength(1);
+    expect(data[0].title).toBe('Post');
+  });
+});
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 4991369d..152c0fa7 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -19,6 +19,10 @@
     "closeMenu": "Close menu",
     "logout": "Log out"
   },
+  "mobileMenu": {
+    "newProduct": "New product",
+    "admin": "Admin"
+  },
   "navigation": {
     "home": "Home",
     "topics": "Topics",
@@ -220,7 +224,527 @@
     "privacyPolicy": "Privacy Policy",
     "termsOfService": "Terms of Service"
   },
+  "shop": {
+    "page": {
+      "newArrivals": "New Arrivals",
+      "shopByCategory": "Shop by Category",
+      "viewAll": "View all",
+      "hero": {
+        "headline": "Code. Create. Collect.",
+        "subheadline": "Join thousands of developers who express their passion through premium merch.",
+        "cta": "Browse all products"
+      },
+      "comingSoon": {
+        "headline": "Coming soon...",
+        "subheadline": "Our shop is launching soon. Stay tuned for the latest products and exclusive offers!",
+        "cta": "Shop now"
+      }
+    },
+    "product": {
+      "soldOut": "Sold out",
+      "color": "Color",
+      "size": "Size",
+      "quantity": "Quantity",
+      "addToCart": "Add to cart",
+      "addedToCart": "Added to cart",
+      "purchaseOptions": "Purchase options",
+      "decreaseQuantity": "Decrease quantity",
+      "increaseQuantity": "Increase quantity",
+      "badges": {
+        "NEW": "New",
+        "SALE": "Sale"
+      }
+    },
+    "categoryTile": {
+      "shopCategory": "Shop category: {name}"
+    },
+    "filters": {
+      "category": "Category",
+      "type": "Type",
+      "color": "Color",
+      "size": "Size",
+      "label": "Product filters"
+    },
+    "sort": {
+      "sortBy": "Sort by:",
+      "label": "Sort products"
+    },
+    "toolbar": {
+      "filters": "Filters",
+      "openFilters": "Open filters",
+      "close": "Close",
+      "label": "Product listing controls"
+    },
+    "cart": {
+      "title": "Your cart",
+      "empty": "Your cart is empty",
+      "emptyDescription": "Looks like you haven't added any items to your cart yet.",
+      "startShopping": "Start shopping",
+      "itemsLabel": "Cart items",
+      "summary": {
+        "heading": "Order summary",
+        "subtotal": "Subtotal",
+        "shipping": "Shipping",
+        "shippingCalc": "Calculated at checkout",
+        "total": "Total"
+      },
+      "checkout": {
+        "placeOrder": "Place order",
+        "placing": "Placing order...",
+        "message": "You'll either be redirected to secure payment or see confirmation if payment is not required in this environment.",
+        "notRedirected": "If you are not redirected automatically, open your order",
+        "goToOrder": "Go to order"
+      },
+      "actions": {
+        "removeItem": "Remove {title} from cart",
+        "decreaseQty": "Decrease quantity",
+        "increaseQty": "Increase quantity",
+        "maxStock": "Max {stock} in stock"
+      },
+      "alerts": {
+        "itemsRemoved": "Some items were removed from your cart because they are unavailable or out of stock."
+      }
+    },
+    "admin": {
+      "page": {
+        "title": "Shop Admin",
+        "description": "Administrative tools for the merch shop.",
+        "productsSection": {
+          "title": "Products",
+          "description": "Create, edit, activate, feature."
+        },
+        "ordersSection": {
+          "title": "Orders",
+          "description": "Review and manage orders."
+        }
+      },
+      "topbar": {
+        "label": "Shop admin",
+        "admin": "Admin",
+        "products": "Products",
+        "orders": "Orders",
+        "backToShop": "Back to shop"
+      },
+      "products": {
+        "title": "Admin · Products",
+        "newProduct": "New product",
+        "listCaption": "Products list",
+        "empty": "No products yet.",
+        "table": {
+          "title": "Title",
+          "slug": "Slug",
+          "price": "Price",
+          "category": "Category",
+          "type": "Type",
+          "stock": "Stock",
+          "badge": "Badge",
+          "active": "Active",
+          "featured": "Featured",
+          "created": "Created",
+          "actions": "Actions"
+        },
+        "actions": {
+          "view": "View",
+          "edit": "Edit",
+          "viewProduct": "View product {title}",
+          "editProduct": "Edit product {title}",
+          "yes": "Yes",
+          "no": "No"
+        }
+      },
+      "statusToggle": {
+        "securityMissing": "Security token missing. Refresh the page.",
+        "securityExpired": "Security token expired. Refresh the page and retry.",
+        "failedUpdate": "Failed to update status",
+        "updating": "Updating",
+        "deactivate": "Deactivate",
+        "activate": "Activate"
+      },
+      "pagination": {
+        "label": "Pagination",
+        "previous": "Previous",
+        "next": "Next",
+        "page": "Page {page}",
+        "previousPage": "Previous page",
+        "nextPage": "Next page"
+      },
+      "orders": {
+        "title": "Admin · Orders",
+        "reconcileStale": "Reconcile stale",
+        "empty": "No orders yet.",
+        "listCaption": "Orders list",
+        "viewOrder": "View order {id}",
+        "table": {
+          "created": "Created",
+          "status": "Status",
+          "total": "Total",
+          "items": "Items",
+          "provider": "Provider",
+          "orderId": "Order ID",
+          "actions": "Actions"
+        },
+        "actions": {
+          "view": "View"
+        }
+      },
+      "deleteProduct": {
+        "securityMissing": "Security token missing. Refresh the page.",
+        "securityExpired": "Security token expired. Refresh the page and retry.",
+        "confirmDelete": "Delete product \"{title}\"? This cannot be undone.",
+        "notFound": "Product not found (already deleted).",
+        "referenced": "Cannot delete: this product is referenced by other records.",
+        "failedDelete": "Failed to delete product",
+        "deleting": "Deleting",
+        "delete": "Delete"
+      },
+      "refund": {
+        "onlyForPaid": "Refund is only available for paid Stripe orders",
+        "refunding": "Refunding…",
+        "refund": "Refund"
+      },
+      "navigation": {
+        "shopNav": "Shop navigation",
+        "home": "Home"
+      }
+    },
+    "catalog": {
+      "results": "Catalog results",
+      "products": "Products",
+      "pagination": "Catalog pagination",
+      "loadMoreFailed": "Failed to load more",
+      "loadMoreFailedHttp": "Failed to load more (HTTP {status})",
+      "categories": {
+        "all": "All Products",
+        "newArrivals": "New Arrivals",
+        "bestSellers": "Best Sellers",
+        "apparel": "Apparel",
+        "lifestyle": "Lifestyle",
+        "collectibles": "Collectibles",
+        "sale": "Sale"
+      },
+      "productTypes": {
+        "accessories": "Accessories",
+        "shirts": "Shirts",
+        "drinkware": "Drinkware",
+        "technology": "Technology"
+      },
+      "colors": {
+        "black": "Black",
+        "white": "White",
+        "grey": "Grey",
+        "navy": "Navy",
+        "multicolor": "Multicolor"
+      },
+      "sort": {
+        "featured": "Featured",
+        "priceAsc": "Price: Low to High",
+        "priceDesc": "Price: High to Low",
+        "newest": "Newest"
+      }
+    },
+    "products": {
+      "title": "All Products",
+      "noProductsFound": "No products found",
+      "adjustFilters": "Try adjusting your filters to find what you're looking for.",
+      "backToProducts": "Back to all products",
+      "notAvailable": "This product is not available in your locale/currency.",
+      "loadMore": "Load more",
+      "shopNow": "Shop now"
+    },
+    "checkout": {
+      "errors": {
+        "missingOrderId": "Missing order id",
+        "missingOrderIdDescription": "We couldn't identify your order. Please return to your cart or browse products.",
+        "orderNotFound": "Order not found",
+        "orderNotFoundDescription": "We couldn't find this order. It may have been removed or never existed.",
+        "invalidOrder": "Invalid order",
+        "unableToLoad": "Unable to load order",
+        "unableToCheckout": "Unable to start checkout right now.",
+        "unexpectedResponse": "Unexpected checkout response.",
+        "tryAgainLater": "Please try again later."
+      },
+      "missingOrder": {
+        "message": "We couldn't identify your order. Please return to your cart or browse products."
+      },
+      "notFoundOrder": {
+        "message": "We couldn't find this order. It may have been removed or never existed."
+      },
+      "success": {
+        "title": "Thank you for your order",
+        "orderLabel": "Order",
+        "received": "We've received your order.",
+        "paymentConfirmed": "Payment has been confirmed.",
+        "paymentProcessing": "Payment is still being processed. This page will update automatically.",
+        "paymentsDisabled": "Payments are disabled in this environment. You were not charged for this order.",
+        "orderSummary": "Order summary",
+        "totalAmount": "Total amount",
+        "items": "Items",
+        "status": "Status",
+        "continueShopping": "Continue shopping",
+        "viewCart": "View cart"
+      },
+      "error": {
+        "paymentFailed": "Payment failed",
+        "paymentFailedDescription": "The payment for this order was not completed. You can try again or contact support.",
+        "paymentUnclear": "Payment status unclear",
+        "paymentUnclearDescription": "We could not confirm a payment failure for this order.",
+        "notCompleted": "The payment for this order was not completed. You can try again or contact support.",
+        "couldNotConfirm": "We could not confirm a payment failure for this order.",
+        "orderDetails": "Order details",
+        "order": "Order",
+        "orderLabel": "Order",
+        "total": "Total",
+        "totalLabel": "Total",
+        "status": "Status",
+        "statusLabel": "Status",
+        "backToCart": "Back to cart",
+        "retryPayment": "Retry payment",
+        "continueShopping": "Continue shopping"
+      },
+      "payment": {
+        "title": "Secure checkout",
+        "payForOrder": "Pay for order #{orderId}",
+        "paymentDetails": "Payment details",
+        "completePayment": "Complete payment to place your order.",
+        "amountDue": "Amount due",
+        "orderSummary": "Order summary",
+        "items": "Items",
+        "totalAmount": "Total amount",
+        "status": "Status",
+        "viewConfirmation": "View confirmation",
+        "continueShopping": "Continue shopping",
+        "statusMessages": {
+          "alreadyPaid": "This order is already paid.",
+          "previousFailed": "The previous payment attempt failed. Please try again.",
+          "completePayment": "Complete payment to finish your order."
+        }
+      },
+      "actions": {
+        "backToProducts": "Back to products",
+        "goToCart": "Go to cart",
+        "backToCart": "Back to cart",
+        "continueShopping": "Continue shopping"
+      }
+    },
+    "orders": {
+      "title": "My orders",
+      "subtitle": "Your most recent orders (up to 50).",
+      "backToShop": "Back to shop",
+      "empty": {
+        "message": "No orders yet.",
+        "browseProducts": "Browse products"
+      },
+      "table": {
+        "caption": "Your orders",
+        "items": "Items",
+        "date": "Date",
+        "status": "Status",
+        "total": "Total"
+      },
+      "orderHeadline": {
+        "incomplete": "Order {id} (incomplete)",
+        "withMore": "{item} +{count} more",
+        "default": "Order {id}"
+      },
+      "paymentStatus": {
+        "paid": "Paid",
+        "pending": "Pending",
+        "requiresPayment": "Payment required",
+        "failed": "Failed",
+        "refunded": "Refunded"
+      },
+      "detail": {
+        "title": "Order",
+        "myOrders": "My orders",
+        "shop": "Shop",
+        "orderSummary": "Order summary",
+        "total": "Total",
+        "paymentStatus": "Payment status",
+        "created": "Created",
+        "provider": "Provider",
+        "paymentReference": "Payment reference",
+        "idempotencyKey": "Idempotency key",
+        "stockRestored": "Stock restored",
+        "restockedAt": "Restocked at",
+        "items": "Items",
+        "sku": "SKU: {sku}",
+        "product": "Product: {productId}",
+        "quantity": "Quantity",
+        "unitPrice": "Unit price",
+        "lineTotal": "Line total",
+        "yes": "Yes",
+        "no": "No"
+      }
+    }
+  },
   "about": {
+    "metaTitle": "About | DevLovers",
+    "metaDescription": "Learn about DevLovers - the platform for technical interview preparation",
+    "hero": {
+      "titleHighlight": "Debug your skills",
+      "titleRest": "before the recruiter does.",
+      "description": "Stop guessing. We decoded the chaotic interview process into a structured roadmap.",
+      "descriptionHighlight": "Compile your scattered knowledge",
+      "descriptionRest": "into a production-ready skillset and land that offer.",
+      "stats": {
+        "quizzesPassed": "Quizzes Passed",
+        "githubStars": "GitHub Stars",
+        "activeUsers": "Active Users",
+        "linkedinFollowers": "LinkedIn Followers",
+        "quizzes": "Quizzes",
+        "stars": "Stars",
+        "users": "Users",
+        "followers": "Followers"
+      }
+    },
+    "topics": {
+      "pretitle": "/ The Ecosystem",
+      "titleStart": "Master your",
+      "titleHighlight": "entire stack",
+      "description": "From frontend frameworks to backend logic. We cover the key technologies for 2026.",
+      "questions": "Questions"
+    },
+    "features": {
+      "title": "Features designed to",
+      "titleHighlight": "make you unstoppable",
+      "subtitle": "Stop searching for scattered info. We curated the ultimate toolkit to crack technical interviews.",
+      "qa": {
+        "title": "Q&A",
+        "description": "No fluff. Just a massive library of real interview questions with precise, recruiter-approved answers."
+      },
+      "quiz": {
+        "title": "Quizzes",
+        "description": "Validate your confidence. Fast-paced interactive quizzes to spot your weak points before the interviewer does."
+      },
+      "leaderboard": {
+        "title": "Leaderboard",
+        "description": "Gamify your prep. Earn points for every correct answer, keep your streak alive, and rank up against others."
+      },
+      "blog": {
+        "title": "Blog",
+        "description": "Stay updated with detailed articles on tech trends, coding tutorials, and industry insights to keep you ahead of the curve."
+      },
+      "profile": {
+        "title": "Analytics",
+        "description": "Don't fly blind. Visualize your progress with detailed charts to see exactly which topics you've mastered."
+      },
+      "shop": {
+        "title": "Shop",
+        "description": "Upgrade your setup. High-quality developer apparel, desk accessories, and digital assets available for purchase."
+      },
+      "bubbles": {
+        "qa": {
+          "languages": { "label": "3 Languages", "desc": "EN, UK & PL supported" },
+          "aiHelper": { "label": "AI Helper", "desc": "Select text for AI explain" },
+          "smartCache": { "label": "Smart Cache", "desc": "Highlights learned terms" },
+          "techFilter": { "label": "Tech Filter", "desc": "React, Git, JS & more" }
+        },
+        "quiz": {
+          "smartTimer": { "label": "Smart Timer", "desc": "Race against the total time" },
+          "antiCheat": { "label": "Anti-Cheat", "desc": "Focus loss detection" },
+          "autoSync": { "label": "Auto Sync", "desc": "Saves progress post-login" },
+          "tracking": { "label": "Tracking", "desc": "Best scores & attempts" }
+        },
+        "leaderboard": {
+          "podium": { "label": "The Podium", "desc": "Top 3 exclusive spotlight" },
+          "globalRank": { "label": "Global Rank", "desc": "Compete worldwide" },
+          "xpSystem": { "label": "XP System", "desc": "Points for every answer" },
+          "liveFeed": { "label": "Live Feed", "desc": "Real-time rank updates" }
+        },
+        "profile": {
+          "statsHub": { "label": "Stats Hub", "desc": "Visualize your growth" },
+          "history": { "label": "History", "desc": "Track learning streaks" },
+          "identity": { "label": "Identity", "desc": "Manage role & profile" },
+          "reminders": { "label": "Reminders", "desc": "Finish incomplete quizzes" }
+        },
+        "blog": {
+          "techTrends": { "label": "Tech Trends", "desc": "Stay ahead of the curve" },
+          "tutorials": { "label": "Tutorials", "desc": "Step-by-step guides" },
+          "deepDives": { "label": "Deep Dives", "desc": "In-depth analysis" },
+          "community": { "label": "Community", "desc": "Written by developers" }
+        },
+        "shop": {
+          "newDrops": { "label": "New Drops", "desc": "Regular fresh content" },
+          "curated": { "label": "Curated", "desc": "Dev-focused collections" },
+          "checkout": { "label": "Checkout", "desc": "Seamless Stripe flow" },
+          "premium": { "label": "Premium", "desc": "High-quality material" }
+        }
+      }
+    },
+    "pricing": {
+      "heading": "Pricing",
+      "badge": "No Hidden Fees",
+      "title": "Invest in your brain,",
+      "titleHighlight": "not our subscriptions.",
+      "subtitle": "We believe knowledge should be accessible. So we don't sell courses. But servers heat up and coffee runs out. The choice is yours.",
+      "junior": {
+        "title": "Junior Engineer",
+        "description": "For those who want an offer, not expenses.",
+        "price": "$0",
+        "period": "/ forever",
+        "features": {
+          "unlimited": "Unlimited Questions",
+          "fullAccess": "Full Quiz Access",
+          "noCard": "No Credit Card Required",
+          "noGuilt": "0% Guilt Trip"
+        },
+        "noYacht": "Personal Yacht",
+        "cta": "Start Learning"
+      },
+      "hero": {
+        "badge": "High Impact",
+        "title": "Open Source Hero",
+        "description": "For those who already landed an offer thanks to us.",
+        "price": "$$$",
+        "period": "/ karma points",
+        "features": {
+          "servers": "Keep Servers Alive",
+          "coffee": "Buy Coffee for Developers",
+          "badge": "Profile Badge (Big Flex)",
+          "feeling": "Warm Fuzzy Feeling"
+        },
+        "drizzle": "We actually pay for Drizzle",
+        "cta": "Support the Project"
+      },
+      "disclaimer": "*No developers were harmed in the making of this pricing table. Only caffeine levels were impacted."
+    },
+    "sponsors": {
+      "badge": "Latest Contributors",
+      "emptySlot": "You?",
+      "yourSpot": "Your Spot",
+      "joinClub": "Join the club",
+      "fundsNote": "100% of funds go to server costs & coffee",
+      "ctaAriaLabel": "Become a sponsor to claim your spot"
+    },
+    "community": {
+      "badge": "Community Love",
+      "title": "Approved by",
+      "titleHighlight": "Survivors",
+      "subtitle": "Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers.",
+      "joinDiscussion": "Join Discussion",
+      "successStory": "Have a success story or feature request?",
+      "readThreads": "We read every single thread"
+    },
+    "arcade": {
+      "title": "DevLovers Arcade",
+      "ready": "READY",
+      "level1": "Level 1",
+      "level2": "Level 2",
+      "level3": "Level 3",
+      "level4": "Level 4",
+      "crashed": "CRASHED",
+      "running": "RUNNING",
+      "high": "High",
+      "score": "Score",
+      "clickToStart": "Click to Start",
+      "systemFailure": "System Failure",
+      "retry": "Retry"
+    }
+  },
+  "notFound": {
+    "title": "Page Not Found",
+    "description": "Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.",
+    "backHome": "Back to Home"
   },
   "CookieBanner": {
     "title": "🍪 We value your privacy",
@@ -303,7 +827,12 @@
       "showPassword": "Show password",
       "hidePassword": "Hide password",
       "show": "Show",
-      "hide": "Hide"
+      "hide": "Hide",
+      "validation": {
+        "required": "Please fill out this field",
+        "invalidEmail": "Please enter a valid email address",
+        "passwordTooShort": "Password must be at least {minLength} characters"
+      }
     },
     "divider": "or"
   },
@@ -383,6 +912,13 @@
       "fixing": "Magic in progress"
     }
   },
+  "onlineCounter": {
+    "one": "you are one step closer to the goal",
+    "two": "chasing the dream",
+    "upToFive": "on the way to an offer",
+    "upToTen": "closer to the dream job",
+    "many": "marching towards success"
+  },
   "legal": {
     "back": "Back",
     "lastUpdated": "Last updated",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 2bcf7909..50421909 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -19,6 +19,10 @@
     "closeMenu": "Zamknij menu",
     "logout": "Wyloguj się"
   },
+  "mobileMenu": {
+    "newProduct": "Nowy produkt",
+    "admin": "Admin"
+  },
   "navigation": {
     "home": "Strona główna",
     "topics": "Tematy",
@@ -220,8 +224,527 @@
     "privacyPolicy": "Polityka Prywatności",
     "termsOfService": "Warunki Świadczenia Usług"
   },
+  "shop": {
+    "page": {
+      "newArrivals": "Nowości",
+      "shopByCategory": "Sklep według kategorii",
+      "viewAll": "Zobacz wszystko",
+      "hero": {
+        "headline": "Koduj. Twórz. Kolekcjonuj.",
+        "subheadline": "Dołącz do tysięcy deweloperów, którzy wyrażają swoją pasję poprzez premium merch.",
+        "cta": "Przeglądaj wszystkie produkty"
+      },
+      "comingSoon": {
+        "headline": "Wkrótce...",
+        "subheadline": "Nasz sklep wkrótce zostanie uruchomiony. Bądź na bieżąco z najnowszymi produktami i ekskluzywnymi ofertami!",
+        "cta": "Kup teraz"
+      }
+    },
+    "product": {
+      "soldOut": "Wyprzedane",
+      "color": "Kolor",
+      "size": "Rozmiar",
+      "quantity": "Ilość",
+      "addToCart": "Dodaj do koszyka",
+      "addedToCart": "Dodano do koszyka",
+      "purchaseOptions": "Opcje zakupu",
+      "decreaseQuantity": "Zmniejsz ilość",
+      "increaseQuantity": "Zwiększ ilość",
+      "badges": {
+        "NEW": "Nowość",
+        "SALE": "Wyprzedaż"
+      }
+    },
+    "categoryTile": {
+      "shopCategory": "Kategoria: {name}"
+    },
+    "filters": {
+      "category": "Kategoria",
+      "type": "Typ",
+      "color": "Kolor",
+      "size": "Rozmiar",
+      "label": "Filtry produktów"
+    },
+    "sort": {
+      "sortBy": "Sortuj według:",
+      "label": "Sortowanie produktów"
+    },
+    "toolbar": {
+      "filters": "Filtry",
+      "openFilters": "Otwórz filtry",
+      "close": "Zamknij",
+      "label": "Kontrolki listy produktów"
+    },
+    "cart": {
+      "title": "Twój koszyk",
+      "empty": "Twój koszyk jest pusty",
+      "emptyDescription": "Wygląda na to, że nie dodałeś jeszcze żadnych produktów do koszyka.",
+      "startShopping": "Rozpocznij zakupy",
+      "itemsLabel": "Produkty w koszyku",
+      "summary": {
+        "heading": "Podsumowanie zamówienia",
+        "subtotal": "Suma częściowa",
+        "shipping": "Wysyłka",
+        "shippingCalc": "Obliczone przy kasie",
+        "total": "Razem"
+      },
+      "checkout": {
+        "placeOrder": "Złóż zamówienie",
+        "placing": "Składanie zamówienia...",
+        "message": "Zostaniesz przekierowany do bezpiecznej płatności lub zobaczysz potwierdzenie, jeśli płatność nie jest wymagana w tym środowisku.",
+        "notRedirected": "Jeśli nie zostałeś automatycznie przekierowany, otwórz swoje zamówienie",
+        "goToOrder": "Przejdź do zamówienia"
+      },
+      "actions": {
+        "removeItem": "Usuń {title} z koszyka",
+        "decreaseQty": "Zmniejsz ilość",
+        "increaseQty": "Zwiększ ilość",
+        "maxStock": "Maksymalnie {stock} w magazynie"
+      },
+      "alerts": {
+        "itemsRemoved": "Niektóre produkty zostały usunięte z koszyka, ponieważ są niedostępne lub wyprzedane."
+      }
+    },
+    "admin": {
+      "page": {
+        "title": "Panel administracyjny sklepu",
+        "description": "Narzędzia administracyjne dla sklepu z gadżetami.",
+        "productsSection": {
+          "title": "Produkty",
+          "description": "Twórz, edytuj, aktywuj, promuj."
+        },
+        "ordersSection": {
+          "title": "Zamówienia",
+          "description": "Przeglądaj i zarządzaj zamówieniami."
+        }
+      },
+      "topbar": {
+        "label": "Panel administracyjny sklepu",
+        "admin": "Admin",
+        "products": "Produkty",
+        "orders": "Zamówienia",
+        "backToShop": "Wróć do sklepu"
+      },
+      "products": {
+        "title": "Admin · Produkty",
+        "newProduct": "Nowy produkt",
+        "listCaption": "Lista produktów",
+        "empty": "Brak produktów.",
+        "table": {
+          "title": "Tytuł",
+          "slug": "Slug",
+          "price": "Cena",
+          "category": "Kategoria",
+          "type": "Typ",
+          "stock": "Stan",
+          "badge": "Odznaka",
+          "active": "Aktywny",
+          "featured": "Polecany",
+          "created": "Utworzono",
+          "actions": "Akcje"
+        },
+        "actions": {
+          "view": "Zobacz",
+          "edit": "Edytuj",
+          "viewProduct": "Zobacz produkt {title}",
+          "editProduct": "Edytuj produkt {title}",
+          "yes": "Tak",
+          "no": "Nie"
+        }
+      },
+      "statusToggle": {
+        "securityMissing": "Brak tokenu bezpieczeństwa. Odśwież stronę.",
+        "securityExpired": "Token bezpieczeństwa wygasł. Odśwież stronę i spróbuj ponownie.",
+        "failedUpdate": "Nie udało się zaktualizować statusu",
+        "updating": "Aktualizowanie",
+        "deactivate": "Dezaktywuj",
+        "activate": "Aktywuj"
+      },
+      "pagination": {
+        "label": "Stronicowanie",
+        "previous": "Poprzednia",
+        "next": "Następna",
+        "page": "Strona {page}",
+        "previousPage": "Poprzednia strona",
+        "nextPage": "Następna strona"
+      },
+      "orders": {
+        "title": "Admin · Zamówienia",
+        "reconcileStale": "Uzgodnij nieaktualne",
+        "empty": "Brak zamówień.",
+        "listCaption": "Lista zamówień",
+        "viewOrder": "Zobacz zamówienie {id}",
+        "table": {
+          "created": "Utworzono",
+          "status": "Status",
+          "total": "Suma",
+          "items": "Produkty",
+          "provider": "Dostawca",
+          "orderId": "ID zamówienia",
+          "actions": "Akcje"
+        },
+        "actions": {
+          "view": "Zobacz"
+        }
+      },
+      "deleteProduct": {
+        "securityMissing": "Brak tokenu bezpieczeństwa. Odśwież stronę.",
+        "securityExpired": "Token bezpieczeństwa wygasł. Odśwież stronę i spróbuj ponownie.",
+        "confirmDelete": "Usunąć produkt \"{title}\"? Tej operacji nie można cofnąć.",
+        "notFound": "Produkt nie znaleziony (już usunięty).",
+        "referenced": "Nie można usunąć: ten produkt jest powiązany z innymi rekordami.",
+        "failedDelete": "Nie udało się usunąć produktu",
+        "deleting": "Usuwanie",
+        "delete": "Usuń"
+      },
+      "refund": {
+        "onlyForPaid": "Zwrot jest dostępny tylko dla opłaconych zamówień przez Stripe",
+        "refunding": "Zwracanie…",
+        "refund": "Zwróć"
+      },
+      "navigation": {
+        "shopNav": "Nawigacja sklepu",
+        "home": "Strona główna"
+      }
+    },
+    "catalog": {
+      "results": "Wyniki katalogu",
+      "products": "Produkty",
+      "pagination": "Stronicowanie katalogu",
+      "loadMoreFailed": "Nie udało się załadować więcej",
+      "loadMoreFailedHttp": "Nie udało się załadować więcej (HTTP {status})",
+      "categories": {
+        "all": "Wszystkie produkty",
+        "newArrivals": "Nowości",
+        "bestSellers": "Bestsellery",
+        "apparel": "Odzież",
+        "lifestyle": "Styl życia",
+        "collectibles": "Kolekcjonerskie",
+        "sale": "Wyprzedaż"
+      },
+      "productTypes": {
+        "accessories": "Akcesoria",
+        "shirts": "Koszulki",
+        "drinkware": "Naczynia",
+        "technology": "Technologia"
+      },
+      "colors": {
+        "black": "Czarny",
+        "white": "Biały",
+        "grey": "Szary",
+        "navy": "Granatowy",
+        "multicolor": "Wielokolorowy"
+      },
+      "sort": {
+        "featured": "Polecane",
+        "priceAsc": "Cena: od najniższej",
+        "priceDesc": "Cena: od najwyższej",
+        "newest": "Najnowsze"
+      }
+    },
+    "products": {
+      "title": "Wszystkie produkty",
+      "noProductsFound": "Nie znaleziono produktów",
+      "adjustFilters": "Spróbuj dostosować filtry, aby znaleźć to, czego szukasz.",
+      "backToProducts": "Wróć do wszystkich produktów",
+      "notAvailable": "Ten produkt nie jest dostępny dla twojej lokalizacji/waluty.",
+      "loadMore": "Załaduj więcej",
+      "shopNow": "Kup teraz"
+    },
+    "checkout": {
+      "errors": {
+        "missingOrderId": "Brak identyfikatora zamówienia",
+        "missingOrderIdDescription": "Nie mogliśmy zidentyfikować twojego zamówienia. Wróć do koszyka lub przeglądaj produkty.",
+        "orderNotFound": "Zamówienie nie znalezione",
+        "orderNotFoundDescription": "Nie mogliśmy znaleźć tego zamówienia. Mogło zostać usunięte lub nigdy nie istniało.",
+        "invalidOrder": "Nieprawidłowe zamówienie",
+        "unableToLoad": "Nie można załadować zamówienia",
+        "unableToCheckout": "Nie można rozpocząć procesu zakupu.",
+        "unexpectedResponse": "Nieoczekiwana odpowiedź przy zakupie.",
+        "tryAgainLater": "Spróbuj ponownie później."
+      },
+      "missingOrder": {
+        "message": "Nie mogliśmy zidentyfikować twojego zamówienia. Wróć do koszyka lub przeglądaj produkty."
+      },
+      "notFoundOrder": {
+        "message": "Nie mogliśmy znaleźć tego zamówienia. Mogło zostać usunięte lub nigdy nie istniało."
+      },
+      "success": {
+        "title": "Dziękujemy za zamówienie",
+        "orderLabel": "Zamówienie",
+        "received": "Otrzymaliśmy twoje zamówienie.",
+        "paymentConfirmed": "Płatność została potwierdzona.",
+        "paymentProcessing": "Płatność jest nadal przetwarzana. Ta strona zaktualizuje się automatycznie.",
+        "paymentsDisabled": "Płatności są wyłączone w tym środowisku. Nie zostałeś obciążony za to zamówienie.",
+        "orderSummary": "Podsumowanie zamówienia",
+        "totalAmount": "Łączna kwota",
+        "items": "Produkty",
+        "status": "Status",
+        "continueShopping": "Kontynuuj zakupy",
+        "viewCart": "Zobacz koszyk"
+      },
+      "error": {
+        "paymentFailed": "Płatność nie powiodła się",
+        "paymentFailedDescription": "Płatność za to zamówienie nie została zakończona. Możesz spróbować ponownie lub skontaktować się z pomocą.",
+        "paymentUnclear": "Status płatności nieznany",
+        "paymentUnclearDescription": "Nie mogliśmy potwierdzić błędu płatności dla tego zamówienia.",
+        "notCompleted": "Płatność za to zamówienie nie została zakończona. Możesz spróbować ponownie lub skontaktować się z pomocą.",
+        "couldNotConfirm": "Nie mogliśmy potwierdzić błędu płatności dla tego zamówienia.",
+        "orderDetails": "Szczegóły zamówienia",
+        "order": "Zamówienie",
+        "orderLabel": "Zamówienie",
+        "total": "Razem",
+        "totalLabel": "Razem",
+        "status": "Status",
+        "statusLabel": "Status",
+        "backToCart": "Wróć do koszyka",
+        "retryPayment": "Spróbuj ponownie",
+        "continueShopping": "Kontynuuj zakupy"
+      },
+      "payment": {
+        "title": "Bezpieczna płatność",
+        "payForOrder": "Zapłać za zamówienie #{orderId}",
+        "paymentDetails": "Szczegóły płatności",
+        "completePayment": "Dokończ płatność, aby złożyć zamówienie.",
+        "amountDue": "Do zapłaty",
+        "orderSummary": "Podsumowanie zamówienia",
+        "items": "Produkty",
+        "totalAmount": "Łączna kwota",
+        "status": "Status",
+        "viewConfirmation": "Zobacz potwierdzenie",
+        "continueShopping": "Kontynuuj zakupy",
+        "statusMessages": {
+          "alreadyPaid": "To zamówienie jest już opłacone.",
+          "previousFailed": "Poprzednia próba płatności nie powiodła się. Spróbuj ponownie.",
+          "completePayment": "Dokończ płatność, aby sfinalizować zamówienie."
+        }
+      },
+      "actions": {
+        "backToProducts": "Wróć do produktów",
+        "goToCart": "Przejdź do koszyka",
+        "backToCart": "Wróć do koszyka",
+        "continueShopping": "Kontynuuj zakupy"
+      }
+    },
+    "orders": {
+      "title": "Moje zamówienia",
+      "subtitle": "Twoje najnowsze zamówienia (do 50).",
+      "backToShop": "Wróć do sklepu",
+      "empty": {
+        "message": "Brak zamówień.",
+        "browseProducts": "Przeglądaj produkty"
+      },
+      "table": {
+        "caption": "Twoje zamówienia",
+        "items": "Produkty",
+        "date": "Data",
+        "status": "Status",
+        "total": "Razem"
+      },
+      "orderHeadline": {
+        "incomplete": "Zamówienie {id} (niekompletne)",
+        "withMore": "{item} +{count} więcej",
+        "default": "Zamówienie {id}"
+      },
+      "paymentStatus": {
+        "paid": "Opłacone",
+        "pending": "Oczekujące",
+        "requiresPayment": "Wymaga płatności",
+        "failed": "Nieudane",
+        "refunded": "Zwrócone"
+      },
+      "detail": {
+        "title": "Zamówienie",
+        "myOrders": "Moje zamówienia",
+        "shop": "Sklep",
+        "orderSummary": "Podsumowanie zamówienia",
+        "total": "Razem",
+        "paymentStatus": "Status płatności",
+        "created": "Utworzono",
+        "provider": "Dostawca",
+        "paymentReference": "Referencja płatności",
+        "idempotencyKey": "Klucz idempotencji",
+        "stockRestored": "Stan przywrócony",
+        "restockedAt": "Przywrócono o",
+        "items": "Produkty",
+        "sku": "SKU: {sku}",
+        "product": "Produkt: {productId}",
+        "quantity": "Ilość",
+        "unitPrice": "Cena jednostkowa",
+        "lineTotal": "Suma wiersza",
+        "yes": "Tak",
+        "no": "Nie"
+      }
+    }
+  },
   "about": {
-
+    "metaTitle": "O nas | DevLovers",
+    "metaDescription": "Dowiedz się więcej o DevLovers — platformie do przygotowań do rozmów kwalifikacyjnych",
+    "hero": {
+      "titleHighlight": "Zdebuguj swoje umiejętności",
+      "titleRest": "zanim zrobi to rekruter.",
+      "description": "Przestań zgadywać. Zamieniliśmy chaotyczny proces rozmów w uporządkowaną mapę drogową.",
+      "descriptionHighlight": "Przekształć rozproszoną wiedzę",
+      "descriptionRest": "w gotowy do produkcji zestaw umiejętności i zdobądź ofertę.",
+      "stats": {
+        "quizzesPassed": "Ukończonych quizów",
+        "githubStars": "Gwiazdek na GitHub",
+        "activeUsers": "Aktywnych użytkowników",
+        "linkedinFollowers": "Obserwujących na LinkedIn",
+        "quizzes": "Quizów",
+        "stars": "Gwiazdek",
+        "users": "Użytkowników",
+        "followers": "Obserwujących"
+      }
+    },
+    "topics": {
+      "pretitle": "/ Ekosystem",
+      "titleStart": "Opanuj swój",
+      "titleHighlight": "cały stack",
+      "description": "Od frameworków frontendowych po logikę backendową. Obejmujemy kluczowe technologie 2026 roku.",
+      "questions": "Pytań"
+    },
+    "features": {
+      "title": "Funkcje zaprojektowane, aby",
+      "titleHighlight": "uczynić cię nie do zatrzymania",
+      "subtitle": "Przestań szukać rozproszonych informacji. Zebraliśmy idealny zestaw narzędzi do zdawania rozmów technicznych.",
+      "qa": {
+        "title": "Q&A",
+        "description": "Bez lania wody. Ogromna biblioteka prawdziwych pytań z rozmów z precyzyjnymi odpowiedziami zatwierdzonymi przez rekruterów."
+      },
+      "quiz": {
+        "title": "Quizy",
+        "description": "Zweryfikuj swoją pewność. Dynamiczne interaktywne quizy, które wykryją twoje słabe punkty przed rekruterem."
+      },
+      "leaderboard": {
+        "title": "Ranking",
+        "description": "Zgamifikuj przygotowania. Zdobywaj punkty za każdą poprawną odpowiedź, utrzymuj passę i rywalizuj z innymi."
+      },
+      "blog": {
+        "title": "Blog",
+        "description": "Bądź na bieżąco z artykułami o trendach technologicznych, tutorialami programistycznymi i spostrzeżeniami z branży."
+      },
+      "profile": {
+        "title": "Analityka",
+        "description": "Nie działaj po omacku. Wizualizuj swój postęp dzięki szczegółowym wykresom i zobacz, które tematy opanowałeś."
+      },
+      "shop": {
+        "title": "Sklep",
+        "description": "Ulepsz swój setup. Wysokiej jakości odzież dla programistów, akcesoria biurowe i zasoby cyfrowe."
+      },
+      "bubbles": {
+        "qa": {
+          "languages": { "label": "3 języki", "desc": "EN, UK i PL" },
+          "aiHelper": { "label": "Pomocnik AI", "desc": "Zaznacz tekst do wyjaśnienia" },
+          "smartCache": { "label": "Inteligentny cache", "desc": "Podświetla nauczone terminy" },
+          "techFilter": { "label": "Filtr tech", "desc": "React, Git, JS i więcej" }
+        },
+        "quiz": {
+          "smartTimer": { "label": "Inteligentny timer", "desc": "Ścigaj się z czasem" },
+          "antiCheat": { "label": "Anti-Cheat", "desc": "Wykrywanie utraty fokusa" },
+          "autoSync": { "label": "Auto-synchronizacja", "desc": "Zapisuje postęp po logowaniu" },
+          "tracking": { "label": "Śledzenie", "desc": "Najlepsze wyniki i próby" }
+        },
+        "leaderboard": {
+          "podium": { "label": "Podium", "desc": "Ekskluzywny spotlight top 3" },
+          "globalRank": { "label": "Globalny ranking", "desc": "Rywalizuj na całym świecie" },
+          "xpSystem": { "label": "System XP", "desc": "Punkty za każdą odpowiedź" },
+          "liveFeed": { "label": "Live feed", "desc": "Aktualizacje rang w czasie rzeczywistym" }
+        },
+        "profile": {
+          "statsHub": { "label": "Centrum statystyk", "desc": "Wizualizuj swój rozwój" },
+          "history": { "label": "Historia", "desc": "Śledź serie nauki" },
+          "identity": { "label": "Tożsamość", "desc": "Zarządzaj rolą i profilem" },
+          "reminders": { "label": "Przypomnienia", "desc": "Dokończ niedokończone quizy" }
+        },
+        "blog": {
+          "techTrends": { "label": "Trendy tech", "desc": "Bądź o krok przed innymi" },
+          "tutorials": { "label": "Tutoriale", "desc": "Przewodniki krok po kroku" },
+          "deepDives": { "label": "Głębokie analizy", "desc": "Szczegółowy rozbiór" },
+          "community": { "label": "Społeczność", "desc": "Pisane przez developerów" }
+        },
+        "shop": {
+          "newDrops": { "label": "Nowości", "desc": "Regularne aktualizacje" },
+          "curated": { "label": "Selekcja", "desc": "Kolekcje dla developerów" },
+          "checkout": { "label": "Płatność", "desc": "Płynny proces przez Stripe" },
+          "premium": { "label": "Premium", "desc": "Wysoka jakość materiałów" }
+        }
+      }
+    },
+    "pricing": {
+      "heading": "Cennik",
+      "badge": "Bez ukrytych opłat",
+      "title": "Inwestuj w swój mózg,",
+      "titleHighlight": "nie w nasze subskrypcje.",
+      "subtitle": "Wierzymy, że wiedza powinna być dostępna. Dlatego nie sprzedajemy kursów. Ale serwery się grzeją, a kawa się kończy. Wybór należy do ciebie.",
+      "junior": {
+        "title": "Junior Engineer",
+        "description": "Dla tych, którzy chcą oferty, nie wydatków.",
+        "price": "$0",
+        "period": "/ na zawsze",
+        "features": {
+          "unlimited": "Nieograniczone pytania",
+          "fullAccess": "Pełny dostęp do quizów",
+          "noCard": "Bez karty kredytowej",
+          "noGuilt": "0% wyrzutów sumienia"
+        },
+        "noYacht": "Osobisty jacht",
+        "cta": "Rozpocznij naukę"
+      },
+      "hero": {
+        "badge": "Wysoki wpływ",
+        "title": "Open Source Hero",
+        "description": "Dla tych, którzy już dostali ofertę dzięki nam.",
+        "price": "$$$",
+        "period": "/ punkty karmy",
+        "features": {
+          "servers": "Utrzymanie serwerów przy życiu",
+          "coffee": "Kawa dla developerów",
+          "badge": "Odznaka w profilu (Big Flex)",
+          "feeling": "Ciepłe uczucie w środku"
+        },
+        "drizzle": "Naprawdę płacimy za Drizzle",
+        "cta": "Wesprzyj projekt"
+      },
+      "disclaimer": "*Żaden developer nie ucierpiał podczas tworzenia tej tabeli cenowej. Ucierpiał tylko poziom kofeiny."
+    },
+    "sponsors": {
+      "badge": "Ostatni kontrybutorzy",
+      "emptySlot": "Ty?",
+      "yourSpot": "Twoje miejsce",
+      "joinClub": "Dołącz do klubu",
+      "fundsNote": "100% środków idzie na serwery i kawę",
+      "ctaAriaLabel": "Zostań sponsorem i zajmij swoje miejsce"
+    },
+    "community": {
+      "badge": "Miłość społeczności",
+      "title": "Zatwierdzone przez",
+      "titleHighlight": "Ocalałych",
+      "subtitle": "Dołącz do tysięcy developerów, którzy przestali zgadywać i zaczęli shipować. Prawdziwe opinie od prawdziwych inżynierów.",
+      "joinDiscussion": "Dołącz do dyskusji",
+      "successStory": "Masz historię sukcesu lub propozycję funkcji?",
+      "readThreads": "Czytamy każdy wątek"
+    },
+    "arcade": {
+      "title": "DevLovers Arcade",
+      "ready": "GOTOWE",
+      "level1": "Poziom 1",
+      "level2": "Poziom 2",
+      "level3": "Poziom 3",
+      "level4": "Poziom 4",
+      "crashed": "CRASH",
+      "running": "AKTYWNY",
+      "high": "Rekord",
+      "score": "Wynik",
+      "clickToStart": "Kliknij aby zacząć",
+      "systemFailure": "Awaria systemu",
+      "retry": "Ponów"
+    }
+  },
+  "notFound": {
+    "title": "Strona nie znaleziona",
+    "description": "Przepraszamy, nie mogliśmy znaleźć strony, której szukasz. Mogła zostać przeniesiona lub usunięta.",
+    "backHome": "Wróć na stronę główną"
   },
   "CookieBanner": {
     "title": "🍪 Dbamy o Twoją prywatność",
@@ -304,14 +827,19 @@
       "showPassword": "Pokaż hasło",
       "hidePassword": "Ukryj hasło",
       "show": "Pokaż",
-      "hide": "Ukryj"
+      "hide": "Ukryj",
+      "validation": {
+        "required": "Proszę wypełnić to pole",
+        "invalidEmail": "Proszę podać prawidłowy adres email",
+        "passwordTooShort": "Hasło musi mieć minimum {minLength} znaków"
+      }
     },
     "divider": "lub"
   },
   "dashboard": {
     "metaTitle": "Panel | DevLovers",
     "metaDescription": "Śledź swój postęp i wyniki quizów.",
-    "title": "Panel",
+    "title": "Panel użytkownika",
     "subtitle": "Witaj z powrotem na swoim placu treningowym.",
     "supportLink": "Wsparcie i opinie",
     "profile": {
@@ -384,6 +912,13 @@
       "fixing": "Magia w toku"
     }
   },
+  "onlineCounter": {
+    "one": "o krok od celu",
+    "two": "dążą do marzeń",
+    "upToFive": "w drodze po ofertę",
+    "upToTen": "bliżej wymarzonej pracy",
+    "many": "kroczy ku sukcesowi"
+  },
   "legal": {
     "back": "Wróć",
     "lastUpdated": "Ostatnia aktualizacja",
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index e9fe58e7..05a51ab0 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -19,6 +19,10 @@
     "closeMenu": "Закрити меню",
     "logout": "Вийти"
   },
+  "mobileMenu": {
+    "newProduct": "Новий товар",
+    "admin": "Адмін"
+  },
   "navigation": {
     "home": "Головна",
     "topics": "Теми",
@@ -31,7 +35,7 @@
     "login": "Увійти",
     "logout": "Вийти",
     "signup": "Зареєструватися",
-    "dashboard": "Панель"
+    "dashboard": "Панель користувача"
   },
   "homepage": {
     "title": "DevLovers",
@@ -220,8 +224,527 @@
     "privacyPolicy": "Політика Конфіденційності",
     "termsOfService": "Умови Використання"
   },
+  "shop": {
+    "page": {
+      "newArrivals": "Нові надходження",
+      "shopByCategory": "Магазин за категоріями",
+      "viewAll": "Переглянути все",
+      "hero": {
+        "headline": "Кодуй. Створюй. Колекціонуй.",
+        "subheadline": "Приєднуйтесь до тисяч розробників, які виражають свою пристрасть через преміум мерч.",
+        "cta": "Переглянути всі товари"
+      },
+      "comingSoon": {
+        "headline": "Скоро...",
+        "subheadline": "Наш магазин скоро запрацює. Слідкуйте за останніми продуктами та ексклюзивними пропозиціями!",
+        "cta": "До магазину"
+      }
+    },
+    "product": {
+      "soldOut": "Розпродано",
+      "color": "Колір",
+      "size": "Розмір",
+      "quantity": "Кількість",
+      "addToCart": "Додати до кошика",
+      "addedToCart": "Додано до кошика",
+      "purchaseOptions": "Опції покупки",
+      "decreaseQuantity": "Зменшити кількість",
+      "increaseQuantity": "Збільшити кількість",
+      "badges": {
+        "NEW": "Новинка",
+        "SALE": "Розпродаж"
+      }
+    },
+    "categoryTile": {
+      "shopCategory": "Категорія: {name}"
+    },
+    "filters": {
+      "category": "Категорія",
+      "type": "Тип",
+      "color": "Колір",
+      "size": "Розмір",
+      "label": "Фільтри товарів"
+    },
+    "sort": {
+      "sortBy": "Сортувати за:",
+      "label": "Сортування товарів"
+    },
+    "toolbar": {
+      "filters": "Фільтри",
+      "openFilters": "Відкрити фільтри",
+      "close": "Закрити",
+      "label": "Керування переліком товарів"
+    },
+    "cart": {
+      "title": "Ваш кошик",
+      "empty": "Ваш кошик порожній",
+      "emptyDescription": "Схоже, ви ще не додали жодного товару до кошика.",
+      "startShopping": "Почати покупки",
+      "itemsLabel": "Товари в кошику",
+      "summary": {
+        "heading": "Підсумок замовлення",
+        "subtotal": "Проміжний підсумок",
+        "shipping": "Доставка",
+        "shippingCalc": "Розраховується при оформленні",
+        "total": "Всього"
+      },
+      "checkout": {
+        "placeOrder": "Оформити замовлення",
+        "placing": "Оформлення замовлення...",
+        "message": "Ви будете перенаправлені на безпечну оплату або побачите підтвердження, якщо оплата не потрібна в цьому середовищі.",
+        "notRedirected": "Якщо ви не були автоматично перенаправлені, відкрийте ваше замовлення",
+        "goToOrder": "Перейти до замовлення"
+      },
+      "actions": {
+        "removeItem": "Видалити {title} з кошика",
+        "decreaseQty": "Зменшити кількість",
+        "increaseQty": "Збільшити кількість",
+        "maxStock": "Максимум {stock} в наявності"
+      },
+      "alerts": {
+        "itemsRemoved": "Деякі товари були видалені з вашого кошика, оскільки вони недоступні або закінчилися на складі."
+      }
+    },
+    "admin": {
+      "page": {
+        "title": "Адміністрування магазину",
+        "description": "Інструменти адміністрування магазину мерчу.",
+        "productsSection": {
+          "title": "Товари",
+          "description": "Створювати, редагувати, активувати, рекомендувати."
+        },
+        "ordersSection": {
+          "title": "Замовлення",
+          "description": "Переглядати та керувати замовленнями."
+        }
+      },
+      "topbar": {
+        "label": "Адміністрування магазину",
+        "admin": "Адмін",
+        "products": "Товари",
+        "orders": "Замовлення",
+        "backToShop": "Назад до магазину"
+      },
+      "products": {
+        "title": "Адмін · Товари",
+        "newProduct": "Новий товар",
+        "listCaption": "Список товарів",
+        "empty": "Товарів поки немає.",
+        "table": {
+          "title": "Назва",
+          "slug": "Slug",
+          "price": "Ціна",
+          "category": "Категорія",
+          "type": "Тип",
+          "stock": "Наявність",
+          "badge": "Значок",
+          "active": "Активний",
+          "featured": "Рекомендований",
+          "created": "Створено",
+          "actions": "Дії"
+        },
+        "actions": {
+          "view": "Переглянути",
+          "edit": "Редагувати",
+          "viewProduct": "Переглянути товар {title}",
+          "editProduct": "Редагувати товар {title}",
+          "yes": "Так",
+          "no": "Ні"
+        }
+      },
+      "statusToggle": {
+        "securityMissing": "Відсутній токен безпеки. Оновіть сторінку.",
+        "securityExpired": "Токен безпеки прострочений. Оновіть сторінку та спробуйте ще раз.",
+        "failedUpdate": "Не вдалося оновити статус",
+        "updating": "Оновлення",
+        "deactivate": "Деактивувати",
+        "activate": "Активувати"
+      },
+      "pagination": {
+        "label": "Пагінація",
+        "previous": "Назад",
+        "next": "Вперед",
+        "page": "Сторінка {page}",
+        "previousPage": "Попередня сторінка",
+        "nextPage": "Наступна сторінка"
+      },
+      "orders": {
+        "title": "Адмін · Замовлення",
+        "reconcileStale": "Узгодити застарілі",
+        "empty": "Замовлень поки немає.",
+        "listCaption": "Список замовлень",
+        "viewOrder": "Переглянути замовлення {id}",
+        "table": {
+          "created": "Створено",
+          "status": "Статус",
+          "total": "Сума",
+          "items": "Товари",
+          "provider": "Провайдер",
+          "orderId": "ID замовлення",
+          "actions": "Дії"
+        },
+        "actions": {
+          "view": "Переглянути"
+        }
+      },
+      "deleteProduct": {
+        "securityMissing": "Відсутній токен безпеки. Оновіть сторінку.",
+        "securityExpired": "Токен безпеки прострочений. Оновіть сторінку та спробуйте ще раз.",
+        "confirmDelete": "Видалити товар \"{title}\"? Цю дію не можна скасувати.",
+        "notFound": "Товар не знайдено (вже видалено).",
+        "referenced": "Не можна видалити: цей товар використовується в інших записах.",
+        "failedDelete": "Не вдалося видалити товар",
+        "deleting": "Видалення",
+        "delete": "Видалити"
+      },
+      "refund": {
+        "onlyForPaid": "Повернення доступне лише для оплачених замовлень через Stripe",
+        "refunding": "Повернення…",
+        "refund": "Повернути"
+      },
+      "navigation": {
+        "shopNav": "Навігація магазину",
+        "home": "Головна"
+      }
+    },
+    "catalog": {
+      "results": "Результати каталогу",
+      "products": "Товари",
+      "pagination": "Пагінація каталогу",
+      "loadMoreFailed": "Не вдалося завантажити більше",
+      "loadMoreFailedHttp": "Не вдалося завантажити більше (HTTP {status})",
+      "categories": {
+        "all": "Всі товари",
+        "newArrivals": "Нові надходження",
+        "bestSellers": "Бестселери",
+        "apparel": "Одяг",
+        "lifestyle": "Стиль життя",
+        "collectibles": "Колекційні",
+        "sale": "Розпродаж"
+      },
+      "productTypes": {
+        "accessories": "Аксесуари",
+        "shirts": "Футболки",
+        "drinkware": "Посуд",
+        "technology": "Технології"
+      },
+      "colors": {
+        "black": "Чорний",
+        "white": "Білий",
+        "grey": "Сірий",
+        "navy": "Темно-синій",
+        "multicolor": "Різнокольоровий"
+      },
+      "sort": {
+        "featured": "Рекомендовані",
+        "priceAsc": "Ціна: від низької до високої",
+        "priceDesc": "Ціна: від високої до низької",
+        "newest": "Найновіші"
+      }
+    },
+    "products": {
+      "title": "Всі товари",
+      "noProductsFound": "Товарів не знайдено",
+      "adjustFilters": "Спробуйте змінити фільтри, щоб знайти те, що ви шукаєте.",
+      "backToProducts": "Назад до всіх товарів",
+      "notAvailable": "Цей товар недоступний для вашої локалі/валюти.",
+      "loadMore": "Завантажити ще",
+      "shopNow": "Купити зараз"
+    },
+    "checkout": {
+      "errors": {
+        "missingOrderId": "Відсутній ідентифікатор замовлення",
+        "missingOrderIdDescription": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари.",
+        "orderNotFound": "Замовлення не знайдено",
+        "orderNotFoundDescription": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало.",
+        "invalidOrder": "Недійсне замовлення",
+        "unableToLoad": "Не вдається завантажити замовлення",
+        "unableToCheckout": "Не вдається розпочати оформлення замовлення зараз.",
+        "unexpectedResponse": "Неочікувана відповідь оформлення замовлення.",
+        "tryAgainLater": "Будь ласка, спробуйте пізніше."
+      },
+      "missingOrder": {
+        "message": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари."
+      },
+      "notFoundOrder": {
+        "message": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало."
+      },
+      "success": {
+        "title": "Дякуємо за ваше замовлення",
+        "orderLabel": "Замовлення",
+        "received": "Ми отримали ваше замовлення.",
+        "paymentConfirmed": "Оплату підтверджено.",
+        "paymentProcessing": "Оплата все ще обробляється. Ця сторінка оновиться автоматично.",
+        "paymentsDisabled": "Платежі вимкнено в цьому середовищі. З вас не було знято плату за це замовлення.",
+        "orderSummary": "Підсумок замовлення",
+        "totalAmount": "Загальна сума",
+        "items": "Товари",
+        "status": "Статус",
+        "continueShopping": "Продовжити покупки",
+        "viewCart": "Переглянути кошик"
+      },
+      "error": {
+        "paymentFailed": "Помилка оплати",
+        "paymentFailedDescription": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою.",
+        "paymentUnclear": "Статус оплати неясний",
+        "paymentUnclearDescription": "Ми не змогли підтвердити помилку оплати для цього замовлення.",
+        "notCompleted": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою.",
+        "couldNotConfirm": "Ми не змогли підтвердити помилку оплати для цього замовлення.",
+        "orderDetails": "Деталі замовлення",
+        "order": "Замовлення",
+        "orderLabel": "Замовлення",
+        "total": "Всього",
+        "totalLabel": "Всього",
+        "status": "Статус",
+        "statusLabel": "Статус",
+        "backToCart": "Назад до кошика",
+        "retryPayment": "Повторити оплату",
+        "continueShopping": "Продовжити покупки"
+      },
+      "payment": {
+        "title": "Безпечна оплата",
+        "payForOrder": "Оплатити замовлення #{orderId}",
+        "paymentDetails": "Деталі оплати",
+        "completePayment": "Завершіть оплату, щоб оформити замовлення.",
+        "amountDue": "До сплати",
+        "orderSummary": "Підсумок замовлення",
+        "items": "Товари",
+        "totalAmount": "Загальна сума",
+        "status": "Статус",
+        "viewConfirmation": "Переглянути підтвердження",
+        "continueShopping": "Продовжити покупки",
+        "statusMessages": {
+          "alreadyPaid": "Це замовлення вже оплачено.",
+          "previousFailed": "Попередня спроба оплати не вдалася. Будь ласка, спробуйте ще раз.",
+          "completePayment": "Завершіть оплату, щоб завершити замовлення."
+        }
+      },
+      "actions": {
+        "backToProducts": "Назад до товарів",
+        "goToCart": "Перейти до кошика",
+        "backToCart": "Назад до кошика",
+        "continueShopping": "Продовжити покупки"
+      }
+    },
+    "orders": {
+      "title": "Мої замовлення",
+      "subtitle": "Ваші останні замовлення (до 50).",
+      "backToShop": "Назад до магазину",
+      "empty": {
+        "message": "Замовлень поки немає.",
+        "browseProducts": "Переглянути товари"
+      },
+      "table": {
+        "caption": "Ваші замовлення",
+        "items": "Товари",
+        "date": "Дата",
+        "status": "Статус",
+        "total": "Всього"
+      },
+      "orderHeadline": {
+        "incomplete": "Замовлення {id} (незавершене)",
+        "withMore": "{item} +ще {count}",
+        "default": "Замовлення {id}"
+      },
+      "paymentStatus": {
+        "paid": "Оплачено",
+        "pending": "В очікуванні",
+        "requiresPayment": "Потрібна оплата",
+        "failed": "Не вдалося",
+        "refunded": "Повернуто"
+      },
+      "detail": {
+        "title": "Замовлення",
+        "myOrders": "Мої замовлення",
+        "shop": "Магазин",
+        "orderSummary": "Підсумок замовлення",
+        "total": "Всього",
+        "paymentStatus": "Статус оплати",
+        "created": "Створено",
+        "provider": "Провайдер",
+        "paymentReference": "Посилання на оплату",
+        "idempotencyKey": "Ключ ідемпотентності",
+        "stockRestored": "Товар повернуто",
+        "restockedAt": "Повернуто о",
+        "items": "Товари",
+        "sku": "Артикул: {sku}",
+        "product": "Товар: {productId}",
+        "quantity": "Кількість",
+        "unitPrice": "Ціна за одиницю",
+        "lineTotal": "Всього за рядок",
+        "yes": "Так",
+        "no": "Ні"
+      }
+    }
+  },
   "about": {
-    
+    "metaTitle": "Про нас | DevLovers",
+    "metaDescription": "Дізнайтеся більше про DevLovers — платформу для підготовки до технічних співбесід",
+    "hero": {
+      "titleHighlight": "Знайди свої баги",
+      "titleRest": "поки це не зробив рекрутер.",
+      "description": "Досить гадати. Ми розклали хаос співбесід на зрозумілу дорожню карту.",
+      "descriptionHighlight": "Систематизуй свої знання",
+      "descriptionRest": "у готовий до продакшену скілсет і отримай офер.",
+      "stats": {
+        "quizzesPassed": "Пройдено квізів",
+        "githubStars": "Зірок на GitHub",
+        "activeUsers": "Активних користувачів",
+        "linkedinFollowers": "Підписників LinkedIn",
+        "quizzes": "Квізів",
+        "stars": "Зірок",
+        "users": "Юзерів",
+        "followers": "Підписників"
+      }
+    },
+    "topics": {
+      "pretitle": "/ Екосистема",
+      "titleStart": "Опануй свій",
+      "titleHighlight": "повний стек",
+      "description": "Від фронтенд-фреймворків до бекенд-логіки. Ми охоплюємо ключові технології 2026 року.",
+      "questions": "Питань"
+    },
+    "features": {
+      "title": "Функції, створені щоб",
+      "titleHighlight": "зробити тебе непереможним",
+      "subtitle": "Досить шукати розрізнену інформацію. Ми зібрали ідеальний набір інструментів для проходження технічних співбесід.",
+      "qa": {
+        "title": "Q&A",
+        "description": "Без води. Величезна бібліотека реальних питань зі співбесід із точними відповідями, схваленими рекрутерами."
+      },
+      "quiz": {
+        "title": "Квізи",
+        "description": "Перевір свою впевненість. Динамічні інтерактивні квізи, щоб виявити слабкі місця раніше за інтерв'юера."
+      },
+      "leaderboard": {
+        "title": "Рейтинг",
+        "description": "Гейміфікуй підготовку. Заробляй бали за кожну правильну відповідь, тримай страйк і змагайся з іншими."
+      },
+      "blog": {
+        "title": "Блог",
+        "description": "Будь в курсі з детальними статтями про tech-тренди, туторіали з кодингу та інсайти індустрії."
+      },
+      "profile": {
+        "title": "Аналітика",
+        "description": "Не йди наосліп. Візуалізуй свій прогрес із детальними графіками та бачи, які теми ти вже опанував."
+      },
+      "shop": {
+        "title": "Магазин",
+        "description": "Прокачай свій сетап. Якісний одяг для розробників, аксесуари для робочого місця та цифрові товари."
+      },
+      "bubbles": {
+        "qa": {
+          "languages": { "label": "3 мови", "desc": "EN, UK та PL" },
+          "aiHelper": { "label": "AI-помічник", "desc": "Виділи текст для пояснення" },
+          "smartCache": { "label": "Розумний кеш", "desc": "Підсвічує вивчені терміни" },
+          "techFilter": { "label": "Tech-фільтр", "desc": "React, Git, JS та інше" }
+        },
+        "quiz": {
+          "smartTimer": { "label": "Розумний таймер", "desc": "Змагайся з часом" },
+          "antiCheat": { "label": "Античіт", "desc": "Детекція втрати фокусу" },
+          "autoSync": { "label": "Синхронізація", "desc": "Зберігає прогрес після входу" },
+          "tracking": { "label": "Відстеження", "desc": "Найкращі результати та спроби" }
+        },
+        "leaderboard": {
+          "podium": { "label": "Подіум", "desc": "Топ-3 в центрі уваги" },
+          "globalRank": { "label": "Глобальний рейтинг", "desc": "Змагайся зі світом" },
+          "xpSystem": { "label": "XP-система", "desc": "Бали за кожну відповідь" },
+          "liveFeed": { "label": "Live-стрічка", "desc": "Оновлення рангів в реальному часі" }
+        },
+        "profile": {
+          "statsHub": { "label": "Центр статистики", "desc": "Візуалізуй своє зростання" },
+          "history": { "label": "Історія", "desc": "Відстежуй серії навчання" },
+          "identity": { "label": "Профіль", "desc": "Керуй роллю та даними" },
+          "reminders": { "label": "Нагадування", "desc": "Заверши незакінчені квізи" }
+        },
+        "blog": {
+          "techTrends": { "label": "Tech-тренди", "desc": "Будь попереду" },
+          "tutorials": { "label": "Туторіали", "desc": "Покрокові гайди" },
+          "deepDives": { "label": "Глибокий аналіз", "desc": "Детальний розбір" },
+          "community": { "label": "Спільнота", "desc": "Написано розробниками" }
+        },
+        "shop": {
+          "newDrops": { "label": "Новинки", "desc": "Регулярні оновлення" },
+          "curated": { "label": "Добірка", "desc": "Колекції для девелоперів" },
+          "checkout": { "label": "Оплата", "desc": "Зручний Stripe checkout" },
+          "premium": { "label": "Преміум", "desc": "Висока якість матеріалів" }
+        }
+      }
+    },
+    "pricing": {
+      "heading": "Тарифи",
+      "badge": "Без прихованих платежів",
+      "title": "Інвестуй у свій мозок,",
+      "titleHighlight": "а не в наші підписки.",
+      "subtitle": "Ми віримо, що знання мають бути доступними. Тому ми не продаємо курси. Але сервери гріються, а кава закінчується. Вибір за тобою.",
+      "junior": {
+        "title": "Junior Engineer",
+        "description": "Для тих, хто хоче офер, а не витрати.",
+        "price": "$0",
+        "period": "/ назавжди",
+        "features": {
+          "unlimited": "Необмежені питання",
+          "fullAccess": "Повний доступ до квізів",
+          "noCard": "Без кредитної картки",
+          "noGuilt": "0% докорів сумління"
+        },
+        "noYacht": "Персональна яхта",
+        "cta": "Почати навчання"
+      },
+      "hero": {
+        "badge": "Високий вплив",
+        "title": "Open Source Hero",
+        "description": "Для тих, хто вже отримав офер завдяки нам.",
+        "price": "$$$",
+        "period": "/ карма-поінти",
+        "features": {
+          "servers": "Тримати сервери живими",
+          "coffee": "Купити каву розробникам",
+          "badge": "Бейдж у профілі (Big Flex)",
+          "feeling": "Тепле відчуття всередині"
+        },
+        "drizzle": "Ми реально платимо за Drizzle",
+        "cta": "Підтримати проєкт"
+      },
+      "disclaimer": "*Жоден розробник не постраждав під час створення цієї таблиці. Постраждав лише рівень кофеїну."
+    },
+    "sponsors": {
+      "badge": "Останні контриб'ютори",
+      "emptySlot": "Ти?",
+      "yourSpot": "Твоє місце",
+      "joinClub": "Приєднатись до клубу",
+      "fundsNote": "100% коштів йде на сервери та каву",
+      "ctaAriaLabel": "Стань спонсором і отримай своє місце"
+    },
+    "community": {
+      "badge": "Любов спільноти",
+      "title": "Схвалено",
+      "titleHighlight": "тими, хто вижив",
+      "subtitle": "Приєднуйся до тисяч розробників, які замінили здогадки на результат. Реальні відгуки від реальних інженерів.",
+      "joinDiscussion": "Приєднатись до дискусії",
+      "successStory": "Маєш історію успіху або пропозицію?",
+      "readThreads": "Ми читаємо кожен тред"
+    },
+    "arcade": {
+      "title": "DevLovers Arcade",
+      "ready": "ГОТОВО",
+      "level1": "Рівень 1",
+      "level2": "Рівень 2",
+      "level3": "Рівень 3",
+      "level4": "Рівень 4",
+      "crashed": "КРАШ",
+      "running": "АКТИВНИЙ",
+      "high": "Рекорд",
+      "score": "Рахунок",
+      "clickToStart": "Клікни щоб почати",
+      "systemFailure": "Збій системи",
+      "retry": "Ще раз"
+    }
+  },
+  "notFound": {
+    "title": "Сторінку не знайдено",
+    "description": "На жаль, ми не змогли знайти сторінку, яку ви шукаєте. Можливо, її було переміщено або видалено.",
+    "backHome": "На головну"
   },
   "CookieBanner": {
     "title": "🍪 Ми цінуємо вашу приватність",
@@ -304,14 +827,19 @@
       "showPassword": "Показати пароль",
       "hidePassword": "Сховати пароль",
       "show": "Показати",
-      "hide": "Сховати"
+      "hide": "Сховати",
+      "validation": {
+        "required": "Будь ласка, заповніть це поле",
+        "invalidEmail": "Будь ласка, введіть коректну email адресу",
+        "passwordTooShort": "Пароль має містити мінімум {minLength} символів"
+      }
     },
     "divider": "або"
   },
   "dashboard": {
     "metaTitle": "Панель | DevLovers",
     "metaDescription": "Відстежуйте свій прогрес та результати квізів.",
-    "title": "Панель",
+    "title": "Кабінет користувача",
     "subtitle": "З поверненням на вашу навчальну площадку.",
     "supportLink": "Підтримка та відгуки",
     "profile": {
@@ -384,6 +912,13 @@
       "fixing": "Чиним магію"
     }
   },
+  "onlineCounter": {
+    "one": "ти на крок до цілі",
+    "two": "йдуть до мрії",
+    "upToFive": "на шляху до оффера",
+    "upToTen": "ближчі до dream job",
+    "many": "крокує до успіху"
+  },
   "legal": {
     "back": "Назад",
     "lastUpdated": "Останнє оновлення",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1ea0652..124f811a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -46,6 +46,7 @@
         "@netlify/plugin-nextjs": "^5.15.1",
         "@tailwindcss/postcss": "^4",
         "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.8.0",
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/jsonwebtoken": "^9.0.10",
@@ -73,6 +74,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -101,9 +109,9 @@
       }
     },
     "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -125,9 +133,9 @@
       }
     },
     "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -2028,9 +2036,9 @@
       }
     },
     "node_modules/@exodus/bytes": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.9.0.tgz",
-      "integrity": "sha512-lagqsvnk09NKogQaN/XrtlWeUF8SRhT12odMvbTIIaVObqzwAogL6jhR4DAp0gPuKoM1AOVrKUshJpRdpMFrww==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.10.0.tgz",
+      "integrity": "sha512-tf8YdcbirXdPnJ+Nd4UN1EXnz+IP2DI45YVEr3vvzcVTOyrApkmIB4zvOQVd3XPr7RXnfBtAx+PXImXOIU0Ajg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2709,9 +2717,9 @@
       }
     },
     "node_modules/@netlify/plugin-nextjs": {
-      "version": "5.15.5",
-      "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.15.5.tgz",
-      "integrity": "sha512-Lvix59vHCEfvopILvdfIK2EPe/CrLH5qrIdwYnJbxpp/SSVgklsHpBrfNM9ADTr310r+WJRDz11NcDyHu3iT9w==",
+      "version": "5.15.6",
+      "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.15.6.tgz",
+      "integrity": "sha512-SZa4a0nBllKNaVV19kIFBuZ6p8Lt3Hagrw5gxysm2qs5AMQJRQfJq6av+rnRwCk8w/zNn2FShF4Fckk4+L1Hzg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5192,6 +5200,33 @@
         "node": ">=18"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@testing-library/react": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
@@ -6844,6 +6879,13 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssstyle": {
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
@@ -6861,9 +6903,9 @@
       }
     },
     "node_modules/cssstyle/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -8883,13 +8925,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.29.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.0.tgz",
-      "integrity": "sha512-1gEFGXHYV2BD42ZPTFmSU9buehppU+bCuOnHU0AD18DKh9j4DuTx47MvqY5ax+NNWRtK32qIcJf1UxKo1WwjWg==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
+      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.29.0",
-        "motion-utils": "^12.27.2",
+        "motion-dom": "^12.29.2",
+        "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -9454,6 +9496,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -10813,6 +10865,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "7.4.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
@@ -10853,18 +10915,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.29.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.0.tgz",
-      "integrity": "sha512-3eiz9bb32yvY8Q6XNM4AwkSOBPgU//EIKTZwsSWgA9uzbPBhZJeScCVcBuwwYVqhfamewpv7ZNmVKTGp5qnzkA==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
+      "integrity": "sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.27.2"
+        "motion-utils": "^12.29.2"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.27.2",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.27.2.tgz",
-      "integrity": "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -11055,7 +11117,6 @@
       "version": "0.5.18",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
       "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "license": "Apache-2.0",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -11832,6 +11893,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -12577,6 +12652,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4ec49601..16826716 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,9 @@
     "db:studio": "drizzle-kit studio --config drizzle.config.ts",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "test:blog": "vitest run components/tests/blog/*.test.tsx lib/tests/blog/*.test.ts",
+    "test:blog:coverage": "vitest run --coverage \"--coverage.include=components/blog/**\" \"--coverage.include=app/api/blog-*/**\" components/tests/blog/*.test.tsx lib/tests/blog/*.test.ts"
   },
   "dependencies": {
     "@neondatabase/serverless": "^1.0.2",
@@ -51,12 +53,14 @@
     "react-dom": "^19.2.1",
     "sonner": "^2.0.7",
     "stripe": "20.0.0",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
     "@netlify/plugin-nextjs": "^5.15.1",
     "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jsonwebtoken": "^9.0.10",
diff --git a/frontend/project-structure.txt b/frontend/project-structure.txt
index 8aff5152..e396c2de 100644
--- a/frontend/project-structure.txt
+++ b/frontend/project-structure.txt
@@ -1,94 +1,24 @@
+📄 .DS_Store
 📄 .env
 📄 .env.example
 📄 .gitignore
 📄 .prettierrc
+📄 README.md
 📁 actions
   📄 quiz.ts
 📁 app
-  📁 api
-    📁 auth
-      📁 github
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 google
-        📁 callback
-          📄 route.ts
-        📄 route.ts
-      📁 login
-        📄 route.ts
-      📁 logout
-        📄 route.ts
-      📁 me
-        📄 route.ts
-      📁 password-reset
-        📁 confirm
-          📄 route.ts
-        📄 route.ts
-      📁 resend-verification
-        📄 route.ts
-      📁 signup
-        📄 route.ts
-      📁 verify-email
-        📄 route.ts
-    📁 blog-search
-      📄 route.ts
-    📁 questions
-      📁 [category]
-        📄 route.ts
-    📁 quiz
-      📁 guest-result
-        📄 route.ts
-      📁 verify-answer
-        📄 route.ts
-      📁 [slug]
-        📄 route.ts
-    📁 shop
-      📁 admin
-        📁 orders
-          📁 reconcile-stale
-            📄 route.ts
-          📄 route.ts
-          📁 [id]
-            📁 refund
-              📄 route.ts
-            📄 route.ts
-        📁 products
-          📄 route.ts
-          📁 [id]
-            📄 route.ts
-            📁 status
-              📄 route.ts
-      📁 cart
-        📁 rehydrate
-          📄 route.ts
-      📁 catalog
-        📄 route.ts
-      📁 checkout
-        📄 route.ts
-      📁 internal
-        📁 orders
-          📁 restock-stale
-            📄 route.ts
-      📁 orders
-        📁 [id]
-          📄 route.ts
-      📁 webhooks
-        📁 stripe
-          📄 route.ts
-  📄 globals.css
-  📄 layout.tsx
+  📄 .DS_Store
   📁 [locale]
     📁 about
       📄 page.tsx
     📁 blog
+      📁 [slug]
+        📄 PostDetails.tsx
+        📄 page.tsx
       📁 category
         📁 [category]
           📄 page.tsx
       📄 page.tsx
-      📁 [slug]
-        📄 page.tsx
-        📄 PostDetails.tsx
     📁 dashboard
       📄 page.tsx
     📁 forgot-password
@@ -114,20 +44,20 @@
     📁 shop
       📁 admin
         📁 orders
-          📄 page.tsx
           📁 [id]
-            📄 page.tsx
             📄 RefundButton.tsx
-        📄 page.tsx
-        📁 products
-          📁 new
             📄 page.tsx
           📄 page.tsx
+        📄 page.tsx
+        📁 products
           📁 [id]
             📁 edit
               📄 page.tsx
           📁 _components
             📄 product-form.tsx
+          📁 new
+            📄 page.tsx
+          📄 page.tsx
       📁 cart
         📄 page.tsx
       📁 checkout
@@ -147,7 +77,6 @@
         📄 page.tsx
       📄 page.tsx
       📁 products
-        📄 page.tsx
         📁 [slug]
           📄 page.tsx
         📄 page.tsx
@@ -155,26 +84,121 @@
       📄 page.tsx
     📁 terms-of-service
       📄 page.tsx
+  📁 api
+    📁 ai
+      📁 explain
+        📄 route.ts
+    📁 auth
+      📁 github
+        📁 callback
+          📄 route.ts
+        📄 route.ts
+      📁 google
+        📁 callback
+          📄 route.ts
+        📄 route.ts
+      📁 login
+        📄 route.ts
+      📁 logout
+        📄 route.ts
+      📁 me
+        📄 route.ts
+      📁 password-reset
+        📁 confirm
+          📄 route.ts
+        📄 route.ts
+      📁 resend-verification
+        📄 route.ts
+      📁 signup
+        📄 route.ts
+      📁 verify-email
+        📄 route.ts
+    📁 blog-author
+      📄 route.ts
+    📁 blog-search
+      📄 route.ts
+    📁 questions
+      📁 [category]
+        📄 route.ts
+    📁 quiz
+      📁 [slug]
+        📄 route.ts
+      📁 guest-result
+        📄 route.ts
+      📁 verify-answer
+        📄 route.ts
+    📁 sessions
+      📁 activity
+        📄 route.ts
+    📁 shop
+      📁 admin
+        📁 orders
+          📁 [id]
+            📁 refund
+              📄 route.ts
+            📄 route.ts
+          📁 reconcile-stale
+            📄 route.ts
+          📄 route.ts
+        📁 products
+          📁 [id]
+            📄 route.ts
+            📁 status
+              📄 route.ts
+          📄 route.ts
+      📁 cart
+        📁 rehydrate
+          📄 route.ts
+      📁 catalog
+        📄 route.ts
+      📁 checkout
+        📄 route.ts
+      📁 internal
+        📁 orders
+          📁 restock-stale
+            📄 route.ts
+      📁 orders
+        📁 [id]
+          📄 route.ts
+      📁 webhooks
+        📁 stripe
+          📄 route.ts
+    📁 stats
+      📄 route.ts
+  📄 globals.css
+  📄 layout.tsx
 📄 checkout.json
 📄 client.ts
 📁 components
+  📄 .DS_Store
   📁 about
     📄 CommunitySection.tsx
     📄 FeaturesSection.tsx
     📄 HeroSection.tsx
+    📄 InteractiveGame.tsx
     📄 PricingSection.tsx
-    📄 StatsSection.tsx
+    📄 SponsorsWall.tsx
+    📄 TopicsSection.tsx
   📁 auth
+    📄 AuthErrorBanner.tsx
+    📄 AuthProvidersBlock.tsx
+    📄 AuthShell.tsx
+    📄 AuthSuccessBanner.tsx
+    📄 ForgotPasswordForm.tsx
+    📄 LoginForm.tsx
     📄 OAuthButtons.tsx
     📄 PostAuthQuizSync.tsx
     📄 ProviderButton.tsx
+    📄 ResetPasswordForm.tsx
+    📄 SignupForm.tsx
+    📁 fields
+      📄 EmailField.tsx
+      📄 NameField.tsx
+      📄 PasswordField.tsx
     📁 icons
       📄 GitHubIcon.tsx
       📄 GoogleIcon.tsx
     📄 logoutButton.tsx
-    📄 OAuthButtons.tsx
-    📄 PostAuthQuizSync.tsx
-    📄 ProviderButton.tsx
   📁 blog
     📄 BlogCard.tsx
     📄 BlogCategoryGrid.tsx
@@ -190,13 +214,16 @@
   📁 header
     📄 AppChrome.tsx
     📄 AppMobileMenu.tsx
+    📄 DesktopActions.tsx
+    📄 DesktopNav.tsx
     📄 MainSwitcher.tsx
+    📄 MobileActions.tsx
+    📄 NavLink.tsx
     📄 UnifiedHeader.tsx
   📁 leaderboard
     📄 LeaderboardClient.tsx
     📄 LeaderboardPodium.tsx
     📄 LeaderboardTable.tsx
-    📄 LeaderboardTabs.tsx
     📄 types.ts
   📁 legal
     📄 LegalBlock.tsx
@@ -204,10 +231,14 @@
     📄 PrivacyPolicyContent.tsx
     📄 TermsOfServiceContent.tsx
   📁 q&a
+    📄 AIWordHelper.tsx
     📄 AccordionList.tsx
     📄 CodeBlock.tsx
+    📄 FloatingExplainButton.tsx
+    📄 HighlightCachedTerms.tsx
     📄 Pagination.tsx
     📄 QaSection.tsx
+    📄 SelectableText.tsx
     📄 types.ts
     📄 useQaTabs.ts
   📁 quiz
@@ -220,15 +251,25 @@
     📄 QuizQuestion.tsx
     📄 QuizResult.tsx
     📄 QuizzesSection.tsx
+    📁 tests
+      📄 quiz-container-flow.test.tsx
   📁 shared
+    📄 AnimatedNavLink.tsx
+    📄 CategoryTabButton.tsx
     📄 CookieBanner.tsx
+    📄 DynamicGridBackground.tsx
     📄 Footer.tsx
+    📄 GitHubStarButton.tsx
+    📄 HeaderButton.tsx
     📄 HeroSection.tsx
     📄 LanguageSwitcher.tsx
+    📄 Logo.tsx
+    📄 OnlineCounterPopup.tsx
   📁 shop
     📄 add-to-cart-button.tsx
     📁 admin
       📄 admin-pagination.tsx
+      📄 admin-product-delete-button.tsx
       📄 admin-product-status-toggle.tsx
       📄 shop-admin-topbar.tsx
     📄 cart-provider.tsx
@@ -246,6 +287,17 @@
     📄 shop-hero.tsx
   📁 tests
     📄 CookieBanner.test.tsx
+    📁 q&a
+      📄 accordion-list.test.tsx
+      📄 ai-word-helper.test.tsx
+      📄 code-block.test.tsx
+      📄 floating-explain-button.test.tsx
+      📄 highlight-cached-terms.test.tsx
+      📄 pagination.test.tsx
+      📄 qa-section.test.tsx
+      📄 selectable-text.test.tsx
+      📄 types.test.ts
+      📄 use-qa-tabs.test.tsx
   📁 theme
     📄 ThemeProvider.tsx
     📄 ThemeToggle.tsx
@@ -254,11 +306,14 @@
     📄 badge.tsx
     📄 button.tsx
     📄 confirm-modal.tsx
+    📄 github-star-button.tsx
     📄 radio-group.tsx
     📄 tabs.tsx
 📄 components.json
 📁 data
+  📄 about.ts
   📄 category.ts
+  📄 categoryStyles.ts
 📁 db
   📄 index.ts
   📁 legacy-migrations
@@ -348,7 +403,6 @@
   📄 seed-quiz-vue.ts
   📄 seed-users.ts
 📁 docs
-  📁 payments
   📁 security
     📄 origin-posture.md
 📁 drizzle
@@ -357,12 +411,14 @@
   📄 0002_clean_martin_li.sql
   📄 0003_add_stripe_events_claim_lock.sql
   📄 0004_add_api_rate_limits.sql
+  📄 0005_modern_bromley.sql
   📁 meta
     📄 0000_snapshot.json
     📄 0001_snapshot.json
     📄 0002_snapshot.json
     📄 0003_snapshot.json
     📄 0004_snapshot.json
+    📄 0005_snapshot.json
     📄 _journal.json
 📄 drizzle.config.ts
 📄 eslint.config.mjs
@@ -376,8 +432,14 @@
   📄 request.ts
   📄 routing.ts
 📁 lib
+  📁 about
+    📄 github-sponsors.ts
+    📄 stats.ts
   📁 admin
     📄 parseAdminProductForm.ts
+  📁 ai
+    📄 explainCache.ts
+    📄 prompts.ts
   📁 auth
     📄 admin.ts
     📄 email-verification.ts
@@ -385,7 +447,10 @@
     📄 internal-janitor.ts
     📄 oauth-state.ts
     📄 password-reset.ts
+    📄 safe-redirect.ts
   📄 auth.ts
+  📁 blog
+    📄 date.ts
   📄 cart.ts
   📄 cloudinary.ts
   📁 config
@@ -403,6 +468,8 @@
     📄 cloudinary.ts
     📄 index.ts
     📄 stripe.ts
+  📁 errors
+    📄 products.ts
   📁 http
     📄 getBaseUrl.ts
   📄 logging.ts
@@ -419,11 +486,14 @@
   📁 security
     📄 admin-csrf.ts
     📄 csrf.ts
+    📄 origin.ts
     📄 rate-limit.ts
+    📄 stripe-webhook-rate-limit.ts
   📁 services
     📄 errors.ts
     📄 inventory.ts
     📁 orders
+      📄 _shared.ts
       📄 checkout.ts
       📄 payment-attempts.ts
       📄 payment-intent.ts
@@ -434,7 +504,6 @@
       📄 restock.ts
       📄 summary.ts
       📄 sweeps.ts
-      📄 _shared.ts
     📄 orders.ts
     📁 products
       📁 admin
@@ -461,6 +530,8 @@
     📄 request-locale.ts
     📄 slug.ts
   📁 tests
+    📁 __mocks__
+      📄 server-only.ts
     📄 admin-api-killswitch.test.ts
     📄 admin-csrf-contract.test.ts
     📄 admin-product-patch-price-config-error-contract.test.ts
@@ -473,6 +544,9 @@
     📄 checkout-set-payment-intent-reject-contract.test.ts
     📄 checkout-stripe-error-contract.test.ts
     📄 currency.test.ts
+    📁 factories
+      📁 quiz
+        📄 quiz.ts
     📄 format-money.test.ts
     📁 helpers
       📄 ip.ts
@@ -489,6 +563,20 @@
     📄 product-admin-update-prices-patch-semantics.test.ts
     📄 product-sale-invariant.test.ts
     📄 public-product-visibility.test.ts
+    📁 q&a
+      📄 questions-route.test.ts
+    📁 quiz
+      📄 guest-quiz.test.ts
+      📄 guest-result-route.test.ts
+      📄 quiz-anticheat.test.ts
+      📄 quiz-crypto.test.ts
+      📄 quiz-session.test.ts
+      📄 quiz-setup.test.ts
+      📄 quiz-slug-route.test.ts
+      📄 setup.ts
+      📄 use-quiz-guards.test.ts
+      📄 use-quiz-session.test.ts
+      📄 verify-answer.test.ts
     📄 rate-limit-subject-normalization.test.ts
     📄 rate-limit-subject.test.ts
     📄 restock-order-only-once.test.ts
@@ -503,8 +591,6 @@
     📄 stripe-webhook-psp-fields.test.ts
     📄 stripe-webhook-rate-limit-env.test.ts
     📄 stripe-webhook-refund-full.test.ts
-    📁 __mocks__
-      📄 server-only.ts
   📁 types
     📄 shop.ts
   📄 utils.ts
@@ -520,9 +606,9 @@
 📄 package-lock.json
 📄 package.json
 📁 parse
+  📄 README.md
   📄 parse.ts
   📄 questions.json
-  📄 README.md
   📄 start.json
   📁 typescript
     📁 advanced
@@ -543,12 +629,21 @@
   📄 collectibles.jpg
   📄 favicon-dark.svg
   📄 favicon-light.svg
+  📁 icons
+    📄 angular.svg
+    📄 css3.svg
+    📄 git.svg
+    📄 html5.svg
+    📄 javascript.svg
+    📄 nextjs.svg
+    📄 nodejs.svg
+    📄 react.svg
+    📄 typescript.svg
+    📄 vuejs.svg
   📄 lifestyle.jpg
   📄 placeholder.svg
-📄 README.md
 📄 save-structure.cjs
 📁 scripts
   📄 shop-janitor-restock-stale.mjs
 📄 tsconfig.json
-📄 tsconfig.tsbuildinfo
-📄 vitest.config.ts
+📄 vitest.config.ts
\ No newline at end of file
diff --git a/frontend/proxy.ts b/frontend/proxy.ts
index 4998618d..eeabc246 100644
--- a/frontend/proxy.ts
+++ b/frontend/proxy.ts
@@ -87,6 +87,11 @@ export function proxy(req: NextRequest) {
   intlResponse.headers.set('x-app-scope', scope);
   intlResponse.headers.set('x-locale', locale);
 
+  intlResponse.cookies.set('NEXT_LOCALE', locale, {
+    path: '/',
+    sameSite: 'lax',
+  });
+
   return intlResponse;
 }
 
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 4e424f9a..6dfedf18 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -17,6 +17,10 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
+    "types": [
+      "vitest/globals",
+      "@testing-library/jest-dom"
+    ],
     "plugins": [
       {
         "name": "next"
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index dddda48c..385416f4 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
     environment: 'node',
     include: ['lib/tests/**/*.test.ts', 'components/tests/**/*.test.tsx', 'components/quiz/tests/**/*.test.tsx'],
     globals: true,
+    setupFiles: ['./vitest.setup.ts'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'html'],
diff --git a/frontend/vitest.setup.ts b/frontend/vitest.setup.ts
new file mode 100644
index 00000000..bb02c60c
--- /dev/null
+++ b/frontend/vitest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 20001e4c..0fefa5d7 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -316,6 +316,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -2045,6 +2046,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.11.tgz",
       "integrity": "sha512-bWdeR8gWM87l4DB/kYSF9A+dVackzDb/V56Tq7QVrQ7rn86W0rgZFtlL3g3pem6AeGcb9NQNoy3ao4WpW4h5tQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -2136,6 +2138,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2158,6 +2161,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2191,6 +2195,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -2246,6 +2251,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
       "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.9.0"
       }
@@ -3744,6 +3750,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.2.tgz",
       "integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^4.0.0",
         "@octokit/graphql": "^7.1.0",
@@ -3958,6 +3965,7 @@
       "resolved": "https://registry.npmjs.org/@portabletext/editor/-/editor-3.3.16.tgz",
       "integrity": "sha512-Z+/HXuOf1zwDpwp54uR9lsQtJ0tak5rr/9FgwObjUB1LAPNZm8IUezfQO56U3gvoQSZ7Rhj5/+BC+6hnnAKfyw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@portabletext/block-tools": "^4.1.11",
         "@portabletext/keyboard-shortcuts": "^2.1.1",
@@ -4627,6 +4635,7 @@
       "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.14.1.tgz",
       "integrity": "sha512-lCDx0vuNUgg9FL2E5Hiv1q7u6iHd1Z+jjMZAaYtfzzFPoBKOiyZlaFwqyLVHRyTbwnXQdIGDPmx2AvfBTbGQsQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sanity/eventsource": "^5.0.2",
         "get-it": "^8.7.0",
@@ -4918,9 +4927,9 @@
       }
     },
     "node_modules/@sanity/import/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": "20 || >=22"
@@ -5944,6 +5953,7 @@
       "resolved": "https://registry.npmjs.org/@sanity/types/-/types-4.22.0.tgz",
       "integrity": "sha512-VWAUc8Xtj4IipQt99SzudRldJWHfBVnde+g5qnLZ/Nc1MpFjGiRWu/3smRN5mPOqlrtUfrr0ho/fBZnjE1CEMg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sanity/client": "^7.13.2",
         "@sanity/media-library-types": "^1.0.1"
@@ -6576,6 +6586,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
       "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -6597,6 +6608,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -6713,6 +6725,7 @@
       "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.1",
         "@typescript-eslint/types": "8.53.1",
@@ -7052,6 +7065,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7682,6 +7696,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -9168,6 +9183,7 @@
       "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -9242,6 +9258,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -10041,13 +10058,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.29.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.0.tgz",
-      "integrity": "sha512-1gEFGXHYV2BD42ZPTFmSU9buehppU+bCuOnHU0AD18DKh9j4DuTx47MvqY5ax+NNWRtK32qIcJf1UxKo1WwjWg==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
+      "integrity": "sha512-lSNRzBJk4wuIy0emYQ/nfZ7eWhqud2umPKw2QAQki6uKhZPKm2hRQHeQoHTG9MIvfobb+A/LbEWPJU794ZUKrg==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.29.0",
-        "motion-utils": "^12.27.2",
+        "motion-dom": "^12.29.2",
+        "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -10937,6 +10954,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -12178,6 +12196,7 @@
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -12995,12 +13014,12 @@
       "license": "MIT"
     },
     "node_modules/motion": {
-      "version": "12.29.0",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.29.0.tgz",
-      "integrity": "sha512-rjB5CP2N9S2ESAyEFnAFMgTec6X8yvfxLNcz8n12gPq3M48R7ZbBeVYkDOTj8SPMwfvGIFI801SiPSr1+HCr9g==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.29.2.tgz",
+      "integrity": "sha512-jMpHdAzEDF1QQ055cB+1lOBLdJ6ialVWl6QQzpJI2OvmHequ7zFVHM2mx0HNAy+Tu4omUlApfC+4vnkX0geEOg==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.29.0",
+        "framer-motion": "^12.29.2",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -13021,18 +13040,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.29.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.0.tgz",
-      "integrity": "sha512-3eiz9bb32yvY8Q6XNM4AwkSOBPgU//EIKTZwsSWgA9uzbPBhZJeScCVcBuwwYVqhfamewpv7ZNmVKTGp5qnzkA==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
+      "integrity": "sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.27.2"
+        "motion-utils": "^12.29.2"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.27.2",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.27.2.tgz",
-      "integrity": "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
       "license": "MIT"
     },
     "node_modules/ms": {
@@ -14256,6 +14275,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -14322,7 +14342,8 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
       "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
@@ -14642,7 +14663,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -14971,6 +14993,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15082,6 +15105,7 @@
       "resolved": "https://registry.npmjs.org/sanity/-/sanity-4.22.0.tgz",
       "integrity": "sha512-wBmr/euVC6Kvni1gKP2qwkEsyxGQlfnPOhjowT7tjm0a0eOvBwS6uHnHtjr24wjhf8PeongurQzMewx2tTP8Wg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
         "@dnd-kit/core": "^6.3.1",
@@ -16121,7 +16145,8 @@
       "version": "0.120.0",
       "resolved": "https://registry.npmjs.org/slate/-/slate-0.120.0.tgz",
       "integrity": "sha512-CXK/DADGgMZb4z9RTtXylzIDOxvmNJEF9bXV2bAGkLWhQ3rm7GORY9q0H/W41YJvAGZsLbH7nnrhMYr550hWDQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/slate-dom": {
       "version": "0.119.0",
@@ -16625,6 +16650,7 @@
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.8.tgz",
       "integrity": "sha512-Kq/W41AKQloOqKM39zfaMdJ4BcYDw/N5CIq4/GTI0YjU6pKcZ1KKhk6b4du0a+6RA9pIfOP/eu94Ge7cu+PDCA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/is-prop-valid": "1.4.0",
         "@emotion/unitless": "0.10.0",
@@ -16818,6 +16844,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17101,6 +17128,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17457,6 +17485,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17567,6 +17596,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },