Integrate photo gallery into homepage carousel and display ads natively

Integrate the photo gallery as a hero and medium card into the homepage carousel, increasing article capacity and blending ads as native content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4848463a-56d7-4293-b781-228aa226cd0e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -3,7 +3,7 @@ import { Link } from "wouter";
 import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Eye, Play, ChevronRight } from "lucide-react";
+import { Eye, Play, ChevronRight, Images } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
@@ -14,6 +14,13 @@ import { RecipeWidget } from "@/components/recipe-widget";
 import { NewsWidget } from "@/components/news-widget";
 import { useState, useEffect, useCallback } from "react";
 
+interface GalleryImage {
+  folder: string;
+  fileName: string;
+  thumb: string;
+  large: string;
+}
+
 function thumbUrl(src: string | null): string {
   if (!src) return "/images/article-1.png";
   if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
@@ -60,6 +67,35 @@ function HeroCard({ article }: { article: Article }) {
   );
 }
 
+function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
+  const [idx, setIdx] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setIdx((i) => (i + 1) % images.length), 4000);
+    return () => clearInterval(timer);
+  }, [images.length]);
+
+  return (
+    <Link href="/gallery">
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid="card-hero-gallery">
+        <div className="relative h-full min-h-[300px] md:min-h-[380px]">
+          <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover absolute inset-0 transition-opacity duration-1000" loading="lazy" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-5">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-xs font-medium text-primary bg-primary/20 px-2 py-0.5 rounded flex items-center gap-1">
+                <Images className="w-3 h-3" /> Fotogalerie
+              </span>
+            </div>
+            <h3 className="text-white font-bold text-lg md:text-xl leading-tight">Backstage & Events</h3>
+            <p className="text-white/50 text-sm mt-1.5 hidden md:block">{images.length} exklusive Fotos aus der Welt der Volksmusik</p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function MediumCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
@@ -93,6 +129,55 @@ function MediumCard({ article }: { article: Article }) {
   );
 }
 
+function GalleryMediumCard({ images }: { images: GalleryImage[] }) {
+  const [idx, setIdx] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setIdx((i) => (i + 1) % images.length), 5000);
+    return () => clearInterval(timer);
+  }, [images.length]);
+
+  return (
+    <Link href="/gallery">
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid="card-medium-gallery">
+        <div className="relative">
+          <div className="overflow-hidden">
+            <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full aspect-video object-cover transition-opacity duration-700" loading="lazy" />
+          </div>
+          <div className="absolute bottom-2 right-2 bg-black/60 rounded px-1.5 py-0.5 flex items-center gap-1">
+            <Images className="w-3 h-3 text-white/80" />
+            <span className="text-[10px] text-white/80">{images.length}</span>
+          </div>
+        </div>
+        <div className="p-3.5">
+          <div className="flex items-center gap-2 mb-1.5">
+            <span className="text-[10px] font-medium text-primary">Fotogalerie</span>
+          </div>
+          <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">Exklusive Backstage-Fotos</h3>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function NativeAdCard() {
+  return (
+    <div className="relative rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid="card-native-ad">
+      <div className="relative">
+        <div className="overflow-hidden aspect-video bg-muted">
+          <AdSense
+            slot="auto"
+            format="fluid"
+            layoutKey="-6t+ed+2i-1n-4w"
+            style={{ display: "block" }}
+            className="w-full h-full min-h-[160px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function TopStoriesList({ articles }: { articles: Article[] }) {
   return (
     <div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="sidebar-top-stories">
@@ -117,51 +202,68 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
   );
 }
 
-function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?: Article[] }) {
+function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
-  const totalPages = Math.ceil(Math.min(articles.length, 9) / 3);
+  const totalPages = Math.ceil(Math.min(articles.length, 12) / 3);
+  const hasGallery = galleryImages && galleryImages.length > 0;
+  const totalWithGallery = totalPages + (hasGallery ? 1 : 0);
   const [page, setPage] = useState(0);
   const [paused, setPaused] = useState(false);
 
   const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalPages);
