Update blog layout and fix horoscope navigation

Adjust article display on the homepage to show more content and modify the horoscope widget to navigate to a dedicated page instead of a modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8cadc1b-5524-4725-abba-7f1558b33894
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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { useLocation } from "wouter";
-import { Star, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { Star } from "lucide-react";
 
 const SIGNS = [
   { name: "Widder", symbol: "♈", date: "21.03 – 19.04", element: "Feuer" },
@@ -90,7 +90,7 @@ function HoroscopeModal({ onClose, initialSign }: { onClose: () => void; initial
 }
 
 export function HoroscopeWidget() {
-  const [showModal, setShowModal] = useState(false);
+  const [, navigate] = useLocation();
   const [index, setIndex] = useState(0);
   const [paused, setPaused] = useState(false);
 
@@ -105,12 +105,11 @@ export function HoroscopeWidget() {
   const sign = SIGNS[index];
 
   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 flex flex-col"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
-        onClick={() => setShowModal(true)}
+      onClick={() => navigate("/horoskop")}
       data-testid="widget-horoscope"
     >
       <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
@@ -134,8 +133,5 @@ export function HoroscopeWidget() {
         </div>
       </div>
     </div>
-
-      {showModal && <HoroscopeModal initialSign={index} onClose={() => setShowModal(false)} />}
-    </>
   );
 }

client/src/pages/home.tsx

@@ -316,8 +316,9 @@ export default function Home() {
     );
   }
 
-  const row2Articles = articles.slice(3, 7);
+  const row2Articles = articles.slice(3, 6);
-  const row3Articles = articles.slice(7);
+  const row3Articles = articles.slice(6, 9);
+  const row4Articles = articles.slice(9);
 
   return (
     <div className="min-h-screen bg-background">
@@ -327,7 +328,7 @@ export default function Home() {
         <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {row2Articles.slice(0, 3).map((a) => (
+          {row2Articles.map((a) => (
             <MediumCard key={a.id} article={a} />
           ))}
           <NativeAdCard />
@@ -353,13 +354,19 @@ export default function Home() {
 
         {row3Articles.length > 0 && (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row3Articles.slice(0, 2).map((a) => (
+            {row3Articles.map((a) => (
               <MediumCard key={a.id} article={a} />
             ))}
             <NativeAdCard />
-            {row3Articles.length > 2 && row3Articles.slice(2, 3).map((a) => (
+          </div>
+        )}
+
+        {row4Articles.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {row4Articles.slice(0, 3).map((a) => (
               <MediumCard key={a.id} article={a} />
             ))}
+            <NativeAdCard />
           </div>
         )}