Improve carousel transitions and image loading for a smoother user experience

Implement fade transitions for carousel image changes and preload next images to prevent page flashing on mobile. Update Dropbox token and gallery image URLs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a8b6bc05-ce3f-463c-aa77-b87d069f3637
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -398,25 +398,54 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
   const pageSize = 3;
   const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
   const [page, setPage] = useState(0);
+  const [displayPage, setDisplayPage] = useState(0);
+  const [fading, setFading] = useState(false);
   const [paused, setPaused] = useState(false);
 
+  const changePage = useCallback((newPage: number) => {
+    if (newPage === displayPage) return;
+    setFading(true);
+    setTimeout(() => {
+      setDisplayPage(newPage);
+      setFading(false);
+    }, 300);
+  }, [displayPage]);
+
   const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalPages);
+    setPage((p) => {
+      const np = (p + 1) % totalPages;
+      return np;
+    });
   }, [totalPages]);
 
+  useEffect(() => {
+    changePage(page);
+  }, [page]);
+
   useEffect(() => {
     if (paused || totalPages <= 1) return;
     const timer = setInterval(next, 8000);
     return () => clearInterval(timer);
   }, [paused, next, totalPages]);
 
-  const start = page * pageSize;
+  const start = displayPage * pageSize;
   const hero = articles[start];
   const sideCards = articles.slice(start + 1, start + 3);
 
+  const nextPageStart = ((displayPage + 1) % totalPages) * pageSize;
+  const nextPageArticles = articles.slice(nextPageStart, nextPageStart + pageSize);
+
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+      {nextPageArticles.length > 0 && (
+        <div className="hidden" aria-hidden="true">
+          {nextPageArticles.map((a) => a.coverImage && <img key={`preload-${a.id}`} src={a.coverImage} alt="" />)}
+        </div>
+      )}
+      <div
+        className="grid grid-cols-1 lg:grid-cols-5 gap-4 transition-opacity duration-300"
+        style={{ opacity: fading ? 0 : 1 }}
+      >
         <div className="lg:col-span-3">
           {hero && <FeaturedHeroCard article={hero} focalPoints={focalPoints} />}
         </div>