From 155e5ae6e40cbe41854c53cd140efd7f742b0d6a Mon Sep 17 00:00:00 2001
From: tetiana zorii <tanyusha.zoriy@gmail.com>
Date: Sat, 31 Jan 2026 03:19:19 -0500
Subject: [PATCH 1/3] (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
---
 frontend/app/[locale]/about/page.tsx          |  13 +-
 frontend/app/api/ai/explain/route.ts          | 197 ++++++++++++++++--
 .../components/about/CommunitySection.tsx     |  29 +--
 frontend/components/about/FeaturesSection.tsx | 126 +++++------
 frontend/components/about/HeroSection.tsx     |  39 ++--
 frontend/components/about/InteractiveGame.tsx |  50 ++---
 frontend/components/about/PricingSection.tsx  |  99 +++++----
 frontend/components/about/SponsorsWall.tsx    |  20 +-
 frontend/components/about/TopicsSection.tsx   |  21 +-
 .../components/auth/fields/EmailField.tsx     |  15 ++
 frontend/components/auth/fields/NameField.tsx |  13 ++
 .../components/auth/fields/PasswordField.tsx  |  17 ++
 frontend/messages/en.json                     | 167 ++++++++++++++-
 frontend/messages/pl.json                     | 170 ++++++++++++++-
 frontend/messages/uk.json                     | 172 ++++++++++++++-
 15 files changed, 937 insertions(+), 211 deletions(-)

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/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index 115ce801..9cd05f7b 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -9,6 +9,88 @@ import {
 } from '@/lib/ai/prompts';
 import { getClientIp } from '@/lib/security/client-ip';
 
+// =============================================================================
+// DEBUG LOGGING - TEMPORARY (remove after debugging)
+// =============================================================================
+function logEnvironmentDiagnostics() {
+  const apiKey = process.env.GROQ_API_KEY;
+  console.log('=== NETLIFY FUNCTION DIAGNOSTICS ===');
+  console.log('[ENV] GROQ_API_KEY exists:', !!apiKey);
+  console.log('[ENV] GROQ_API_KEY prefix:', apiKey ? apiKey.substring(0, 4) + '****' : 'N/A');
+  console.log('[ENV] GROQ_API_KEY length:', apiKey?.length ?? 0);
+  console.log('[ENV] NODE_ENV:', process.env.NODE_ENV);
+  console.log('[ENV] NETLIFY:', process.env.NETLIFY);
+  console.log('[ENV] AWS_LAMBDA_FUNCTION_NAME:', process.env.AWS_LAMBDA_FUNCTION_NAME);
+  console.log('[ENV] CONTEXT:', process.env.CONTEXT); // Netlify deploy context
+  console.log('[ENV] DEPLOY_URL:', process.env.DEPLOY_URL);
+  console.log('[RUNTIME] Expected: nodejs (set via export)');
+  console.log('[ENV] All GROQ-related vars:', Object.keys(process.env).filter(k => k.toLowerCase().includes('groq')));
+  console.log('====================================');
+}
+
+function logRequestDiagnostics(request: NextRequest) {
+  console.log('=== REQUEST DIAGNOSTICS ===');
+  console.log('[REQ] Method:', request.method);
+  console.log('[REQ] URL:', request.url);
+  console.log('[REQ] Headers:');
+  request.headers.forEach((value, key) => {
+    // Redact sensitive headers
+    const safeValue = ['authorization', 'cookie', 'x-api-key'].includes(key.toLowerCase())
+      ? '[REDACTED]'
+      : value;
+    console.log(`  ${key}: ${safeValue}`);
+  });
+  console.log('===========================');
+}
+
+function logBodyParsingResult(success: boolean, body?: unknown, error?: unknown) {
+  console.log('=== BODY PARSING ===');
+  console.log('[BODY] Parse success:', success);
+  if (success && body) {
+    console.log('[BODY] Parsed body:', JSON.stringify(body, null, 2));
+  }
+  if (error) {
+    console.log('[BODY] Parse error:', error instanceof Error ? error.message : String(error));
+  }
+  console.log('====================');
+}
+
+function logGroqInitialization(success: boolean, error?: unknown) {
+  console.log('=== GROQ SDK INITIALIZATION ===');
+  console.log('[GROQ] Init success:', success);
+  if (error) {
+    const err = error as Error & { status?: number; code?: string };
+    console.log('[GROQ] Init error name:', err.name);
+    console.log('[GROQ] Init error message:', err.message);
+    console.log('[GROQ] Init error status:', err.status);
+    console.log('[GROQ] Init error code:', err.code);
+  }
+  console.log('===============================');
+}
+
+function logGroqApiCall(phase: 'start' | 'success' | 'error', details?: unknown) {
+  console.log(`=== GROQ API CALL (${phase.toUpperCase()}) ===`);
+  if (phase === 'start') {
+    console.log('[GROQ] Starting API call to llama3-70b-8192');
+  } else if (phase === 'success') {
+    console.log('[GROQ] API call successful');
+    if (details && typeof details === 'object' && 'choices' in details) {
+      const response = details as { choices?: Array<{ message?: { content?: string } }> };
+      console.log('[GROQ] Response has content:', !!response.choices?.[0]?.message?.content);
+      console.log('[GROQ] Content length:', response.choices?.[0]?.message?.content?.length ?? 0);
+    }
+  } else if (phase === 'error') {
+    const err = details as Error & { status?: number; code?: string; headers?: Record<string, string> };
+    console.log('[GROQ] API error name:', err?.name);
+    console.log('[GROQ] API error message:', err?.message);
+    console.log('[GROQ] API error status:', err?.status);
+    console.log('[GROQ] API error code:', err?.code);
+    console.log('[GROQ] API error stack:', err?.stack?.substring(0, 500));
+  }
+  console.log('=====================================');
+}
+// =============================================================================
+
 const rateLimiter = new Map<string, { count: number; resetAt: number }>();
 const MAX_REQUESTS_PER_WINDOW = 10;
 const RATE_LIMIT_WINDOW_MS = 20 * 60 * 1000; 
@@ -91,20 +173,33 @@ function parseExplanationResponse(content: string): ExplanationResponse {
 }
 
 export async function POST(request: NextRequest) {
+  // DEBUG: Log environment diagnostics on every request
+  logEnvironmentDiagnostics();
+  logRequestDiagnostics(request);
+
   const apiKey = process.env.GROQ_API_KEY;
   if (!apiKey) {
-    console.error('GROQ_API_KEY is not configured');
-    console.error('Available env vars starting with GROQ:',
-      Object.keys(process.env).filter(k => k.startsWith('GROQ'))
-    );
+    console.error('[FATAL] GROQ_API_KEY is not configured');
+    console.error('[DEBUG] All env var keys:', Object.keys(process.env).sort().join(', '));
     return NextResponse.json(
-      { error: 'AI service not configured', code: 'SERVICE_UNAVAILABLE' },
+      {
+        error: 'AI service not configured',
+        code: 'SERVICE_UNAVAILABLE',
+        debug: {
+          hasKey: false,
+          nodeEnv: process.env.NODE_ENV,
+          isNetlify: !!process.env.NETLIFY,
+          context: process.env.CONTEXT,
+        }
+      },
       { status: 503 }
     );
   }
 
   const clientIp = getClientIp(request) ?? 'unknown';
+  console.log('[DEBUG] Client IP:', clientIp);
   const rateLimit = checkRateLimit(clientIp);
+  console.log('[DEBUG] Rate limit check:', rateLimit);
 
   if (!rateLimit.allowed) {
     const resetMinutes = Math.ceil(rateLimit.resetIn / 60000);
@@ -128,7 +223,9 @@ export async function POST(request: NextRequest) {
   let body: unknown;
   try {
     body = await request.json();
-  } catch {
+    logBodyParsingResult(true, body);
+  } catch (parseError) {
+    logBodyParsingResult(false, undefined, parseError);
     return NextResponse.json(
       { error: 'Invalid JSON body', code: 'INVALID_JSON' },
       { status: 400 }
@@ -137,6 +234,7 @@ export async function POST(request: NextRequest) {
 
   const validationResult = requestSchema.safeParse(body);
   if (!validationResult.success) {
+    console.log('[DEBUG] Validation failed:', validationResult.error.format());
     return NextResponse.json(
       {
         error: 'Invalid request',
@@ -148,12 +246,33 @@ export async function POST(request: NextRequest) {
   }
 
   const { term, context } = validationResult.data;
+  console.log('[DEBUG] Validated request - term:', term, 'context:', context?.substring(0, 50));
 
-  const groq = new Groq({ apiKey });
+  // DEBUG: Wrap Groq client initialization in try/catch
+  let groq: Groq;
+  try {
+    groq = new Groq({ apiKey });
+    logGroqInitialization(true);
+  } catch (initError) {
+    logGroqInitialization(false, initError);
+    return NextResponse.json(
+      {
+        error: 'Failed to initialize AI client',
+        code: 'SDK_INIT_ERROR',
+        debug: {
+          errorName: initError instanceof Error ? initError.name : 'Unknown',
+          errorMessage: initError instanceof Error ? initError.message : String(initError),
+        }
+      },
+      { status: 503 }
+    );
+  }
 
   try {
     const prompt = createExplainPrompt({ term, context });
+    console.log('[DEBUG] Prompt created, length:', prompt.length);
 
+    logGroqApiCall('start');
     const chatCompletion = await groq.chat.completions.create({
       messages: [
         {
@@ -166,14 +285,18 @@ export async function POST(request: NextRequest) {
       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');
     }
 
+    console.log('[DEBUG] Parsing response, raw content length:', content.length);
     const explanation = parseExplanationResponse(content);
+    console.log('[DEBUG] Successfully parsed explanation');
 
     return NextResponse.json(explanation, {
       status: 200,
@@ -184,17 +307,23 @@ export async function POST(request: NextRequest) {
       },
     });
   } catch (error) {
+    logGroqApiCall('error', 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:', {
+    // Enhanced error logging
+    const errorDetails = {
       name: errorName,
       message: errorMessage,
       stack: error instanceof Error ? error.stack : undefined,
-    });
+      status: (error as { status?: number }).status,
+      code: (error as { code?: string }).code,
+      type: (error as { type?: string }).type,
+    };
+    console.error('[DEBUG] Full error details:', JSON.stringify(errorDetails, null, 2));
 
     if (error instanceof Error) {
       if (
@@ -203,7 +332,11 @@ export async function POST(request: NextRequest) {
         error.message.includes('Invalid API Key')
       ) {
         return NextResponse.json(
-          { error: 'AI service authentication failed', code: 'AUTH_ERROR' },
+          {
+            error: 'AI service authentication failed',
+            code: 'AUTH_ERROR',
+            debug: { keyPrefix: apiKey.substring(0, 4) }
+          },
           { status: 503 }
         );
       }
@@ -232,10 +365,50 @@ export async function POST(request: NextRequest) {
       {
         error: 'Failed to generate explanation',
         code: 'AI_ERROR',
-        details:
-          process.env.NODE_ENV === 'development' ? errorMessage : undefined,
+        details: errorMessage, // Always include for debugging (remove in production)
+        debug: {
+          errorName,
+          nodeEnv: process.env.NODE_ENV,
+          isNetlify: !!process.env.NETLIFY,
+        }
       },
       { status: 500 }
     );
   }
 }
+
+// =============================================================================
+// DEBUG: GET handler for diagnostics (catches 405 errors, provides health check)
+// Remove after debugging
+// =============================================================================
+export async function GET(request: NextRequest) {
+  console.log('=== GET REQUEST TO /api/ai/explain (should be POST) ===');
+  logEnvironmentDiagnostics();
+  logRequestDiagnostics(request);
+
+  const apiKey = process.env.GROQ_API_KEY;
+
+  return NextResponse.json({
+    message: 'This endpoint requires POST method',
+    debug: {
+      endpoint: '/api/ai/explain',
+      expectedMethod: 'POST',
+      receivedMethod: 'GET',
+      timestamp: new Date().toISOString(),
+      environment: {
+        hasGroqApiKey: !!apiKey,
+        groqApiKeyPrefix: apiKey ? apiKey.substring(0, 4) + '****' : null,
+        groqApiKeyLength: apiKey?.length ?? 0,
+        nodeEnv: process.env.NODE_ENV,
+        isNetlify: !!process.env.NETLIFY,
+        netlifyContext: process.env.CONTEXT,
+        awsLambdaFunction: process.env.AWS_LAMBDA_FUNCTION_NAME,
+        deployUrl: process.env.DEPLOY_URL,
+        runtime: 'nodejs',
+      },
+      allGroqEnvVars: Object.keys(process.env).filter(k =>
+        k.toLowerCase().includes('groq')
+      ),
+    }
+  }, { status: 200 }); // Return 200 for diagnostics, not 405
+}
diff --git a/frontend/components/about/CommunitySection.tsx b/frontend/components/about/CommunitySection.tsx
index bd402a44..91c38756 100644
--- a/frontend/components/about/CommunitySection.tsx
+++ b/frontend/components/about/CommunitySection.tsx
@@ -2,31 +2,34 @@
 
 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-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="container-main mb-12 text-center">
-                <GradientBadge icon={MessageCircle} text="Community Love" className="mb-4" />
-                
-                <SectionHeading 
-                    title="Approved by"
-                    highlight="Survivors"
-                    subtitle="Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers."
+                <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-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" />
 
@@ -60,7 +63,7 @@ export function CommunitySection() {
                             hover:text-[#1e5eff] dark:hover:text-[#ff2d55]"
                     >
                         <Github size={12} />
-                        Join Discussion
+                        {t("joinDiscussion")}
                         <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
                     </Link>
                 </div>
@@ -77,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
@@ -88,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-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">
-                    We read every <span className="hidden md:inline">single </span>thread
+                    {t("readThreads")}
                 </p>
             </div>
 
diff --git a/frontend/components/about/FeaturesSection.tsx b/frontend/components/about/FeaturesSection.tsx
index 84eec101..093bd2c9 100644
--- a/frontend/components/about/FeaturesSection.tsx
+++ b/frontend/components/about/FeaturesSection.tsx
@@ -3,7 +3,8 @@
 import { useState, useEffect } from "react"
 import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
 import { Link } from "@/i18n/routing"
-import { 
+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,
@@ -15,8 +16,8 @@ import { SectionHeading } from "@/components/ui/section-heading"
 
 interface Feature {
     icon: LucideIcon
-    label: string
-    desc: string
+    labelKey: string
+    descKey: string
     x: number
     y: number
     size: number
@@ -29,26 +30,6 @@ interface Page {
     features: Feature[]
 }
 
-const translations: Record<string, string> = {
-    "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",
-    "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.",
-    "blog.title": "Blog",
-    "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",
-    "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.",
-}
-
-const t = (key: string) => translations[key] || key
-
 const decorativeDots = [
     { x: '5%', y: '20%', size: 8 },
     { x: '10%', y: '75%', size: 6 },
@@ -70,10 +51,10 @@ const pages: Page[] = [
         icon: MessageCircle,
         href: "/q&a",
         features: [
-            { icon: Globe, label: "3 Languages", desc: "EN, UK & PL supported", x: -120, y: -120, size: 88 },
-            { icon: Cpu, label: "AI Helper", desc: "Select text for AI explain", x: 120, y: -120, size: 88 },
-            { icon: Lightbulb, label: "Smart Cache", desc: "Highlights learned terms", x: -120, y: 120, size: 88 },
-            { icon: Search, label: "Tech Filter", desc: "React, Git, JS & more", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
     {
@@ -81,10 +62,10 @@ const pages: Page[] = [
         icon: Brain,
         href: "/quizzes",
         features: [
-            { icon: Clock, label: "Smart Timer", desc: "Race against the total time", x: -120, y: -120, size: 88 },
-            { icon: Shield, label: "Anti-Cheat", desc: "Focus loss detection", x: 120, y: -120, size: 88 },
-            { icon: Save, label: "Auto Sync", desc: "Saves progress post-login", x: -120, y: 120, size: 88 },
-            { icon: BarChart3, label: "Tracking", desc: "Best scores & attempts", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
     {
@@ -92,10 +73,10 @@ const pages: Page[] = [
         icon: Trophy,
         href: "/leaderboard",
         features: [
-            { icon: Medal, label: "The Podium", desc: "Top 3 exclusive spotlight", x: -120, y: -120, size: 88 },
-            { icon: Globe, label: "Global Rank", desc: "Compete worldwide", x: 120, y: -120, size: 88 },
-            { icon: Zap, label: "XP System", desc: "Points for every answer", x: -120, y: 120, size: 88 },
-            { icon: Activity, label: "Live Feed", desc: "Real-time rank updates", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
     {
@@ -103,10 +84,10 @@ const pages: Page[] = [
         icon: User,
         href: "/dashboard",
         features: [
-            { icon: BarChart3, label: "Stats Hub", desc: "Visualize your growth", x: -120, y: -120, size: 88 },
-            { icon: History, label: "History", desc: "Track learning streaks", x: 120, y: -120, size: 88 },
-            { icon: UserCircle, label: "Identity", desc: "Manage role & profile", x: -120, y: 120, size: 88 },
-            { icon: Bell, label: "Reminders", desc: "Finish incomplete quizzes", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
     {
@@ -114,10 +95,10 @@ const pages: Page[] = [
         icon: BookOpen,
         href: "/blog",
         features: [
-            { icon: TrendingUp, label: "Tech Trends", desc: "Stay ahead of the curve", x: -120, y: -120, size: 88 },
-            { icon: PenTool, label: "Tutorials", desc: "Step-by-step guides", x: 120, y: -120, size: 88 },
-            { icon: BookOpen, label: "Deep Dives", desc: "In-depth analysis", x: -120, y: 120, size: 88 },
-            { icon: Users, label: "Community", desc: "Written by developers", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
     {
@@ -125,24 +106,24 @@ const pages: Page[] = [
         icon: ShoppingBag,
         href: "/shop",
         features: [
-            { icon: Sparkles, label: "New Drops", desc: "Regular fresh content", x: -120, y: -120, size: 88 },
-            { icon: Tag, label: "Curated", desc: "Dev-focused collections", x: 120, y: -120, size: 88 },
-            { icon: CreditCard, label: "Checkout", desc: "Seamless Stripe flow", x: -120, y: 120, size: 88 },
-            { icon: Package, label: "Premium", desc: "High-quality material", x: 120, y: 120, size: 88 },
+            { 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 },
         ]
     },
 ]
 
-function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; index: number; href: string; isMobile: boolean }) {
+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
-    
+
     const scaleX = isMobile ? 0.55 : 1
     const scaleY = isMobile ? 1.3 : 1
     const posX = feature.x * scaleX
     const posY = feature.y * scaleY
-    
+
     const shouldReduceMotion = useReducedMotion()
 
     return (
@@ -150,10 +131,10 @@ function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; i
             className="absolute"
             style={{ left: '50%', top: '50%' }}
             initial={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
-            animate={{ 
-                x: `calc(-50% + ${posX}%)`, 
+            animate={{
+                x: `calc(-50% + ${posX}%)`,
                 y: `calc(-50% + ${posY}%)`,
-                opacity: 1, 
+                opacity: 1,
                 scale: 1,
             }}
             exit={{ x: '-50%', y: '-50%', opacity: 0, scale: 0 }}
@@ -164,20 +145,20 @@ function FeatureBubble({ feature, index, href, isMobile }: { feature: Feature; i
                 scale: { delay: 0.1 + index * 0.08, duration: 0.5, type: "spring", bounce: 0.4 },
             }}
         >
-            <div 
+            <div
                 className="animate-float motion-reduce:animate-none"
                 style={{ animationDelay: `${floatDelay}s`, animationDuration: `${floatDuration}s` }}
             >
                 <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 
+                        <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">{feature.label}</div>
-                            <div className="text-[10px] md:text-xs text-gray-500 dark:text-gray-400">{feature.desc}</div>
+                            <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>
                 </Link>
@@ -275,16 +256,18 @@ function ConnectingLines() {
     )
 }
 
-function TabButton({ 
-    page, 
-    isActive, 
+function TabButton({
+    page,
+    isActive,
     onClick,
-    onKeyDown
-}: { 
-    page: Page; 
-    isActive: boolean; 
-    onClick: () => void 
+    onKeyDown,
+    t
+}: {
+    page: Page;
+    isActive: boolean;
+    onClick: () => void
     onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void
+    t: (key: string) => string
 }) {
     return (
         <button
@@ -320,8 +303,9 @@ function TabButton({
 }
 
 export function FeaturesSection() {
+    const t = useTranslations("about.features")
     const [activeTab, setActiveTab] = useState("qa")
-    const [isMobile, setIsMobile] = useState(() => 
+    const [isMobile, setIsMobile] = useState(() =>
         typeof window !== "undefined" ? window.innerWidth < 768 : false
     )
     const activePage = pages.find(p => p.id === activeTab) || pages[0]
@@ -350,13 +334,13 @@ export function FeaturesSection() {
     return (
         <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 
+                <SectionHeading
                     title={t("title")}
                     highlight={t("titleHighlight")}
                     subtitle={t("subtitle")}
@@ -365,7 +349,7 @@ export function FeaturesSection() {
                 <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} />
@@ -385,11 +369,12 @@ export function FeaturesSection() {
                         >
                             {activePage.features.map((feature, i) => (
                                 <FeatureBubble
-                                    key={feature.label}
+                                    key={feature.labelKey}
                                     feature={feature}
                                     index={i}
                                     href={activePage.href}
                                     isMobile={isMobile}
+                                    t={t}
                                 />
                             ))}
                         </motion.div>
@@ -405,6 +390,7 @@ export function FeaturesSection() {
                                 isActive={activeTab === page.id}
                                 onClick={() => setActiveTab(page.id)}
                                 onKeyDown={(e) => onTabKeyDown(e, index)}
+                                t={t}
                             />
                         ))}
                     </div>
diff --git a/frontend/components/about/HeroSection.tsx b/frontend/components/about/HeroSection.tsx
index f502daa4..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,55 +20,55 @@ 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-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-[#1e5eff]/70 dark:from-[#ff2d55] dark:to-[#ff2d55]/70">
-                Debug your skills <br/>
-              </span> before the recruiter does.
+                {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-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"
@@ -76,10 +79,10 @@ export function HeroSection({ stats }: { stats?: PlatformStats }) {
 
         <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>
 
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 d7490235..cd0d0233 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -3,46 +3,63 @@ import { useState } from "react"
 import { motion } from "framer-motion"
 import { Check, Heart, X, Sparkles, Server, ArrowRight } from "lucide-react"
 import Link from "next/link"
-import type { Sponsor } from "@/lib/about/github-sponsors" 
+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-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="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 }}
                     >
                         <h2 id="pricing-heading" className="sr-only">Pricing</h2>
-                        <GradientBadge icon={Sparkles} text="No Hidden Fees" className="mb-4" />
+                        <GradientBadge icon={Sparkles} text={t("badge")} className="mb-4" />
                     </motion.div>
-                    
-                    <SectionHeading 
-                        title="Invest in your brain,"
-                        highlight="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."
+
+                    <SectionHeading
+                        title={t("title")}
+                        highlight={t("titleHighlight")}
+                        subtitle={t("subtitle")}
                     />
                 </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 
+
+                    <motion.div
                         whileHover={{ y: -5 }}
                         onMouseEnter={() => setActiveShape("brackets")}
                         onMouseLeave={() => setActiveShape(null)}
@@ -51,21 +68,16 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         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-4xl lg: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" aria-hidden="true">
                                         <Check size={12} />
@@ -77,16 +89,16 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                                     <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 }}
                         onMouseEnter={() => setActiveShape("heart")}
                         onMouseLeave={() => setActiveShape(null)}
@@ -99,28 +111,23 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         <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 
+                                {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-4xl lg: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 Developers",
-                                "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]" aria-hidden="true">
                                         <Sparkles size={12} />
@@ -132,30 +139,30 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                                     <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" aria-hidden="true" />
+                            {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-400 dark:text-neutral-600 text-[10px] mb-16 font-mono max-w-lg mx-auto leading-relaxed">
-                    *No developers were harmed in the making of this pricing table. Only caffeine levels were impacted.
+                    {t("disclaimer")}
                 </p>
 
                 <SponsorsWall sponsors={sponsors} />
-                
+
             </div>
         </section>
     )
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index 6ea620c2..56497c08 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -4,6 +4,7 @@ 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"
@@ -15,15 +16,16 @@ 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="mb-4 opacity-100">
-          <GradientBadge icon={Sparkles} text="Latest Contributors" />
+          <GradientBadge icon={Sparkles} text={t("badge")} />
       </div>
 
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, y: 10 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
@@ -36,36 +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="Become a sponsor to claim your spot"
             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" 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" 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">
-            Join the club
+            {t("joinClub")}
         </Link>
 
       </motion.div>
 
       <p className="mt-4 text-[10px] text-gray-500 dark:text-neutral-500 font-mono">
-         100% of funds go to server costs & coffee
+         {t("fundsNote")}
       </p>
 
     </div>
diff --git a/frontend/components/about/TopicsSection.tsx b/frontend/components/about/TopicsSection.tsx
index 208b0867..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-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 lg:text-6xl font-black text-black dark:text-white tracking-tighter">
-                                Master your <br />
+                                {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">
-                                    entire stack
+                                    {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/messages/en.json b/frontend/messages/en.json
index 93e157c2..039b54a2 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -578,6 +578,166 @@
     }
   },
   "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": {
+      "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"
+    },
+    "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",
@@ -665,7 +825,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"
   },
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index fa39bc30..00072266 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -578,7 +578,166 @@
     }
   },
   "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": {
+      "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ę"
+    },
+    "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",
@@ -666,14 +825,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": {
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index 78c073cc..b359335f 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -35,7 +35,7 @@
     "login": "Увійти",
     "logout": "Вийти",
     "signup": "Зареєструватися",
-    "dashboard": "Панель"
+    "dashboard": "Панель користувача"
   },
   "homepage": {
     "title": "DevLovers",
@@ -578,7 +578,166 @@
     }
   },
   "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": {
+      "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% коштів йде на сервери та каву"
+    },
+    "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": "Сторінку не знайдено",
@@ -666,14 +825,19 @@
       "showPassword": "Показати пароль",
       "hidePassword": "Сховати пароль",
       "show": "Показати",
-      "hide": "Сховати"
+      "hide": "Сховати",
+      "validation": {
+        "required": "Будь ласка, заповніть це поле",
+        "invalidEmail": "Будь ласка, введіть коректну email адресу",
+        "passwordTooShort": "Пароль має містити мінімум {minLength} символів"
+      }
     },
     "divider": "або"
   },
   "dashboard": {
     "metaTitle": "Панель | DevLovers",
     "metaDescription": "Відстежуйте свій прогрес та результати квізів.",
-    "title": "Панель",
+    "title": "Кабінет користувача",
     "subtitle": "З поверненням на вашу навчальну площадку.",
     "supportLink": "Підтримка та відгуки",
     "profile": {

From ab1f2c377a0b4ce332b0b321f8f187cfbcf0ad6f Mon Sep 17 00:00:00 2001
From: tetiana zorii <tanyusha.zoriy@gmail.com>
Date: Sat, 31 Jan 2026 03:43:57 -0500
Subject: [PATCH 2/3] 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
---
 frontend/app/api/ai/explain/route.ts         | 198 ++++++-------------
 frontend/components/about/PricingSection.tsx |   2 +-
 frontend/components/about/SponsorsWall.tsx   |   2 +-
 frontend/messages/en.json                    |   4 +-
 frontend/messages/pl.json                    |   4 +-
 frontend/messages/uk.json                    |   6 +-
 6 files changed, 69 insertions(+), 147 deletions(-)

diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index 9cd05f7b..68d0024c 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -1,7 +1,6 @@
 export const runtime = 'nodejs';
 
 import { NextRequest, NextResponse } from 'next/server';
-import Groq from 'groq-sdk';
 import { z } from 'zod';
 import {
   createExplainPrompt,
@@ -10,92 +9,51 @@ import {
 import { getClientIp } from '@/lib/security/client-ip';
 
 // =============================================================================
-// DEBUG LOGGING - TEMPORARY (remove after debugging)
+// SERVER-SIDE LOGGING (sanitized - no sensitive data exposed)
 // =============================================================================
 function logEnvironmentDiagnostics() {
   const apiKey = process.env.GROQ_API_KEY;
-  console.log('=== NETLIFY FUNCTION DIAGNOSTICS ===');
-  console.log('[ENV] GROQ_API_KEY exists:', !!apiKey);
-  console.log('[ENV] GROQ_API_KEY prefix:', apiKey ? apiKey.substring(0, 4) + '****' : 'N/A');
-  console.log('[ENV] GROQ_API_KEY length:', apiKey?.length ?? 0);
+  console.log('[ENV] GROQ_API_KEY configured:', !!apiKey);
   console.log('[ENV] NODE_ENV:', process.env.NODE_ENV);
-  console.log('[ENV] NETLIFY:', process.env.NETLIFY);
-  console.log('[ENV] AWS_LAMBDA_FUNCTION_NAME:', process.env.AWS_LAMBDA_FUNCTION_NAME);
-  console.log('[ENV] CONTEXT:', process.env.CONTEXT); // Netlify deploy context
-  console.log('[ENV] DEPLOY_URL:', process.env.DEPLOY_URL);
-  console.log('[RUNTIME] Expected: nodejs (set via export)');
-  console.log('[ENV] All GROQ-related vars:', Object.keys(process.env).filter(k => k.toLowerCase().includes('groq')));
-  console.log('====================================');
 }
 
 function logRequestDiagnostics(request: NextRequest) {
-  console.log('=== REQUEST DIAGNOSTICS ===');
   console.log('[REQ] Method:', request.method);
-  console.log('[REQ] URL:', request.url);
-  console.log('[REQ] Headers:');
-  request.headers.forEach((value, key) => {
-    // Redact sensitive headers
-    const safeValue = ['authorization', 'cookie', 'x-api-key'].includes(key.toLowerCase())
-      ? '[REDACTED]'
-      : value;
-    console.log(`  ${key}: ${safeValue}`);
-  });
-  console.log('===========================');
+  console.log('[REQ] URL path:', new URL(request.url).pathname);
 }
 
-function logBodyParsingResult(success: boolean, body?: unknown, error?: unknown) {
-  console.log('=== BODY PARSING ===');
+function logBodyParsingResult(success: boolean, error?: unknown) {
   console.log('[BODY] Parse success:', success);
-  if (success && body) {
-    console.log('[BODY] Parsed body:', JSON.stringify(body, null, 2));
-  }
   if (error) {
-    console.log('[BODY] Parse error:', error instanceof Error ? error.message : String(error));
+    console.log('[BODY] Parse error:', error instanceof Error ? error.message : 'Unknown error');
   }
-  console.log('====================');
 }
 
 function logGroqInitialization(success: boolean, error?: unknown) {
-  console.log('=== GROQ SDK INITIALIZATION ===');
   console.log('[GROQ] Init success:', success);
   if (error) {
     const err = error as Error & { status?: number; code?: string };
-    console.log('[GROQ] Init error name:', err.name);
-    console.log('[GROQ] Init error message:', err.message);
-    console.log('[GROQ] Init error status:', err.status);
-    console.log('[GROQ] Init error code:', err.code);
+    console.log('[GROQ] Init error:', err.name, err.message);
   }
-  console.log('===============================');
 }
 
 function logGroqApiCall(phase: 'start' | 'success' | 'error', details?: unknown) {
-  console.log(`=== GROQ API CALL (${phase.toUpperCase()}) ===`);
   if (phase === 'start') {
-    console.log('[GROQ] Starting API call to llama3-70b-8192');
+    console.log('[GROQ] Starting API call');
   } else if (phase === 'success') {
     console.log('[GROQ] API call successful');
-    if (details && typeof details === 'object' && 'choices' in details) {
-      const response = details as { choices?: Array<{ message?: { content?: string } }> };
-      console.log('[GROQ] Response has content:', !!response.choices?.[0]?.message?.content);
-      console.log('[GROQ] Content length:', response.choices?.[0]?.message?.content?.length ?? 0);
-    }
   } else if (phase === 'error') {
-    const err = details as Error & { status?: number; code?: string; headers?: Record<string, string> };
-    console.log('[GROQ] API error name:', err?.name);
-    console.log('[GROQ] API error message:', err?.message);
-    console.log('[GROQ] API error status:', err?.status);
-    console.log('[GROQ] API error code:', err?.code);
-    console.log('[GROQ] API error stack:', err?.stack?.substring(0, 500));
+    const err = details as Error & { status?: number; code?: string };
+    console.log('[GROQ] API error:', err?.name, err?.message);
   }
-  console.log('=====================================');
 }
 // =============================================================================
 
 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() {
@@ -122,7 +80,12 @@ const requestSchema = z.object({
 });
 
 
-function checkRateLimit(ip: string): { allowed: boolean; remaining: number; resetIn: number } {
+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 };
+  }
+
   cleanupRateLimiter();
 
   const now = Date.now();
@@ -130,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++;
@@ -143,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,
   };
 }
 
@@ -173,33 +137,23 @@ function parseExplanationResponse(content: string): ExplanationResponse {
 }
 
 export async function POST(request: NextRequest) {
-  // DEBUG: Log environment diagnostics on every request
   logEnvironmentDiagnostics();
   logRequestDiagnostics(request);
 
   const apiKey = process.env.GROQ_API_KEY;
   if (!apiKey) {
-    console.error('[FATAL] GROQ_API_KEY is not configured');
-    console.error('[DEBUG] All env var keys:', Object.keys(process.env).sort().join(', '));
+    console.error('[FATAL] GROQ_API_KEY is not configured. Check environment variables.');
     return NextResponse.json(
       {
         error: 'AI service not configured',
         code: 'SERVICE_UNAVAILABLE',
-        debug: {
-          hasKey: false,
-          nodeEnv: process.env.NODE_ENV,
-          isNetlify: !!process.env.NETLIFY,
-          context: process.env.CONTEXT,
-        }
       },
       { status: 503 }
     );
   }
 
   const clientIp = getClientIp(request) ?? 'unknown';
-  console.log('[DEBUG] Client IP:', clientIp);
   const rateLimit = checkRateLimit(clientIp);
-  console.log('[DEBUG] Rate limit check:', rateLimit);
 
   if (!rateLimit.allowed) {
     const resetMinutes = Math.ceil(rateLimit.resetIn / 60000);
@@ -220,12 +174,21 @@ export async function POST(request: NextRequest) {
     );
   }
 
+  // Safe JSON body parsing for Netlify
   let body: unknown;
   try {
-    body = await request.json();
-    logBodyParsingResult(true, body);
+    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, undefined, parseError);
+    logBodyParsingResult(false, parseError);
     return NextResponse.json(
       { error: 'Invalid JSON body', code: 'INVALID_JSON' },
       { status: 400 }
@@ -234,7 +197,6 @@ export async function POST(request: NextRequest) {
 
   const validationResult = requestSchema.safeParse(body);
   if (!validationResult.success) {
-    console.log('[DEBUG] Validation failed:', validationResult.error.format());
     return NextResponse.json(
       {
         error: 'Invalid request',
@@ -246,23 +208,38 @@ export async function POST(request: NextRequest) {
   }
 
   const { term, context } = validationResult.data;
-  console.log('[DEBUG] Validated request - term:', term, 'context:', context?.substring(0, 50));
 
-  // DEBUG: Wrap Groq client initialization in try/catch
-  let groq: Groq;
+  // 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',
-        debug: {
-          errorName: initError instanceof Error ? initError.name : 'Unknown',
-          errorMessage: initError instanceof Error ? initError.message : String(initError),
-        }
       },
       { status: 503 }
     );
@@ -270,7 +247,6 @@ export async function POST(request: NextRequest) {
 
   try {
     const prompt = createExplainPrompt({ term, context });
-    console.log('[DEBUG] Prompt created, length:', prompt.length);
 
     logGroqApiCall('start');
     const chatCompletion = await groq.chat.completions.create({
@@ -294,9 +270,7 @@ export async function POST(request: NextRequest) {
       throw new Error('No content in response');
     }
 
-    console.log('[DEBUG] Parsing response, raw content length:', content.length);
     const explanation = parseExplanationResponse(content);
-    console.log('[DEBUG] Successfully parsed explanation');
 
     return NextResponse.json(explanation, {
       status: 200,
@@ -308,22 +282,7 @@ export async function POST(request: NextRequest) {
     });
   } catch (error) {
     logGroqApiCall('error', error);
-    console.error('Groq API error:', error);
-
-    const errorMessage =
-      error instanceof Error ? error.message : 'Unknown error';
-    const errorName = error instanceof Error ? error.name : 'UnknownError';
-
-    // Enhanced error logging
-    const errorDetails = {
-      name: errorName,
-      message: errorMessage,
-      stack: error instanceof Error ? error.stack : undefined,
-      status: (error as { status?: number }).status,
-      code: (error as { code?: string }).code,
-      type: (error as { type?: string }).type,
-    };
-    console.error('[DEBUG] Full error details:', JSON.stringify(errorDetails, null, 2));
+    console.error('[GROQ_ERROR]', error instanceof Error ? error.message : 'Unknown error');
 
     if (error instanceof Error) {
       if (
@@ -331,11 +290,11 @@ 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',
-            debug: { keyPrefix: apiKey.substring(0, 4) }
           },
           { status: 503 }
         );
@@ -354,7 +313,6 @@ export async function POST(request: NextRequest) {
           {
             error: 'AI model not available',
             code: 'MODEL_ERROR',
-            details: errorMessage,
           },
           { status: 503 }
         );
@@ -365,50 +323,8 @@ export async function POST(request: NextRequest) {
       {
         error: 'Failed to generate explanation',
         code: 'AI_ERROR',
-        details: errorMessage, // Always include for debugging (remove in production)
-        debug: {
-          errorName,
-          nodeEnv: process.env.NODE_ENV,
-          isNetlify: !!process.env.NETLIFY,
-        }
       },
       { status: 500 }
     );
   }
 }
-
-// =============================================================================
-// DEBUG: GET handler for diagnostics (catches 405 errors, provides health check)
-// Remove after debugging
-// =============================================================================
-export async function GET(request: NextRequest) {
-  console.log('=== GET REQUEST TO /api/ai/explain (should be POST) ===');
-  logEnvironmentDiagnostics();
-  logRequestDiagnostics(request);
-
-  const apiKey = process.env.GROQ_API_KEY;
-
-  return NextResponse.json({
-    message: 'This endpoint requires POST method',
-    debug: {
-      endpoint: '/api/ai/explain',
-      expectedMethod: 'POST',
-      receivedMethod: 'GET',
-      timestamp: new Date().toISOString(),
-      environment: {
-        hasGroqApiKey: !!apiKey,
-        groqApiKeyPrefix: apiKey ? apiKey.substring(0, 4) + '****' : null,
-        groqApiKeyLength: apiKey?.length ?? 0,
-        nodeEnv: process.env.NODE_ENV,
-        isNetlify: !!process.env.NETLIFY,
-        netlifyContext: process.env.CONTEXT,
-        awsLambdaFunction: process.env.AWS_LAMBDA_FUNCTION_NAME,
-        deployUrl: process.env.DEPLOY_URL,
-        runtime: 'nodejs',
-      },
-      allGroqEnvVars: Object.keys(process.env).filter(k =>
-        k.toLowerCase().includes('groq')
-      ),
-    }
-  }, { status: 200 }); // Return 200 for diagnostics, not 405
-}
diff --git a/frontend/components/about/PricingSection.tsx b/frontend/components/about/PricingSection.tsx
index cd0d0233..1e6382ca 100644
--- a/frontend/components/about/PricingSection.tsx
+++ b/frontend/components/about/PricingSection.tsx
@@ -46,7 +46,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
                         initial={{ opacity: 0, y: 10 }}
                         whileInView={{ opacity: 1, y: 0 }}
                     >
-                        <h2 id="pricing-heading" className="sr-only">Pricing</h2>
+                        <h2 id="pricing-heading" className="sr-only">{t("heading")}</h2>
                         <GradientBadge icon={Sparkles} text={t("badge")} className="mb-4" />
                     </motion.div>
 
diff --git a/frontend/components/about/SponsorsWall.tsx b/frontend/components/about/SponsorsWall.tsx
index 56497c08..8eb1cba7 100644
--- a/frontend/components/about/SponsorsWall.tsx
+++ b/frontend/components/about/SponsorsWall.tsx
@@ -49,7 +49,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
             href="https://github.com/sponsors/DevLoversTeam"
             target="_blank"
             rel="noopener noreferrer"
-            aria-label="Become a sponsor to claim your spot"
+            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" aria-hidden="true" />
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 039b54a2..152c0fa7 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -672,6 +672,7 @@
       }
     },
     "pricing": {
+      "heading": "Pricing",
       "badge": "No Hidden Fees",
       "title": "Invest in your brain,",
       "titleHighlight": "not our subscriptions.",
@@ -712,7 +713,8 @@
       "emptySlot": "You?",
       "yourSpot": "Your Spot",
       "joinClub": "Join the club",
-      "fundsNote": "100% of funds go to server costs & coffee"
+      "fundsNote": "100% of funds go to server costs & coffee",
+      "ctaAriaLabel": "Become a sponsor to claim your spot"
     },
     "community": {
       "badge": "Community Love",
diff --git a/frontend/messages/pl.json b/frontend/messages/pl.json
index 00072266..50421909 100644
--- a/frontend/messages/pl.json
+++ b/frontend/messages/pl.json
@@ -672,6 +672,7 @@
       }
     },
     "pricing": {
+      "heading": "Cennik",
       "badge": "Bez ukrytych opłat",
       "title": "Inwestuj w swój mózg,",
       "titleHighlight": "nie w nasze subskrypcje.",
@@ -712,7 +713,8 @@
       "emptySlot": "Ty?",
       "yourSpot": "Twoje miejsce",
       "joinClub": "Dołącz do klubu",
-      "fundsNote": "100% środków idzie na serwery i kawę"
+      "fundsNote": "100% środków idzie na serwery i kawę",
+      "ctaAriaLabel": "Zostań sponsorem i zajmij swoje miejsce"
     },
     "community": {
       "badge": "Miłość społeczności",
diff --git a/frontend/messages/uk.json b/frontend/messages/uk.json
index b359335f..05a51ab0 100644
--- a/frontend/messages/uk.json
+++ b/frontend/messages/uk.json
@@ -672,6 +672,7 @@
       }
     },
     "pricing": {
+      "heading": "Тарифи",
       "badge": "Без прихованих платежів",
       "title": "Інвестуй у свій мозок,",
       "titleHighlight": "а не в наші підписки.",
@@ -712,13 +713,14 @@
       "emptySlot": "Ти?",
       "yourSpot": "Твоє місце",
       "joinClub": "Приєднатись до клубу",
-      "fundsNote": "100% коштів йде на сервери та каву"
+      "fundsNote": "100% коштів йде на сервери та каву",
+      "ctaAriaLabel": "Стань спонсором і отримай своє місце"
     },
     "community": {
       "badge": "Любов спільноти",
       "title": "Схвалено",
       "titleHighlight": "тими, хто вижив",
-      "subtitle": "Приєднуйся до тисяч розробників, які які замінили здогадки на результат. Реальні відгуки від реальних інженерів.",
+      "subtitle": "Приєднуйся до тисяч розробників, які замінили здогадки на результат. Реальні відгуки від реальних інженерів.",
       "joinDiscussion": "Приєднатись до дискусії",
       "successStory": "Маєш історію успіху або пропозицію?",
       "readThreads": "Ми читаємо кожен тред"

From a3f28b4b1698aaf83e86c03bb676d772948bfa98 Mon Sep 17 00:00:00 2001
From: tetiana zorii <tanyusha.zoriy@gmail.com>
Date: Sat, 31 Jan 2026 03:50:39 -0500
Subject: [PATCH 3/3] feat(api): add GET health check endpoint for ai-explain

---
 frontend/app/api/ai/explain/route.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/app/api/ai/explain/route.ts b/frontend/app/api/ai/explain/route.ts
index 68d0024c..d91ff8b5 100644
--- a/frontend/app/api/ai/explain/route.ts
+++ b/frontend/app/api/ai/explain/route.ts
@@ -328,3 +328,17 @@ export async function POST(request: NextRequest) {
     );
   }
 }
+
+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 }
+  );
+}