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

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

client/src/components/search-header.tsx

@@ -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="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      {/* 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">

client/src/index.css

@@ -237,3 +237,67 @@ input[data-testid*="search"]::placeholder {
   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;
+}

client/src/pages/home.tsx

@@ -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 with large triangle design */}
-      <footer className="bunny-gray border-t border-white/20 mt-16">
+      <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">