feat: implement event card component and event detail page with mock data rendering

src/components/EventCard.tsx

@@ -1,6 +1,8 @@
 import { MapPin, Calendar, ArrowRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 interface EventCardProps {
+  id: string;
   title: string;
   image: string;
   date: string;
@@ -12,6 +14,7 @@ interface EventCardProps {
 }
 
 export default function EventCard({
+  id,
   title,
   image,
   date,
@@ -79,16 +82,22 @@ export default function EventCard({
             <p className="text-xs font-bold text-black mt-1 uppercase">BY: {organizer}</p>
           </div>
 
-          <button 
-            className={`flex items-center gap-2 px-5 py-3 text-sm uppercase ${
-              isAvailable 
-                ? 'bg-brutal-blue brutal-btn' 
-                : 'bg-gray-200 border-4 border-black font-bold text-gray-500 cursor-not-allowed'
-            }`}
-          >
-            {isAvailable ? 'BELI TIKET' : 'CLOSE'}
-            <ArrowRight className="w-5 h-5 stroke-[3]" />
-          </button>
+          {isAvailable ? (
+            <Link 
+              to={`/event/${id}`}
+              className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-brutal-blue brutal-btn"
+            >
+              BELI TIKET
+              <ArrowRight className="w-5 h-5 stroke-[3]" />
+            </Link>
+          ) : (
+            <button 
+              className="flex items-center gap-2 px-5 py-3 text-sm uppercase bg-gray-200 border-4 border-black font-bold text-gray-500 cursor-not-allowed"
+            >
+              CLOSE
+              <ArrowRight className="w-5 h-5 stroke-[3]" />
+            </button>
+          )}
         </div>
       </div>
     </div>