feat: initialize frontend application with landing page components and event listings

src/components/EventCard.tsx

@@ -0,0 +1,96 @@
+import { MapPin, Calendar, ArrowRight } from 'lucide-react';
+
+interface EventCardProps {
+  title: string;
+  image: string;
+  date: string;
+  location: string;
+  price: string;
+  organizer: string;
+  status?: string;
+  isAvailable?: boolean;
+}
+
+export default function EventCard({
+  title,
+  image,
+  date,
+  location,
+  price,
+  organizer,
+  status = "ON SALE",
+  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">
+      
+      {/* Image Container */}
+      <div className="relative h-48 sm:h-56 overflow-hidden">
+        <div className="absolute inset-0 bg-slate-800 animate-pulse" /> {/* Placeholder background */}
+        <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' : ''}`}
+          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 ${
+            isAvailable 
+              ? 'bg-purple-600/80 text-white border border-purple-500/50' 
+              : 'bg-slate-800/80 text-slate-300 border border-slate-600/50'
+          }`}>
+            {status}
+          </span>
+        </div>
+      </div>
+
+      {/* 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">
+          {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" />
+            <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" />
+            <span>{date}</span>
+          </div>
+        </div>
+
+        {/* Footer Area */}
+        <div className="pt-4 mt-auto border-t border-slate-800 flex items-center justify-between">
+          <div>
+            <p className="text-xs text-slate-500 mb-0.5">START FROM</p>
+            {isAvailable ? (
+              <p className="font-display font-bold text-lg text-white">
+                {price}
+              </p>
+            ) : (
+              <p className="text-sm font-medium text-slate-400">
+                Ticket Belum Tersedia
+              </p>
+            )}
+            <p className="text-xs text-slate-500 mt-0.5">By: {organizer}</p>
+          </div>
+
+          <button 
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
+              isAvailable 
+                ? 'bg-slate-800 text-white hover:bg-slate-700' 
+                : 'bg-transparent border border-slate-800 text-slate-500 cursor-not-allowed'
+            }`}
+          >
+            {isAvailable ? 'Beli' : 'Close'}
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}