Update layout and aspect ratios for all widgets on the homepage

Adjusted aspect ratios for PhotoGallery, Recipe, Horoscope, and News widgets to 4:5 for a filled and taller appearance. Increased the number of news items displayed and updated styling for better visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: dc86575c-1a2c-4bad-be6f-bf7c15dcafd7
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/components/horoscope-widget.tsx

@@ -106,26 +106,22 @@ export function HoroscopeWidget() {
   return (
     <>
       <div
-        className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors"
+        className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}
         onClick={() => setShowModal(true)}
         data-testid="widget-horoscope"
       >
-        <div className="p-3 flex items-center gap-2 border-b border-card-border">
+        <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
           <Star className="w-4 h-4 text-primary" />
           <h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
         </div>
-        <div className="p-4">
-          <div className="flex items-center gap-3 mb-2">
-            <span className="text-4xl transition-all duration-500">{sign.symbol}</span>
-            <div className="flex-1 min-w-0">
-              <p className="font-semibold text-card-foreground text-sm">{sign.name}</p>
-              <p className="text-[10px] text-muted-foreground">{sign.date}</p>
-            </div>
-          </div>
-          <p className="text-xs text-muted-foreground mt-1 line-clamp-2 leading-relaxed">{getDailyText(index)}</p>
-          <div className="flex justify-center gap-1 mt-3">
+        <div className="p-5 flex-1 flex flex-col justify-center items-center text-center">
+          <span className="text-7xl mb-4 transition-all duration-500 block">{sign.symbol}</span>
+          <p className="font-bold text-card-foreground text-lg">{sign.name}</p>
+          <p className="text-xs text-muted-foreground mt-1">{sign.date}</p>
+          <p className="text-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
+          <div className="flex justify-center gap-1 mt-5">
             {SIGNS.map((_, i) => (
               <button
                 key={i}

client/src/components/news-widget.tsx

@@ -14,13 +14,13 @@ export function NewsWidget() {
   });
 
   return (
-    <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full" data-testid="widget-news">
-      <div className="p-3 flex items-center gap-2 border-b border-card-border">
+    <div className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col" data-testid="widget-news">
+      <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
         <Newspaper className="w-4 h-4 text-primary" />
         <h3 className="font-bold text-card-foreground text-sm">Musiknachrichten</h3>
       </div>
-      <div className="p-3 space-y-3">
-        {(news || []).slice(0, 5).map((item, i) => (
+      <div className="p-3 space-y-3 flex-1 overflow-y-auto">
+        {(news || []).slice(0, 8).map((item, i) => (
           <a
             key={i}
             href={item.link}

client/src/components/photo-gallery.tsx

@@ -110,7 +110,7 @@ function SingleImageCarousel({
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
-      <div className="relative w-full aspect-[4/3] overflow-hidden rounded-b-lg">
+      <div className="relative w-full aspect-[4/5] overflow-hidden rounded-b-lg">
         <img
           src={images[index].large || images[index].thumb}
           alt={images[index].fileName}
@@ -179,7 +179,7 @@ export function PhotoGalleryWidget() {
           <Images className="w-4 h-4 text-primary" />
           <h3 className="font-bold text-card-foreground text-sm">Fotogalerie</h3>
         </div>
-        <div className="aspect-[4/3] bg-muted animate-pulse" />
+        <div className="aspect-[4/5] bg-muted animate-pulse" />
       </div>
     );
   }

client/src/components/recipe-widget.tsx

@@ -113,24 +113,27 @@ export function RecipeWidget() {
     <>
       <button
         onClick={() => setShowRecipe(recipe)}
-        className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors"
+        className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
         data-testid="widget-recipe"
       >
-        <div className="p-3 flex items-center gap-2 border-b border-card-border">
+        <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
           <ChefHat className="w-4 h-4 text-primary" />
           <h3 className="font-bold text-card-foreground text-sm">Rezept des Tages</h3>
         </div>
-        <div className="relative">
+        <div className="relative flex-1">
           <img
             src={recipe.image}
             alt={recipe.title}
-            className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
+            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
             loading="lazy"
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
           <div className="absolute bottom-0 left-0 right-0 p-3">
-            <h4 className="text-white font-semibold text-sm">{recipe.title}</h4>
-            <p className="text-white/60 text-xs mt-0.5">{recipe.time} · {recipe.servings}</p>
+            <h4 className="text-white font-bold text-base">{recipe.title}</h4>
+            <p className="text-white/60 text-xs mt-0.5 flex items-center gap-2">
+              <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>
+              <span className="flex items-center gap-1"><Users className="w-3 h-3" />{recipe.servings}</span>
+            </p>
           </div>
         </div>
       </button>

client/src/pages/home.tsx

@@ -338,21 +338,20 @@ export default function Home() {
           <NativeAdCard />
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="lg:col-span-1">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
+          <div className="aspect-[4/5]">
             <PhotoGalleryWidget />
-            <SectionLink href="/gallery" label="Alle Fotos" />
           </div>
 
-          <div className="lg:col-span-1">
+          <div className="aspect-[4/5]">
             <RecipeWidget />
           </div>
 
-          <div className="lg:col-span-1">
+          <div className="aspect-[4/5]">
             <HoroscopeWidget />
           </div>
 
-          <div className="lg:col-span-1">
+          <div className="aspect-[4/5]">
             <NewsWidget />
           </div>
         </div>