Add decorative triangles to enhance the header's visual appeal
Add three decorative triangles with varying sizes, colors, and rotations to the search header component for visual enhancement. 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/sSdhj9u
This commit is contained in:
parent
1a9b51610b
commit
177f5d945f
@ -42,6 +42,10 @@ export default function SearchHeader({
|
||||
return (
|
||||
<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="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 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user