Restored to '4297267681097f3ff53d34610ef0e8e98baf8e0e'

Replit-Restored-To: 4297267681

client/src/components/netflix-grid.tsx

@@ -54,7 +54,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
 
     return [
       {
-        title: "Meistgesehen",
+        title: "Meist Angesehen",
         videos: sortedByViews.slice(0, 10)
       },
       ...(folxStadlVideos.length > 0 ? [{
@@ -105,7 +105,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
         })()
       },
       {
-        title: "Beliebt jetzt",
+        title: "Trending Now",
         videos: videos.slice(0, 12)
       }
     ];
@@ -153,7 +153,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
     <>
       <div>
         {categories.map((category, categoryIndex) => (
-          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-8 mb-12' : 'mb-12'}`}>
+          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-1' : 'mb-2'}`}>
             <CategoryRow
               category={category}
               onVideoClick={handleVideoClick}
@@ -188,9 +188,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Scroll exactly 4 cards (220px + 16px gap = 236px per card)
+      // Viewport-based scroll amount for full-width cards
-      const cardWidth = 220 + 16; // card width + gap
+      const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = cardWidth * 4; // 4 cards at once
+      const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
       
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
@@ -236,36 +236,68 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   return (
     <div 
-      className="relative group mb-6"
+      className="relative group"
+      onMouseLeave={() => setClickedVideoId(null)}
     >
-      <h2 className="text-xl font-semibold text-white mb-4 pl-6 pr-4">
+      <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase">
         {category.title}
       </h2>
-      <div className="relative">
+      <div className="relative overflow-hidden">
+        {/* Left scroll button - only on desktop and not hidden */}
+        {!hideScrollButtons && (
+          <Button
+            onClick={() => scroll('left')}
+            onMouseEnter={() => startAutoScroll('left')}
+            onMouseLeave={stopAutoScroll}
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
+            size="sm"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </Button>
+        )}
+
+        {/* Right scroll button - only on desktop and not hidden */}
+        {!hideScrollButtons && (
+          <Button
+            onClick={() => scroll('right')}
+            onMouseEnter={() => startAutoScroll('right')}
+            onMouseLeave={stopAutoScroll}
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-10 h-10 sm:w-12 sm:h-12 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
+            size="sm"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </Button>
+        )}
 
         {/* Scrollable video row - true edge to edge */}
         <div
           ref={scrollRef}
-          className="flex gap-4 overflow-x-auto pl-4 pr-4"
+          className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 -mx-1"
-          style={{ 
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-            maxWidth: '600px', 
-            margin: '0 auto', 
-            scrollbarWidth: 'none', 
-            msOverflowStyle: 'none'
-          }}
         >
           {category.videos.map((video, index) => (
             <div 
               key={video.id} 
-              className="flex-shrink-0 w-[180px]"
+              className="flex-shrink-0 w-[calc(70vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-30"
+              onMouseEnter={() => setClickedVideoId(video.id)}
             >
+              {/* Top 10 Number overlay for first category */}
+              {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
+                <div className="absolute top-0 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
+                     style={{ 
+                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                       WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
+                     }}>
+                  {index + 1}
+                </div>
+              )}
               <VideoCard
                 video={video}
                 onClick={(video) => {
                   setClickedVideoId(video.id);
                   onVideoClick(video);
                 }}
-                className="w-full rounded-lg overflow-hidden"
+                className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
               />
             </div>
           ))}

client/src/components/video-card.tsx

@@ -123,7 +123,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card ${className}`}
+      className={`video-card transition-transform duration-200 hover:scale-[1.02] ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -136,7 +136,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         <img
           src={video.thumbnailUrl}
           alt={video.title}
-          className={`w-full h-full object-cover transition-all duration-300 ${showPreview ? 'opacity-0' : 'opacity-100'}`}
+          className={`w-full h-full object-cover transition-all duration-300 ${showPreview ? 'opacity-0' : 'opacity-100 group-hover:scale-105'}`}
           style={{ 
             objectPosition: video.faceCenterPosition || 'center center',
             objectFit: 'cover'

client/src/index.css

@@ -65,8 +65,6 @@
     background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 50%, hsl(260, 40%, 20%) 100%);
     color: hsl(210, 40%, 98%);
     min-height: 100vh;
-    max-width: 1200px;
-    margin: 0 auto;
     /* iOS PWA optimizacije */
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -228,10 +226,8 @@ input[data-testid*="search"]::placeholder {
 
 /* Video card hover effects with gradients */
 .video-card:hover {
-  transform: translateY(-2px) scale(1.02);
+  transform: translateY(-2px);
   transition: all 0.3s ease;
-  z-index: 1000;
-  position: relative;
 }
 
 .video-card {

client/src/pages/FolxStadlPage.tsx

@@ -20,42 +20,17 @@ export default function FolxStadlPage() {
   const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
-    queryKey: ['/api/videos', { limit: 200 }],
+    queryKey: ['/api/videos?limit=200'],
-    queryFn: async ({ queryKey }) => {
-      const [, params] = queryKey as [string, any];
-      const searchParams = new URLSearchParams();
-      
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined) {
-          searchParams.append(key, String(value));
-        }
-      });
-
-      const response = await fetch(`/api/videos?${searchParams}`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch videos');
-      }
-      return response.json();
-    },
     select: (response) => response || { videos: [], total: 0 }
   });
 
   const videos = data?.videos || [];
 
   // Filter all FOLX STADL videos (including all seasons and formats)
-  let folxStadlVideos = videos.filter(video => 
+  const folxStadlVideos = videos.filter(video => 
     video.title.includes("FOLX STADL") || video.title.includes("FOLXSTADL")
   );
 
-  // Apply search filter if search query exists
-  if (searchQuery && searchQuery.length >= 2) {
-    const searchLower = searchQuery.toLowerCase();
-    folxStadlVideos = folxStadlVideos.filter(video =>
-      video.title.toLowerCase().includes(searchLower) ||
-      video.description?.toLowerCase().includes(searchLower)
-    );
-  }
-
   // Pagination logic
   const totalPages = Math.ceil(folxStadlVideos.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
@@ -116,9 +91,7 @@ export default function FolxStadlPage() {
                     value={searchQuery}
                     onChange={(e) => {
                       setSearchQuery(e.target.value);
-                      if (e.target.value) {
+                      if (e.target.value) setLocation(`/?search=${encodeURIComponent(e.target.value)}`);
-                        setLocation(`/?search=${encodeURIComponent(e.target.value)}`);
-                      }
                     }}
                     className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
                   />
@@ -170,12 +143,7 @@ export default function FolxStadlPage() {
                   type="search"
                   placeholder="Search..."
                   value={searchQuery}
-                  onChange={(e) => {
+                  onChange={(e) => setSearchQuery(e.target.value)}
-                    setSearchQuery(e.target.value);
-                    if (e.target.value) {
-                      setLocation(`/?search=${encodeURIComponent(e.target.value)}`);
-                    }
-                  }}
                   className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
                 />
                 <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />

client/src/pages/home.tsx

@@ -76,8 +76,8 @@ export default function Home() {
   return (
     <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
       {/* STICKY HEADER */}
-      <div className="header-sticky bg-transparent overflow-visible">
+      <div className="header-sticky bg-transparent overflow-hidden">
-        <div className="max-w-6xl mx-auto pl-4 pr-4 py-4">
+        <div className="max-w-7xl mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             {/* Left side - Logo */}
             <div className="flex items-center space-x-4">
@@ -168,11 +168,11 @@ export default function Home() {
         )}
       </div>
 
-      <main className="max-w-6xl mx-auto pt-4 pb-8 relative px-8">
+      <main className="w-full pt-0 pb-8 relative">
         
-        {/* Trikotniki na robovih - dvignjeni višje */}
+        {/* Trikotniki na robovih - ne prekrivajo video kartic */}
-        <div className="absolute top-2 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
+        <div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
-        <div className="absolute top-20 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
+        <div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
         <div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
         {viewMode === "grid" ? (
           <NetflixGrid