Update homepage to display individual video cards
Replaces the grid layout with individual video cards on the homepage and updates the header styling for a cleaner, more modern look. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/aC8PHqS
This commit is contained in:
sebastjanartic
parent
ac27d22d65
commit
901a5685b6
BIN
attached_assets/image_1756750417243.png
Normal file
BIN
attached_assets/image_1756750417243.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@ -1,13 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { type Video } from "@shared/schema";
|
||||
import VideoGrid from "@/components/video-grid";
|
||||
import VideoCard from "@/components/video-card";
|
||||
import { Link } from "wouter";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Search, Menu, X } from "lucide-react";
|
||||
import NetflixGrid from "@/components/netflix-grid";
|
||||
import go4LogoPath from "@assets/go4_1756394900352.png";
|
||||
|
||||
|
||||
interface VideosResponse {
|
||||
videos: Video[];
|
||||
@ -17,17 +14,13 @@ interface VideosResponse {
|
||||
|
||||
export default function Home() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [allVideos, setAllVideos] = useState<Video[]>([]);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
|
||||
|
||||
// Fetch videos with optimized loading
|
||||
const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
|
||||
const { data: videosResponse, isLoading } = useQuery<VideosResponse>({
|
||||
queryKey: ["/api/videos", {
|
||||
limit: 150, // Naloži dovolj videov za vse kategorije
|
||||
limit: 150,
|
||||
offset: 0,
|
||||
search: searchQuery || undefined
|
||||
}],
|
||||
@ -47,10 +40,10 @@ export default function Home() {
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes cache - much faster
|
||||
gcTime: 10 * 60 * 1000, // 10 minutes retention
|
||||
refetchOnWindowFocus: false, // Don't refetch on focus
|
||||
refetchOnReconnect: false // Don't refetch on reconnect
|
||||
staleTime: 5 * 60 * 1000,
|
||||
gcTime: 10 * 60 * 1000,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnReconnect: false
|
||||
});
|
||||
|
||||
// Update videos when new data comes in
|
||||
@ -60,44 +53,33 @@ export default function Home() {
|
||||
}
|
||||
}, [videosResponse]);
|
||||
|
||||
// Reset videos when search changes
|
||||
const handleSearch = (query: string) => {
|
||||
setSearchQuery(query);
|
||||
setAllVideos([]);
|
||||
const handleVideoClick = (video: Video) => {
|
||||
window.location.href = `/video/${video.id}`;
|
||||
};
|
||||
|
||||
// Only refetch when search changes, not offset (for speed)
|
||||
useEffect(() => {
|
||||
if (searchQuery !== undefined) {
|
||||
refetch();
|
||||
}
|
||||
}, [searchQuery, refetch]);
|
||||
|
||||
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-hidden">
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
|
||||
<div className="container py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Left side - Logo */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
|
||||
<div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-0 h-0 border-l-[12px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
|
||||
<h1 className="text-2xl font-bold text-white">go4.video</h1>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right side - Navigation + Search */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Desktop navigation */}
|
||||
{/* Navigation & Search */}
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
<nav className="flex space-x-6">
|
||||
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||
<Link href="/" className="text-white/80 hover:text-white transition-colors">
|
||||
Home
|
||||
</Link>
|
||||
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||
<Link href="/folx-stadl" className="text-white/80 hover:text-white transition-colors">
|
||||
FOLX STADL
|
||||
</Link>
|
||||
</nav>
|
||||
@ -105,155 +87,80 @@ export default function Home() {
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Videos suchen..."
|
||||
placeholder="Search videos..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(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"
|
||||
className="bg-white/10 border-white/20 text-white placeholder-white/50 w-64"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
|
||||
data-testid="button-mobile-menu"
|
||||
className="md:hidden p-2 text-white"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6 text-white" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-white" />
|
||||
)}
|
||||
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu dropdown - kompakten */}
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-4 py-3">
|
||||
{/* Mobile navigation links - horizontal */}
|
||||
<nav className="flex space-x-6 mb-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<div className="md:hidden mt-4 pt-4 border-t border-white/20">
|
||||
<nav className="flex flex-col space-y-3 mb-4">
|
||||
<Link href="/" className="text-white/80 hover:text-white">Home</Link>
|
||||
<Link href="/folx-stadl" className="text-white/80 hover:text-white">FOLX STADL</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile search - manjši */}
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(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"
|
||||
className="bg-white/10 border-white/20 text-white placeholder-white/50 w-full"
|
||||
/>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
</div>
|
||||
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="w-full pt-0 pb-8 relative">
|
||||
{/* Trikotniki na robovih - ne prekrivajo video kartic */}
|
||||
<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-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" ? (
|
||||
<div className="container">
|
||||
<NetflixGrid
|
||||
videos={allVideos}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
{/* Main Content */}
|
||||
<main className="container py-8">
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
|
||||
{Array.from({ length: 15 }).map((_, index) => (
|
||||
<div key={index} className="animate-pulse">
|
||||
<div className="bg-white/10 aspect-video rounded-lg mb-3"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-white/10 rounded w-3/4"></div>
|
||||
<div className="h-3 bg-white/10 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="container">
|
||||
<VideoGrid
|
||||
videos={allVideos}
|
||||
isLoading={isLoading}
|
||||
hasMore={false}
|
||||
onLoadMore={() => {}}
|
||||
viewMode={viewMode}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
|
||||
{allVideos.map((video) => (
|
||||
<VideoCard
|
||||
key={video.id}
|
||||
video={video}
|
||||
onClick={handleVideoClick}
|
||||
className="hover:scale-105 transition-transform duration-200"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{allVideos.length === 0 && !isLoading && (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-white/60 text-lg">No videos found</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Footer with large triangle design */}
|
||||
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
|
||||
|
||||
{/* Trikotniki v footerju - manjši in bolje pozicionirani */}
|
||||
<div className="absolute top-0 right-0 w-0 h-0 border-l-[80px] border-l-transparent border-b-[50px] border-b-blue-500/4 z-0"></div>
|
||||
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[70px] border-r-transparent border-t-[45px] border-t-purple-500/4 z-0"></div>
|
||||
<div className="container py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-bunny-light">go4.video</h3>
|
||||
</div>
|
||||
<p className="text-bunny-muted mb-4">
|
||||
Premium Video-Streaming-Plattform für Volksmusik, Schlager und Shows von Folx TV.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
Facebook
|
||||
</a>
|
||||
<a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
|
||||
YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-bunny-light">Plattform</h4>
|
||||
<ul className="space-y-2 text-bunny-muted">
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Hochladen</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Statistiken</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">API Docs</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Support</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4 text-bunny-light">Unternehmen</h4>
|
||||
<ul className="space-y-2 text-bunny-muted">
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Über uns</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Datenschutz</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">AGB</a></li>
|
||||
<li><a href="#" className="hover:text-bunny-light transition-colors">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 mt-8 pt-8 text-center text-bunny-muted">
|
||||
<p>© 2024 go4.video. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user