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
This commit is contained in:
sebastjanartic 2026-03-05 11:59:50 +00:00
parent 10e77bc3ed
commit 69a7514ca0

View File

@ -8,7 +8,7 @@ import { Eye, Play, Images } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import Header from "@/components/header"; import Header from "@/components/header";
import Footer from "@/components/footer"; 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 ArtistPatternBg from "@/components/artist-pattern-bg";
import { PhotoGalleryWidget } from "@/components/photo-gallery"; import { PhotoGalleryWidget } from "@/components/photo-gallery";
import { HoroscopeWidget } from "@/components/horoscope-widget"; import { HoroscopeWidget } from "@/components/horoscope-widget";
@ -680,7 +680,9 @@ export default function Home() {
</div> </div>
</div> </div>
<InArticleAd /> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<ArticleCardAd />
</div>
{widePickedArticles.length > 0 && ( {widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
@ -722,11 +724,17 @@ export default function Home() {
</div> </div>
)} )}
</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> </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"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{bottomSection.map((item, i) => ( {bottomSection.map((item, i) => (
@ -736,7 +744,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>
{extraBottomArticles.length > 3 && ( {extraBottomArticles.length > 3 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <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> </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"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<PhotoGalleryWidget key="extra-gallery" /> <PhotoGalleryWidget key="extra-gallery" />
@ -754,7 +766,9 @@ export default function Home() {
<RecipeWidget key="extra-recipe" /> <RecipeWidget key="extra-recipe" />
</div> </div>
<MultiplexAd /> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<ArticleCardAd />
</div>
</main> </main>
<Footer /> <Footer />