general category trip

app/page.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import { tripService } from "@/server/services/trip.service";
 import { TripCard } from "@/features/trip/components/trip-card";
 import { siteConfig, siteUrl, absoluteUrl } from "@/lib/site";
+import { ACTIVITY_CATEGORIES, categoryMeta } from "@/lib/activity-category";
 
 export const metadata: Metadata = {
   title: "Cari Teman Trip & Aktivitas — Pergi Bareng, Bukan Sendiri",
@@ -135,6 +136,38 @@ export default async function HomePage() {
 
       {/* ========== CONTENT ========== */}
       <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>
+          <div className="flex flex-wrap gap-2">
+            {ACTIVITY_CATEGORIES.map((c) => {
+              const m = categoryMeta(c);
+              return (
+                <Link
+                  key={c}
+                  href={`/trips?category=${c}`}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700"
+                >
+                  <span>{m.icon}</span>
+                  <span>{m.label}</span>
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+
         {/* Trip Terdekat */}
         {upcomingTrips.length > 0 && (
           <section>
@@ -157,7 +190,8 @@ export default async function HomePage() {
                   key={trip.id}
                   id={trip.id}
                   title={trip.title}
-                  mountain={trip.mountain}
+                  category={trip.category}
+                  destination={trip.destination}
                   location={trip.location}
                   date={trip.date}
                   endDate={trip.endDate}
@@ -226,7 +260,8 @@ export default async function HomePage() {
                   key={trip.id}
                   id={trip.id}
                   title={trip.title}
-                  mountain={trip.mountain}
+                  category={trip.category}
+                  destination={trip.destination}
                   location={trip.location}
                   date={trip.date}
                   endDate={trip.endDate}
@@ -267,7 +302,8 @@ export default async function HomePage() {
                   key={trip.id}
                   id={trip.id}
                   title={trip.title}
-                  mountain={trip.mountain}
+                  category={trip.category}
+                  destination={trip.destination}
                   location={trip.location}
                   date={trip.date}
                   endDate={trip.endDate}