From 831d254261280289b9489877f991b5f4fb8e779d Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 28 Sep 2025 13:14:57 +0000
Subject: [PATCH] Add a header ad component to various pages across the
 platform

Introduce a new `HeaderAd` component for displaying AdSense ads on multiple pages, including `FolxStadlPage`, `GeschichteLiedPage`, `GipfelstammtischPage`, `Impressum`, `LivePage`, `PrivacyPolicy`, `TermsOfService`, `VideoPage`, `admin`, `home`, and `not-found`. This component is implemented in `client/src/components/HeaderAd.tsx` and integrated into the respective page components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/HUI2eAX
---
 .replit                                   |  4 ---
 client/src/components/HeaderAd.tsx        | 34 +++++++++++++++++++++++
 client/src/pages/FolxStadlPage.tsx        |  4 +++
 client/src/pages/GeschichteLiedPage.tsx   |  4 +++
 client/src/pages/GipfelstammtischPage.tsx |  4 +++
 client/src/pages/Impressum.tsx            |  4 +++
 client/src/pages/LivePage.tsx             |  4 +++
 client/src/pages/PrivacyPolicy.tsx        |  4 +++
 client/src/pages/TermsOfService.tsx       |  4 +++
 client/src/pages/VideoPage.tsx            |  4 +++
 client/src/pages/admin.tsx                |  4 +++
 client/src/pages/home.tsx                 |  4 +++
 client/src/pages/not-found.tsx            |  4 +++
 13 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/HeaderAd.tsx

diff --git a/.replit b/.replit
index 25d8e76..cd990cf 100644
--- a/.replit
+++ b/.replit
@@ -23,10 +23,6 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
-[[ports]]
-localPort = 41551
-externalPort = 3002
-
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/HeaderAd.tsx b/client/src/components/HeaderAd.tsx
new file mode 100644
index 0000000..52804af
--- /dev/null
+++ b/client/src/components/HeaderAd.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+export default function HeaderAd() {
+  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('Header AdSense initialization error:', error);
+      }
+    };
+
+    // Initialize the ad immediately
+    initializeAd();
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center py-4 bg-bunny-dark" ref={adRef}>
+      {/* Fixed Header/Footer Ad */}
+      <ins 
+        className="adsbygoogle"
+        style={{ display: 'inline-block', width: '728px', height: '90px' }}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot="7241323742"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 248c65f..191b508 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -9,6 +9,7 @@ import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
 import AdSenseAd from '@/components/adsense-ad';
+import HeaderAd from '@/components/HeaderAd';
 
 export default function FolxStadlPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@@ -232,6 +233,9 @@ export default function FolxStadlPage() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       {/* Main Content */}
       <div 
         className="container pt-8 pb-8"
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index e57d562..810574b 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -9,6 +9,7 @@ import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
 import AdSenseAd from '@/components/adsense-ad';
+import HeaderAd from '@/components/HeaderAd';
 
 export default function GeschichteLiedPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@@ -234,6 +235,9 @@ export default function GeschichteLiedPage() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       {/* Main Content */}
       <div 
         className="container pt-8 pb-8"
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 79a553b..17d4018 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -9,6 +9,7 @@ import type { Video } from '@shared/schema';
 import { Input } from '@/components/ui/input';
 import { Search } from 'lucide-react';
 import AdSenseAd from '@/components/adsense-ad';
+import HeaderAd from '@/components/HeaderAd';
 
 export default function GipfelstammtischPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@@ -234,6 +235,9 @@ export default function GipfelstammtischPage() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       {/* Main Content */}
       <div 
         className="container pt-8 pb-8"
diff --git a/client/src/pages/Impressum.tsx b/client/src/pages/Impressum.tsx
index c97fb38..3f5d9d1 100644
--- a/client/src/pages/Impressum.tsx
+++ b/client/src/pages/Impressum.tsx
@@ -1,4 +1,5 @@
 import { Link } from "wouter";
