Thay đổi hình ảnh bên trái mỗi lần load lại page

LandingPage.tsx

@@ -1,7 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus } from 'lucide-react';
 import { LoginModal } from './LoginModal';
 
+const TRAVEL_IMAGES = [
+  "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1503220317375-aaad61436b1b?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1513581166391-887a96df91e7?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&q=80",
+  "https://images.unsplash.com/photo-1530789253388-582c481c54b0?auto=format&fit=crop&q=80"
+];
+
 interface LandingPageProps {
   onContinue?: () => void;
   onGoToSignup?: () => void;
@@ -11,6 +20,11 @@ interface LandingPageProps {
 export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup, onGoToMap }) => {
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
 
+  // Chọn ngẫu nhiên một hình ảnh khi người dùng truy cập trang
+  const backgroundImage = useMemo(() => {
+    return TRAVEL_IMAGES[Math.floor(Math.random() * TRAVEL_IMAGES.length)];
+  }, []);
+
   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 */}
@@ -22,11 +36,32 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       {/* 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="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80" 
+          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 */}