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

Improve background logo appearance with more variations and better visibility

Browse Source 
Add multiple instances of the background logo with different rotations, opacities, and positioning, adjusting existing logo opacity for better visibility.

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/I7n64hF
This commit is contained in:
sebastjanartic 2025-08-28 15:58:31 +00:00
parent c5c9bb43f9
commit e05bf1a08e
1 changed files with 191 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,7 +86,7 @@ export default function Home() {
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
{/* Background logo decorations - fiksni veliki go4.video logoti v ozadju */}
{/* OGROMNI go4.video logoti v ozadju - povečani */}
{/* OGROMNI go4.video logoti v ozadju - več pod različnimi koti z manj transparence */}
<img
src={go4LogoPath}
alt=""
@ -99,7 +99,7 @@ export default function Home() {
height: '800px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.4,
opacity: 0.55,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -115,7 +115,39 @@ export default function Home() {
height: '700px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.35,
opacity: 0.5,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '12%',
left: '25%',
transform: 'rotate(75deg)',
width: '1200px',
height: '600px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.45,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '20%',
right: '30%',
transform: 'rotate(-10deg)',
width: '1500px',
height: '750px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.42,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -131,7 +163,7 @@ export default function Home() {
height: '900px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.3,
opacity: 0.45,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -147,7 +179,39 @@ export default function Home() {
height: '750px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.28,
opacity: 0.43,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '55%',
left: '40%',
transform: 'rotate(85deg)',
width: '1300px',
height: '650px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.38,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '60%',
right: '20%',
transform: 'rotate(-55deg)',
width: '1400px',
height: '700px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.35,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -163,7 +227,7 @@ export default function Home() {
height: '850px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.25,
opacity: 0.4,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -179,12 +243,28 @@ export default function Home() {
height: '650px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.22,
opacity: 0.37,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
bottom: '15%',
left: '35%',
transform: 'rotate(95deg)',
width: '1600px',
height: '800px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.32,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
{/* Dodatni ogromni logoti na sredini */}
{/* Dodatni ogromni logoti na sredini - različni koti */}
<img
src={go4LogoPath}
alt=""
@ -197,7 +277,7 @@ export default function Home() {
height: '1200px',
pointerEvents: 'none',
zIndex: -2,
opacity: 0.15,
opacity: 0.3,
filter: 'contrast(2.2) brightness(1.6)'
}}
/>
@ -213,7 +293,7 @@ export default function Home() {
height: '1000px',
pointerEvents: 'none',
zIndex: -2,
opacity: 0.12,
opacity: 0.27,
filter: 'contrast(2.2) brightness(1.6)'
}}
/>
@ -229,7 +309,39 @@ export default function Home() {
height: '900px',
pointerEvents: 'none',
zIndex: -2,
opacity: 0.1,
opacity: 0.25,
filter: 'contrast(2.2) brightness(1.6)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '45%',
left: '70%',
transform: 'rotate(120deg)',
width: '1900px',
height: '950px',
pointerEvents: 'none',
zIndex: -2,
opacity: 0.22,
filter: 'contrast(2.2) brightness(1.6)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'fixed',
top: '75%',
left: '60%',
transform: 'rotate(-80deg)',
width: '1700px',
height: '850px',
pointerEvents: 'none',
zIndex: -2,
opacity: 0.2,
filter: 'contrast(2.2) brightness(1.6)'
}}
/>
@ -253,7 +365,7 @@ export default function Home() {
{/* Footer with large triangle design */}
<footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
{/* go4.video logoti v footerju - povečani */}
{/* go4.video logoti v footerju - več pod različnimi koti */}
<img
src={go4LogoPath}
alt=""
@ -266,7 +378,7 @@ export default function Home() {
height: '350px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.35,
opacity: 0.5,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -282,7 +394,7 @@ export default function Home() {
height: '300px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.3,
opacity: 0.45,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
@ -298,7 +410,71 @@ export default function Home() {
height: '250px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.25,
opacity: 0.4,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
bottom: '15px',
right: '20%',
transform: 'rotate(65deg)',
width: '650px',
height: '325px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.42,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '25px',
left: '15%',
transform: 'rotate(90deg)',
width: '550px',
height: '275px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.38,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
bottom: '20px',
left: '35%',
transform: 'rotate(-70deg)',
width: '600px',
height: '300px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.35,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>
<img
src={go4LogoPath}
alt=""
style={{
position: 'absolute',
top: '15px',
right: '40%',
transform: 'rotate(105deg)',
width: '480px',
height: '240px',
pointerEvents: 'none',
zIndex: -1,
opacity: 0.32,
filter: 'contrast(1.8) brightness(1.4)'
}}
/>