add trip image

app/trips/[id]/page.tsx

@@ -5,6 +5,7 @@ import { authOptions } from "@/lib/auth";
 import { tripService } from "@/server/services/trip.service";
 import { formatRupiah, formatDate } from "@/lib/utils";
 import { JoinTripButton } from "@/features/trip/components/join-trip-button";
+import { ImageGallery } from "@/features/trip/components/image-gallery";
 
 export default async function TripDetailPage({
   params,
@@ -49,33 +50,35 @@ export default async function TripDetailPage({
       </div>
 
       <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
-        {/* Header — dark theme */}
-        <div className="relative overflow-hidden bg-neutral-800 px-6 py-8">
-          <div className="absolute inset-0 bg-linear-to-br from-primary-900/40 to-secondary-900/30" />
-          <div className="relative">
-            <div className="flex items-start justify-between">
-              <div>
-                <h1 className="text-2xl font-bold text-white">{trip.title}</h1>
-                <p className="mt-1 flex items-center gap-1.5 text-neutral-300">
-                  <span>🏔️</span> {trip.mountain}
-                </p>
-              </div>
-              <span
-                className={`rounded-full px-3 py-1 text-xs font-bold ${
-                  trip.status === "OPEN"
-                    ? "bg-primary-500/20 text-primary-300 ring-1 ring-primary-400/30"
-                    : trip.status === "FULL"
-                    ? "bg-amber-500/20 text-amber-300 ring-1 ring-amber-400/30"
-                    : "bg-neutral-500/20 text-neutral-400 ring-1 ring-neutral-500/30"
-                }`}
-              >
-                {trip.status}
-              </span>
+        {/* Image Gallery */}
+        <ImageGallery images={trip.images} />
+
+        {/* Title bar */}
+        <div className="border-b border-neutral-100 px-6 py-4">
+          <div className="flex items-start justify-between">
+            <div>
+              <h1 className="text-xl font-bold text-neutral-800">
+                {trip.title}
+              </h1>
+              <p className="mt-0.5 flex items-center gap-1.5 text-sm text-neutral-500">
+                🏔️ {trip.mountain}
+              </p>
             </div>
+            <span
+              className={`rounded-full px-3 py-1 text-xs font-bold ${
+                trip.status === "OPEN"
+                  ? "bg-primary-100 text-primary-700"
+                  : trip.status === "FULL"
+                  ? "bg-amber-100 text-amber-700"
+                  : "bg-neutral-100 text-neutral-500"
+              }`}
+            >
+              {trip.status}
+            </span>
           </div>
         </div>
 
-        <div className="p-6 space-y-6">
+        <div className="space-y-6 p-6">
           {/* Info Grid */}
           <div className="grid gap-3 sm:grid-cols-2">
             <div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4">

app/trips/page.tsx

@@ -57,6 +57,7 @@ export default async function TripsPage() {
               participantCount={trip._count.participants}
               organizerName={trip.organizer.name}
               status={trip.status}
+              coverImage={trip.images[0]?.url}
             />
           ))}
         </div>