+    setPage((p) => (p + 1) % totalWithGallery);
-  }, [totalPages]);
+  }, [totalWithGallery]);
 
   useEffect(() => {
-    if (paused || totalPages <= 1) return;
+    if (paused || totalWithGallery <= 1) return;
     const timer = setInterval(next, 8000);
     return () => clearInterval(timer);
-  }, [paused, next, totalPages]);
+  }, [paused, next, totalWithGallery]);
 
-  const pool = articles.slice(0, 9);
+  const pool = articles.slice(0, 12);
-  const start = page * 3;
+  const isGalleryPage = hasGallery && page === totalWithGallery - 1;
-  const visible = pool.slice(start, start + 3);
+
-  while (visible.length < 3 && pool.length >= 3) {
+  let hero: Article | null = null;
-    visible.push(pool[visible.length % pool.length]);
+  let side: Article[] = [];
+
+  if (!isGalleryPage) {
+    const start = page * 3;
+    const visible = pool.slice(start, start + 3);
+    while (visible.length < 3 && pool.length >= 3) {
+      visible.push(pool[visible.length % pool.length]);
+    }
+    hero = visible[0] || null;
+    side = visible.slice(1, 3);
   }
 
-  const hero = visible[0];
-  const side = visible.slice(1, 3);
-
-  if (!hero) return null;
-
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
         <div className="lg:col-span-3">
-          <HeroCard article={hero} />
+          {isGalleryPage && galleryImages ? (
+            <GalleryHeroCard images={galleryImages.slice(0, 30)} />
+          ) : hero ? (
+            <HeroCard article={hero} />
+          ) : null}
         </div>
         <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
-          {side.map((a) => (
+          {isGalleryPage && galleryImages ? (
-            <MediumCard key={a.id} article={a} />
+            <>
-          ))}
+              <GalleryMediumCard images={galleryImages.slice(30, 60)} />
+              <GalleryMediumCard images={galleryImages.slice(60, 90)} />
+            </>
+          ) : (
+            side.map((a) => (
+              <MediumCard key={a.id} article={a} />
+            ))
+          )}
         </div>
         <div className="lg:col-span-1">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>
       </div>
-      {totalPages > 1 && (
+      {totalWithGallery > 1 && (
         <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
-          {Array.from({ length: totalPages }).map((_, i) => (
+          {Array.from({ length: totalWithGallery }).map((_, i) => (
             <button key={i} onClick={() => setPage(i)} className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`} data-testid={`button-carousel-dot-${i}`} />
           ))}
         </div>
@@ -205,6 +307,10 @@ export default function Home() {
     queryKey: ["/api/articles/popular"],
   });
 
+  const { data: galleryImages } = useQuery<GalleryImage[]>({
+    queryKey: ["/api/gallery"],
+  });
+
   if (isLoading || !articles) {
     return (
       <div className="min-h-screen bg-background">
@@ -215,25 +321,21 @@ export default function Home() {
     );
   }
 
-  const row2Articles = articles.slice(3, 6);
+  const row2Articles = articles.slice(3, 7);
-  const row3Articles = articles.slice(6);
+  const row3Articles = articles.slice(7);
 
   return (
     <div className="min-h-screen bg-background">
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
-        <FeaturedCarousel articles={articles} popular={popular} />
+        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
-
-        <div className="rounded-lg border border-card-border bg-card overflow-hidden">
-          <AdSense slot="auto" format="horizontal" style={{ display: "block", minHeight: "90px" }} />
-        </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {row2Articles.map((a) => (
+          {row2Articles.slice(0, 3).map((a) => (
             <MediumCard key={a.id} article={a} />
           ))}
-          <ArticleCardAd key="ad-row2" />
+          <NativeAdCard />
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -257,10 +359,13 @@ export default function Home() {
 
         {row3Articles.length > 0 && (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row3Articles.map((a) => (
+            {row3Articles.slice(0, 2).map((a) => (
+              <MediumCard key={a.id} article={a} />
+            ))}
+            <NativeAdCard />
+            {row3Articles.length > 2 && row3Articles.slice(2, 3).map((a) => (
               <MediumCard key={a.id} article={a} />
             ))}
-            <ArticleCardAd key="ad-row3" />
           </div>
         )}