kevinsatriadarmawan/Frontend-Smart_Ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize project structure with core UI components including Navbar, Footer, and Hero sections

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 13:13:51 +07:00
parent a8dfc3d294
commit 26c9b4b362
7 changed files with 271 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/EventCard.tsx
View File

@@ -22,24 +22,24 @@ export default function EventCard({
isAvailable = true,
}: EventCardProps) {
return (
<div className="group flex flex-col bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden hover:border-slate-700 hover:shadow-2xl hover:shadow-purple-500/10 transition-all duration-300">
<div className="group flex flex-col bg-white brutal-card h-full">
{/* Image Container */}
<div className="relative h-48 sm:h-56 overflow-hidden">
<div className="absolute inset-0 bg-slate-800 animate-pulse" /> {/* Placeholder background */}
<div className="relative h-56 overflow-hidden brutal-border m-2 border-b-4">
<div className="absolute inset-0 bg-brutal-yellow animate-pulse" />
<img
src={image}
alt={title}
className={`absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105 ${!isAvailable ? 'grayscale opacity-60' : ''}`}
className={`absolute inset-0 w-full h-full object-cover grayscale contrast-125 transition-transform duration-500 group-hover:scale-110 group-hover:grayscale-0 ${!isAvailable ? 'opacity-70' : ''}`}
loading="lazy"
/>
{/* Status Badge */}
<div className="absolute top-4 left-4 z-10">
<span className={`px-3 py-1 text-xs font-bold rounded-full backdrop-blur-md ${
<span className={`px-4 py-2 text-sm font-black uppercase brutal-border ${
isAvailable
? 'bg-purple-600/80 text-white border border-purple-500/50'
: 'bg-slate-800/80 text-slate-300 border border-slate-600/50'
? 'bg-brutal-pink text-black brutal-shadow-sm'
: 'bg-white text-black brutal-shadow-sm'
}`}>
{status}
</span>
@@ -48,46 +48,46 @@ export default function EventCard({
{/* Content Container */}
<div className="flex flex-col flex-1 p-5 sm:p-6">
<h3 className="font-display text-xl font-bold text-white mb-4 line-clamp-2 leading-tight">
<h3 className="font-display text-2xl font-black text-black mb-4 line-clamp-2 leading-tight uppercase group-hover:text-brutal-pink transition-colors">
{title}
</h3>
<div className="space-y-2 mb-6 mt-auto">
<div className="flex items-center gap-2 text-slate-400 text-sm">
<MapPin className="w-4 h-4 shrink-0" />
<div className="space-y-3 mb-6 mt-auto">
<div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
<MapPin className="w-5 h-5 shrink-0 stroke-[3]" />
<span className="truncate">{location}</span>
</div>
<div className="flex items-center gap-2 text-slate-400 text-sm">
<Calendar className="w-4 h-4 shrink-0" />
<div className="flex items-center gap-3 text-black font-bold text-sm uppercase">
<Calendar className="w-5 h-5 shrink-0 stroke-[3]" />
<span>{date}</span>
</div>
</div>
{/* Footer Area */}
<div className="pt-4 mt-auto border-t border-slate-800 flex items-center justify-between">
<div className="pt-4 mt-auto border-t-4 border-black flex items-center justify-between">
<div>
<p className="text-xs text-slate-500 mb-0.5">START FROM</p>
<p className="text-sm font-black text-black mb-1 uppercase">START FROM</p>
{isAvailable ? (
<p className="font-display font-bold text-lg text-white">
<p className="font-display font-black text-xl text-black">
{price}
</p>
) : (
<p className="text-sm font-medium text-slate-400">
Ticket Belum Tersedia
<p className="text-sm font-bold text-gray-500 uppercase">
Habis
</p>
)}
<p className="text-xs text-slate-500 mt-0.5">By: {organizer}</p>
<p className="text-xs font-bold text-black mt-1 uppercase">BY: {organizer}</p>
</div>
<button
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
className={`flex items-center gap-2 px-5 py-3 text-sm uppercase ${
isAvailable
? 'bg-slate-800 text-white hover:bg-slate-700'
: 'bg-transparent border border-slate-800 text-slate-500 cursor-not-allowed'
? 'bg-brutal-blue brutal-btn'
: 'bg-gray-200 border-4 border-black font-bold text-gray-500 cursor-not-allowed'
}`}
>
{isAvailable ? 'Beli' : 'Close'}
<ArrowRight className="w-4 h-4" />
{isAvailable ? 'BELI TIKET' : 'CLOSE'}
<ArrowRight className="w-5 h-5 stroke-[3]" />
</button>
</div>
</div>