redesign looking good

frontend/src/components/ArticleTicker.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
+import { Zap } from 'lucide-react'
 
 export function ArticleTicker() {
   const { data } = useQuery({
@@ -13,37 +14,35 @@ export function ArticleTicker() {
   if (articles.length === 0) return null
 
   return (
-    <div className="overflow-hidden bg-muted/50 border-y">
-      <div className="container mx-auto max-w-6xl px-4">
-        <div className="py-2 flex items-center gap-4">
-          <span className="text-sm font-semibold text-primary whitespace-nowrap">
-            Latest:
-          </span>
-          <div className="overflow-hidden flex-1 relative">
-            <div className="flex animate-marquee whitespace-nowrap">
-              {articles.map((article, index) => (
-                 <Link
-                  key={`${article.id}-${index}`}
-                   to={`/articles/${article.id}`}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline inline-block px-4"
-                >
-                  {article.title || 'No title'}
-                </Link>
-              ))}
-              {/* Duplicate for seamless scrolling */}
-              {articles.map((article, index) => (
-                 <Link
-                  key={`dup-${article.id}-${index}`}
-                   to={`/articles/${article.id}`}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline inline-block px-4"
-                >
-                  {article.title || 'No title'}
-                </Link>
-              ))}
-            </div>
+    <div className="overflow-hidden bg-foreground text-background border-b-4 border-accent">
+      <div className="py-2 flex items-center">
+        <div className="flex-shrink-0 px-4 py-1 bg-accent text-foreground font-body text-sm font-bold uppercase tracking-wider flex items-center gap-2 border-r-4 border-background z-10">
+          <Zap className="w-4 h-4" />
+          Топ вести
+        </div>
+        <div className="overflow-hidden flex-1">
+          <div className="flex animate-marquee whitespace-nowrap">
+            {articles.map((article, index) => (
+              <Link
+                key={`${article.id}-${index}`}
+                to={`/articles/${article.id}`}
+                className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
+              >
+                {article.title || 'No title'}
+              </Link>
+            ))}
+            {articles.map((article, index) => (
+              <Link
+                key={`dup-${article.id}-${index}`}
+                to={`/articles/${article.id}`}
+                className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
+              >
+                {article.title || 'No title'}
+              </Link>
+            ))}
           </div>
         </div>
       </div>
     </div>
   )
-}
+}