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

Add consistent geometric design elements to all pages

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 15:06:15 +00:00
parent e40b738478
commit 5c2e5b0e10
2 changed files with 140 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/pages/VideoPage.tsx
View File

@ -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>
);
}

89
client/src/pages/not-found.tsx
View File

@ -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>
);
}