Restored to '7aa09373aacdcc1083018c718e608e30b6be2b33'

Replit-Restored-To: 7aa09373aa

client/src/pages/home.tsx

@@ -3,24 +3,13 @@ import { Link } from "wouter";
 import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Eye, Play, Images } from "lucide-react";
+import { Eye, Clock, Play } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
-import AdSense from "@/components/adsense";
-import { PhotoGalleryWidget } from "@/components/photo-gallery";
-import { HoroscopeWidget } from "@/components/horoscope-widget";
-import { RecipeWidget } from "@/components/recipe-widget";
-import { NewsWidget } from "@/components/news-widget";
+import AdSense, { ArticleCardAd } from "@/components/adsense";
 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");
@@ -42,9 +31,17 @@ function HeroCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}>
-        <div className="relative aspect-[16/9]">
-          <img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
+      <div
+        className="relative group cursor-pointer rounded-lg overflow-hidden h-full"
+        data-testid={`card-hero-${article.id}`}
+      >
+        <div className="relative h-full min-h-[300px] md:min-h-[380px]">
+          <img
+            src={article.coverImage || "/images/article-1.png"}
+            alt={article.title}
+            className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
+            loading="lazy"
+          />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
               <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
@@ -55,40 +52,23 @@ function HeroCard({ article }: { article: Article }) {
           <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">{article.category}</span>
-              <span className="text-white/60 text-xs">{timeAgo(new Date(article.publishedAt))}</span>
-            </div>
-            <h3 className="text-white font-bold text-lg md:text-xl leading-tight line-clamp-3">{article.title}</h3>
-            <p className="text-white/50 text-sm mt-1.5 line-clamp-2 max-w-lg hidden md:block">{article.excerpt}</p>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
-  const [idx, setIdx] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => setIdx((i) => (i + 1) % images.length), 10000);
-    return () => clearInterval(timer);
-  }, [images.length]);
-
-  return (
-    <Link href="/gallery">
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery">
-        <div className="relative aspect-[16/9]">
-          <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" style={{ objectPosition: "center 25%" }} 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 className="text-xs font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">
+                {article.category}
+              </span>
+              <span className="text-white/60 text-xs">
+                {timeAgo(new Date(article.publishedAt))}
               </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>
+            <h3 className="text-white font-bold text-lg md:text-xl leading-tight line-clamp-3">
+              {article.title}
+            </h3>
+            <p className="text-white/50 text-sm mt-1.5 line-clamp-2 max-w-lg hidden md:block">
+              {article.excerpt}
+            </p>
+            <div className="flex items-center gap-2 mt-2 text-white/40 text-xs">
+              <Eye className="w-3 h-3" />
+              {article.views.toLocaleString()}
+            </div>
           </div>
         </div>
       </div>
@@ -100,10 +80,18 @@ function MediumCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border flex flex-col" data-testid={`card-medium-${article.id}`}>
-        <div className="relative flex-shrink-0">
+      <div
+        className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border"
+        data-testid={`card-medium-${article.id}`}
+      >
+        <div className="relative">
           <div className="overflow-hidden">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
+            <img
+              src={thumbUrl(article.coverImage)}
+              alt={article.title}
+              className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+              loading="lazy"
+            />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
@@ -113,13 +101,14 @@ function MediumCard({ article }: { article: Article }) {
             </div>
           )}
         </div>
-        <div className="p-3.5 flex flex-col flex-1">
+        <div className="p-3.5">
           <div className="flex items-center gap-2 mb-1.5">
             <span className="text-[10px] font-medium text-primary">{article.author}</span>
             <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
           </div>
-          <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
-          <p className="text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1">{article.excerpt}</p>
+          <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">
+            {article.title}
+          </h3>
           <div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
             <Eye className="w-3 h-3" />
             {article.views.toLocaleString()}
@@ -130,49 +119,44 @@ function MediumCard({ article }: { article: Article }) {
   );
 }
 
-function SideCard({ article }: { article: Article }) {
+function CompactCard({ article }: { article: Article }) {
   const isVideo = article.category === "Video";
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
-        <div className="relative flex-shrink-0">
-          <div className="overflow-hidden">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-[4/3] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
-          </div>
+      <div
+        className="flex gap-3 cursor-pointer group bg-card rounded-lg border border-card-border p-3 h-full"
+        data-testid={`card-compact-${article.id}`}
+      >
+        <div className="relative flex-shrink-0 w-24 h-20 rounded overflow-hidden">
+          <img
+            src={thumbUrl(article.coverImage)}
+            alt={article.title}
+            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            loading="lazy"
+          />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
-                <Play className="w-3.5 h-3.5 text-white ml-0.5" fill="white" />
+              <div className="w-7 h-7 rounded-full bg-primary/90 flex items-center justify-center">
+                <Play className="w-3 h-3 text-white ml-px" fill="white" />
               </div>
             </div>
           )}
         </div>
-        <div className="p-2.5 flex flex-col flex-1">
-          <h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+        <div className="flex-1 min-w-0 flex flex-col">
+          <h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
+            {article.title}
+          </h4>
+          <div className="flex items-center gap-2 mt-auto text-[10px] text-muted-foreground">
+            <span>{article.author}</span>
+            <span>·</span>
+            <span>{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
         </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">
@@ -188,7 +172,9 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
                 <span className="text-[10px] font-medium text-primary">{article.category}</span>
                 <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
               </div>
-              <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
+              <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
+                {article.title}
+              </h4>
             </div>
           </Link>
         ))}
