From 40e1aab3d0d683b43effb05a8b3cab9a7f927709 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 28 Sep 2025 19:51:00 +0000
Subject: [PATCH] Add ads to the homepage for desktop users

Introduce a new `InlineAd` component and integrate it into the `NetflixGrid` to display ads after every second category and at the end of the homepage on desktop.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/pBMh1vD
---
 .replit                                |  4 +++
 client/src/components/InlineAd.tsx     | 38 ++++++++++++++++++++++++++
 client/src/components/netflix-grid.tsx | 22 +++++++++++----
 3 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/InlineAd.tsx

diff --git a/.replit b/.replit
index 5c48241..989e093 100644
--- a/.replit
+++ b/.replit
@@ -31,6 +31,10 @@ externalPort = 3000
 localPort = 35987
 externalPort = 3003
 
+[[ports]]
+localPort = 39735
+externalPort = 4200
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/InlineAd.tsx b/client/src/components/InlineAd.tsx
new file mode 100644
index 0000000..1b2ae1b
--- /dev/null
+++ b/client/src/components/InlineAd.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+
+export default function InlineAd() {
+  const adRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const initializeAd = () => {
+      const insElement = adRef.current?.querySelector('ins');
+      if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;
+
+      try {
+        // @ts-ignore
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+      } catch (error) {
+        console.error('Inline AdSense initialization error:', error);
+      }
+    };
+
+    // Initialize the ad immediately
+    initializeAd();
+  }, []);
+
+  return (
+    <div className="w-full bg-bunny-dark hidden lg:flex justify-center py-4 my-8" ref={adRef}>
+      {/* Desktop Only: 1200x90px Inline Ad */}
+      <ins 
+        className="adsbygoogle"
+        style={{ 
+          display: 'inline-block', 
+          width: '1200px',
+          height: '90px'
+        }}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot="8632735961"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 8315ad9..c87035e 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -4,6 +4,7 @@ import { type Video } from "@shared/schema";
 import VideoCard from "./video-card";
 import BunnyVideoModal from "./bunny-video-modal";
 import MobileInlineAd from "./MobileInlineAd";
+import InlineAd from "./InlineAd";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -179,14 +180,23 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
     <>
       <div className="space-y-4">
         {categories.map((category, categoryIndex) => (
-          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-4' : 'mb-4'}`}>
-            <CategoryRow
-              category={category}
-              onVideoClick={handleVideoClick}
-              hideScrollButtons={false}
-            />
+          <div key={categoryIndex}>
+            <div className={`${categoryIndex === 0 ? 'mt-2 mb-4' : 'mb-4'}`}>
+              <CategoryRow
+                category={category}
+                onVideoClick={handleVideoClick}
+                hideScrollButtons={false}
+              />
+            </div>
+            {/* Add inline ad after every second category (categoryIndex 1, 3, 5...) */}
+            {categoryIndex > 0 && (categoryIndex + 1) % 2 === 0 && (
+              <InlineAd />
+            )}
           </div>
         ))}
+        
+        {/* Add final ad after all categories */}
+        <InlineAd />
       </div>
 
       <BunnyVideoModal