fix ui style

app/(public)/trips/[id]/payment/page.tsx

@@ -11,6 +11,15 @@ import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
 import { isFreeTrip } from "@/lib/trip-pricing";
 import { categoryMeta } from "@/lib/activity-category";
 import { MidtransPayButton } from "@/features/booking/components/midtrans-pay-button";
+import {
+  ArrowLeft,
+  CalendarDays,
+  MapPin,
+  PartyPopper,
+  CircleCheck,
+  Clock,
+  Check,
+} from "lucide-react";
 
 export const metadata: Metadata = {
   title: "Detail Pembayaran",
@@ -82,8 +91,15 @@ export default async function PaymentPage({ params, searchParams }: PageProps) {
           <h1 className="mt-0.5 truncate text-base font-bold text-neutral-900 sm:text-lg">
             {trip.title}
           </h1>
-          <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
-            📅 {dateRange} · 📍 {trip.location}
+          <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-neutral-500 sm:text-sm">
+            <span className="inline-flex items-center gap-1">
+              <CalendarDays size={13} strokeWidth={1.75} aria-hidden />
+              {dateRange}
+            </span>
+            <span className="inline-flex items-center gap-1">
+              <MapPin size={13} strokeWidth={1.75} aria-hidden />
+              {trip.location}
+            </span>
           </p>
           <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
             Organizer:{" "}
@@ -102,8 +118,12 @@ export default async function PaymentPage({ params, searchParams }: PageProps) {
   return (
     <div className="mx-auto max-w-2xl px-4 py-6 sm:py-10">
       <div className="mb-4 flex items-center gap-2 text-xs text-neutral-500 sm:text-sm">
-        <Link href={`/trips/${trip.id}`} className="hover:text-primary-600">
-          ← Kembali ke trip
+        <Link
+          href={`/trips/${trip.id}`}
+          className="inline-flex items-center gap-1 hover:text-primary-600"
+        >
+          <ArrowLeft size={14} strokeWidth={1.75} aria-hidden />
+          Kembali ke trip
         </Link>
       </div>
 
@@ -170,8 +190,13 @@ function FreeTripSection({
 }) {
   return (
     <section className="rounded-2xl border border-emerald-200 bg-emerald-50/60 p-6 text-center shadow-sm sm:p-8">
-      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-2xl">
-        🎉
+      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100">
+        <PartyPopper
+          size={26}
+          strokeWidth={1.75}
+          aria-hidden
+          className="text-emerald-600"
+        />
       </div>
       <h2 className="mb-1 text-lg font-bold text-emerald-900 sm:text-xl">
         Trip ini gratis
@@ -184,10 +209,28 @@ function FreeTripSection({
         <p className="text-[11px] font-semibold uppercase tracking-wide text-emerald-700">
           Status keikutsertaan
         </p>
-        <p className="text-sm font-bold text-neutral-800">
-          {bookingStatus === "PAID"
-            ? "✅ Terkonfirmasi sebagai peserta"
-            : "⏳ Menunggu persetujuan organizer"}
+        <p className="flex items-center gap-1.5 text-sm font-bold text-neutral-800">
+          {bookingStatus === "PAID" ? (
+            <>
+              <CircleCheck
+                size={15}
+                strokeWidth={2}
+                aria-hidden
+                className="text-emerald-600"
+              />
+              Terkonfirmasi sebagai peserta
+            </>
+          ) : (
+            <>
+              <Clock
+                size={15}
+                strokeWidth={2}
+                aria-hidden
+                className="text-amber-600"
+              />
+              Menunggu persetujuan organizer
+            </>
+          )}
         </p>
       </div>
 
@@ -250,10 +293,15 @@ function PaidTripSection({
       {canPay && <MidtransPayButton tripId={tripId} />}
 
       {isFullyPaid && (
-        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900 sm:p-5">
+        <div className="flex items-start gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900 sm:p-5">
+          <CircleCheck
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+            className="mt-0.5 shrink-0 text-emerald-600"
+          />
           <p>
-            ✅ Pembayaran kamu sudah terkonfirmasi. Sampai jumpa di trip
-            bareng{" "}
+            Pembayaran kamu sudah terkonfirmasi. Sampai jumpa di trip bareng{" "}
             <span className="font-semibold">{organizerName}</span>!
           </p>
         </div>
@@ -262,9 +310,10 @@ function PaidTripSection({
       <div className="text-center">
         <Link
           href={`/trips/${tripId}`}
-          className="text-sm text-neutral-500 hover:text-primary-600"
+          className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-primary-600"
         >
-          ← Kembali ke detail trip
+          <ArrowLeft size={14} strokeWidth={1.75} aria-hidden />
+          Kembali ke detail trip
         </Link>
       </div>
     </div>
@@ -298,7 +347,11 @@ function PaymentTimeline({
                   : "bg-neutral-200 text-neutral-500"
               }`}
             >
-              {s.done ? "✓" : i + 1}
+              {s.done ? (
+                <Check size={12} strokeWidth={3} aria-hidden />
+              ) : (
+                i + 1
+              )}
             </span>
             <span
               className={`text-sm ${