+import HeaderAd from "@/components/HeaderAd";
 
 export default function Impressum() {
   return (
@@ -11,6 +12,9 @@ export default function Impressum() {
           </Link>
         </div>
 
+        {/* Fixed Header Ad */}
+        <HeaderAd />
+
         <div className="bg-bunny-gray/30 rounded-lg p-8">
           <h1 className="text-3xl font-bold text-white mb-8">Impressum</h1>
           
diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index 8a2034c..b4a3b48 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input';
 import { useQuery } from '@tanstack/react-query';
 import VideoCard from '@/components/video-card';
 import AdSenseAd from '@/components/adsense-ad';
+import HeaderAd from '@/components/HeaderAd';
 
 declare global {
   interface Window {
@@ -415,6 +416,9 @@ export default function LivePage() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       <div className="container mx-auto px-4 py-3">
         <div className="flex flex-col lg:flex-row gap-4">
           {/* Main Video Player */}
diff --git a/client/src/pages/PrivacyPolicy.tsx b/client/src/pages/PrivacyPolicy.tsx
index 3655207..9e809be 100644
--- a/client/src/pages/PrivacyPolicy.tsx
+++ b/client/src/pages/PrivacyPolicy.tsx
@@ -1,4 +1,5 @@
 import { Link } from "wouter";
+import HeaderAd from "@/components/HeaderAd";
 
 export default function PrivacyPolicy() {
   return (
@@ -11,6 +12,9 @@ export default function PrivacyPolicy() {
           </Link>
         </div>
 
+        {/* Fixed Header Ad */}
+        <HeaderAd />
+
         <div className="bg-bunny-gray/30 rounded-lg p-8">
           <h1 className="text-3xl font-bold text-white mb-8">Datenschutzerklärung</h1>
           
diff --git a/client/src/pages/TermsOfService.tsx b/client/src/pages/TermsOfService.tsx
index 4cc4f92..7c1f5d2 100644
--- a/client/src/pages/TermsOfService.tsx
+++ b/client/src/pages/TermsOfService.tsx
@@ -1,4 +1,5 @@
 import { Link } from "wouter";
+import HeaderAd from "@/components/HeaderAd";
 
 export default function TermsOfService() {
   return (
@@ -11,6 +12,9 @@ export default function TermsOfService() {
           </Link>
         </div>
 
+        {/* Fixed Header Ad */}
+        <HeaderAd />
+
         <div className="bg-bunny-gray/30 rounded-lg p-8">
           <h1 className="text-3xl font-bold text-white mb-8">Nutzungsbedingungen</h1>
           
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index ba7523b..3c68120 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -44,6 +44,7 @@ import {
   WhatsappIcon,
 } from "react-share";
 import AdSenseAd from "@/components/adsense-ad";
+import HeaderAd from "@/components/HeaderAd";
 
 interface VideosResponse {
   videos: Video[];
@@ -500,6 +501,9 @@ export default function VideoPage() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       <div className="container p-4 lg:p-6 relative">
         {/* Background logo decorations */}
         <div 
diff --git a/client/src/pages/admin.tsx b/client/src/pages/admin.tsx
index df63e15..5f9a5c7 100644
--- a/client/src/pages/admin.tsx
+++ b/client/src/pages/admin.tsx
@@ -14,6 +14,7 @@ import { LoadingSpinner } from "@/components/loading-spinner";
 import { apiRequest } from "@/lib/queryClient";
 import type { Video } from "@shared/schema";
 import { Shield, Edit, Upload, Search, Filter, Save, X, Sparkles, Loader2 } from "lucide-react";
+import HeaderAd from "@/components/HeaderAd";
 
 export default function AdminPage() {
   const { user, isLoading: authLoading, isAuthenticated, isAdmin } = useAuth();
@@ -64,6 +65,9 @@ export default function AdminPage() {
           </div>
         </div>
 
+        {/* Fixed Header Ad */}
+        <HeaderAd />
+
         {/* Content */}
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
           {/* Sidebar */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8abeed4..ed0a09f 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -6,6 +6,7 @@ import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
 import { Search, Menu, X } from "lucide-react";
 import AdSenseAd from "@/components/adsense-ad";
+import HeaderAd from "@/components/HeaderAd";
 
 interface VideosResponse {
   videos: Video[];
@@ -208,6 +209,9 @@ export default function Home() {
         )}
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       {/* Header Banner Ad */}
       <div className="container py-4 border-b border-white/10">
         <div className="w-full flex justify-center">
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 1cb135f..e7543eb 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -2,6 +2,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { AlertCircle, Menu } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import go4LogoPath from "@assets/go4_1756394900352.png";
+import HeaderAd from "@/components/HeaderAd";
 
 export default function NotFound() {
   return (
@@ -61,6 +62,9 @@ export default function NotFound() {
         </div>
       </div>
 
+      {/* Fixed Header Ad */}
+      <HeaderAd />
+
       {/* Background logo decorations */}
       <div 
         style={{