Add side advertisements to all pages for increased visibility

Introduce `PageSideAds` component and integrate it across various pages including Home, Article, Category, Videos, Gallery, Horoscope, Recipes, Search, About, Impressum, Datenschutz, and Empfang. This component displays vertical ads on screens wider than 2xl. Additionally, the Home page's existing ad implementation is refactored to use this new component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6355ba60-5043-4119-a09f-5437b272e829
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/zWnrdl3
Replit-Helium-Checkpoint-Created: true

client/src/components/adsense.tsx

@@ -121,6 +121,31 @@ export function MultiplexAd() {
   );
 }
 
+export function PageSideAds() {
+  return (
+    <div className="relative">
+      <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ left: "calc(50% - 640px - 170px)" }} data-testid="ad-left-sidebar">
+        <div className="pointer-events-auto">
+          <AdSense
+            slot="2398082838"
+            format="vertical"
+            style={{ display: "block", width: "160px", height: "600px" }}
+          />
+        </div>
+      </div>
+      <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ right: "calc(50% - 640px - 170px)" }} data-testid="ad-right-sidebar">
+        <div className="pointer-events-auto">
+          <AdSense
+            slot="2398082838"
+            format="vertical"
+            style={{ display: "block", width: "160px", height: "600px" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function SidebarAd() {
   const [visible, setVisible] = useState(false);
 

client/src/pages/about.tsx

@@ -2,12 +2,14 @@ import { Tv } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { PageSideAds } from "@/components/adsense";
 
 export default function AboutPage() {
   usePageMeta("Über FOLX TV - Volksmusik & Schlager Fernsehsender", "Alles über FOLX TV – Ihren Fernsehsender für Volksmusik und Schlager seit 2013.");
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-8">
           <Tv className="w-7 h-7 text-primary" />

client/src/pages/article.tsx

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { InArticleAd } from "@/components/adsense";
+import { InArticleAd, PageSideAds } from "@/components/adsense";
 import DOMPurify from "dompurify";
 import ShareButtons from "@/components/share-buttons";
 import { useEffect, useMemo } from "react";
@@ -164,6 +164,7 @@ export default function ArticlePage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Link href="/">
           <Button variant="ghost" size="sm" className="mb-6 gap-2" data-testid="button-back">

client/src/pages/category.tsx

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { ArticleCardAd } from "@/components/adsense";
+import { ArticleCardAd, PageSideAds } from "@/components/adsense";
 import { useEffect } from "react";
 
 interface PaginatedResponse {
@@ -113,6 +113,7 @@ export default function CategoryPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Link href="/">
           <Button variant="ghost" size="sm" className="mb-6 gap-2" data-testid="button-back">

client/src/pages/datenschutz.tsx

@@ -2,12 +2,14 @@ import { Shield } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { PageSideAds } from "@/components/adsense";
 
 export default function DatenschutzPage() {
   usePageMeta("Datenschutz - FOLX TV", "Datenschutzerklärung von FOLX TV – Ihr Volksmusik & Schlager Fernsehsender.");
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-8">
           <Shield className="w-7 h-7 text-primary" />

client/src/pages/empfang.tsx

@@ -2,6 +2,7 @@ import { Tv, Globe, MapPin } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { PageSideAds } from "@/components/adsense";
 
 const COUNTRIES = [
   {
@@ -37,6 +38,7 @@ export default function EmpfangPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-2">
           <Tv className="w-7 h-7 text-primary" />

client/src/pages/gallery.tsx

@@ -4,13 +4,14 @@ import GalleryPage from "@/components/photo-gallery";
 import { ArrowLeft } from "lucide-react";
 import { Link } from "wouter";
 import { usePageMeta } from "@/hooks/use-page-meta";
-import { InArticleAd } from "@/components/adsense";
+import { InArticleAd, PageSideAds } from "@/components/adsense";
 
 export default function GalleryPageWrapper() {
   usePageMeta("Fotogalerie - Volksmusik & Schlager Bilder", "Fotos und Bilder von Volksmusik- und Schlager-Stars bei FOLX TV.");
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Link href="/">
           <button className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6 text-sm" data-testid="button-back">

client/src/pages/home.tsx

@@ -8,7 +8,7 @@ import { Eye, Play, Images } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import AdSense, { ArticleCardAd, SidebarAd } from "@/components/adsense";
+import AdSense, { ArticleCardAd, SidebarAd, PageSideAds } from "@/components/adsense";
 import { PhotoGalleryWidget } from "@/components/photo-gallery";
 import { HoroscopeWidget } from "@/components/horoscope-widget";
 import { RecipeWidget } from "@/components/recipe-widget";
@@ -656,26 +656,7 @@ export default function Home() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      <div className="relative">
-        <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ left: "calc(50% - 640px - 170px)" }} data-testid="ad-left-sidebar">
-          <div className="pointer-events-auto">
-            <AdSense
-              slot="2398082838"
-              format="vertical"
-              style={{ display: "block", width: "160px", height: "600px" }}
-            />
-          </div>
-        </div>
-        <div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ right: "calc(50% - 640px - 170px)" }} data-testid="ad-right-sidebar">
-          <div className="pointer-events-auto">
-            <AdSense
-              slot="2398082838"
-              format="vertical"
-              style={{ display: "block", width: "160px", height: "600px" }}
-            />
-          </div>
-        </div>
-      </div>
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">

client/src/pages/horoscope.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { InArticleAd } from "@/components/adsense";
+import { InArticleAd, PageSideAds } from "@/components/adsense";
 import {
   SIGNS,
   ELEMENT_COLORS,
@@ -395,6 +395,7 @@ export default function HoroscopePage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-2">
           <Link href="/">

client/src/pages/impressum.tsx

@@ -2,12 +2,14 @@ import { Scale } from "lucide-react";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { usePageMeta } from "@/hooks/use-page-meta";
+import { PageSideAds } from "@/components/adsense";
 
 export default function ImpressumPage() {
   usePageMeta("Impressum - FOLX TV", "Impressum und rechtliche Informationen zu FOLX TV – Volksmusik & Schlager Fernsehsender.");
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-8">
           <Scale className="w-7 h-7 text-primary" />

client/src/pages/recipes.tsx

@@ -4,7 +4,7 @@ import { ChefHat, Clock, Users, X, ChevronLeft } from "lucide-react";
 import { usePageMeta } from "@/hooks/use-page-meta";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { InArticleAd } from "@/components/adsense";
+import { InArticleAd, PageSideAds } from "@/components/adsense";
 
 interface Recipe {
   title: string;
@@ -302,6 +302,7 @@ export default function RecipesPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center gap-3 mb-2">
           <Link href="/">

client/src/pages/search.tsx

@@ -4,6 +4,7 @@ import { Link, useSearch, useLocation } from "wouter";
 import { Search, Play, FileText, ArrowLeft } from "lucide-react";
 import { usePageMeta } from "@/hooks/use-page-meta";
 import Header from "@/components/header";
+import { PageSideAds } from "@/components/adsense";
 
 interface SearchResult {
   articles: {
@@ -76,6 +77,7 @@ export default function SearchPage() {
   return (
     <div className="min-h-screen bg-background" data-testid="page-search">
       <Header />
+      <PageSideAds />
       <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <Link href="/">
           <button className="flex items-center gap-1 text-muted-foreground hover:text-foreground text-sm mb-4 transition-colors" data-testid="link-back-home">

client/src/pages/videos.tsx

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import { ArticleCardAd } from "@/components/adsense";
+import { ArticleCardAd, PageSideAds } from "@/components/adsense";
 import { useEffect } from "react";
 
 interface PaginatedResponse {
@@ -118,6 +118,7 @@ export default function VideosPage() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
+      <PageSideAds />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Link href="/">
           <button className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6 text-sm" data-testid="button-back">