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/pages/home.tsx
+45 -13
View File
@@ -231,15 +231,10 @@ export default function Home() {
}}
/>
{/* Large geometric triangles */}
<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-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 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>
{/* 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>
{/* Trikotniki premaknjeni stran od vsebine - z zelo nizko prosojnostjo */}
<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/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 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>
<VideoGrid
videos={allVideos}
isLoading={isLoading}
@@ -255,10 +250,47 @@ export default function Home() {
{/* Footer with large triangle design */}
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* Large geometric triangles */}
<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 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>
<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>
{/* go4.video logoti v footerju */}
<div
style={{
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="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="col-span-1 md:col-span-2">