From a8afc1c2ad53710bba5db688cb7bd7e6a84999cb Mon Sep 17 00:00:00 2001
From: tetiana zorii <tanyusha.zoriy@gmail.com>
Date: Thu, 5 Feb 2026 09:50:01 -0500
Subject: [PATCH 1/2] style: update dashboard UI and fix canonical Tailwind v4
 classes

  - Replace dashboard background with DynamicGridBackground
  - Fix suggestCanonicalClasses warnings across multiple components
---
 frontend/app/[locale]/dashboard/page.tsx      |  58 +++++-----
 frontend/app/not-found.tsx                    |  22 ++--
 frontend/components/dashboard/ProfileCard.tsx |  30 +++---
 .../components/dashboard/QuizSavedBanner.tsx  |  10 +-
 frontend/components/dashboard/StatsCard.tsx   |  38 +++----
 frontend/components/q&a/AIWordHelper.tsx      |  24 ++---
 .../components/q&a/FloatingExplainButton.tsx  |   6 +-
 .../components/shared/LanguageSwitcher.tsx    |  14 +--
 frontend/messages/en.json                     |  87 +++++++--------
 frontend/messages/pl.json                     |  99 ++++++++---------
 frontend/messages/uk.json                     | 101 +++++++++---------
 11 files changed, 238 insertions(+), 251 deletions(-)

diff --git a/frontend/app/[locale]/dashboard/page.tsx b/frontend/app/[locale]/dashboard/page.tsx
index 3e5a23a3..d601fa17 100644
--- a/frontend/app/[locale]/dashboard/page.tsx
+++ b/frontend/app/[locale]/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { PostAuthQuizSync } from '@/components/auth/PostAuthQuizSync';
 import { ProfileCard } from '@/components/dashboard/ProfileCard';
 import { QuizSavedBanner } from '@/components/dashboard/QuizSavedBanner';
 import { StatsCard } from '@/components/dashboard/StatsCard';
+import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
 import { getUserQuizStats } from '@/db/queries/quiz';
 import { getUserProfile } from '@/db/queries/users';
 import { redirect } from '@/i18n/routing';
@@ -75,42 +76,35 @@ export default async function DashboardPage({
   };
 
   const outlineBtnStyles =
-    'inline-flex items-center justify-center rounded-full border border-slate-200 dark:border-slate-700 bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm px-6 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 transition-colors hover:bg-white hover:text-sky-600 dark:hover:bg-slate-800 dark:hover:text-sky-400';
+    'inline-flex items-center justify-center rounded-full border border-gray-200 dark:border-white/10 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm px-6 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 transition-colors hover:bg-white hover:text-(--accent-primary) dark:hover:bg-neutral-800 dark:hover:text-(--accent-primary)';
 
   return (
-    <main className="relative min-h-[calc(100vh-80px)] overflow-hidden">
+    <div className="min-h-screen">
       <PostAuthQuizSync />
-      <div
-        className="pointer-events-none absolute inset-0 -z-10"
-        aria-hidden="true"
+      <DynamicGridBackground
+        showStaticGrid
+        className="min-h-screen bg-gray-50 py-12 transition-colors duration-300 dark:bg-transparent"
       >
-        <div className="absolute inset-0 bg-linear-to-b from-sky-50 via-white to-rose-50 dark:from-slate-950 dark:via-slate-950 dark:to-black" />
-        <div className="absolute top-0 left-1/4 h-96 w-xl -translate-x-1/2 rounded-full bg-sky-300/20 blur-3xl dark:bg-sky-500/10" />
-        <div className="absolute right-0 bottom-0 h-104 w-104 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" />
-        <div className="absolute bottom-10 left-10 h-80 w-[20rem] rounded-full bg-pink-300/20 blur-3xl dark:bg-fuchsia-500/10" />
-      </div>
-
-      <div className="relative z-10 mx-auto max-w-5xl px-6 py-12">
-        <header className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-center">
-          <div>
-            <h1 className="text-4xl font-black tracking-tight drop-shadow-sm md:text-5xl">
-              <span className="bg-linear-to-r from-sky-400 via-violet-400 to-pink-400 bg-clip-text text-transparent dark:from-sky-400 dark:via-indigo-400 dark:to-fuchsia-500">
-                {t('title')}
-              </span>
-            </h1>
-            <p className="mt-2 text-lg text-slate-600 dark:text-slate-400">
-              {t('subtitle')}
-            </p>
+        <main className="relative z-10 mx-auto max-w-5xl px-6">
+          <header className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-center">
+            <div>
+              <h1 className="text-4xl font-black tracking-tight md:text-5xl">
+                <span className="text-(--accent-primary)">{t('title')}</span>
+              </h1>
+              <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
+                {t('subtitle')}
+              </p>
+            </div>
+
+            <span className={outlineBtnStyles}>{t('supportLink')}</span>
+          </header>
+          <QuizSavedBanner />
+          <div className="grid gap-8 md:grid-cols-2">
+            <ProfileCard user={userForDisplay} locale={locale} />
+            <StatsCard stats={stats} />
           </div>
-
-          <span className={outlineBtnStyles}>{t('supportLink')}</span>
-        </header>
-        <QuizSavedBanner />
-        <div className="grid gap-8 md:grid-cols-2">
-          <ProfileCard user={userForDisplay} locale={locale} />
-          <StatsCard stats={stats} />
-        </div>
-      </div>
-    </main>
+        </main>
+      </DynamicGridBackground>
+    </div>
   );
 }
diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
index aa61e857..22957bcb 100644
--- a/frontend/app/not-found.tsx
+++ b/frontend/app/not-found.tsx
@@ -26,23 +26,23 @@ export default async function NotFound() {
   return (
     <main className="bg-background relative flex min-h-screen items-center justify-center overflow-hidden 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 right-0 bottom-[-10rem] h-[26rem] w-[26rem] rounded-full bg-[var(--accent-primary)]/25 blur-3xl" />
+        <div className="absolute -top-32 left-1/2 h-96 w-xl -translate-x-1/2 rounded-full bg-(--accent-primary)/20 blur-3xl" />
+        <div className="absolute -bottom-48 left-1/4 h-88 w-88 rounded-full bg-(--accent-hover)/15 blur-3xl" />
+        <div className="absolute -bottom-40 right-0 h-104 w-104 rounded-full bg-(--accent-primary)/25 blur-3xl" />
       </div>
 
       <div className="pointer-events-none absolute inset-0 opacity-40 dark:opacity-60">
-        <span className="absolute top-[18%] left-[10%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute top-[8%] left-[35%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute top-[16%] left-[70%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
-        <span className="absolute top-[40%] left-[80%] h-1 w-1 rounded-full bg-[var(--accent-hover)]" />
-        <span className="absolute top-[60%] left-[18%] h-1 w-1 rounded-full bg-[var(--accent-primary)]" />
+        <span className="absolute top-[18%] left-[10%] h-1 w-1 rounded-full bg-(--accent-primary)" />
+        <span className="absolute top-[8%] left-[35%] h-1 w-1 rounded-full bg-(--accent-hover)" />
+        <span className="absolute top-[16%] left-[70%] h-1 w-1 rounded-full bg-(--accent-primary)" />
+        <span className="absolute top-[40%] left-[80%] h-1 w-1 rounded-full bg-(--accent-hover)" />
+        <span className="absolute top-[60%] left-[18%] h-1 w-1 rounded-full bg-(--accent-primary)" />
       </div>
 
       <div className="relative z-10 px-6 py-12 text-center">
         <div className="relative mt-4 inline-block">
           <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
-            <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">
+            <span className="relative inline-block bg-linear-to-r from-(--accent-primary)/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-(--accent-hover)/70 bg-clip-text text-transparent">
               DevL
             </span>
             <span
@@ -51,7 +51,7 @@ export default async function NotFound() {
             >
               Ø
             </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">
+            <span className="relative inline-block bg-linear-to-r from-(--accent-primary)/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-(--accent-hover)/70 bg-clip-text text-transparent">
               vers
             </span>
           </h1>
@@ -67,7 +67,7 @@ export default async function NotFound() {
 
         <a
           href={`/${locale}`}
-          className="mt-8 inline-flex items-center justify-center rounded-full bg-[var(--accent-primary)] px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-[var(--accent-hover)]"
+          className="mt-8 inline-flex items-center justify-center rounded-full bg-(--accent-primary) px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-(--accent-hover)"
         >
           {t.backHome}
         </a>
diff --git a/frontend/components/dashboard/ProfileCard.tsx b/frontend/components/dashboard/ProfileCard.tsx
index c5c276d0..d171f01e 100644
--- a/frontend/components/dashboard/ProfileCard.tsx
+++ b/frontend/components/dashboard/ProfileCard.tsx
@@ -17,22 +17,20 @@ export function ProfileCard({ user, locale }: ProfileCardProps) {
   const t = useTranslations('dashboard.profile');
 
   const cardStyles = `
-    relative overflow-hidden rounded-[2rem]
-    border border-slate-200/70 dark:border-slate-700/80
-    bg-white/60 dark:bg-slate-900/60 backdrop-blur-md
-    shadow-[0_18px_45px_rgba(15,23,42,0.05)]
-    dark:shadow-[0_22px_60px_rgba(0,0,0,0.2)]
-    p-8 transition-all hover:border-sky-200 dark:hover:border-sky-800
+    relative overflow-hidden rounded-2xl
+    border border-gray-100 dark:border-white/5
+    bg-white/60 dark:bg-neutral-900/60 backdrop-blur-xl
+    p-8 transition-all hover:border-(--accent-primary)/30 dark:hover:border-(--accent-primary)/30
   `;
 
   return (
     <section className={cardStyles} aria-labelledby="profile-heading">
       <div className="flex items-start gap-6">
         <div
-          className="relative rounded-full bg-gradient-to-br from-sky-400 to-pink-400 p-[3px]"
+          className="relative rounded-full bg-linear-to-br from-(--accent-primary) to-(--accent-hover) p-0.75"
           aria-hidden="true"
         >
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white text-3xl font-bold text-slate-700 dark:bg-slate-900 dark:text-slate-200">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white text-3xl font-bold text-gray-700 dark:bg-neutral-900 dark:text-gray-200">
             {user.name?.[0]?.toUpperCase() || user.email[0].toUpperCase()}
           </div>
         </div>
@@ -40,35 +38,35 @@ export function ProfileCard({ user, locale }: ProfileCardProps) {
         <div className="flex-1">
           <h2
             id="profile-heading"
-            className="text-2xl font-bold text-slate-800 dark:text-slate-100"
+            className="text-2xl font-bold text-gray-900 dark:text-white"
           >
             {user.name || t('defaultName')}
           </h2>
-          <p className="font-mono text-sm text-slate-500 dark:text-slate-400">
+          <p className="font-mono text-sm text-gray-500 dark:text-gray-400">
             {user.email}
           </p>
 
-          <div className="mt-3 inline-flex items-center rounded-full bg-sky-100 px-3 py-1 text-xs font-bold tracking-wider text-sky-700 uppercase dark:bg-sky-900/30 dark:text-sky-300">
+          <div className="mt-3 inline-flex items-center rounded-full bg-(--accent-primary)/10 px-3 py-1 text-xs font-bold tracking-wider text-(--accent-primary) uppercase">
             {user.role || t('defaultRole')}
           </div>
         </div>
       </div>
 
-      <dl className="mt-8 grid grid-cols-2 gap-6 border-t border-slate-100 pt-6 dark:border-slate-800/50">
+      <dl className="mt-8 grid grid-cols-2 gap-6 border-t border-gray-100 pt-6 dark:border-white/5">
         <div>
-          <dt className="text-xs font-semibold tracking-wider text-slate-400 uppercase">
+          <dt className="text-xs font-semibold tracking-wider text-gray-400 uppercase">
             {t('totalPoints')}
           </dt>
 
-          <dd className="mt-1 text-3xl font-black text-slate-800 dark:text-white">
+          <dd className="mt-1 text-3xl font-black text-gray-900 dark:text-white">
             {user.points}
           </dd>
         </div>
         <div>
-          <dt className="text-xs font-semibold tracking-wider text-slate-400 uppercase">
+          <dt className="text-xs font-semibold tracking-wider text-gray-400 uppercase">
             {t('joined')}
           </dt>
-          <dd className="mt-2 text-lg font-medium text-slate-700 dark:text-slate-300">
+          <dd className="mt-2 text-lg font-medium text-gray-700 dark:text-gray-300">
             {user.createdAt
               ? new Date(user.createdAt).toLocaleDateString(locale)
               : '-'}
diff --git a/frontend/components/dashboard/QuizSavedBanner.tsx b/frontend/components/dashboard/QuizSavedBanner.tsx
index 4bae4a13..59597350 100644
--- a/frontend/components/dashboard/QuizSavedBanner.tsx
+++ b/frontend/components/dashboard/QuizSavedBanner.tsx
@@ -37,12 +37,12 @@ export function QuizSavedBanner() {
   if (!info) return null;
 
   return (
-    <div className="mb-6 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
+    <div className="mb-6 rounded-xl border border-green-500/20 bg-green-500/10 p-4 backdrop-blur-sm">
       <div className="space-y-2 text-center">
-        <p className="text-lg font-medium text-green-800 dark:text-green-200">
+        <p className="text-lg font-medium text-green-700 dark:text-green-300">
           🎉 {t('title')}
         </p>
-        <p className="text-green-700 dark:text-green-300">
+        <p className="text-green-600 dark:text-green-400">
           {t('scored')}{' '}
           <strong>
             {info.score}/{info.total}
@@ -62,13 +62,13 @@ export function QuizSavedBanner() {
         <div className="flex justify-center gap-3 pt-2">
           <Link
             href="/leaderboard"
-            className="text-green-600 underline hover:no-underline dark:text-green-400"
+            className="font-medium text-green-600 underline hover:no-underline dark:text-green-400"
           >
             {t('viewLeaderboard')}
           </Link>
           <Link
             href={`/quiz/${info.quizSlug}`}
-            className="text-green-600 underline hover:no-underline dark:text-green-400"
+            className="font-medium text-green-600 underline hover:no-underline dark:text-green-400"
           >
             {t('tryAgain')}
           </Link>
diff --git a/frontend/components/dashboard/StatsCard.tsx b/frontend/components/dashboard/StatsCard.tsx
index 2679c3f1..f989d1cd 100644
--- a/frontend/components/dashboard/StatsCard.tsx
+++ b/frontend/components/dashboard/StatsCard.tsx
@@ -18,28 +18,24 @@ export function StatsCard({ stats }: StatsCardProps) {
   const hasActivity = stats && stats.totalAttempts > 0;
 
   const cardStyles = `
-    relative overflow-hidden rounded-[2rem]
-    border border-slate-200/70 dark:border-slate-700/80
-    bg-white/60 dark:bg-slate-900/60 backdrop-blur-md
-    shadow-[0_18px_45px_rgba(15,23,42,0.05)]
-    dark:shadow-[0_22px_60px_rgba(0,0,0,0.2)]
-    p-8 transition-all hover:border-sky-200 dark:hover:border-sky-800
+    relative overflow-hidden rounded-2xl
+    border border-gray-100 dark:border-white/5
+    bg-white/60 dark:bg-neutral-900/60 backdrop-blur-xl
+    p-8 transition-all hover:border-[var(--accent-primary)]/30 dark:hover:border-[var(--accent-primary)]/30
     flex flex-col items-center justify-center text-center
   `;
 
   const primaryBtnStyles = `
     group relative inline-flex items-center justify-center rounded-full
     px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white
-    bg-gradient-to-r from-sky-500 via-indigo-500 to-pink-500
-    shadow-[0_4px_14px_rgba(56,189,248,0.4)]
-    dark:shadow-[0_4px_20px_rgba(129,140,248,0.4)]
-    transition-all hover:scale-105 hover:shadow-lg
+    bg-[var(--accent-primary)] hover:bg-[var(--accent-hover)]
+    transition-all hover:scale-105
   `;
 
   return (
     <section className={cardStyles} aria-labelledby="stats-heading">
       <div
-        className="mb-6 rounded-full bg-slate-50 p-4 shadow-inner dark:bg-slate-800/50"
+        className="mb-6 rounded-full bg-gray-100 p-4 dark:bg-neutral-800/50"
         aria-hidden="true"
       >
         <span className="text-4xl">📊</span>
@@ -47,40 +43,36 @@ export function StatsCard({ stats }: StatsCardProps) {
 
       <h3
         id="stats-heading"
-        className="mb-2 text-xl font-bold text-slate-800 dark:text-slate-100"
+        className="mb-2 text-xl font-bold text-gray-900 dark:text-white"
       >
         {t('title')}
       </h3>
 
       {!hasActivity ? (
         <>
-          <p className="mx-auto mb-8 max-w-xs text-slate-500 dark:text-slate-400">
+          <p className="mx-auto mb-8 max-w-xs text-gray-500 dark:text-gray-400">
             {t('noActivity')}
           </p>
           <Link href="/quizzes" className={primaryBtnStyles}>
             <span className="relative z-10">{t('startQuiz')}</span>
-            <span
-              className="absolute inset-0 rounded-full bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100"
-              aria-hidden="true"
-            />
           </Link>
         </>
       ) : (
         <dl className="mt-2 grid w-full grid-cols-2 gap-4">
-          <div className="rounded-2xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-700 dark:bg-slate-800/50">
-            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
+          <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4 dark:border-white/5 dark:bg-neutral-800/50">
+            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-gray-400 uppercase">
               <History className="h-3 w-3" /> {t('attempts')}
             </dt>
-            <dd className="text-2xl font-black text-slate-800 dark:text-white">
+            <dd className="text-2xl font-black text-gray-900 dark:text-white">
               {stats?.totalAttempts}
             </dd>
           </div>
 
-          <div className="rounded-2xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-700 dark:bg-slate-800/50">
-            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-slate-400 uppercase">
+          <div className="rounded-xl border border-gray-100 bg-gray-50/50 p-4 dark:border-white/5 dark:bg-neutral-800/50">
+            <dt className="mb-1 flex items-center justify-center gap-2 text-xs font-semibold tracking-wider text-gray-400 uppercase">
               <TrendingUp className="h-3 w-3" /> {t('avgScore')}
             </dt>
-            <dd className="text-2xl font-black text-slate-800 dark:text-white">
+            <dd className="text-2xl font-black text-gray-900 dark:text-white">
               {stats?.averageScore}%
             </dd>
           </div>
diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index 9a31059a..b9e58c06 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -373,7 +373,7 @@ export default function AIWordHelper({
 
   const renderGuestCTA = () => (
     <div className="flex flex-col items-center justify-center gap-4 px-4 py-8 text-center">
-      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
+      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600">
         <Sparkles className="h-8 w-8 text-white" />
       </div>
       <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
@@ -387,8 +387,8 @@ export default function AIWordHelper({
           href="/login"
           className={cn(
             'rounded-lg px-4 py-2 text-sm font-medium',
-            'bg-[var(--accent-primary)] text-white',
-            'hover:bg-[var(--accent-hover)]',
+            'bg-(--accent-primary) text-white',
+            'hover:bg-(--accent-hover)',
             'transition-colors'
           )}
         >
@@ -468,7 +468,7 @@ export default function AIWordHelper({
               'text-gray-500 dark:text-gray-400',
               'hover:bg-gray-100 dark:hover:bg-neutral-800',
               'transition-colors',
-              'focus:ring-2 focus:ring-[var(--accent-primary)] focus:outline-none'
+              'focus:ring-2 focus:ring-(--accent-primary) focus:outline-none'
             )}
             aria-label={t('close')}
           >
@@ -494,7 +494,7 @@ export default function AIWordHelper({
                   className={cn(
                     'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
                     activeLocale === loc
-                      ? 'bg-[var(--accent-primary)] text-white'
+                      ? 'bg-(--accent-primary) text-white'
                       : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-neutral-800 dark:text-gray-300 dark:hover:bg-neutral-700'
                   )}
                 >
@@ -506,7 +506,7 @@ export default function AIWordHelper({
             <div className="flex-1 overflow-y-auto p-4">
               {isLoading && (
                 <div className="flex flex-col items-center justify-center gap-3 py-8">
-                  <Loader2 className="h-8 w-8 animate-spin text-[var(--accent-primary)]" />
+                  <Loader2 className="h-8 w-8 animate-spin text-(--accent-primary)" />
                   <p className="text-sm text-gray-600 dark:text-gray-400">
                     {t('loading')}
                   </p>
@@ -560,7 +560,7 @@ export default function AIWordHelper({
                                 ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
                                 : rateLimitState.retryAttempts >= 3
                                   ? 'bg-amber-500 text-white hover:bg-amber-600'
-                                  : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
+                                  : 'bg-(--accent-primary) text-white hover:bg-(--accent-hover)'
                             )}
                           >
                             {rateLimitState.retryAttempts >= 5 ? (
@@ -644,7 +644,7 @@ export default function AIWordHelper({
                                   rel="noopener noreferrer"
                                   className={cn(
                                     'flex items-center gap-3 rounded-lg px-4 py-3',
-                                    'bg-gradient-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20',
+                                    'bg-linear-to-r from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20',
                                     'hover:from-pink-100 hover:to-purple-100 dark:hover:from-pink-900/30 dark:hover:to-purple-900/30',
                                     'border border-pink-200 dark:border-pink-800',
                                     'transition-colors',
@@ -723,7 +723,7 @@ export default function AIWordHelper({
                                 ? 'cursor-not-allowed bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
                                 : serviceErrorState.retryAttempts >= 3
                                   ? 'bg-blue-500 text-white hover:bg-blue-600'
-                                  : 'bg-[var(--accent-primary)] text-white hover:bg-[var(--accent-hover)]'
+                                  : 'bg-(--accent-primary) text-white hover:bg-(--accent-hover)'
                             )}
                           >
                             {serviceErrorState.retryAttempts >= 5 ? (
@@ -753,8 +753,8 @@ export default function AIWordHelper({
                             onClick={fetchExplanation}
                             className={cn(
                               'flex items-center gap-2 rounded-lg px-4 py-2',
-                              'bg-[var(--accent-primary)] text-white',
-                              'hover:bg-[var(--accent-hover)]',
+                              'bg-(--accent-primary) text-white',
+                              'hover:bg-(--accent-hover)',
                               'transition-colors',
                               'text-sm font-medium'
                             )}
@@ -770,7 +770,7 @@ export default function AIWordHelper({
 
               {explanation && !isLoading && !error && (
                 <div className="prose prose-sm dark:prose-invert max-w-none">
-                  <div className="leading-relaxed whitespace-pre-wrap text-gray-800 dark:text-gray-200 [&>*]:my-2">
+                  <div className="leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200">
                     {formatExplanation(explanation[activeLocale])}
                   </div>
                 </div>
diff --git a/frontend/components/q&a/FloatingExplainButton.tsx b/frontend/components/q&a/FloatingExplainButton.tsx
index e04d6384..dea9c5c6 100644
--- a/frontend/components/q&a/FloatingExplainButton.tsx
+++ b/frontend/components/q&a/FloatingExplainButton.tsx
@@ -58,14 +58,14 @@ export default function FloatingExplainButton({
         'fixed z-50',
         'px-3 py-1.5',
         'text-sm font-medium',
-        'bg-[var(--accent-primary)] text-white',
+        'bg-(--accent-primary) text-white',
         'rounded-full',
         'border border-transparent',
         'shadow-lg',
-        'hover:bg-[var(--accent-hover)]',
+        'hover:bg-(--accent-hover)',
         'transition-all duration-200',
         'animate-in fade-in-0 zoom-in-95',
-        'focus:ring-2 focus:ring-[var(--accent-primary)] focus:ring-offset-2 focus:outline-none'
+        'focus:ring-2 focus:ring-(--accent-primary) focus:ring-offset-2 focus:outline-none'
       )}
       style={{
         left: `${position.x}px`,
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
index 5be57b6e..b7d63f45 100644
--- a/frontend/components/shared/LanguageSwitcher.tsx
+++ b/frontend/components/shared/LanguageSwitcher.tsx
@@ -44,15 +44,15 @@ export default function LanguageSwitcher() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="group text-muted-foreground flex items-center gap-1.5 font-medium transition-colors active:text-[var(--accent-hover)]"
+        className="group text-muted-foreground flex items-center gap-1.5 font-medium transition-colors active:text-(--accent-hover)"
         aria-label="Change language"
       >
-        <Globe className="h-4 w-4 transition-colors group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)]" />
-        <span className="transition-colors group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)]">
+        <Globe className="h-4 w-4 transition-colors group-hover:text-(--accent-hover) group-active:text-(--accent-hover)" />
+        <span className="transition-colors group-hover:text-(--accent-hover) group-active:text-(--accent-hover)">
           {localeLabels[currentLocale]}
         </span>
         <svg
-          className={`h-4 w-4 transition-all group-hover:[color:var(--accent-hover)] group-active:[color:var(--accent-hover)] ${
+          className={`h-4 w-4 transition-all group-hover:text-(--accent-hover) group-active:text-(--accent-hover) ${
             isOpen ? 'rotate-180' : ''
           }`}
           fill="none"
@@ -69,7 +69,7 @@ export default function LanguageSwitcher() {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 z-[60] mt-2 w-20 rounded-md border border-gray-200 bg-white py-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="absolute right-0 z-60 mt-2 w-20 rounded-md border border-gray-200 bg-white py-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
           {locales.map(locale => (
             <Link
               key={locale}
@@ -81,9 +81,9 @@ export default function LanguageSwitcher() {
                 }
                 setIsOpen(false);
               }}
-              className={`block px-4 py-2 text-sm transition active:text-[var(--accent-hover)] ${
+              className={`block px-4 py-2 text-sm transition active:text-(--accent-hover) ${
                 currentLocale === locale
-                  ? 'text-muted-foreground [background-color:color-mix(in_srgb,var(--accent-primary)_10%,transparent)] font-medium'
+                  ? 'text-muted-foreground bg-(--accent-primary)/10 font-medium'
                   : 'text-muted-foreground hover:bg-secondary active:bg-secondary'
               }`}
             >
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 21f85747..c6a36b6b 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -46,14 +46,14 @@
   "homepage": {
     "title": "DevLovers",
     "subtitle": "Platform for Technical Interview Preparation",
-    "description": "Master frontend, backend, and full-stack development with our interview questions, quizzes, and learning materials.",
+    "description": "Build real confidence in frontend, backend, and full-stack development through interactive interview questions, quizzes, and practical explanations",
     "cta": "Take the first step",
     "ctaVariants": {
-      "1": "No pressure. Just start.",
+      "1": "No pressure, Just start",
       "2": "This might actually be fun",
       "3": "You're already halfway",
       "4": "One click from progress",
-      "5": "You clicked. That counts.",
+      "5": "You clicked, That counts",
       "6": "Brave move, by the way",
       "7": "Okay, now it's happening",
       "8": "Hello, new commit"
@@ -211,7 +211,7 @@
   },
   "blog": {
     "title": "All Blog Posts",
-    "subtitle": "Explore the latest articles in Tech, News, and Career Growth, covering trends, ideas, and practical insights.",
+    "subtitle": "Explore the latest articles in Tech, News, and Career Growth, covering trends, ideas, and practical insights",
     "metaTitle": "Blog | DevLovers",
     "metaDescription": "Explore the latest articles and insights",
     "all": "All",
@@ -261,7 +261,7 @@
       "viewAll": "View all",
       "hero": {
         "headline": "Code. Create. Collect.",
-        "subheadline": "Join thousands of developers who express their passion through premium merch.",
+        "subheadline": "Join thousands of developers who express their passion through premium merch",
         "cta": "Browse all products"
       },
       "comingSoon": {
@@ -272,6 +272,7 @@
     },
     "product": {
       "soldOut": "Sold out",
+      "maxStock": "Max {stock} in stock",
       "color": "Color",
       "size": "Size",
       "quantity": "Quantity",
@@ -308,7 +309,7 @@
     "cart": {
       "title": "Your cart",
       "empty": "Your cart is empty",
-      "emptyDescription": "Looks like you haven't added any items to your cart yet.",
+      "emptyDescription": "Looks like you haven't added any items to your cart yet",
       "startShopping": "Start shopping",
       "itemsLabel": "Cart items",
       "summary": {
@@ -321,7 +322,7 @@
       "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.",
+        "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"
       },
@@ -332,20 +333,20 @@
         "maxStock": "Max {stock} in stock"
       },
       "alerts": {
-        "itemsRemoved": "Some items were removed from your cart because they are unavailable or out of stock."
+        "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.",
+        "description": "Administrative tools for the merch shop",
         "productsSection": {
           "title": "Products",
-          "description": "Create, edit, activate, feature."
+          "description": "Create, edit, activate, feature"
         },
         "ordersSection": {
           "title": "Orders",
-          "description": "Review and manage orders."
+          "description": "Review and manage orders"
         }
       },
       "topbar": {
@@ -467,45 +468,45 @@
       },
       "sort": {
         "featured": "Featured",
-        "priceAsc": "Price: Low to High",
-        "priceDesc": "Price: High to Low",
+        "priceAsc": "Price ↑",
+        "priceDesc": "Price ↓",
         "newest": "Newest"
       }
     },
     "products": {
       "title": "All Products",
       "noProductsFound": "No products found",
-      "adjustFilters": "Try adjusting your filters to find what you're looking for.",
+      "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.",
+      "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.",
+        "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.",
+        "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."
+        "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."
+        "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."
+        "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.",
+        "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",
@@ -515,11 +516,11 @@
       },
       "error": {
         "paymentFailed": "Payment failed",
-        "paymentFailedDescription": "The payment for this order was not completed. You can try again or contact support.",
+        "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.",
+        "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",
@@ -535,7 +536,7 @@
         "title": "Secure checkout",
         "payForOrder": "Pay for order #{orderId}",
         "paymentDetails": "Payment details",
-        "completePayment": "Complete payment to place your order.",
+        "completePayment": "Complete payment to place your order",
         "amountDue": "Amount due",
         "orderSummary": "Order summary",
         "items": "Items",
@@ -544,9 +545,9 @@
         "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."
+          "alreadyPaid": "This order is already paid",
+          "previousFailed": "The previous payment attempt failed. Please try again",
+          "completePayment": "Complete payment to finish your order"
         }
       },
       "actions": {
@@ -558,10 +559,10 @@
     },
     "orders": {
       "title": "My orders",
-      "subtitle": "Your most recent orders (up to 50).",
+      "subtitle": "Your most recent orders (up to 50)",
       "backToShop": "Back to shop",
       "empty": {
-        "message": "No orders yet.",
+        "message": "No orders yet",
         "browseProducts": "Browse products"
       },
       "table": {
@@ -614,10 +615,10 @@
     "metaDescription": "Learn about DevLovers - the platform for technical interview preparation",
     "hero": {
       "titleHighlight": "Debug your skills",
-      "titleRest": "before the recruiter does.",
+      "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.",
+      "descriptionRest": "into a production-ready skillset and land that offer",
       "stats": {
         "quizzesPassed": "Quizzes Passed",
         "githubStars": "GitHub Stars",
@@ -740,7 +741,7 @@
       "heading": "Pricing",
       "badge": "No Hidden Fees",
       "title": "Invest in your brain,",
-      "titleHighlight": "not our subscriptions.",
+      "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",
@@ -903,9 +904,9 @@
   },
   "dashboard": {
     "metaTitle": "Dashboard | DevLovers",
-    "metaDescription": "Track your progress and quiz performance.",
+    "metaDescription": "Track your progress and quiz performance",
     "title": "Dashboard",
-    "subtitle": "Welcome back to your training ground.",
+    "subtitle": "Welcome back to your training ground",
     "supportLink": "Support & Feedback",
     "profile": {
       "defaultName": "Developer",
@@ -915,7 +916,7 @@
     },
     "stats": {
       "title": "Quiz Statistics",
-      "noActivity": "Ready to level up? Challenge yourself with a new quiz.",
+      "noActivity": "Ready to level up? Challenge yourself with a new quiz",
       "startQuiz": "Start a Quiz",
       "attempts": "Attempts",
       "avgScore": "Avg Score",
@@ -945,7 +946,7 @@
     },
     "guest": {
       "title": "Unlock AI Explanations",
-      "description": "Sign in or create an account to get instant AI-powered explanations of technical terms.",
+      "description": "Sign in or create an account to get instant AI-powered explanations of technical terms",
       "login": "Log In",
       "signup": "Sign Up"
     },
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 65d5bf08..255327cb 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -46,17 +46,17 @@
   "homepage": {
     "title": "DevLovers",
     "subtitle": "Platforma do Przygotowania do Rozmów Kwalifikacyjnych",
-    "description": "Opanuj frontend, backend i full-stack development dzięki naszym pytaniom do rozmów kwalifikacyjnych, quizom i materiałom edukacyjnym.",
+    "description": "Zbuduj prawdziwą pewność w frontend, backend i full-stack development dzięki interaktywnym pytaniom rekrutacyjnym, quizom i praktycznym wyjaśnieniom",
     "cta": "Rozpocznij naukę",
     "ctaVariants": {
-      "1": "Bez presji. Po prostu zacznij.",
-      "2": "To może być ciekawsze, niż myślisz.",
-      "3": "Właśnie tutaj to się zaczyna.",
-      "4": "Jesteś już w połowie drogi.",
-      "5": "Jeden klik do postępu.",
-      "6": "Klik był — to się liczy.",
-      "7": "Postęp ważniejszy niż perfekcja.",
-      "8": "Zacząć to też funkcja."
+      "1": "Bez presji. Po prostu zacznij",
+      "2": "To może być ciekawsze, niż myślisz",
+      "3": "Właśnie tutaj to się zaczyna",
+      "4": "Jesteś już w połowie drogi",
+      "5": "Jeden klik do postępu",
+      "6": "Klik był — to się liczy",
+      "7": "Postęp ważniejszy niż perfekcja",
+      "8": "Zacząć to też funkcja"
     }
   },
   "qa": {
@@ -211,7 +211,7 @@
   },
   "blog": {
     "title": "Wszystkie Wpisy na Blogu",
-    "subtitle": "Poznaj najnowsze artykuły z Tech, News i Career Growth — trendy, idee i praktyczne wskazówki.",
+    "subtitle": "Poznaj najnowsze artykuły z Tech, News i Career Growth — trendy, idee i praktyczne wskazówki",
     "metaTitle": "Blog | DevLovers",
     "metaDescription": "Odkryj najnowsze artykuły i spostrzeżenia",
     "all": "Wszystkie",
@@ -261,7 +261,7 @@
       "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.",
+        "subheadline": "Dołącz do tysięcy deweloperów, którzy wyrażają swoją pasję poprzez premium merch",
         "cta": "Przeglądaj wszystkie produkty"
       },
       "comingSoon": {
@@ -272,6 +272,7 @@
     },
     "product": {
       "soldOut": "Wyprzedane",
+      "maxStock": "Maksymalnie {stock} w magazynie",
       "color": "Kolor",
       "size": "Rozmiar",
       "quantity": "Ilość",
@@ -308,7 +309,7 @@
     "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.",
+      "emptyDescription": "Wygląda na to, że nie dodałeś jeszcze żadnych produktów do koszyka",
       "startShopping": "Rozpocznij zakupy",
       "itemsLabel": "Produkty w koszyku",
       "summary": {
@@ -321,7 +322,7 @@
       "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.",
+        "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"
       },
@@ -332,20 +333,20 @@
         "maxStock": "Maksymalnie {stock} w magazynie"
       },
       "alerts": {
-        "itemsRemoved": "Niektóre produkty zostały usunięte z koszyka, ponieważ są niedostępne lub wyprzedane."
+        "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.",
+        "description": "Narzędzia administracyjne dla sklepu z gadżetami",
         "productsSection": {
           "title": "Produkty",
-          "description": "Twórz, edytuj, aktywuj, promuj."
+          "description": "Twórz, edytuj, aktywuj, promuj"
         },
         "ordersSection": {
           "title": "Zamówienia",
-          "description": "Przeglądaj i zarządzaj zamówieniami."
+          "description": "Przeglądaj i zarządzaj zamówieniami"
         }
       },
       "topbar": {
@@ -467,45 +468,45 @@
       },
       "sort": {
         "featured": "Polecane",
-        "priceAsc": "Cena: od najniższej",
-        "priceDesc": "Cena: od najwyższej",
+        "priceAsc": "Cena ↑",
+        "priceDesc": "Cena ↓",
         "newest": "Najnowsze"
       }
     },
     "products": {
       "title": "Wszystkie produkty",
       "noProductsFound": "Nie znaleziono produktów",
-      "adjustFilters": "Spróbuj dostosować filtry, aby znaleźć to, czego szukasz.",
+      "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.",
+      "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.",
+        "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.",
+        "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."
+        "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."
+        "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."
+        "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.",
+        "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",
@@ -515,11 +516,11 @@
       },
       "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ą.",
+        "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.",
+        "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",
@@ -535,7 +536,7 @@
         "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.",
+        "completePayment": "Dokończ płatność, aby złożyć zamówienie",
         "amountDue": "Do zapłaty",
         "orderSummary": "Podsumowanie zamówienia",
         "items": "Produkty",
@@ -544,9 +545,9 @@
         "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."
+          "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": {
@@ -558,10 +559,10 @@
     },
     "orders": {
       "title": "Moje zamówienia",
-      "subtitle": "Twoje najnowsze zamówienia (do 50).",
+      "subtitle": "Twoje najnowsze zamówienia (do 50)",
       "backToShop": "Wróć do sklepu",
       "empty": {
-        "message": "Brak zamówień.",
+        "message": "Brak zamówień",
         "browseProducts": "Przeglądaj produkty"
       },
       "table": {
@@ -614,10 +615,10 @@
     "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.",
+      "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ę.",
+      "descriptionRest": "w gotowy do produkcji zestaw umiejętności i zdobądź ofertę",
       "stats": {
         "quizzesPassed": "Ukończonych quizów",
         "githubStars": "Gwiazdek na GitHub",
@@ -767,7 +768,7 @@
       "heading": "Cennik",
       "badge": "Bez ukrytych opłat",
       "title": "Inwestuj w swój mózg,",
-      "titleHighlight": "nie w nasze subskrypcje.",
+      "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",
@@ -930,9 +931,9 @@
   },
   "dashboard": {
     "metaTitle": "Panel | DevLovers",
-    "metaDescription": "Śledź swój postęp i wyniki quizów.",
+    "metaDescription": "Śledź swój postęp i wyniki quizów",
     "title": "Panel użytkownika",
-    "subtitle": "Witaj z powrotem na swoim placu treningowym.",
+    "subtitle": "Witaj z powrotem na swoim placu treningowym",
     "supportLink": "Wsparcie i opinie",
     "profile": {
       "defaultName": "Programista",
@@ -942,7 +943,7 @@
     },
     "stats": {
       "title": "Statystyki quizów",
-      "noActivity": "Gotowy na rozwój? Sprawdź się w nowym quizie.",
+      "noActivity": "Gotowy na rozwój? Sprawdź się w nowym quizie",
       "startQuiz": "Rozpocznij quiz",
       "attempts": "Próby",
       "avgScore": "Średni wynik",
@@ -972,7 +973,7 @@
     },
     "guest": {
       "title": "Odblokuj wyjaśnienia AI",
-      "description": "Zaloguj się lub utwórz konto, aby otrzymywać natychmiastowe wyjaśnienia terminów technicznych generowane przez AI.",
+      "description": "Zaloguj się lub utwórz konto, aby otrzymywać natychmiastowe wyjaśnienia terminów technicznych generowane przez AI",
       "login": "Zaloguj się",
       "signup": "Zarejestruj się"
     },
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index a49652f2..85047ccd 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -46,17 +46,17 @@
   "homepage": {
     "title": "DevLovers",
     "subtitle": "Платформа для підготовки до технічних співбесід",
-    "description": "Опануйте frontend, backend та full-stack-розробку за допомогою наших питань для співбесід, квізів і навчальних матеріалів.",
+    "description": "Сформуй справжню впевненість у frontend, backend та full-stack розробці завдяки інтерактивним питанням для співбесід, квізам і практичним поясненням",
     "cta": "Зроби перший крок",
     "ctaVariants": {
-      "1": "Без тиску. Просто почни.",
-      "2": "Це може бути цікавіше, ніж здається.",
-      "3": "Ось тут усе й починається.",
-      "4": "Ти вже на пів шляху.",
-      "5": "Один клік до прогресу.",
-      "6": "Ну все, процес пішов.",
+      "1": "Без тиску. Просто почни",
+      "2": "Це може бути цікавіше, ніж здається",
+      "3": "Ось тут усе й починається",
+      "4": "Ти вже на пів шляху",
+      "5": "Один клік до прогресу",
+      "6": "Ну все, процес пішов",
       "7": "Простіше, ніж виглядає",
-      "8": "Почати — це теж фіча."
+      "8": "Почати — це теж фіча"
     }
   },
   "qa": {
@@ -211,7 +211,7 @@
   },
   "blog": {
     "title": "Усі статті блогу",
-    "subtitle": "Досліджуйте найсвіжіші статті про Tech, News та Career Growth із трендами, ідеями й практичними інсайтами.",
+    "subtitle": "Досліджуйте найсвіжіші статті про Tech, News та Career Growth із трендами, ідеями й практичними інсайтами",
     "metaTitle": "Блог | DevLovers",
     "metaDescription": "Досліджуйте останні статті та корисні матеріали",
     "all": "Усі",
@@ -261,7 +261,7 @@
       "viewAll": "Переглянути все",
       "hero": {
         "headline": "Кодуй. Створюй. Колекціонуй.",
-        "subheadline": "Приєднуйтесь до тисяч розробників, які виражають свою пристрасть через преміум мерч.",
+        "subheadline": "Приєднуйтесь до тисяч розробників, які виражають свою пристрасть через преміум мерч",
         "cta": "Переглянути всі товари"
       },
       "comingSoon": {
@@ -272,6 +272,7 @@
     },
     "product": {
       "soldOut": "Розпродано",
+      "maxStock": "Максимум {stock} в наявності",
       "color": "Колір",
       "size": "Розмір",
       "quantity": "Кількість",
@@ -308,7 +309,7 @@
     "cart": {
       "title": "Ваш кошик",
       "empty": "Ваш кошик порожній",
-      "emptyDescription": "Схоже, ви ще не додали жодного товару до кошика.",
+      "emptyDescription": "Схоже, ви ще не додали жодного товару до кошика",
       "startShopping": "Почати покупки",
       "itemsLabel": "Товари в кошику",
       "summary": {
@@ -320,8 +321,8 @@
       },
       "checkout": {
         "placeOrder": "Оформити замовлення",
-        "placing": "Оформлення...",
-        "message": "Ви будете перенаправлені на безпечну оплату або побачите підтвердження, якщо оплата не потрібна в цьому середовищі.",
+        "placing": "Оформлення замовлення...",
+        "message": "Ви будете перенаправлені на безпечну оплату або побачите підтвердження, якщо оплата не потрібна в цьому середовищі",
         "notRedirected": "Якщо ви не були автоматично перенаправлені, відкрийте ваше замовлення",
         "goToOrder": "Перейти до замовлення"
       },
@@ -332,20 +333,20 @@
         "maxStock": "Максимум {stock} в наявності"
       },
       "alerts": {
-        "itemsRemoved": "Деякі товари були видалені з вашого кошика, оскільки вони недоступні або закінчилися на складі."
+        "itemsRemoved": "Деякі товари були видалені з вашого кошика, оскільки вони недоступні або закінчилися на складі"
       }
     },
     "admin": {
       "page": {
         "title": "Адміністрування магазину",
-        "description": "Інструменти адміністрування магазину мерчу.",
+        "description": "Інструменти адміністрування магазину мерчу",
         "productsSection": {
           "title": "Товари",
-          "description": "Створювати, редагувати, активувати, рекомендувати."
+          "description": "Створювати, редагувати, активувати, рекомендувати"
         },
         "ordersSection": {
           "title": "Замовлення",
-          "description": "Переглядати та керувати замовленнями."
+          "description": "Переглядати та керувати замовленнями"
         }
       },
       "topbar": {
@@ -467,45 +468,45 @@
       },
       "sort": {
         "featured": "Рекомендовані",
-        "priceAsc": "Ціна: від низької до високої",
-        "priceDesc": "Ціна: від високої до низької",
-        "newest": "Найновіші"
+        "priceAsc": "Ціна ↑",
+        "priceDesc": "Ціна ↓",
+        "newest": "Нові"
       }
     },
     "products": {
       "title": "Всі товари",
       "noProductsFound": "Товарів не знайдено",
-      "adjustFilters": "Спробуйте змінити фільтри, щоб знайти те, що ви шукаєте.",
+      "adjustFilters": "Спробуйте змінити фільтри, щоб знайти те, що ви шукаєте",
       "backToProducts": "Назад до всіх товарів",
-      "notAvailable": "Цей товар недоступний для вашої локалі/валюти.",
+      "notAvailable": "Цей товар недоступний для вашої локалі/валюти",
       "loadMore": "Завантажити ще",
       "shopNow": "Купити зараз"
     },
     "checkout": {
       "errors": {
         "missingOrderId": "Відсутній ідентифікатор замовлення",
-        "missingOrderIdDescription": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари.",
+        "missingOrderIdDescription": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари",
         "orderNotFound": "Замовлення не знайдено",
-        "orderNotFoundDescription": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало.",
+        "orderNotFoundDescription": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало",
         "invalidOrder": "Недійсне замовлення",
         "unableToLoad": "Не вдається завантажити замовлення",
-        "unableToCheckout": "Не вдається розпочати оформлення замовлення зараз.",
-        "unexpectedResponse": "Неочікувана відповідь оформлення замовлення.",
-        "tryAgainLater": "Будь ласка, спробуйте пізніше."
+        "unableToCheckout": "Не вдається розпочати оформлення замовлення зараз",
+        "unexpectedResponse": "Неочікувана відповідь оформлення замовлення",
+        "tryAgainLater": "Будь ласка, спробуйте пізніше"
       },
       "missingOrder": {
-        "message": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари."
+        "message": "Ми не змогли ідентифікувати ваше замовлення. Будь ласка, поверніться до кошика або перегляньте товари"
       },
       "notFoundOrder": {
-        "message": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало."
+        "message": "Ми не змогли знайти це замовлення. Можливо, його було видалено або воно ніколи не існувало"
       },
       "success": {
         "title": "Дякуємо за ваше замовлення",
         "orderLabel": "Замовлення",
-        "received": "Ми отримали ваше замовлення.",
-        "paymentConfirmed": "Оплату підтверджено.",
-        "paymentProcessing": "Оплата все ще обробляється. Ця сторінка оновиться автоматично.",
-        "paymentsDisabled": "Платежі вимкнено в цьому середовищі. З вас не було знято плату за це замовлення.",
+        "received": "Ми отримали ваше замовлення",
+        "paymentConfirmed": "Оплату підтверджено",
+        "paymentProcessing": "Оплата все ще обробляється. Ця сторінка оновиться автоматично",
+        "paymentsDisabled": "Платежі вимкнено в цьому середовищі. З вас не було знято плату за це замовлення",
         "orderSummary": "Підсумок замовлення",
         "totalAmount": "Загальна сума",
         "items": "Товари",
@@ -515,11 +516,11 @@
       },
       "error": {
         "paymentFailed": "Помилка оплати",
-        "paymentFailedDescription": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою.",
+        "paymentFailedDescription": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою",
         "paymentUnclear": "Статус оплати неясний",
-        "paymentUnclearDescription": "Ми не змогли підтвердити помилку оплати для цього замовлення.",
-        "notCompleted": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою.",
-        "couldNotConfirm": "Ми не змогли підтвердити помилку оплати для цього замовлення.",
+        "paymentUnclearDescription": "Ми не змогли підтвердити помилку оплати для цього замовлення",
+        "notCompleted": "Оплату цього замовлення не завершено. Ви можете спробувати ще раз або зв'язатися з підтримкою",
+        "couldNotConfirm": "Ми не змогли підтвердити помилку оплати для цього замовлення",
         "orderDetails": "Деталі замовлення",
         "order": "Замовлення",
         "orderLabel": "Замовлення",
@@ -535,7 +536,7 @@
         "title": "Безпечна оплата",
         "payForOrder": "Оплатити замовлення #{orderId}",
         "paymentDetails": "Деталі оплати",
-        "completePayment": "Завершіть оплату, щоб оформити замовлення.",
+        "completePayment": "Завершіть оплату, щоб оформити замовлення",
         "amountDue": "До сплати",
         "orderSummary": "Підсумок замовлення",
         "items": "Товари",
@@ -544,9 +545,9 @@
         "viewConfirmation": "Переглянути підтвердження",
         "continueShopping": "Продовжити покупки",
         "statusMessages": {
-          "alreadyPaid": "Це замовлення вже оплачено.",
-          "previousFailed": "Попередня спроба оплати не вдалася. Будь ласка, спробуйте ще раз.",
-          "completePayment": "Завершіть оплату, щоб завершити замовлення."
+          "alreadyPaid": "Це замовлення вже оплачено",
+          "previousFailed": "Попередня спроба оплати не вдалася. Будь ласка, спробуйте ще раз",
+          "completePayment": "Завершіть оплату, щоб завершити замовлення"
         }
       },
       "actions": {
@@ -558,10 +559,10 @@
     },
     "orders": {
       "title": "Мої замовлення",
-      "subtitle": "Ваші останні замовлення (до 50).",
+      "subtitle": "Ваші останні замовлення (до 50)",
       "backToShop": "Назад до магазину",
       "empty": {
-        "message": "Замовлень поки немає.",
+        "message": "Замовлень поки немає",
         "browseProducts": "Переглянути товари"
       },
       "table": {
@@ -614,10 +615,10 @@
     "metaDescription": "Дізнайтеся більше про DevLovers — платформу для підготовки до технічних співбесід",
     "hero": {
       "titleHighlight": "Знайди свої баги",
-      "titleRest": "поки це не зробив рекрутер.",
+      "titleRest": "поки це не зробив рекрутер",
       "description": "Досить гадати. Ми розклали хаос співбесід на зрозумілу дорожню карту.",
       "descriptionHighlight": "Систематизуй свої знання",
-      "descriptionRest": "у готовий до продакшену скілсет і отримай офер.",
+      "descriptionRest": "у готовий до продакшену скілсет і отримай офер",
       "stats": {
         "quizzesPassed": "Пройдено квізів",
         "githubStars": "Зірок на GitHub",
@@ -743,7 +744,7 @@
       "heading": "Тарифи",
       "badge": "Без прихованих платежів",
       "title": "Інвестуй у свій мозок,",
-      "titleHighlight": "а не в наші підписки.",
+      "titleHighlight": "а не в наші підписки",
       "subtitle": "Ми віримо, що знання мають бути доступними. Тому ми не продаємо курси. Але сервери гріються, а кава закінчується. Вибір за тобою.",
       "junior": {
         "title": "Junior Engineer",
@@ -906,9 +907,9 @@
   },
   "dashboard": {
     "metaTitle": "Панель | DevLovers",
-    "metaDescription": "Відстежуйте свій прогрес та результати квізів.",
+    "metaDescription": "Відстежуйте свій прогрес та результати квізів",
     "title": "Кабінет користувача",
-    "subtitle": "З поверненням на вашу навчальну площадку.",
+    "subtitle": "З поверненням на вашу навчальну площадку",
     "supportLink": "Підтримка та відгуки",
     "profile": {
       "defaultName": "Розробник",
@@ -918,7 +919,7 @@
     },
     "stats": {
       "title": "Статистика квізів",
-      "noActivity": "Готові прокачатися? Випробуйте себе в новому квізі.",
+      "noActivity": "Готові прокачатися? Випробуйте себе в новому квізі",
       "startQuiz": "Почати квіз",
       "attempts": "Спроби",
       "avgScore": "Середній бал",
@@ -948,7 +949,7 @@
     },
     "guest": {
       "title": "Розблокуй AI Пояснення",
-      "description": "Увійдіть або зареєструйтесь, щоб отримати миттєві пояснення технічних термінів від AI.",
+      "description": "Увійдіть або зареєструйтесь, щоб отримати миттєві пояснення технічних термінів від AI",
       "login": "Увійти",
       "signup": "Зареєструватися"
     },

From ffb9d683a2ad3b6c48b456769d0ff2905071c2a3 Mon Sep 17 00:00:00 2001
From: tetiana zorii <tanyusha.zoriy@gmail.com>
Date: Thu, 5 Feb 2026 10:07:43 -0500
Subject: [PATCH 2/2] fix: correct invalid Tailwind classes and text
 capitalization

  Changes:
  - LanguageSwitcher.tsx: Replace z-60 with valid z-50
  - en.json: Fix capitalization after commas
---
 frontend/components/q&a/AIWordHelper.tsx        | 2 +-
 frontend/components/shared/LanguageSwitcher.tsx | 2 +-
 frontend/messages/en.json                       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index b9e58c06..2f2e35b0 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -770,7 +770,7 @@ export default function AIWordHelper({
 
               {explanation && !isLoading && !error && (
                 <div className="prose prose-sm dark:prose-invert max-w-none">
-                  <div className="leading-relaxed whitespace-pre-wrap text-gray-800 **:my-2 dark:text-gray-200">
+                  <div className="leading-relaxed whitespace-pre-wrap text-gray-800 *:my-2 dark:text-gray-200">
                     {formatExplanation(explanation[activeLocale])}
                   </div>
                 </div>
diff --git a/frontend/components/shared/LanguageSwitcher.tsx b/frontend/components/shared/LanguageSwitcher.tsx
index b7d63f45..57cf777e 100644
--- a/frontend/components/shared/LanguageSwitcher.tsx
+++ b/frontend/components/shared/LanguageSwitcher.tsx
@@ -69,7 +69,7 @@ export default function LanguageSwitcher() {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 z-60 mt-2 w-20 rounded-md border border-gray-200 bg-white py-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="absolute right-0 z-50 mt-2 w-20 rounded-md border border-gray-200 bg-white py-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
           {locales.map(locale => (
             <Link
               key={locale}
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index c6a36b6b..eb73aff6 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -49,11 +49,11 @@
     "description": "Build real confidence in frontend, backend, and full-stack development through interactive interview questions, quizzes, and practical explanations",
     "cta": "Take the first step",
     "ctaVariants": {
-      "1": "No pressure, Just start",
+      "1": "No pressure, just start",
       "2": "This might actually be fun",
       "3": "You're already halfway",
       "4": "One click from progress",
-      "5": "You clicked, That counts",
+      "5": "You clicked, that counts",
       "6": "Brave move, by the way",
       "7": "Okay, now it's happening",
       "8": "Hello, new commit"