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

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

@ -40,8 +40,12 @@ export default function SearchHeader({
};
return (
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
<div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></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">
<div className="flex items-center space-x-4">
<a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">

64
client/src/index.css
View File

@ -236,4 +236,68 @@ input[data-testid*="search"]::placeholder {
.gradient-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
/* Geometric triangle decorations */
.triangle-decoration-1 {
position: absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid rgba(59, 130, 246, 0.15);
transform: rotate(15deg);
}
.triangle-decoration-2 {
position: absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 40px solid rgba(147, 51, 234, 0.15);
transform: rotate(-25deg);
}
.triangle-decoration-3 {
position: absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 50px solid rgba(59, 130, 246, 0.12);
transform: rotate(45deg);
}
.floating-triangles {
position: relative;
overflow: hidden;
}
.floating-triangles::before {
content: '';
position: absolute;
top: 15%;
right: 10%;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 55px solid rgba(59, 130, 246, 0.08);
transform: rotate(30deg);
z-index: 1;
}
.floating-triangles::after {
content: '';
position: absolute;
bottom: 25%;
left: 8%;
width: 0;
height: 0;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-bottom: 45px solid rgba(147, 51, 234, 0.08);
transform: rotate(-15deg);
z-index: 1;
}

21
client/src/pages/home.tsx
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">