211 lines
12 KiB
TypeScript
211 lines
12 KiB
TypeScript
import Image from "next/image"
|
||
import { MapPin, Play, Home, User, Clock, Zap } from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import Link from "next/link"
|
||
|
||
export default function LimoMobile() {
|
||
return (
|
||
<div className="min-h-screen bg-white">
|
||
{/* Header with subtle gradient */}
|
||
<div className="bg-gradient-to-b from-white to-gray-50/30 px-4 py-4 sticky top-0 z-10 backdrop-blur-md border-b border-gray-100/50">
|
||
<div className="flex items-center justify-between">
|
||
<Image src="/images/limo-logo.png" alt="LIMO来刻" width={120} height={40} className="h-8 w-auto" />
|
||
<Link href="/m-space">
|
||
<Button className="bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white p-2.5 rounded-xl shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
|
||
<Zap className="w-4 h-4" />
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Navigation Tabs with enhanced styling */}
|
||
<div className="flex mt-6 space-x-8">
|
||
<div className="relative">
|
||
<span className="text-[#05C7C7] font-semibold text-base">发现</span>
|
||
<div className="absolute -bottom-3 left-0 right-0 h-0.5 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full"></div>
|
||
</div>
|
||
<span className="text-gray-400 font-medium text-base">关注</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sports Categories with glassmorphism effect */}
|
||
<div className="bg-white/80 backdrop-blur-sm px-4 py-6 mb-6 border-b border-gray-100/50">
|
||
<div className="flex space-x-5 overflow-x-auto scrollbar-hide">
|
||
<div className="flex-shrink-0">
|
||
<div className="bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] text-white px-4 py-3 rounded-2xl text-sm font-semibold flex flex-col items-center justify-center min-w-[70px] shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
|
||
<span>全部</span>
|
||
<span>项目</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||
<div className="w-14 h-14 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||
<span className="text-3xl leading-none">🏀</span>
|
||
</div>
|
||
<span className="text-xs text-gray-600 font-medium">篮球</span>
|
||
</div>
|
||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||
<div className="w-14 h-14 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||
<span className="text-3xl leading-none">⚽</span>
|
||
</div>
|
||
<span className="text-xs text-gray-600 font-medium">足球</span>
|
||
</div>
|
||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||
<div className="w-14 h-14 bg-gradient-to-br from-yellow-100 to-yellow-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||
<span className="text-3xl leading-none">🎾</span>
|
||
</div>
|
||
<span className="text-xs text-gray-600 font-medium">网球</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Location with enhanced styling */}
|
||
<div className="px-4 mb-6">
|
||
<div className="flex items-center text-gray-500 text-sm bg-gray-50/50 rounded-xl px-3 py-2">
|
||
<MapPin className="w-4 h-4 mr-2 text-[#05C7C7]" />
|
||
<span className="flex-1">杭州市文一西路未来科技城万利大厦0701</span>
|
||
<span className="text-[#05C7C7] text-xs font-medium">切换</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Venue Cards with premium styling */}
|
||
<div className="px-4 space-y-6">
|
||
{/* Distance Timeline */}
|
||
<div className="relative">
|
||
<div className="absolute left-6 top-0 bottom-0 w-px bg-gradient-to-b from-[#05C7C7]/30 via-gray-200 to-gray-200"></div>
|
||
|
||
{/* First Venue */}
|
||
<div className="relative">
|
||
<div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full border-2 border-white shadow-lg"></div>
|
||
<div className="ml-12">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<div className="text-xs text-gray-400 font-medium">120km</div>
|
||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||
<div className="flex items-center text-xs text-gray-400">
|
||
<Clock className="w-3 h-3 mr-1" />
|
||
<span>2分钟前更新</span>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
|
||
<div className="relative">
|
||
<Image
|
||
src="/placeholder.svg?height=200&width=400"
|
||
alt="Basketball court"
|
||
width={400}
|
||
height={200}
|
||
className="w-full h-48 object-cover"
|
||
/>
|
||
<div className="absolute top-3 left-3">
|
||
<div className="bg-black/20 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium">
|
||
🔥 热门
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-3 right-3">
|
||
<div className="bg-green-500 w-2 h-2 rounded-full animate-pulse"></div>
|
||
</div>
|
||
</div>
|
||
<div className="p-5">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
|
||
<span className="text-white text-sm font-bold">R</span>
|
||
</div>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 text-base">RONIN黄金篮球馆</h3>
|
||
<p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
|
||
</div>
|
||
</div>
|
||
<Link href="/zone">
|
||
<Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
|
||
进入ZONE
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Second Venue */}
|
||
<div className="relative mt-10">
|
||
<div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full border-2 border-white shadow-lg"></div>
|
||
<div className="ml-12">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<div className="text-xs text-gray-400 font-medium">140km</div>
|
||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||
<div className="flex items-center text-xs text-gray-400">
|
||
<Clock className="w-3 h-3 mr-1" />
|
||
<span>5分钟前更新</span>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
|
||
<div className="relative">
|
||
<Image
|
||
src="/placeholder.svg?height=200&width=400"
|
||
alt="Basketball court with crowd"
|
||
width={400}
|
||
height={200}
|
||
className="w-full h-48 object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
|
||
<div className="w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl transition-all duration-300 hover:scale-110">
|
||
<Play className="w-8 h-8 text-gray-800 ml-1" fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-3 left-3">
|
||
<div className="bg-red-500/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium flex items-center">
|
||
<div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
|
||
直播中
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-5">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
|
||
<span className="text-white text-sm font-bold">P</span>
|
||
</div>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 text-base">Panda惊怒熊猫运动俱乐部</h3>
|
||
<p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
|
||
</div>
|
||
</div>
|
||
<Link href="/zone">
|
||
<Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
|
||
进入ZONE
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Spacing for Fixed Navigation */}
|
||
<div className="h-24"></div>
|
||
|
||
{/* Bottom Navigation with glassmorphism */}
|
||
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
|
||
<div className="flex justify-around">
|
||
<Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||
<div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
||
<Home className="w-4 h-4 text-white" />
|
||
</div>
|
||
<span className="text-xs text-[#05C7C7] font-semibold mt-1">首页</span>
|
||
</Link>
|
||
<Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||
<div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
|
||
<User className="w-4 h-4 text-gray-400" />
|
||
</div>
|
||
<span className="text-xs text-gray-400 mt-1">我的</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Watermark with fade effect */}
|
||
<div className="fixed bottom-20 left-1/2 transform -translate-x-1/2">
|
||
<div className="text-gray-300 text-xs font-light tracking-wider opacity-60">You Only Live Once.</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|