From 5c2e5b0e1078c121cfdbe762d33a65a7362e52ae Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:06:15 +0000
Subject: [PATCH] Add consistent geometric design elements to all pages

Update VideoPage and NotFound pages to include the same header and footer styling with floating triangle decorations, matching the homepage's visual design.

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/Il9ea4g
---
 client/src/pages/VideoPage.tsx | 77 +++++++++++++++++++++++------
 client/src/pages/not-found.tsx | 89 +++++++++++++++++++++++++++++-----
 2 files changed, 140 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 1268678..43a3ebd 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -119,24 +119,45 @@ export default function VideoPage() {
   }
 
   return (
-    <div className="min-h-screen bg-bunny-dark">
-      {/* Header */}
-      <header className="bg-bunny-gray/50 border-b border-gray-700 p-4">
-        <div className="max-w-7xl mx-auto flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-bunny-blue rounded-full flex items-center justify-center">
-              <div className="w-0 h-0 border-l-[6px] border-l-white border-y-[4px] border-y-transparent ml-1"></div>
+    <div className="min-h-screen bunny-dark floating-triangles">
+      {/* Header with triangle design */}
+      <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
+        {/* Triangle decorations in header - same as home page */}
+        <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>
+        
+        <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">
+                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
+              </a>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-6">
+              <nav className="flex space-x-6">
+                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+                  Home
+                </a>
+              </nav>
+              
+              <Button
+                onClick={() => window.history.back()}
+                className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-sm transition-all duration-200"
+              >
+                ← Back
+              </Button>
             </div>
-            <h1 className="text-xl font-bold text-bunny-light">go4.video</h1>
           </div>
-          <Button
-            onClick={() => window.history.back()}
-            className="bg-gray-700 hover:bg-gray-600 text-white"
-          >
-            ← Back
-          </Button>
         </div>
-      </header>
+      </div>
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6">
         <div className="flex flex-col lg:flex-row gap-6">
@@ -282,6 +303,32 @@ export default function VideoPage() {
           </div>
         </div>
       </div>
+      
+      {/* Footer - same as home page */}
+      <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
+        {/* Triangle decorations in footer */}
+        <div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
+        <div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
+        <div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
+        
+        <div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
+        <div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
+          <div className="flex flex-col md:flex-row items-center justify-between">
+            <div className="flex items-center space-x-2 mb-4 md:mb-0">
+              <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-md">
+                <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
+              </div>
+              <span className="text-lg font-semibold text-white">go4.video</span>
+            </div>
+            
+            <div className="text-sm text-bunny-muted">
+              © 2024 go4.video. All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index dba9f83..427dbb5 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -1,21 +1,88 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen w-full flex items-center justify-center bg-gray-50">
-      <Card className="w-full max-w-md mx-4">
-        <CardContent className="pt-6">
-          <div className="flex mb-4 gap-2">
-            <AlertCircle className="h-8 w-8 text-red-500" />
-            <h1 className="text-2xl font-bold text-gray-900">404 Page Not Found</h1>
+    <div className="min-h-screen bunny-dark floating-triangles">
+      {/* Header - same as other pages */}
+      <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>
+        
+        <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">
+                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
+              </a>
+            </div>
+            
+            <div className="hidden md:flex items-center space-x-6">
+              <nav className="flex space-x-6">
+                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+                  Home
+                </a>
+              </nav>
+            </div>
           </div>
+        </div>
+      </div>
 
-          <p className="mt-4 text-sm text-gray-600">
-            Did you forget to add the page to the router?
-          </p>
-        </CardContent>
-      </Card>
+      {/* 404 Content */}
+      <div className="flex items-center justify-center min-h-[60vh] px-4">
+        <Card className="w-full max-w-md mx-4 bg-bunny-gray/50 border-white/20">
+          <CardContent className="pt-6">
+            <div className="flex flex-col items-center text-center space-y-4">
+              <AlertCircle className="h-16 w-16 text-red-400" />
+              <h1 className="text-2xl font-bold text-white">404 Page Not Found</h1>
+              <p className="text-bunny-muted">
+                The page you're looking for doesn't exist or has been moved.
+              </p>
+              <Button
+                onClick={() => window.location.href = '/'}
+                className="gradient-primary hover:opacity-90 text-white"
+              >
+                Back to Home
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Footer - same as other pages */}
+      <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
+        {/* Triangle decorations in footer */}
+        <div className="absolute bottom-2 left-10 w-0 h-0 border-l-[30px] border-l-transparent border-r-[30px] border-r-transparent border-b-[40px] border-b-purple-400/8 rotate-12"></div>
+        <div className="absolute bottom-1 right-1/4 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-blue-400/6 -rotate-12"></div>
+        <div className="absolute bottom-3 left-1/2 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-cyan-400/7 rotate-45"></div>
+        
+        <div className="triangle-decoration-1 opacity-20" style={{bottom: '10px', right: '20%'}}></div>
+        <div className="triangle-decoration-3 opacity-15" style={{bottom: '20px', left: '15%'}}></div>
+        
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
+          <div className="flex flex-col md:flex-row items-center justify-between">
+            <div className="flex items-center space-x-2 mb-4 md:mb-0">
+              <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-md">
+                <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
+              </div>
+              <span className="text-lg font-semibold text-white">go4.video</span>
+            </div>
+            
+            <div className="text-sm text-bunny-muted">
+              © 2024 go4.video. All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }