From c7692ab9b66982ddfc58a828b851b21fa87ee0be Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 19 Jun 2026 12:00:19 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20thay=20=C4=91=E1=BB=95i=20giao=20di?=
 =?UTF-8?q?=E1=BB=87n=20trang=20ch=E1=BB=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/LandingPage.tsx | 149 ++++++-----------------------
 1 file changed, 31 insertions(+), 118 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index 5eb3ca3..18559fe 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -28,126 +28,39 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
   }, []);
 
   return (
-    <div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50 relative">
-      {/* Logo/Brand Header ở góc trên bên trái */}
-      <div className="absolute top-8 left-8 z-20 flex items-center gap-3 text-white md:text-white drop-shadow-lg">
-        <Compass className="w-10 h-10" />
-        <span className="text-2xl font-black tracking-tighter uppercase">Travel Planner</span>
+    <div className="h-screen w-full overflow-hidden font-sans bg-gray-900 relative">
+      {/* Background Image - Hiển thị trên mọi thiết bị */}
+      <img 
+        src={backgroundImage} 
+        className="absolute inset-0 w-full h-full object-cover opacity-60" 
+        alt="Travel Background" 
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" />
+
+      {/* Top Bar - Thanh điều hướng trên cùng */}
+      <div className="absolute top-0 left-0 right-0 z-20 p-4 flex justify-between items-center">
+        <div className="flex items-center gap-2 text-white drop-shadow-lg">
+          <Compass className="w-8 h-8" />
+          <span className="text-xl font-black tracking-tighter uppercase hidden sm:block">Travel Planner</span>
+        </div>
+        <button 
+          onClick={() => setIsLoginModalOpen(true)}
+          className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-md text-white font-bold py-2 px-4 rounded-full border border-white/20 hover:bg-white/20 transition-all"
+        >
+          <LogIn className="w-4 h-4" />
+          <span className="text-sm">Đăng nhập</span>
+        </button>
       </div>
 
-      {/* Nửa bên trái: Hiển thị một hình ảnh duy nhất */}
-      <div className="hidden md:block md:w-1/2 relative h-full bg-blue-900">
-        <img 
-          src={backgroundImage} 
-          className="w-full h-full object-cover opacity-70" 
-          alt="Travel Background" 
-        />
-        <div className="absolute inset-0 bg-gradient-to-br from-black/40 to-transparent pointer-events-none" />
-
-        {/* Thumbnail Grid ở góc dưới bên trái */}
-        <div className="absolute bottom-12 left-8 z-20 flex flex-col gap-2 items-start drop-shadow-2xl">
-          {/* Hàng trên cùng: 1 thumbnail */}
-          <div className="flex gap-2">
-            <img src={TRAVEL_IMAGES[0]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 1" />
-          </div>
-          
-          {/* Hàng thứ 2: 2 thumbnail */}
-          <div className="flex gap-2">
-            <img src={TRAVEL_IMAGES[1]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 2" />
-            <img src={TRAVEL_IMAGES[2]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 3" />
-          </div>
-
-          {/* Hàng dưới cùng: 3 thumbnail */}
-          <div className="flex gap-2">
-            <img src={TRAVEL_IMAGES[3]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 4" />
-            <img src={TRAVEL_IMAGES[4]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 5" />
-            <img src={TRAVEL_IMAGES[5]} className="w-14 h-14 object-cover rounded-xl border-2 border-white/50 transition-transform duration-300 hover:scale-110 cursor-pointer" alt="thumb 6" />
-          </div>
-        </div>
-      </div>
-
-      {/* Nửa bên phải: Nội dung chào mừng và Hành động */}
-      <div className="flex-1 md:w-1/2 flex flex-col justify-center items-center bg-white p-8 lg:p-16 h-full overflow-y-auto">
-        <div className="max-w-md w-full space-y-12">
-          <div className="space-y-4">
-            {isInitialSetup ? (
-              <>
-                <div className="inline-flex items-center px-3 py-1 rounded-full bg-amber-50 text-amber-700 text-xs font-bold border border-amber-100 mb-2">
-                  <ShieldCheck className="w-3 h-3 mr-1" /> CẤU HÌNH HỆ THỐNG LẦN ĐẦU
-                </div>
-                <h1 className="text-4xl font-extrabold text-gray-900 leading-tight">
-                  Thiết lập Quản trị viên
-                </h1>
-                <p className="text-lg text-gray-500 leading-relaxed">
-                  Chào mừng! Hệ thống vừa được cài đặt. Vui lòng tạo tài khoản đầu tiên để quản lý và vận hành trang web.
-                </p>
-              </>
-            ) : (
-              <>
-                <h1 className="text-4xl font-extrabold text-gray-900 leading-tight">
-                  Lên kế hoạch cho hành trình tiếp theo
-                </h1>
-                <p className="text-lg text-gray-500 leading-relaxed">
-                  Khám phá các địa điểm nổi bật qua bản đồ cộng đồng hoặc đăng nhập để bắt đầu tự tạo chuyến đi cho riêng mình.
-                </p>
-              </>
-            )}
-          </div>
-
-          <div className="grid grid-cols-1 gap-4">
-            {isInitialSetup && (
-              <button 
-                onClick={onGoToSignup}
-                className="flex items-center justify-center gap-3 bg-blue-600 hover:bg-blue-700 text-white font-bold py-5 px-8 rounded-2xl transition-all shadow-xl shadow-blue-100 animate-bounce-subtle mb-2"
-              >
-                <UserPlus className="w-5 h-5" />
-                Bắt đầu thiết lập ngay
-              </button>
-            )}
-
-            <button 
-              onClick={onGoToMap}
-              className="flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-lg shadow-indigo-100"
-            >
-              <MapIcon className="w-5 h-5" />
-              Khám phá các hành trình du lịch
-            </button>
-
-            <div className="grid grid-cols-2 gap-4">
-              <button 
-                onClick={() => setIsLoginModalOpen(true)}
-                className="flex items-center justify-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-700 font-bold py-4 rounded-2xl transition-all"
-              >
-                <LogIn className="w-5 h-5" />
-                Đăng nhập
-              </button>
-              <button 
-                onClick={onGoToSignup}
-                className="flex items-center justify-center gap-2 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-4 rounded-2xl border border-gray-100 transition-all"
-              >
-                <UserPlus className="w-5 h-5" />
-                Đăng ký
-              </button>
-            </div>
-
-            <button 
-              onClick={onContinue}
-              className="flex items-center justify-center gap-3 text-gray-400 hover:text-gray-600 py-2 transition-all text-sm font-medium"
-            >
-              Tiếp tục tham quan ảnh
-              <ArrowRight className="w-5 h-5" />
-            </button>
-          </div>
-
-          <div className="pt-12 flex items-center gap-4 text-sm text-gray-400 border-t border-gray-100">
-            <div className="flex -space-x-3">
-              {[1, 2, 3, 4].map(i => (
-                <img key={i} className="w-10 h-10 rounded-full border-4 border-white" src={`https://i.pravatar.cc/100?img=${i+20}`} alt="user" />
-              ))}
-            </div>
-            <p className="font-medium">Tham gia cùng +2,400 người du lịch khác</p>
-          </div>
-        </div>
+      {/* Bottom Bar - Nút hành động chính */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 w-full px-4">
+        <button 
+          onClick={onGoToMap}
+          className="w-full max-w-md mx-auto flex items-center justify-center gap-3 bg-white/20 backdrop-blur-lg text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-2xl border border-white/30 hover:bg-white/30 active:scale-95"
+        >
+          <MapIcon className="w-5 h-5" />
+          Khám phá các hành trình du lịch
+        </button>
       </div>
 
       {/* Login Modal Component */}