From 22387c51482ba1fef4c27f1efc3a942437697625 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:10:22 +0000
Subject: [PATCH] Organize video content to display descriptions alongside
 videos

Restructures the FolxStadlPage component to a two-column layout, placing video descriptions on the right side of the video list using lg:grid-cols-3.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/QQTyNAb
---
 client/src/pages/FolxStadlPage.tsx | 60 ++++++++++++++++++++++--------
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 08af6e1..98754d3 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -57,25 +57,55 @@ export default function FolxStadlPage() {
         </div>
       </div>
 
-      {/* Video Grid */}
+      {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-          {folxStadlVideos.map((video) => (
-            <div key={video.id} className="group">
-              <VideoCard
-                video={video}
-                onClick={handleVideoClick}
-                className="w-full hover:scale-105 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
-              />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Left Side - Video List */}
+          <div className="lg:col-span-2">
+            <div className="space-y-4">
+              {folxStadlVideos.map((video, index) => (
+                <div key={video.id} className="group">
+                  <VideoCard
+                    video={video}
+                    onClick={handleVideoClick}
+                    className="w-full hover:scale-102 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
+                  />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
 
-        {folxStadlVideos.length === 0 && (
-          <div className="text-center py-16">
-            <p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
+            {folxStadlVideos.length === 0 && (
+              <div className="text-center py-16">
+                <p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
+              </div>
+            )}
           </div>
-        )}
+
+          {/* Right Side - Description */}
+          <div className="lg:col-span-1">
+            <div className="bg-black/20 backdrop-blur-sm rounded-lg p-6 sticky top-8">
+              <h2 className="text-2xl font-bold text-white mb-4">FOLX STADL S4</h2>
+              <div className="space-y-4 text-bunny-light">
+                <p className="text-lg">
+                  Kompletna 4. sezona FOLX STADL oddaj iz Prime Time Studio Bad Tölz.
+                </p>
+                <p>
+                  Vse epizode vključujejo nastope znanih izvajalcev volkstümliche glasbe, 
+                  vodijo pa moderatorji Hansi Berger, Martina, Spitzbua Markus in Lucky Putz.
+                </p>
+                <div className="border-t border-white/10 pt-4 mt-6">
+                  <h3 className="font-semibold text-white mb-2">V tej kolekciji:</h3>
+                  <ul className="text-sm space-y-1 text-bunny-muted">
+                    <li>• {folxStadlVideos.length} kompletnih oddaj</li>
+                    <li>• Nastopi vodilnih izvajalcev</li>
+                    <li>• Premium studio produkcija</li>
+                    <li>• HD video kvaliteta</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       {/* Video Modal */}