From 8d994f75d9c34443276cc4203fc01c0d3bedf40e Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Mon, 23 Mar 2026 11:23:44 +0300
Subject: [PATCH] fix: remove animated background from news section, fix mobile
 borders

- Remove GridBackground and ScanLine animations
- Use simple transparent blur background instead
- Remove negative margins that broke rounded corners on mobile
---
 src/components/news/NewsSection.tsx | 26 ++------------------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/components/news/NewsSection.tsx b/src/components/news/NewsSection.tsx
index c0f46f1..c132bf3 100644
--- a/src/components/news/NewsSection.tsx
+++ b/src/components/news/NewsSection.tsx
@@ -7,7 +7,6 @@ import { newsApi } from '../../api/news';
 import { useHapticFeedback } from '../../platform/hooks/useHaptic';
 import { cn } from '../../lib/utils';
 import type { NewsListItem } from '../../types/news';
-import GridBackground from './GridBackground';
 
 // --- Security: hex color validation to prevent CSS injection ---
 const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
@@ -47,24 +46,6 @@ const ArrowIcon = () => (
 
 // --- Sub-components ---
 
-function ScanLine() {
-  return (
-    <motion.div
-      className="pointer-events-none absolute left-0 right-0 top-0 z-[2] h-[2px]"
-      style={{
-        background:
-          'linear-gradient(90deg, transparent, rgba(var(--color-accent-400), 0.5), transparent)',
-      }}
-      animate={{ y: ['0%', '2000%'] }}
-      transition={{
-        duration: 4,
-        ease: 'easeInOut',
-        repeat: Infinity,
-      }}
-    />
-  );
-}
-
 interface CategoryBadgeProps {
   category: string;
   color: string;
@@ -434,11 +415,8 @@ export default function NewsSection() {
   }
 
   return (
-    <section className="relative -mx-4 overflow-hidden rounded-2xl bg-dark-950 lg:-mx-6">
-      <GridBackground />
-      <ScanLine />
-
-      <div className="relative z-[1] px-5 py-8 sm:px-6 sm:py-10">
+    <section className="relative overflow-hidden rounded-2xl bg-dark-900/50 backdrop-blur-xl">
+      <div className="px-5 py-8 sm:px-6 sm:py-10">
         {/* Header */}
         <motion.div
           variants={fadeSlideUp}