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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756395481919.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

47
client/src/components/search-header.tsx
View File

@ -3,6 +3,7 @@ import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import go4LogoPath from "@assets/go4_1756394900352.png";
interface SearchHeaderProps { interface SearchHeaderProps {
onSearch: (query: string) => void; onSearch: (query: string) => void;
@ -44,13 +45,47 @@ export default function SearchHeader({
return ( return (
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden"> <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations in header */} {/* go4.video logoti v headerju */}
<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
<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> style={{
<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> 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> {/* Triangle decorations v headerju - z nižjim z-index da ne zakrivajo besedila */}
<div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div> <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="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"> <div className="flex items-center justify-between h-20">

41
client/src/index.css
View File

@ -243,30 +243,33 @@ input[data-testid*="search"]::placeholder {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-left: 40px solid transparent; border-left: 20px solid transparent;
border-right: 40px solid transparent; border-right: 20px solid transparent;
border-bottom: 60px solid rgba(59, 130, 246, 0.15); border-bottom: 30px solid rgba(59, 130, 246, 0.03);
transform: rotate(15deg); transform: rotate(15deg);
z-index: -1;
} }
.triangle-decoration-2 { .triangle-decoration-2 {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-left: 25px solid transparent; border-left: 15px solid transparent;
border-right: 25px solid transparent; border-right: 15px solid transparent;
border-bottom: 40px solid rgba(147, 51, 234, 0.15); border-bottom: 25px solid rgba(147, 51, 234, 0.03);
transform: rotate(-25deg); transform: rotate(-25deg);
z-index: -1;
} }
.triangle-decoration-3 { .triangle-decoration-3 {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-left: 30px solid transparent; border-left: 18px solid transparent;
border-right: 30px solid transparent; border-right: 18px solid transparent;
border-bottom: 50px solid rgba(59, 130, 246, 0.12); border-bottom: 28px solid rgba(59, 130, 246, 0.03);
transform: rotate(45deg); transform: rotate(45deg);
z-index: -1;
} }
.floating-triangles { .floating-triangles {
@ -278,28 +281,28 @@ input[data-testid*="search"]::placeholder {
content: ''; content: '';
position: absolute; position: absolute;
top: 15%; top: 15%;
right: 10%; right: 2%;
width: 0; width: 0;
height: 0; height: 0;
border-left: 35px solid transparent; border-left: 20px solid transparent;
border-right: 35px solid transparent; border-right: 20px solid transparent;
border-bottom: 55px solid rgba(59, 130, 246, 0.08); border-bottom: 30px solid rgba(59, 130, 246, 0.03);
transform: rotate(30deg); transform: rotate(30deg);
z-index: 1; z-index: -1;
} }
.floating-triangles::after { .floating-triangles::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 25%; bottom: 25%;
left: 8%; left: 2%;
width: 0; width: 0;
height: 0; height: 0;
border-left: 28px solid transparent; border-left: 18px solid transparent;
border-right: 28px solid transparent; border-right: 18px solid transparent;
border-bottom: 45px solid rgba(147, 51, 234, 0.08); border-bottom: 28px solid rgba(147, 51, 234, 0.03);
transform: rotate(-15deg); transform: rotate(-15deg);
z-index: 1; z-index: -1;
} }
/* Background go4.video logo decorations */ /* Background go4.video logo decorations */

58
client/src/pages/home.tsx
View File

@ -231,15 +231,10 @@ export default function Home() {
}} }}
/> />
{/* Large geometric triangles */} {/* Trikotniki premaknjeni stran od vsebine - z zelo nizko prosojnostjo */}
<div className="absolute top-10 right-10 w-0 h-0 border-l-[100px] border-l-transparent border-r-[100px] border-r-transparent border-b-[150px] border-b-blue-400/8 rotate-12 z-0"></div> <div className="absolute top-10 left-0 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[90px] border-b-blue-400/3 rotate-12" style={{zIndex: -1}}></div>
<div className="absolute top-1/3 left-5 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[110px] border-b-purple-400/8 -rotate-12 z-0"></div> <div className="absolute top-1/2 right-0 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[75px] border-b-purple-400/3 -rotate-12" style={{zIndex: -1}}></div>
<div className="absolute bottom-1/4 right-1/4 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[90px] border-b-cyan-400/8 rotate-45 z-0"></div> <div className="absolute bottom-1/4 left-0 w-0 h-0 border-l-[40px] border-l-transparent border-r-[40px] border-r-transparent border-b-[60px] border-b-cyan-400/3 rotate-45" style={{zIndex: -1}}></div>
{/* Additional floating triangles */}
<div className="triangle-decoration-1" style={{top: '20%', right: '5%'}}></div>
<div className="triangle-decoration-2" style={{top: '60%', left: '3%'}}></div>
<div className="triangle-decoration-3" style={{top: '40%', right: '20%'}}></div>
<VideoGrid <VideoGrid
videos={allVideos} videos={allVideos}
isLoading={isLoading} isLoading={isLoading}
@ -255,10 +250,47 @@ export default function Home() {
{/* Footer with large triangle design */} {/* Footer with large triangle design */}
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden"> <footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* Large geometric triangles */} {/* go4.video logoti v footerju */}
<div className="absolute top-0 right-0 w-0 h-0 border-l-[200px] border-l-transparent border-b-[120px] border-b-blue-500/10"></div> <div
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[150px] border-r-transparent border-t-[100px] border-t-purple-500/10"></div> style={{
<div className="absolute top-1/2 right-1/3 w-0 h-0 border-l-[80px] border-l-transparent border-r-[80px] border-r-transparent border-b-[100px] border-b-cyan-400/8 transform -translate-y-1/2 rotate-45"></div> position: 'absolute',
top: '20px',
right: '15%',
transform: 'rotate(-20deg)',
width: '150px',
height: '75px',
backgroundImage: `url(${go4LogoPath})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
pointerEvents: 'none',
zIndex: 1,
opacity: 0.25,
filter: 'blur(0.5px)'
}}
/>
<div
style={{
position: 'absolute',
bottom: '20px',
left: '10%',
transform: 'rotate(30deg)',
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)'
}}
/>
{/* Trikotniki v footerju - z nižjim z-index da ne zakrivajo besedila */}
<div className="absolute top-0 right-0 w-0 h-0 border-l-[150px] border-l-transparent border-b-[90px] border-b-blue-500/6 z-0"></div>
<div className="absolute bottom-0 left-0 w-0 h-0 border-r-[120px] border-r-transparent border-t-[80px] border-t-purple-500/6 z-0"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="col-span-1 md:col-span-2"> <div className="col-span-1 md:col-span-2">