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

frontend/components/about/InteractiveGame.tsx

@@ -475,26 +475,26 @@ export function InteractiveGame() {
                 <div
                   className={`h-2 w-2 rounded-full ${mode === 'playing' && !gameOver ? 'bg-green-500' : 'bg-red-500'}`}
                 />
-                <span className="font-mono text-[8px] font-bold text-neutral-400 uppercase">
+                <span className="font-mono text-[9px] font-bold text-neutral-400 uppercase">
                   {t(getCurrentLevelKey(score))}
                 </span>
               </div>
 
-              <div className="flex items-center gap-3 md:absolute md:left-1/2 md:-translate-x-1/2 md:gap-6">
+              <div className="flex items-center gap-2 md:absolute md:left-1/2 md:-translate-x-1/2 md:gap-6">
                 <div className="flex flex-col items-center">
-                  <span className="text-[7px] font-bold tracking-widest text-neutral-400 uppercase md:text-[8px]">
+                  <span className="text-[9px] font-bold tracking-widest text-neutral-400 uppercase md:text-[8px]">
                     {t('high')}
                   </span>
                   <span
                     suppressHydrationWarning
-                    className="font-mono text-[10px] font-bold text-neutral-500 md:text-xs"
+                    className="font-mono text-[11px] font-bold text-neutral-500 md:text-xs"
                   >
                     {highScore.toString().padStart(3, '0')}
                   </span>
                 </div>
                 <div className="h-3 w-[1px] bg-neutral-300 md:h-4 dark:bg-white/20" />
                 <div className="flex flex-col items-center">
-                  <span className="text-[7px] font-bold tracking-widest text-[#ff005b] uppercase md:text-[8px]">
+                  <span className="text-[9px] font-bold tracking-widest text-[#ff005b] uppercase md:text-[8px]">
                     {t('score')}
                   </span>
                   <span className="font-mono text-sm leading-none font-black text-neutral-800 md:text-lg dark:text-white">
@@ -508,9 +508,9 @@ export function InteractiveGame() {
                   e.stopPropagation();
                   exitGame();
                 }}
-                className="-mr-1 p-1.5 transition-colors hover:text-[#ff005b] md:-mr-2 md:p-2"
+                className="-mr-1 p-2 transition-colors hover:text-[#ff005b] md:-mr-2"
               >
-                <X size={14} className="text-neutral-400 md:h-4 md:w-4" />
+                <X size={16} className="text-neutral-400 md:h-4 md:w-4" />
               </button>
             </div>
 

frontend/components/about/PricingSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { motion } from 'framer-motion';
-import { ArrowRight, Check, Heart, Server, Sparkles, X } from 'lucide-react';
+import { ArrowRight, BadgeDollarSign, Check, Heart, Server, Sparkles, X } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -46,7 +46,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
         aria-hidden="true"
       />
 
-      <div className="pointer-events-none absolute inset-0 z-0">
+      <div className="pointer-events-none absolute inset-0 z-0 hidden md:block">
         <ParticleCanvas activeShape={activeShape} className="h-full w-full" />
       </div>
 
@@ -59,7 +59,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
             <h2 id="pricing-heading" className="sr-only">
               {t('heading')}
             </h2>
-            <GradientBadge icon={Sparkles} text={t('badge')} className="mb-4" />
+            <GradientBadge icon={BadgeDollarSign} text={t('badge')} className="mb-4" />
           </motion.div>
 
           <SectionHeading
