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

frontend/app/api/stats/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { getPlatformStats } from '@/lib/about/stats';
+
+export async function GET() {
+  try {
+    const stats = await getPlatformStats();
+    return NextResponse.json(stats);
+  } catch (error) {
+    console.error('Failed to fetch platform stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stats' },
+      { status: 500 }
+    );
+  }
+}

frontend/app/globals.css

@@ -51,6 +51,7 @@
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
+  --logo-foreground: oklch(0.25 0.08 250);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
@@ -88,6 +89,7 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
+  --logo-foreground: oklch(0.95 0.05 350);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -135,6 +137,10 @@
   }
 }
 
+.container-main {
+  @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
 .qa-accordion-item:hover,
 .qa-accordion-item:focus-within,
 .qa-accordion-item[data-state='open'] {
@@ -178,6 +184,15 @@
     width: 0%;
   }
 }
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 @keyframes shrink {
   from {
     transform: scaleX(1);
@@ -234,8 +249,12 @@
 
 /* about-community */
 @keyframes scroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 .animate-scroll {
@@ -248,8 +267,12 @@
 
 /* Vertical Marquee Animation */
 @keyframes marquee-vertical {
-  0% { transform: translateY(0); }
-  100% { transform: translateY(-50%); } /* Рухаємось на 50%, бо контент дубльовано */
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  } /* Рухаємось на 50%, бо контент дубльовано */
 }
 
 .animate-marquee-vertical {
@@ -263,9 +286,9 @@
 
 /* Hide scrollbar for horizontal scroll containers */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;  /* Chrome, Safari and Opera */
+  display: none; /* Chrome, Safari and Opera */
 }

frontend/components/auth/logoutButton.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useLocale } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { LogOut } from 'lucide-react';
-
 import { logout } from '@/lib/logout';
 
 type LogoutButtonProps = {
@@ -11,6 +11,7 @@ type LogoutButtonProps = {
 
 export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
   const locale = useLocale();
+  const t = useTranslations('navigation');
 
   const handleLogout = async () => {
     await logout();
@@ -22,9 +23,9 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
       <button
         type="button"
         onClick={handleLogout}
-        aria-label="Log out"
-        title="Log out"
-        className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+        aria-label={t('logout')}
+        title={t('logout')}
+        className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground active:bg-secondary active:text-foreground"
       >
         <LogOut className="h-5 w-5" />
       </button>
@@ -35,10 +36,31 @@ export function LogoutButton({ iconOnly = false }: LogoutButtonProps) {
     <button
       type="button"
       onClick={handleLogout}
-      className="inline-flex items-center gap-2 rounded-md bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:opacity-90"
+      className="group relative inline-flex w-fit items-center gap-2 overflow-hidden rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-all duration-500 hover:text-white active:text-white"
     >
-      <LogOut className="h-4 w-4" />
-      Log out
+      <span
+        className="absolute inset-0 opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100 group-active:opacity-100"
+        style={{
+          background:
+            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        aria-hidden="true"
+      />
+
+      <span
+        className="absolute inset-0 translate-x-[-100%] transition-transform duration-1000 ease-in-out group-hover:translate-x-[100%] group-active:translate-x-[100%]"
+        style={{
+          background:
+            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
+          transform: 'skewX(-20deg)',
+        }}
+        aria-hidden="true"
+      />
+
+      <span className="relative z-10 flex items-center gap-2">
+        <LogOut className="h-4 w-4 transition-transform duration-300 group-hover:scale-110 group-active:scale-110" />
+        {t('logout')}
+      </span>
     </button>
   );
 }

frontend/components/blog/BlogCategoryLinks.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { Link, usePathname } from '@/i18n/routing';
+import { usePathname } from '@/i18n/routing';
+import { Home } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { AnimatedNavLink } from '@/components/shared/AnimatedNavLink';
+import { HeaderButton } from '@/components/shared/HeaderButton';
 
 type Category = {
   _id: string;
@@ -43,12 +46,6 @@ export function BlogCategoryLinks({
     };
     return categoryTranslations[key] || categoryName;
   };
-  const baseLink =
-    linkClassName ||
-    'rounded-md px-3 py-2 text-sm font-medium transition-colors ' +
-      'hover:bg-secondary hover:text-foreground ' +
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
-      'focus-visible:ring-offset-2 focus-visible:ring-offset-background';
 
   const items = categories
     .map(category => ({
@@ -60,38 +57,26 @@ export function BlogCategoryLinks({
 
   return (
     <nav
-      className={cn('flex items-center gap-1', className)}
+      className={cn('flex items-center gap-2', className)}
       aria-label="Blog categories"
     >
-      <Link
-        href="/"
-        onClick={onNavigate}
-        aria-current={pathname === '/' ? 'page' : undefined}
-        className={cn(
-          baseLink,
-          pathname === '/'
-            ? 'bg-muted text-foreground'
-            : 'text-muted-foreground'
-        )}
-      >
+      <HeaderButton href="/" onClick={onNavigate} icon={Home}>
         {tNav('home')}
-      </Link>
+      </HeaderButton>
+
       {items.map(category => {
         const href = `/blog/category/${category.slug}`;
         const isActive = pathname === href;
         return (
-          <Link
+          <AnimatedNavLink
             key={category._id}
             href={href}
+            isActive={isActive}
             onClick={onNavigate}
-            aria-current={isActive ? 'page' : undefined}
-            className={cn(
-              baseLink,
-              isActive ? 'bg-muted text-foreground' : 'text-muted-foreground'
-            )}
+            className={linkClassName}
           >
             {getCategoryLabel(category.displayTitle)}
-          </Link>
+          </AnimatedNavLink>
         );
       })}
     </nav>