From 82c1da9951b00f4136543fe0b03ead763f63dedf Mon Sep 17 00:00:00 2001
From: arifal <arifaldiosdevelopment@gmail.com>
Date: Thu, 16 Apr 2026 16:49:32 +0700
Subject: [PATCH] add responsive mobile tablet laptop and desktop

---
 app/create-trip/page.tsx                   |  6 +-
 app/login/page.tsx                         |  4 +-
 app/page.tsx                               | 83 ++++++++++----------
 app/register/page.tsx                      |  4 +-
 app/trips/[id]/page.tsx                    | 88 +++++++++++-----------
 app/trips/page.tsx                         | 20 ++---
 components/shared/navbar.tsx               | 86 ++++++++++++++++++++-
 features/trip/components/image-gallery.tsx | 16 ++--
 features/trip/components/search-bar.tsx    |  6 +-
 9 files changed, 195 insertions(+), 118 deletions(-)

diff --git a/app/create-trip/page.tsx b/app/create-trip/page.tsx
index 5e6c454..e8b1ce4 100644
--- a/app/create-trip/page.tsx
+++ b/app/create-trip/page.tsx
@@ -80,8 +80,8 @@ export default function CreateTripPage() {
   }
 
   return (
-    <div className="mx-auto max-w-2xl px-4 py-8">
-      <div className="mb-6">
+    <div className="mx-auto max-w-2xl px-4 py-6 sm:py-8">
+      <div className="mb-4 sm:mb-6">
         <h1 className="text-2xl font-bold text-neutral-800">Buat Trip Baru</h1>
         <p className="mt-1 text-sm text-neutral-500">
           Ajak teman baru naik gunung bareng!
@@ -175,7 +175,7 @@ export default function CreateTripPage() {
 
           <ImageUrlInput />
 
-          <div className="grid gap-4 sm:grid-cols-3">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4">
             <div>
               <label htmlFor="date" className="mb-1.5 block text-sm font-semibold text-neutral-700">
                 Tanggal
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 7620d99..4c2bece 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -36,10 +36,10 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-12">
+    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
       <div className="w-full max-w-sm">
         {/* Header */}
-        <div className="mb-8 text-center">
+        <div className="mb-6 text-center sm:mb-8">
           <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
             Se<span className="text-primary-600">Trip</span>
           </Link>
diff --git a/app/page.tsx b/app/page.tsx
index 9275a42..0cc48a3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,27 +17,26 @@ export default async function HomePage() {
     <div className="relative min-h-screen bg-neutral-50">
       {/* ========== HERO ========== */}
       <section className="relative overflow-hidden bg-neutral-900">
-        {/* Gradient overlay */}
         <div className="absolute inset-0 bg-linear-to-br from-primary-900/90 via-neutral-900/80 to-secondary-900/70" />
 
-        <div className="relative mx-auto max-w-4xl px-4 pb-16 pt-14 text-center">
-          {/* Brand */}
-          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-primary-400/30 bg-primary-600/20 px-4 py-1.5">
-            <span className="text-sm">🏔️</span>
-            <span className="text-sm font-medium text-primary-300">
+        <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>
+            <span className="text-xs font-medium text-primary-300 sm:text-sm">
               Open Trip Pendakian Gunung
             </span>
           </div>
 
-          <h1 className="mb-4 text-4xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl">
+          <h1 className="mb-3 text-3xl font-extrabold leading-tight tracking-tight text-white sm:mb-4 sm:text-4xl lg:text-5xl">
             Se<span className="text-primary-400">Trip</span>
           </h1>
 
-          <p className="mx-auto mb-3 max-w-lg text-lg font-medium text-neutral-300">
+          <p className="mx-auto mb-2 max-w-sm text-base font-medium text-neutral-300 sm:mb-3 sm:max-w-lg sm:text-lg">
             Masa cowok sejati, cewek seimut nggak{" "}
             <span className="text-primary-400">SeTrip</span> bareng?
           </p>
-          <p className="mx-auto mb-8 max-w-md text-neutral-400">
+          <p className="mx-auto mb-6 max-w-xs text-sm text-neutral-400 sm:mb-8 sm:max-w-md sm:text-base">
             Yuk mulai dari sini. Cari open trip pendakian, gabung bareng, nikmati
             petualangan ke gunung-gunung Jawa Barat.
           </p>
@@ -45,41 +44,41 @@ export default async function HomePage() {
           <SearchBar />
 
           {/* Stats */}
-          <div className="mt-10 flex justify-center gap-8 sm:gap-12">
+          <div className="mt-8 flex justify-center gap-6 sm:mt-10 sm:gap-10 lg:gap-12">
             <div>
-              <p className="text-2xl font-bold text-primary-400">
+              <p className="text-xl font-bold text-primary-400 sm:text-2xl">
                 {trips.length}
               </p>
-              <p className="text-xs text-neutral-400">Trip Tersedia</p>
+              <p className="text-[11px] text-neutral-400 sm:text-xs">Trip Tersedia</p>
             </div>
-            <div className="h-10 w-px bg-neutral-700" />
+            <div className="h-8 w-px bg-neutral-700 sm:h-10" />
             <div>
-              <p className="text-2xl font-bold text-secondary-400">8</p>
-              <p className="text-xs text-neutral-400">Gunung Jabar</p>
+              <p className="text-xl font-bold text-secondary-400 sm:text-2xl">8</p>
+              <p className="text-[11px] text-neutral-400 sm:text-xs">Gunung Jabar</p>
             </div>
-            <div className="h-10 w-px bg-neutral-700" />
+            <div className="h-8 w-px bg-neutral-700 sm:h-10" />
             <div>
-              <p className="text-2xl font-bold text-white">100%</p>
-              <p className="text-xs text-neutral-400">Seru</p>
+              <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>
             </div>
           </div>
         </div>
       </section>
 
       {/* ========== CONTENT ========== */}
-      <div className="mx-auto max-w-6xl px-4 py-10 space-y-12">
+      <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">
         {/* Trip Terdekat */}
         {upcomingTrips.length > 0 && (
           <section>
-            <div className="mb-5 flex items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-lg">
+            <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-lg font-bold text-neutral-800">
+                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
                   Trip Terdekat
                 </h2>
-                <p className="text-xs text-neutral-500">
+                <p className="text-[11px] text-neutral-500 sm:text-xs">
                   Berangkat dalam 7 hari ke depan
                 </p>
               </div>
@@ -108,42 +107,42 @@ export default async function HomePage() {
 
         {/* Open Trip */}
         <section>
-          <div className="mb-5 flex items-center justify-between">
+          <div className="mb-4 flex items-center justify-between sm:mb-5">
             <div className="flex items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-secondary-100 text-lg">
+              <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-lg font-bold text-neutral-800">
+                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
                   Open Trip
                 </h2>
-                <p className="text-xs text-neutral-500">
+                <p className="hidden text-xs text-neutral-500 sm:block">
                   Pendakian gunung bareng teman baru
                 </p>
               </div>
             </div>
             <Link
               href="/trips"
-              className="rounded-lg bg-secondary-50 px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100"
+              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>
 
           {latestTrips.length === 0 ? (
-            <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center">
-              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
+            <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>
-              <p className="mb-1 text-lg font-bold text-neutral-800">
+              <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
                 Belum ada trip tersedia
               </p>
-              <p className="mb-6 text-sm text-neutral-500">
+              <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
                 Jadilah yang pertama buat open trip pendakian!
               </p>
               <Link
                 href="/create-trip"
-                className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
+                className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
               >
                 + Buat Trip Baru
               </Link>
@@ -173,15 +172,15 @@ export default async function HomePage() {
         {/* Budget Friendly */}
         {budgetTrips.length > 0 && (
           <section>
-            <div className="mb-5 flex items-center gap-3">
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-lg">
+            <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-lg font-bold text-neutral-800">
+                <h2 className="text-base font-bold text-neutral-800 sm:text-lg">
                   Budget Friendly
                 </h2>
-                <p className="text-xs text-neutral-500">
+                <p className="text-[11px] text-neutral-500 sm:text-xs">
                   Trip di bawah Rp 300.000
                 </p>
               </div>
@@ -208,15 +207,15 @@ export default async function HomePage() {
         )}
 
         {/* CTA Bottom */}
-        <section className="overflow-hidden rounded-2xl bg-neutral-800 p-8 text-center sm:p-12">
-          <h2 className="mb-2 text-2xl font-bold text-white">
+        <section className="overflow-hidden rounded-2xl bg-neutral-800 p-6 text-center sm:p-8 lg:p-12">
+          <h2 className="mb-2 text-xl font-bold text-white sm:text-2xl">
             Siap naik gunung?
           </h2>
-          <p className="mx-auto mb-6 max-w-sm text-neutral-400">
+          <p className="mx-auto mb-5 max-w-xs text-sm text-neutral-400 sm:mb-6 sm:max-w-sm sm:text-base">
             Buat trip sendiri atau gabung trip yang sudah ada. Seru bareng teman
             baru!
           </p>
-          <div className="flex justify-center gap-3">
+          <div className="flex flex-col justify-center gap-2 sm:flex-row sm:gap-3">
             <Link
               href="/create-trip"
               className="rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-500"
@@ -236,7 +235,7 @@ export default async function HomePage() {
       {/* ========== FAB ========== */}
       <Link
         href="/create-trip"
-        className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl font-bold text-white shadow-xl shadow-primary-600/30 transition-all hover:scale-110 hover:bg-primary-500 active:scale-95"
+        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"
       >
         +
diff --git a/app/register/page.tsx b/app/register/page.tsx
index f78cccf..d88f5e4 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -42,10 +42,10 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-12">
+    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
       <div className="w-full max-w-sm">
         {/* Header */}
-        <div className="mb-8 text-center">
+        <div className="mb-6 text-center sm:mb-8">
           <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
             Se<span className="text-primary-600">Trip</span>
           </Link>
diff --git a/app/trips/[id]/page.tsx b/app/trips/[id]/page.tsx
index 6c0397f..1e3f3e5 100644
--- a/app/trips/[id]/page.tsx
+++ b/app/trips/[id]/page.tsx
@@ -39,14 +39,14 @@ export default async function TripDetailPage({
     : null;
 
   return (
-    <div className="mx-auto max-w-3xl px-4 py-8">
+    <div className="mx-auto max-w-3xl px-4 py-4 sm:py-8">
       {/* Breadcrumb */}
-      <div className="mb-4 flex items-center gap-2 text-sm text-neutral-500">
+      <div className="mb-3 flex items-center gap-2 text-xs text-neutral-500 sm:mb-4 sm:text-sm">
         <Link href="/trips" className="hover:text-primary-600">
           Open Trip
         </Link>
         <span>/</span>
-        <span className="text-neutral-700">{trip.mountain}</span>
+        <span className="truncate text-neutral-700">{trip.mountain}</span>
       </div>
 
       <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
@@ -54,10 +54,10 @@ export default async function TripDetailPage({
         <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">
+        <div className="border-b border-neutral-100 px-4 py-3 sm:px-6 sm:py-4">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <h1 className="text-lg font-bold text-neutral-800 sm:text-xl">
                 {trip.title}
               </h1>
               <p className="mt-0.5 flex items-center gap-1.5 text-sm text-neutral-500">
@@ -65,7 +65,7 @@ export default async function TripDetailPage({
               </p>
             </div>
             <span
-              className={`rounded-full px-3 py-1 text-xs font-bold ${
+              className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs font-bold sm:px-3 sm:py-1 ${
                 trip.status === "OPEN"
                   ? "bg-primary-100 text-primary-700"
                   : trip.status === "FULL"
@@ -78,52 +78,50 @@ export default async function TripDetailPage({
           </div>
         </div>
 
-        <div className="space-y-6 p-6">
+        <div className="space-y-5 p-4 sm:space-y-6 sm: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">
-              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-lg">
+          <div className="grid grid-cols-2 gap-2 sm:gap-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
                 📍
               </span>
-              <div>
-                <p className="text-xs font-medium text-neutral-400">Lokasi</p>
-                <p className="font-semibold text-neutral-800">{trip.location}</p>
+              <div className="min-w-0">
+                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Lokasi</p>
+                <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">{trip.location}</p>
               </div>
             </div>
 
-            <div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4">
-              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-lg">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
                 📅
               </span>
-              <div>
-                <p className="text-xs font-medium text-neutral-400">Tanggal</p>
-                <p className="font-semibold text-neutral-800">
+              <div className="min-w-0">
+                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Tanggal</p>
+                <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">
                   {formatDate(trip.date)}
                 </p>
               </div>
             </div>
 
-            <div className="flex items-center gap-3 rounded-xl bg-primary-50 p-4">
-              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-lg">
+            <div className="flex items-center gap-2 rounded-xl bg-primary-50 p-3 sm:gap-3 sm:p-4">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
                 💰
               </span>
-              <div>
-                <p className="text-xs font-medium text-primary-600">Harga</p>
-                <p className="text-xl font-bold text-primary-700">
+              <div className="min-w-0">
+                <p className="text-[10px] font-medium text-primary-600 sm:text-xs">Harga</p>
+                <p className="text-base font-bold text-primary-700 sm:text-xl">
                   {formatRupiah(trip.price)}
                 </p>
               </div>
             </div>
 
-            <div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4">
-              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-200 text-lg">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-200 text-sm sm:h-10 sm:w-10 sm:text-lg">
                 👤
               </span>
-              <div>
-                <p className="text-xs font-medium text-neutral-400">
-                  Organizer
-                </p>
-                <p className="font-semibold text-neutral-800">
+              <div className="min-w-0">
+                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Organizer</p>
+                <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">
                   {trip.organizer.name}
                 </p>
               </div>
@@ -131,19 +129,19 @@ export default async function TripDetailPage({
           </div>
 
           {/* Participant Progress */}
-          <div className="rounded-xl border border-neutral-200 p-4">
+          <div className="rounded-xl border border-neutral-200 p-3 sm:p-4">
             <div className="mb-2 flex items-center justify-between">
-              <span className="text-sm font-semibold text-neutral-700">
+              <span className="text-xs font-semibold text-neutral-700 sm:text-sm">
                 Peserta
               </span>
-              <span className="text-sm font-bold text-neutral-800">
+              <span className="text-xs font-bold text-neutral-800 sm:text-sm">
                 {participantCount}{" "}
                 <span className="font-normal text-neutral-400">
                   / {trip.maxParticipants}
                 </span>
               </span>
             </div>
-            <div className="h-2.5 overflow-hidden rounded-full bg-neutral-100">
+            <div className="h-2 overflow-hidden rounded-full bg-neutral-100 sm:h-2.5">
               <div
                 className={`h-full rounded-full transition-all ${
                   fillPercent >= 100
@@ -155,7 +153,7 @@ export default async function TripDetailPage({
                 style={{ width: `${fillPercent}%` }}
               />
             </div>
-            <p className="mt-1.5 text-xs text-neutral-500">
+            <p className="mt-1.5 text-[11px] text-neutral-500 sm:text-xs">
               {spotsLeft > 0
                 ? `${spotsLeft} slot tersisa — yuk gabung!`
                 : "Trip sudah penuh"}
@@ -165,10 +163,10 @@ export default async function TripDetailPage({
           {/* Description */}
           {trip.description && (
             <div>
-              <h2 className="mb-2 text-sm font-bold text-neutral-700">
+              <h2 className="mb-2 text-xs font-bold text-neutral-700 sm:text-sm">
                 Deskripsi Trip
               </h2>
-              <p className="whitespace-pre-wrap text-sm leading-relaxed text-neutral-600">
+              <p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-600 sm:text-sm">
                 {trip.description}
               </p>
             </div>
@@ -186,24 +184,24 @@ export default async function TripDetailPage({
 
           {/* Participants List */}
           <div>
-            <h2 className="mb-3 text-sm font-bold text-neutral-700">
+            <h2 className="mb-3 text-xs font-bold text-neutral-700 sm:text-sm">
               Peserta ({participantCount})
             </h2>
             {participantCount === 0 ? (
-              <p className="text-sm text-neutral-400">
+              <p className="text-xs text-neutral-400 sm:text-sm">
                 Belum ada peserta. Jadilah yang pertama! 🎒
               </p>
             ) : (
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-1.5 sm:gap-2">
                 {activeParticipants.map((p) => (
                   <div
                     key={p.id}
-                    className="flex items-center gap-2 rounded-full bg-neutral-100 px-3 py-1.5"
+                    className="flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 sm:gap-2 sm:px-3 sm:py-1.5"
                   >
-                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white">
+                    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-[9px] font-bold text-white sm:h-6 sm:w-6 sm:text-[10px]">
                       {p.user.name.charAt(0).toUpperCase()}
                     </div>
-                    <span className="text-sm font-medium text-neutral-700">
+                    <span className="text-xs font-medium text-neutral-700 sm:text-sm">
                       {p.user.name}
                     </span>
                   </div>
diff --git a/app/trips/page.tsx b/app/trips/page.tsx
index 0b6f6b9..fa738dc 100644
--- a/app/trips/page.tsx
+++ b/app/trips/page.tsx
@@ -6,38 +6,38 @@ export default async function TripsPage() {
   const trips = await tripService.getOpenTrips();
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
-      <div className="mb-8 flex items-center justify-between">
+    <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
+      <div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-800">
+          <h1 className="text-xl font-bold text-neutral-800 sm:text-2xl">
             Open Trip Pendakian
           </h1>
-          <p className="mt-1 text-sm text-neutral-500">
+          <p className="mt-0.5 text-sm text-neutral-500">
             {trips.length} trip tersedia — pilih dan langsung join
           </p>
         </div>
         <Link
           href="/create-trip"
-          className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700"
+          className="w-full rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
         >
           + Buat Trip
         </Link>
       </div>
 
       {trips.length === 0 ? (
-        <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
+        <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>
-          <p className="mb-1 text-lg font-bold text-neutral-800">
+          <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
             Belum ada trip tersedia
           </p>
-          <p className="mb-6 text-sm text-neutral-500">
+          <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
             Jadilah yang pertama membuat open trip pendakian!
           </p>
           <Link
             href="/create-trip"
-            className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
+            className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
           >
             Buat Trip Baru
           </Link>
diff --git a/components/shared/navbar.tsx b/components/shared/navbar.tsx
index 45c8fca..a41c7a4 100644
--- a/components/shared/navbar.tsx
+++ b/components/shared/navbar.tsx
@@ -1,14 +1,17 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { useSession, signOut } from "next-auth/react";
 
 export function Navbar() {
   const { data: session } = useSession();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   return (
     <nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md">
       <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
+        {/* Logo */}
         <Link href="/" className="flex items-center gap-1.5">
           <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
             S
@@ -18,7 +21,8 @@ export function Navbar() {
           </span>
         </Link>
 
-        <div className="flex items-center gap-1">
+        {/* Desktop Nav */}
+        <div className="hidden items-center gap-1 md:flex">
           <Link
             href="/trips"
             className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
@@ -34,12 +38,11 @@ export function Navbar() {
               >
                 Buat Trip
               </Link>
-
               <div className="ml-2 flex items-center gap-2">
                 <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
                   {session.user.name?.charAt(0).toUpperCase()}
                 </div>
-                <span className="hidden text-sm font-medium text-neutral-700 sm:block">
+                <span className="text-sm font-medium text-neutral-700">
                   {session.user.name}
                 </span>
                 <button
@@ -67,7 +70,84 @@ export function Navbar() {
             </>
           )}
         </div>
+
+        {/* Mobile Hamburger */}
+        <button
+          onClick={() => setMenuOpen(!menuOpen)}
+          className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100 md:hidden"
+          aria-label="Toggle menu"
+        >
+          {menuOpen ? (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M5 5l10 10M15 5L5 15" />
+            </svg>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M3 5h14M3 10h14M3 15h14" />
+            </svg>
+          )}
+        </button>
       </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="border-t border-neutral-100 bg-white px-4 pb-4 pt-2 md:hidden">
+          <div className="flex flex-col gap-1">
+            <Link
+              href="/trips"
+              onClick={() => setMenuOpen(false)}
+              className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
+            >
+              Open Trip
+            </Link>
+
+            {session?.user ? (
+              <>
+                <Link
+                  href="/create-trip"
+                  onClick={() => setMenuOpen(false)}
+                  className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
+                >
+                  Buat Trip
+                </Link>
+                <div className="mt-2 flex items-center justify-between rounded-lg bg-neutral-50 px-3 py-2.5">
+                  <div className="flex items-center gap-2">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
+                      {session.user.name?.charAt(0).toUpperCase()}
+                    </div>
+                    <span className="text-sm font-medium text-neutral-700">
+                      {session.user.name}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => signOut()}
+                    className="rounded-lg px-3 py-1.5 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
+                  >
+                    Logout
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="mt-2 flex gap-2">
+                <Link
+                  href="/login"
+                  onClick={() => setMenuOpen(false)}
+                  className="flex-1 rounded-lg border border-neutral-200 py-2.5 text-center text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
+                >
+                  Login
+                </Link>
+                <Link
+                  href="/register"
+                  onClick={() => setMenuOpen(false)}
+                  className="flex-1 rounded-lg bg-primary-600 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-primary-700"
+                >
+                  Daftar
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/features/trip/components/image-gallery.tsx b/features/trip/components/image-gallery.tsx
index ff8ed26..4526600 100644
--- a/features/trip/components/image-gallery.tsx
+++ b/features/trip/components/image-gallery.tsx
@@ -14,8 +14,8 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
 
   if (images.length === 0) {
     return (
-      <div className="flex h-56 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-72">
-        <span className="text-6xl">🏔️</span>
+      <div className="flex h-44 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-56 lg:h-72">
+        <span className="text-5xl sm:text-6xl">🏔️</span>
       </div>
     );
   }
@@ -25,7 +25,7 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
   return (
     <div>
       {/* Main Image */}
-      <div className="relative h-56 bg-neutral-900 sm:h-72">
+      <div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
         <Image
           src={activeImage.url}
           alt={activeImage.caption || "Foto trip"}
@@ -35,26 +35,26 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
           priority
         />
         {activeImage.caption && (
-          <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-4 pb-3 pt-8">
-            <p className="text-sm font-medium text-white">
+          <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 sm:px-4 sm:pb-3 sm:pt-8">
+            <p className="text-xs font-medium text-white sm:text-sm">
               {activeImage.caption}
             </p>
           </div>
         )}
         {/* Counter */}
-        <div className="absolute right-3 top-3 rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
+        <div className="absolute right-2 top-2 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm sm:right-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
           {activeIndex + 1} / {images.length}
         </div>
       </div>
 
       {/* Thumbnails */}
       {images.length > 1 && (
-        <div className="flex gap-1.5 overflow-x-auto bg-neutral-100 p-2">
+        <div className="flex gap-1 overflow-x-auto bg-neutral-100 p-1.5 sm:gap-1.5 sm:p-2">
           {images.map((img, i) => (
             <button
               key={img.id}
               onClick={() => setActiveIndex(i)}
-              className={`relative h-14 w-20 shrink-0 overflow-hidden rounded-lg transition-all ${
+              className={`relative h-11 w-16 shrink-0 overflow-hidden rounded-md transition-all sm:h-14 sm:w-20 sm:rounded-lg ${
                 i === activeIndex
                   ? "ring-2 ring-primary-500 ring-offset-1"
                   : "opacity-60 hover:opacity-100"
diff --git a/features/trip/components/search-bar.tsx b/features/trip/components/search-bar.tsx
index 66c33a0..e9b42b0 100644
--- a/features/trip/components/search-bar.tsx
+++ b/features/trip/components/search-bar.tsx
@@ -18,17 +18,17 @@ export function SearchBar() {
 
   return (
     <form onSubmit={handleSearch} className="mx-auto max-w-xl">
-      <div className="flex overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/20 backdrop-blur-sm transition-all focus-within:bg-white/15 focus-within:ring-primary-400/50">
+      <div className="flex overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/20 backdrop-blur-sm transition-all focus-within:bg-white/15 focus-within:ring-primary-400/50 sm:rounded-2xl">
         <input
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Cari gunung, lokasi, atau trip..."
-          className="flex-1 border-none bg-transparent px-5 py-3.5 text-sm text-white outline-none placeholder:text-neutral-400"
+          className="min-w-0 flex-1 border-none bg-transparent px-3.5 py-3 text-sm text-white outline-none placeholder:text-neutral-400 sm:px-5 sm:py-3.5"
         />
         <button
           type="submit"
-          className="bg-primary-600 px-6 text-sm font-semibold text-white transition-colors hover:bg-primary-500"
+          className="shrink-0 bg-primary-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-primary-500 sm:px-6"
         >
           Cari
         </button>