sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update visual design to incorporate the company logo

Browse Source 
Replaces geometric triangle decorations with the company logo in the header and footer. Adjusts styling of remaining triangles to be less intrusive and lower in the z-index, ensuring the logo is the primary visual element.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/qeH5s4D
This commit is contained in:
sebastjanartic
2025-08-28 15:39:37 +00:00
parent 83a93bf190
commit 489ac2c884
4 changed files with 108 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/search-header.tsx
+41 -6
View File
@@ -3,6 +3,7 @@ import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import go4LogoPath from "@assets/go4_1756394900352.png";
interface SearchHeaderProps {
onSearch: (query: string) => void;
@@ -44,13 +45,47 @@ export default function SearchHeader({
return (
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations in header */}
<div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
<div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
<div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
{/* go4.video logoti v headerju */}
<div
style={{
position: 'absolute',
top: '5px',
right: '10%',
transform: 'rotate(-15deg)',
width: '120px',
height: '60px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.2,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
top: '10px',
left: '15%',
transform: 'rotate(25deg)',
width: '100px',
height: '50px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.15,
filter: 'blur(0.5px)'
}}
/>
<div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
<div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div>
{/* Triangle decorations v headerju - z nižjim z-index da ne zakrivajo besedila */}
<div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 rotate-12 z-0"></div>
<div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 -rotate-6 z-0"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="flex items-center justify-between h-20">