fix ui style

app/(public)/page.tsx

@@ -8,6 +8,15 @@ import { profileRepo } from "@/server/repositories/profile.repo";
 import { TripCard } from "@/features/trip/components/trip-card";
 import { siteConfig, siteUrl, absoluteUrl } from "@/lib/site";
 import { ACTIVITY_CATEGORIES, categoryMeta } from "@/lib/activity-category";
+import {
+  Compass,
+  Flame,
+  Mountain,
+  Handshake,
+  Tent,
+  Plus,
+  type LucideIcon,
+} from "lucide-react";
 
 type OpenTrip = Awaited<ReturnType<typeof tripService.getOpenTrips>>[number];
 
@@ -44,6 +53,9 @@ export default async function HomePage() {
   const now = new Date();
   const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
 
+  // Social proof: total orang yang sudah gabung di seluruh open trip.
+  const joinerCount = trips.reduce((sum, t) => sum + t._count.participants, 0);
+
   const upcomingTrips = trips
     .filter((t) => new Date(t.date) <= nextWeek)
     .slice(0, 3);
@@ -107,12 +119,17 @@ export default async function HomePage() {
           className="object-cover opacity-10 brightness-150"
           priority
         />
-        <div className="absolute inset-0 bg-linear-to-br from-primary-900/85 via-neutral-900/75 to-secondary-900/80" />
+        <div className="absolute inset-0 bg-linear-to-br from-neutral-900/90 to-primary-900/80" />
 
         <div className="relative mx-auto max-w-4xl px-4 pb-10 pt-8 text-center sm:pb-14 sm:pt-12 lg:pb-16 lg:pt-14">
           {/* Brand badge */}
           <div className="mb-4 inline-flex items-center gap-1.5 rounded-full border border-primary-400/30 bg-primary-600/20 px-3 py-1 sm:mb-6 sm:gap-2 sm:px-4 sm:py-1.5">
-            <span className="text-xs sm:text-sm">🤝</span>
+            <Handshake
+              size={14}
+              strokeWidth={1.75}
+              aria-hidden
+              className="text-primary-300"
+            />
             <span className="text-xs font-medium text-primary-300 sm:text-sm">
               Cari teman trip & aktivitas
             </span>
@@ -150,8 +167,12 @@ export default async function HomePage() {
             </div>
             <div className="h-8 w-px bg-neutral-700 sm:h-10" />
             <div>
-              <p className="text-xl font-bold text-white sm:text-2xl">100%</p>
-              <p className="text-[11px] text-neutral-400 sm:text-xs">Seru</p>
+              <p className="text-xl font-bold text-white sm:text-2xl">
+                {joinerCount}
+              </p>
+              <p className="text-[11px] text-neutral-400 sm:text-xs">
+                Sudah Gabung
+              </p>
             </div>
           </div>
         </div>
@@ -161,19 +182,11 @@ export default async function HomePage() {
       <div className="mx-auto max-w-6xl px-4 py-6 space-y-8 sm:py-8 sm:space-y-10 lg:py-10 lg:space-y-12">
         {/* Jelajah per kategori */}
         <section>
-          <div className="mb-4 flex items-center gap-3 sm:mb-5">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-secondary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
-              ✨
-            </div>
-            <div>
-              <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
-                Jelajah per Kategori
-              </h2>
-              <p className="text-[11px] text-neutral-500 sm:text-xs">
-                Hiking, diving, konser, sampai retreat
-              </p>
-            </div>
-          </div>
+          <SectionHeading
+            icon={Compass}
+            title="Jelajah per Kategori"
+            subtitle="Hiking, diving, konser, sampai retreat"
+          />
           <div className="flex flex-wrap gap-2">
             {ACTIVITY_CATEGORIES.map((c) => {
               const m = categoryMeta(c);
@@ -194,19 +207,11 @@ export default async function HomePage() {
         {/* Trip Terdekat */}
         {upcomingTrips.length > 0 && (
           <section>
-            <div className="mb-4 flex items-center gap-3 sm:mb-5">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
-                🔥
-              </div>
-              <div>
-                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
-                  Trip Terdekat
-                </h2>
-                <p className="text-[11px] text-neutral-500 sm:text-xs">
-                  Berangkat dalam 7 hari ke depan
-                </p>
-              </div>
-            </div>
+            <SectionHeading
+              icon={Flame}
+              title="Trip Terdekat"
+              subtitle="Berangkat dalam 7 hari ke depan"
+            />
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {upcomingTrips.slice(0, 3).map((trip, i) => (
                 <TripCard
@@ -239,32 +244,29 @@ export default async function HomePage() {
 
         {/* Open Trip */}
         <section>
-          <div className="mb-4 flex items-center justify-between sm:mb-5">
-            <div className="flex items-center gap-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-secondary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
-                🏔️
-              </div>
-              <div>
-                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
-                  Open Trip
-                </h2>
-                <p className="hidden text-xs text-neutral-500 sm:block">
-                  Pilih trip, ketemu teman baru
-                </p>
-              </div>
-            </div>
-            <Link
-              href="/trips"
-              className="rounded-lg bg-secondary-50 px-2.5 py-1 text-xs font-medium text-secondary-600 hover:bg-secondary-100 sm:px-3 sm:py-1.5 sm:text-sm"
-            >
-              Lihat semua
-            </Link>
-          </div>
+          <SectionHeading
+            icon={Mountain}
+            title="Open Trip"
+            subtitle="Pilih trip, ketemu teman baru"
+            action={
+              <Link
+                href="/trips"
+                className="shrink-0 rounded-lg bg-secondary-50 px-2.5 py-1 text-xs font-medium text-secondary-600 hover:bg-secondary-100 sm:px-3 sm:py-1.5 sm:text-sm"
+              >
+                Lihat semua
+              </Link>
+            }
+          />
 
           {latestTrips.length === 0 ? (
             <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
-              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
-                🏕️
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 sm:h-16 sm:w-16">
+                <Tent
+                  size={26}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-primary-600"
+                />
               </div>
               <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
                 Belum ada trip tersedia
@@ -312,19 +314,11 @@ export default async function HomePage() {
         {/* Lagi Ramai — social proof, bukan price proof */}
         {buzzingTrips.length > 0 && (
           <section>
-            <div className="mb-4 flex items-center gap-3 sm:mb-5">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-100 text-base sm:h-9 sm:w-9 sm:text-lg">
-                🤝
-              </div>
-              <div>
-                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
-                  Lagi Ramai
-                </h2>
-                <p className="text-[11px] text-neutral-500 sm:text-xs">
-                  Banyak yang sudah gabung — kamu nggak bakal jalan sendirian
-                </p>
-              </div>
-            </div>
+            <SectionHeading
+              icon={Handshake}
+              title="Lagi Ramai"
+              subtitle="Banyak yang sudah gabung — kamu nggak bakal jalan sendirian"
+            />
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {buzzingTrips.map((trip) => (
                 <TripCard
@@ -383,11 +377,48 @@ export default async function HomePage() {
       {/* ========== FAB ========== */}
       <Link
         href="/create-trip"
-        className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary-600 text-xl font-bold text-white shadow-xl shadow-primary-600/30 transition-all hover:scale-110 hover:bg-primary-500 active:scale-95 sm:bottom-6 sm:right-6 sm:h-14 sm:w-14 sm:text-2xl"
-        title="Buat Trip"
+        className="fixed bottom-4 right-4 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary-600 text-white shadow-xl shadow-primary-600/30 transition-all hover:scale-110 hover:bg-primary-500 active:scale-95 sm:bottom-6 sm:right-6 sm:h-14 sm:w-14"
+        aria-label="Buat Trip"
       >
-        +
+        <Plus size={24} strokeWidth={2} aria-hidden />
       </Link>
     </div>
   );
 }
+
+/** Heading section homepage — ikon stroke + judul, opsional aksi di kanan. */
+function SectionHeading({
+  icon: Icon,
+  title,
+  subtitle,
+  action,
+}: {
+  icon: LucideIcon;
+  title: string;
+  subtitle?: string;
+  action?: React.ReactNode;
+}) {
+  return (
+    <div className="mb-4 flex items-center justify-between gap-3 sm:mb-5">
+      <div className="flex items-center gap-2.5">
+        <Icon
+          size={22}
+          strokeWidth={1.75}
+          aria-hidden
+          className="shrink-0 text-primary-600"
+        />
+        <div>
+          <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-[11px] text-neutral-500 sm:text-xs">
+              {subtitle}
+            </p>
+          )}
+        </div>
+      </div>
+      {action}
+    </div>
+  );
+}