This commit is contained in:
yison 2025-07-11 15:41:48 +08:00
parent 18fd3ede2c
commit dc24d5b6ed
117 changed files with 36876 additions and 7 deletions

View file

@ -0,0 +1,250 @@
"use client"
import Image from "next/image"
import {
ArrowLeft,
Play,
ChevronDown,
Clock,
MapPin,
Maximize2,
Users,
Eye,
Share2,
Heart,
MoreHorizontal,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"
export default function ZoneVenuePage() {
const [activeTab, setActiveTab] = useState("highlights")
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
{/* Header with premium background */}
<div className="relative h-64 bg-gradient-to-br from-gray-900 via-blue-900 to-red-900 overflow-hidden">
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"></div>
{/* Header Controls */}
<div className="relative z-10 p-4 flex items-center justify-between">
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
<ArrowLeft className="w-5 h-5 text-white" />
</div>
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
<Share2 className="w-5 h-5 text-white" />
</div>
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
<MoreHorizontal className="w-5 h-5 text-white" />
</div>
</div>
</div>
{/* Venue Info Card with glassmorphism */}
<div className="absolute bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl rounded-t-3xl p-6 border-t border-white/20">
<div className="flex items-center space-x-4">
<div className="relative">
<div className="w-20 h-20 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl flex items-center justify-center overflow-hidden shadow-xl">
<span className="text-white font-bold text-2xl">R</span>
</div>
<div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
</div>
</div>
<div className="flex-1">
<h1 className="text-2xl font-bold text-gray-900 mb-1">RONIN黄金篮球馆</h1>
<p className="text-sm text-gray-500 flex items-center mb-2">
<MapPin className="w-4 h-4 mr-1" />
124
</p>
<div className="flex items-center space-x-4 text-xs text-gray-500">
<div className="flex items-center space-x-1">
<Users className="w-3 h-3" />
<span>1,234 </span>
</div>
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
<div className="flex items-center space-x-1">
<Eye className="w-3 h-3" />
<span> 856 </span>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Main Video Player with enhanced styling */}
<div className="px-4 pt-8">
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-2xl shadow-gray-200/50 border border-gray-100/50">
<div className="relative">
<Image
src="/placeholder.svg?height=300&width=600&text=Basketball+Game"
alt="Basketball game"
width={600}
height={300}
className="w-full h-64 object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
<div className="w-20 h-20 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-110">
<Play className="w-10 h-10 text-gray-800 ml-1" fill="currentColor" />
</div>
</div>
<div className="absolute bottom-4 right-4">
<div className="bg-black/30 backdrop-blur-sm rounded-xl p-2 transition-all duration-300 hover:scale-105">
<Maximize2 className="w-5 h-5 text-white" />
</div>
</div>
<div className="absolute bottom-4 left-4 flex space-x-2">
<div className="w-2 h-2 bg-white rounded-full"></div>
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
</div>
<div className="absolute top-4 left-4">
<div className="bg-red-500/90 backdrop-blur-sm text-white px-3 py-1 rounded-xl text-sm font-semibold flex items-center">
<div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
</div>
</div>
</div>
<div className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2">
<Heart className="w-5 h-5 text-red-500" />
<span className="text-sm font-medium text-gray-600">2.1k</span>
</div>
<div className="flex items-center space-x-2">
<Eye className="w-5 h-5 text-gray-400" />
<span className="text-sm font-medium text-gray-600">856</span>
</div>
</div>
<div className="text-xs text-gray-500">2</div>
</div>
</div>
</div>
</div>
{/* Navigation Tabs with enhanced styling */}
<div className="px-4 mt-8">
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-1 shadow-lg shadow-gray-200/30 border border-gray-100/50">
<div className="flex">
<button
onClick={() => setActiveTab("highlights")}
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
activeTab === "highlights"
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
: "text-gray-500 hover:text-gray-700"
}`}
>
</button>
<button
onClick={() => setActiveTab("replay")}
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
activeTab === "replay"
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
: "text-gray-500 hover:text-gray-700"
}`}
>
</button>
</div>
</div>
</div>
{/* Court and Time Selection with premium styling */}
<div className="px-4 mt-6 flex space-x-3">
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
<div className="w-4 h-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full shadow-sm"></div>
<span className="text-sm font-semibold text-gray-900">1</span>
<ChevronDown className="w-4 h-4 text-gray-400" />
</div>
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
<Clock className="w-4 h-4 text-gray-400" />
<span className="text-sm font-semibold text-gray-900"> 08:20 ~ 22:00</span>
<ChevronDown className="w-4 h-4 text-gray-400" />
</div>
</div>
{/* Video Grid with enhanced styling */}
<div className="px-4 mt-6 grid grid-cols-2 gap-4">
{/* Live Video */}
<div className="relative group">
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
<div className="relative">
<Image
src="/placeholder.svg?height=150&width=200&text=Live+Game"
alt="Live basketball game"
width={200}
height={150}
className="w-full h-32 object-cover"
/>
<div className="absolute top-2 left-2">
<div className="bg-[#05C7C7]/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-semibold flex items-center">
<div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
</div>
</div>
<div className="absolute top-2 right-2">
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
</div>
</div>
</div>
</div>
{/* Other Videos */}
{[1, 2, 3, 4, 5].map((index) => (
<div key={index} className="relative group">
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
<div className="relative">
<Image
src={`/placeholder.svg?height=150&width=200&text=Game+${index + 1}`}
alt={`Basketball game ${index + 1}`}
width={200}
height={150}
className="w-full h-32 object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center rounded-3xl">
<div className="w-10 h-10 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110">
<Play className="w-5 h-5 text-gray-800 ml-0.5" fill="currentColor" />
</div>
</div>
<div className="absolute top-2 right-2">
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
</div>
</div>
</div>
</div>
))}
</div>
{/* Bottom Notice with enhanced styling */}
<div className="px-4 mt-8">
<div className="bg-orange-50/80 backdrop-blur-sm border border-orange-200/50 rounded-2xl p-4 flex items-center justify-center">
<div className="w-5 h-5 border-2 border-orange-400 rounded-full flex items-center justify-center mr-3">
<span className="text-orange-400 text-xs font-bold">!</span>
</div>
<span className="text-sm text-orange-600 font-medium">7</span>
</div>
</div>
{/* Bottom Actions - Fixed with glassmorphism */}
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 px-4 py-4 flex space-x-4">
<Button className="flex-1 bg-gradient-to-r from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 text-white py-4 rounded-2xl font-bold shadow-xl shadow-orange-400/30 transition-all duration-300 hover:scale-[1.02]">
</Button>
<Button
variant="ghost"
className="text-gray-600 font-semibold px-6 py-4 rounded-2xl transition-all duration-300 hover:bg-gray-100/50"
>
</Button>
</div>
{/* Bottom Spacing for Fixed Actions */}
<div className="h-24"></div>
</div>
)
}