sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new regional recipes and enhance the horoscope page functionality

Browse Source 
Introduce a new /rezepte page with 21 regional recipes featuring AI-generated images. Enhance the /horoskop page with element colors, star ratings, and navigation. Update navigation, routing, and widgets to support these new features.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ca8c12e6-1e00-476d-86cc-c529591779ac
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/oYq1Msd
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
2026-02-28 19:58:23 +00:00
parent d0ee926b35
commit 4963edd636
34 changed files with 970 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home.tsx
+23 -65
View File
@@ -3,11 +3,11 @@ 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, Images } from "lucide-react";
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 } from "@/components/adsense";
import AdSense from "@/components/adsense";
import { PhotoGalleryWidget } from "@/components/photo-gallery";
import { HoroscopeWidget } from "@/components/horoscope-widget";
import { RecipeWidget } from "@/components/recipe-widget";
@@ -129,37 +129,6 @@ 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" style={{ objectPosition: "center 25%" }} 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">
@@ -269,16 +238,6 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
);
}
function SectionLink({ href, label }: { href: string; label: string }) {
return (
<Link href={href}>
<span className="flex items-center gap-1 text-xs text-primary hover:underline cursor-pointer mt-2">
{label} <ChevronRight className="w-3 h-3" />
</span>
</Link>
);
}
function BentoSkeleton() {
return (
<div className="space-y-4">
@@ -318,9 +277,10 @@ export default function Home() {
);
}
const row2Articles = articles.slice(0, 4);
const row3Articles = articles.slice(4, 7);
const row4Articles = articles.slice(7, 10);
const row2Left = articles.slice(0, 2);
const row3Middle = articles.slice(2, 4);
const row4Articles = articles.slice(4, 7);
const row5Articles = articles.slice(7, 10);
return (
<div className="min-h-screen bg-background">
@@ -329,44 +289,42 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
{row2Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Articles.map((a) => (
<MediumCard key={a.id} article={a} />
))}
</div>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
<div className="aspect-[4/5]">
<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]">
<div className="aspect-[4/5] sm:aspect-auto">
<RecipeWidget />
</div>
</div>
<div className="aspect-[4/5]">
<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>
<div className="aspect-[4/5]">
{row3Middle.map((a) => (
<MediumCard key={a.id} article={a} />
))}
<div className="aspect-[4/5] sm:aspect-auto">
<NewsWidget />
</div>
</div>
{row3Articles.length > 0 && (
{row4Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row3Articles.map((a) => (
{row4Articles.map((a) => (
<MediumCard key={a.id} article={a} />
))}
<NativeAdCard />
</div>
)}
{row4Articles.length > 0 && (
{row5Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row4Articles.slice(0, 3).map((a) => (
{row5Articles.map((a) => (
<MediumCard key={a.id} article={a} />
))}
<NativeAdCard />