From 69a7514ca0e1d00d976450c701617d0880fd4bcc Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 5 Mar 2026 11:59:50 +0000
Subject: [PATCH] Update ads to blend in with article content seamlessly

Replace large InArticleAd and MultiplexAd components with ArticleCardAd to create a more integrated and visually appealing ad experience on the homepage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 42a32f62-4f96-4dfe-841e-33481b4e1f96
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/V5dWXpq
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 01b31e3..b4ae0b4 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -8,7 +8,7 @@ import { Eye, Play, Images } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import AdSense, { ArticleCardAd, InArticleAd, MultiplexAd, SidebarAd } from "@/components/adsense";
+import AdSense, { ArticleCardAd, SidebarAd } from "@/components/adsense";
 import ArtistPatternBg from "@/components/artist-pattern-bg";
 import { PhotoGalleryWidget } from "@/components/photo-gallery";
 import { HoroscopeWidget } from "@/components/horoscope-widget";
@@ -680,7 +680,9 @@ export default function Home() {
           </div>
         </div>
 
-        <InArticleAd />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <ArticleCardAd />
+        </div>
 
         {widePickedArticles.length > 0 && (
           <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
@@ -722,11 +724,17 @@ export default function Home() {
                 </div>
               )}
             </div>
-            {ri % 3 === 2 && ri < gridRows.length - 1 && <InArticleAd />}
+            {ri % 3 === 2 && ri < gridRows.length - 1 && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                <ArticleCardAd />
+              </div>
+            )}
           </div>
         ))}
 
-        <InArticleAd />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <ArticleCardAd />
+        </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           {bottomSection.map((item, i) => (
@@ -736,7 +744,9 @@ export default function Home() {
           ))}
         </div>
 
-        <InArticleAd />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <ArticleCardAd />
+        </div>
 
         {extraBottomArticles.length > 3 && (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -746,7 +756,9 @@ export default function Home() {
           </div>
         )}
 
-        <MultiplexAd />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <ArticleCardAd />
+        </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           <PhotoGalleryWidget key="extra-gallery" />
@@ -754,7 +766,9 @@ export default function Home() {
           <RecipeWidget key="extra-recipe" />
         </div>
 
-        <MultiplexAd />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <ArticleCardAd />
+        </div>
 
       </main>
       <Footer />