From 75f1de829ba616066d6bd4ddb37f97d3bf26aca8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:36:04 +0000
Subject: [PATCH] Add dynamic content and ads to the bottom of the homepage

Adds a new section to the homepage that dynamically displays a shuffled array of widgets (news, horoscope, weather, breaking news, recipe) interspersed with two AdSense ads.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8cd8705d-50d4-4498-81ca-641b06532cb7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 80fc9cb..60e6fb2 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -518,6 +518,22 @@ export default function Home() {
     return copy.slice(0, 2);
   }, [articles]);
 
+  const bottomSection = useMemo(() => {
+    const items: { type: "widget" | "ad"; el: JSX.Element }[] = [
+      { type: "widget", el: <NewsWidget key="bottom-news" /> },
+      { type: "widget", el: <div key="bottom-horoscope" className="flex flex-col gap-4"><HoroscopeWidget /><WeatherWidget /></div> },
+      { type: "widget", el: <BreakingNewsWidget key="bottom-breaking" /> },
+      { type: "widget", el: <RecipeWidget key="bottom-recipe" /> },
+      { type: "ad", el: <AdSense key="ad-bottom-1" slot="bottom-1" className="w-full min-h-[250px]" /> },
+      { type: "ad", el: <AdSense key="ad-bottom-2" slot="bottom-2" className="w-full min-h-[250px]" /> },
+    ];
+    for (let i = items.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [items[i], items[j]] = [items[j], items[i]];
+    }
+    return items;
+  }, []);
+
   if (isLoading || !articles) {
     return (
       <div className="min-h-screen bg-background">
@@ -565,6 +581,14 @@ export default function Home() {
           </div>
         ))}
 
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {bottomSection.map((item, i) => (
+            <div key={`bottom-${i}`}>
+              {item.el}
+            </div>
+          ))}
+        </div>
+
       </main>
       <Footer />
     </div>