Sửa lỗi hiển thị 1

LandingPage.tsx

@@ -12,28 +12,26 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
   return (
-    <div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50">
+    <div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50 relative">
-      {/* Nửa bên trái: Hiển thị lưới ảnh du lịch */}
+      {/* Logo/Brand Header ở góc trên bên trái */}
-      <div className="hidden md:grid md:w-1/2 grid-cols-2 gap-2 p-2 bg-gray-200 relative h-full">
+      <div className="absolute top-8 left-8 z-20 flex items-center gap-3 text-white md:text-white drop-shadow-lg">
-        <div className="space-y-2 h-full">
+        <Compass className="w-10 h-10" />
-          <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 1" />
+        <span className="text-2xl font-black tracking-tighter uppercase">Travel Planner</span>
-          <img src="https://images.unsplash.com/photo-1513581166391-887a96df91e7?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 2" />
       </div>
-        <div className="space-y-2 mt-8 h-full">
+
-          <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 3" />
+      {/* Nửa bên trái: Hiển thị một hình ảnh duy nhất */}
-          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 4" />
+      <div className="hidden md:block md:w-1/2 relative h-full bg-blue-900">
-        </div>
+        <img 
-        <div className="absolute inset-0 bg-gradient-to-r from-transparent to-gray-50/50 pointer-events-none" />
+          src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80" 
+          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" />
       </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="flex items-center gap-3 text-blue-600 mb-8">
-            <Compass className="w-10 h-10" />
-            <span className="text-2xl font-black tracking-tighter uppercase">Travel Planner</span>
-          </div>
-
           <div className="space-y-4">
             <h1 className="text-4xl font-extrabold text-gray-900 leading-tight">
               Lên kế hoạch cho hành trình tiếp theo

vite.config.ts

@@ -6,5 +6,6 @@ export default defineConfig({
   server: {
     port: 3002,
     strictPort: true,
+    host: true,
   },
 });