News UI polish, load-more opacity fix, and join dev arrow alignment (#529)

* news UI,load-more opacity,join dev arrow alignment fix

* prevent unexpected auto-scroll to top

Author: mdrafi28

src/components/DeveloperLinks.tsx

@@ -67,7 +67,7 @@ const DeveloperLinks = () => {
 
             {/* Arrow with enhanced animation */}
             <div className="relative z-10 flex items-center justify-center w-8 h-8 rounded-full bg-red-100 group-hover:bg-red-200 transition-colors ml-4 flex-shrink-0">
-              <span className="text-gray-600 group-hover:text-red-700 transform group-hover:translate-x-1 transition-all">
+              <span className="-mt-1 text-gray-600 group-hover:text-red-700 transform group-hover:translate-x-1 transition-all">
                 →
               </span>
             </div>

src/pages/News/NewsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useLayoutEffect } from 'react';
 import ShareModal from '@/components/ShareModal';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { getAllPosts, groupPostsByCategory, Post } from '@/utils/posts-utils';
@@ -49,6 +49,18 @@ const NewsPage: React.FC = () => {
     return params.get('q') || '';
   });
 
+  useLayoutEffect(() => {
+    if (!isLoading) {
+      const savedY = Number(sessionStorage.getItem('newsScrollY') || 0);
+      if (savedY > 0) {
+        requestAnimationFrame(() => {
+          window.scrollTo({ top: savedY, behavior: 'auto' });
+        });
+      }
+      sessionStorage.removeItem('newsScrollY');
+    }
+  }, [isLoading, activeCategory, searchTerm]);
+
   useEffect(() => {
     async function load() {
       setIsLoading(true);
@@ -127,7 +139,10 @@ const NewsPage: React.FC = () => {
 
   const hasMore = filteredPosts.length > displayCount;
 
-  const handleCategoryClick = (cat: string) => setActiveCategory(cat);
+  const handleCategoryClick = (cat: string) => {
+    sessionStorage.setItem('newsScrollY', String(window.scrollY));
+    setActiveCategory(cat);
+  };
 
   const handleShowMore = () => {
     const total = filteredPosts.length;
@@ -260,7 +275,7 @@ const NewsPage: React.FC = () => {
                   className="text-blue-500 mr-4 animate-pulse"
                   size={32}
                 />
-                <h1 className="text-8xl font-bold font-Caveat text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-600">
+                <h1 className="p-4 text-8xl font-bold font-Caveat text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-600">
                   NEWS
                 </h1>
                 <TrendingUp
@@ -296,6 +311,10 @@ const NewsPage: React.FC = () => {
                     value={searchTerm}
                     onChange={(e) => {
                       const value = e.target.value;
+                      sessionStorage.setItem(
+                        'newsScrollY',
+                        String(window.scrollY),
+                      );
                       setSearchTerm(value);
                       const catPath =
                         activeCategory === 'All'
@@ -561,7 +580,7 @@ const NewsPage: React.FC = () => {
                           Read more
                           <ArrowRight
                             size={14}
-                            className="ml-1 group-hover:translate-x-1 transition-transform duration-300"
+                            className="ml-1 mt-1 group-hover:translate-x-1 transition-transform duration-300"
                           />
                         </div>
                       </div>
@@ -584,7 +603,9 @@ const NewsPage: React.FC = () => {
                 whileHover="hover"
                 whileTap="tap"
               >
-                <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
+                <div className="relative group rounded-xl overflow-hidden">
+                  <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-xl"></div>
+                </div>
                 <span className="relative z-10">Load More Articles</span>
                 <ArrowRight
                   size={18}