@@ -197,73 +183,6 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
   );
 }
 
-function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
-  const hasGallery = galleryImages && galleryImages.length > 0;
-  const articlePages = Math.min(5, Math.max(1, articles.length));
-  const total = articlePages + (hasGallery ? 1 : 0);
-  const [page, setPage] = useState(0);
-  const [paused, setPaused] = useState(false);
-
-  const next = useCallback(() => {
-    setPage((p) => (p + 1) % total);
-  }, [total]);
-
-  useEffect(() => {
-    if (paused || total <= 1) return;
-    const timer = setInterval(next, 8000);
-    return () => clearInterval(timer);
-  }, [paused, next, total]);
-
-  const isGalleryPage = hasGallery && page === total - 1;
-  const isWidePage = page === 1;
-
-  let hero: Article | null = null;
-  let side: Article[] = [];
-
-  if (!isGalleryPage && articles.length > 0) {
-    hero = articles[page % articles.length];
-    if (!isWidePage) {
-      side = [
-        articles[(page * 2 + 1) % articles.length],
-        articles[(page * 2 + 2) % articles.length],
-      ];
-    }
-  }
-
-  const wide = isGalleryPage || isWidePage;
-
-  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={wide ? "lg:col-span-5" : "lg:col-span-3"}>
-          {isGalleryPage && galleryImages ? (
-            <GalleryHeroCard images={galleryImages.slice(0, 30)} />
-          ) : hero ? (
-            <HeroCard article={hero} />
-          ) : null}
-        </div>
-        {!wide && (
-          <div className="lg:col-span-2 grid grid-cols-1 gap-4">
-            {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>
-      {total > 1 && (
-        <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
-          {Array.from({ length: total }).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>
-      )}
-    </section>
-  );
-}
-
 function BentoSkeleton() {
   return (
     <div className="space-y-4">
@@ -280,6 +199,75 @@ function BentoSkeleton() {
   );
 }
 
+function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?: Article[] }) {
+  const totalPages = Math.ceil(Math.min(articles.length, 9) / 3);
+  const [page, setPage] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const next = useCallback(() => {
+    setPage((p) => (p + 1) % totalPages);
+  }, [totalPages]);
+
+  useEffect(() => {
+    if (paused || totalPages <= 1) return;
+    const timer = setInterval(next, 8000);
+    return () => clearInterval(timer);
+  }, [paused, next, totalPages]);
+
+  const pool = articles.slice(0, 9);
+  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]);
+  }
+
+  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} />
+        </div>
+
+        <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
+          {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 && (
+        <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
+          {Array.from({ length: totalPages }).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>
+      )}
+    </section>
+  );
+}
+
 export default function Home() {
   const { data: articles, isLoading } = useQuery<Article[]>({
     queryKey: ["/api/articles"],
@@ -289,71 +277,60 @@ 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">
         <Header />
-        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"><BentoSkeleton /></main>
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <BentoSkeleton />
+        </main>
         <Footer />
       </div>
     );
   }
 
-  const row2Left = articles.slice(0, 2);
-  const row3Middle = articles.slice(2, 4);
-  const row4Articles = articles.slice(4, 7);
-  const row5Articles = articles.slice(7, 10);
+  const all = articles;
+  const row2Items = all.slice(3, 6);
+  const row3Items = all.slice(6);
 
   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} galleryImages={galleryImages} />
+        <FeaturedCarousel articles={all} popular={popular} />
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {row2Left.map((a) => (
-            <MediumCard key={a.id} article={a} />
-          ))}
-          <div className="aspect-[4/5] sm:aspect-auto">
-            <PhotoGalleryWidget />
-          </div>
-          <div className="aspect-[4/5] sm:aspect-auto">
-            <RecipeWidget />
-          </div>
+        <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">
-          <div className="aspect-[4/5] sm:aspect-auto">
-            <HoroscopeWidget />
-          </div>
-          {row3Middle.map((a) => (
-            <MediumCard key={a.id} article={a} />
-          ))}
-          <div className="aspect-[4/5] sm:aspect-auto">
-            <NewsWidget />
-          </div>
-        </div>
-
-        {row4Articles.length > 0 && (
+        {row2Items.length > 0 && (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row4Articles.map((a) => (
+            {row2Items.map((a) => (
               <MediumCard key={a.id} article={a} />
             ))}
-            <NativeAdCard />
+            <ArticleCardAd key="ad-row2" />
           </div>
         )}
 
-        {row5Articles.length > 0 && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row5Articles.map((a) => (
-              <MediumCard key={a.id} article={a} />
-            ))}
-            <NativeAdCard />
+        {row3Items.length > 0 && (
+          <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
+            <div className="lg:col-span-3">
+              {row3Items[0] && <HeroCard article={row3Items[0]} />}
+            </div>
+            <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {row3Items.slice(1, 3).map((a) => (
+                <MediumCard key={a.id} article={a} />
+              ))}
+              {row3Items.slice(3).map((a) => (
+                <CompactCard key={a.id} article={a} />
+              ))}
+              <ArticleCardAd key="ad-row3" />
+            </div>
           </div>
         )}