Hitonabi
80 lines
4.6 KiB
TypeScript
80 lines
4.6 KiB
TypeScript
import { Disc } from 'lucide-react'
|
|
|
|
export function HeroCinemaBanner() {
|
|
return (
|
|
<div className="relative rounded-3xl overflow-hidden border border-amber-500/30 bg-[#0e1322] shadow-[0_0_40px_-5px_rgba(245,158,11,0.18)] mb-8 p-3">
|
|
{/* Top Ambient Glow */}
|
|
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-amber-500/40 to-transparent pointer-events-none" />
|
|
|
|
{/* 5-Panel Movie Carousel Wall (Matching SC1 Mockup 1:1) */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 h-44 md:h-52">
|
|
|
|
{/* Panel 1 */}
|
|
<div className="relative rounded-2xl overflow-hidden group cursor-pointer border border-slate-800 hover:border-amber-500/50 transition-all">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534447677768-be436bb09401?q=80&w=800&auto=format&fit=crop"
|
|
alt="Sci-Fi"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 brightness-90"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-80" />
|
|
<div className="absolute bottom-3 left-3 right-3 text-xs font-bold text-slate-100 tracking-tight drop-shadow">
|
|
Sci-Fi Cinema
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel 2 */}
|
|
<div className="relative rounded-2xl overflow-hidden group cursor-pointer border border-slate-800 hover:border-amber-500/50 transition-all">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1578632767115-351597cf2477?q=80&w=800&auto=format&fit=crop"
|
|
alt="Blade Runner 2049"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 brightness-90"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-80" />
|
|
<div className="absolute bottom-3 left-3 right-3 text-xs font-bold text-amber-300 tracking-tight drop-shadow">
|
|
Blade Runner 2049
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Panel 3: Spinning Optical Disc Showcase */}
|
|
<div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-slate-900 via-[#131929] to-slate-950 border-2 border-amber-500/40 flex items-center justify-center p-4 shadow-inner group">
|
|
<div className="w-32 h-32 md:w-36 md:h-36 rounded-full disc-texture shadow-2xl shadow-black flex items-center justify-center p-1.5 animate-disc-spin border-2 border-amber-400/60 group-hover:border-amber-300 transition-colors">
|
|
<div className="w-full h-full rounded-full border-2 border-dashed border-white/40 flex items-center justify-center bg-slate-950/70">
|
|
<Disc size={44} className="text-amber-400 drop-shadow-[0_0_16px_rgba(245,158,11,0.9)]" />
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-2.5 px-3 py-0.5 rounded-full text-[10px] font-extrabold uppercase tracking-widest bg-amber-500 text-slate-950 shadow-md">
|
|
DISC ENGINE
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel 4 */}
|
|
<div className="relative rounded-2xl overflow-hidden group cursor-pointer border border-slate-800 hover:border-amber-500/50 transition-all hidden md:block">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=800&auto=format&fit=crop"
|
|
alt="Dune"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 brightness-90"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-80" />
|
|
<div className="absolute bottom-3 left-3 right-3 text-xs font-bold text-slate-100 tracking-tight drop-shadow">
|
|
Dune Part II
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel 5 */}
|
|
<div className="relative rounded-2xl overflow-hidden group cursor-pointer border border-slate-800 hover:border-amber-500/50 transition-all hidden md:block">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=800&auto=format&fit=crop"
|
|
alt="Interstellar"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 brightness-90"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-80" />
|
|
<div className="absolute bottom-3 left-3 right-3 text-xs font-bold text-slate-100 tracking-tight drop-shadow">
|
|
Interstellar
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|