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

Add geometric triangle designs to enhance the platform's visual appeal

Browse Source 
Integrate CSS styles for geometric triangle decorations on the header, home page, and footer, utilizing absolute positioning and rotations for visual depth.

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/T874Ib6
This commit is contained in:
sebastjanartic
2025-08-28 14:54:32 +00:00
parent 41a8c3541f
commit 7b1fd88290
3 changed files with 87 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home.tsx
+17 -4
View File
@@ -72,14 +72,23 @@ export default function Home() {
}, [searchQuery, offset, refetch]);
return (
<div className="min-h-screen bunny-dark">
<div className="min-h-screen bunny-dark floating-triangles">
<SearchHeader
onSearch={handleSearch}
onViewChange={setViewMode}
currentView={viewMode}
/>
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
{/* 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>
<VideoGrid
videos={allVideos}
isLoading={isLoading}
@@ -93,8 +102,12 @@ export default function Home() {
{/* Footer */}
<footer className="bunny-gray border-t border-white/20 mt-16">
{/* 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>
<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">