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

@@ -23,10 +23,6 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
-[[ports]]
-localPort = 41551
-externalPort = 3002
-
 [env]
 PORT = "5000"
 

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>
+  );
+}

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"

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"

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"

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>
           

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 */}

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>
           

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>
           

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 

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 */}

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">

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={{