@@ -205,7 +205,7 @@ export function PricingSection({ sponsors = [] }: PricingSectionProps) {
           </motion.div>
         </div>
 
-        <p className="mx-auto mb-16 max-w-lg text-center font-mono text-[10px] leading-relaxed text-gray-400 dark:text-neutral-600">
+        <p className="mx-auto mb-16 max-w-lg text-center font-mono text-xs leading-relaxed text-gray-400 dark:text-neutral-600">
           {t('disclaimer')}
         </p>
 

frontend/components/about/SponsorsWall.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Crown, Plus, Sparkles } from 'lucide-react';
+import { Crown, Heart, Plus } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
@@ -23,7 +23,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
   return (
     <div className="mt-16 flex w-full flex-col items-center">
       <div className="mb-4 opacity-100">
-        <GradientBadge icon={Sparkles} text={t('badge')} />
+        <GradientBadge icon={Heart} text={t('badge')} />
       </div>
 
       <motion.div
@@ -75,7 +75,7 @@ export function SponsorsWall({ sponsors = [] }: SponsorsWallProps) {
         </Link>
       </motion.div>
 
-      <p className="mt-4 font-mono text-[10px] text-gray-500 dark:text-neutral-500">
+      <p className="mt-4 font-mono text-[10px] text-gray-400 dark:text-neutral-600">
         {t('fundsNote')}
       </p>
     </div>

frontend/components/theme/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
@@ -45,13 +45,15 @@ export function ThemeToggle() {
           aria-label={t(labelKey)}
           className="theme-toggle-btn relative flex h-7 w-7 items-center justify-center rounded-full"
         >
-          {theme === value && (
-            <motion.div
-              layoutId="theme-active"
-              className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-neutral-800"
-              transition={{ type: 'spring', stiffness: 400, damping: 30 }}
-            />
-          )}
+          <AnimatePresence mode="wait">
+            {theme === value && (
+              <motion.div
+                layoutId="theme-indicator"
+                className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-neutral-800"
+                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+              />
+            )}
+          </AnimatePresence>
           <Icon className="relative z-10 h-4 w-4 text-neutral-500 transition-colors dark:text-neutral-400" />
         </button>
       ))}

frontend/data/about.ts

@@ -60,7 +60,7 @@ export const TOPICS = [
     color:
       'group-hover:border-[#F05032]/50 dark:group-hover:border-[#F05032]/50 group-hover:bg-[#F05032]/10',
     glow: 'bg-[#F05032]',
-    href: '/q&a',
+    href: '/q&a/?category=git',
   },
   {
     id: 'html',

frontend/lib/about/stats.ts

@@ -43,7 +43,7 @@ export const getPlatformStats = unstable_cache(
 
     const linkedinCount = process.env.LINKEDIN_FOLLOWER_COUNT
       ? parseInt(process.env.LINKEDIN_FOLLOWER_COUNT)
-      : 1342;
+      : 1400;
 
     let totalUsers = 243;
     let solvedTests = 1890;

frontend/messages/en.json

@@ -775,7 +775,7 @@
       "disclaimer": "*No developers were harmed in the making of this pricing table. Only caffeine levels were impacted."
     },
     "sponsors": {
-      "badge": "Latest Contributors",
+      "badge": "Open Source Heroes",
       "emptySlot": "You?",
       "yourSpot": "Your Spot",
       "joinClub": "Join the club",

frontend/messages/pl.json

@@ -802,7 +802,7 @@
       "disclaimer": "*Żaden developer nie ucierpiał podczas tworzenia tej tabeli cenowej. Ucierpiał tylko poziom kofeiny."
     },
     "sponsors": {
-      "badge": "Ostatni kontrybutorzy",
+      "badge": "Bohaterowie Open Source",
       "emptySlot": "Ty?",
       "yourSpot": "Twoje miejsce",
       "joinClub": "Dołącz do klubu",

frontend/messages/uk.json

@@ -778,7 +778,7 @@
       "disclaimer": "*Жоден розробник не постраждав під час створення цієї таблиці. Постраждав лише рівень кофеїну."
     },
     "sponsors": {
-      "badge": "Останні контриб'ютори",
+      "badge": "Герої Open Source",
       "emptySlot": "Ти?",
       "yourSpot": "Твоє місце",
       "joinClub": "Приєднатись до клубу",