fix: thay đổi ảnh nền trang chủ

frontend/src/pages/LandingPage.tsx

@@ -1,16 +1,7 @@
 import React, { useState, useMemo } from 'react';
-import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus, ShieldCheck } from 'lucide-react';
+import { LogIn, Compass, Map as MapIcon, Camera } from 'lucide-react';
 import { LoginModal } from '../components/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;
@@ -19,13 +10,54 @@ interface LandingPageProps {
   isInitialSetup?: boolean;
 }
 
+// Component Animation cho người lữ hành
+const TravelerAnimation = () => (
+  <div className="relative w-64 h-64">
+    {/* 1. Animation người lữ hành (SVG Silhouette) */}
+    <svg 
+      viewBox="0 0 100 100" 
+      className="absolute inset-0 w-full h-full"
+      style={{ animation: 'travelerFadeIn 4s cubic-bezier(0.4, 0, 0.6, 1) infinite' }}
+    >
+      {/* Thân người */}
+      <path d="M 50,30 C 40,30 35,40 35,50 L 35,90 L 65,90 L 65,50 C 65,40 60,30 50,30 Z" fill="rgba(255,255,255,0.1)" />
+      {/* Máy ảnh */}
+      <rect x="42" y="45" width="16" height="10" rx="2" fill="rgba(255,255,255,0.5)" />
+    </svg>
+
+    {/* 2. Animation đèn flash (giữ nguyên) */}
+    <div 
+      className="absolute top-1/2 left-1/2 w-48 h-48 md:w-64 md:h-64 bg-white rounded-full"
+      style={{
+        transform: 'translate(-50%, -50%)',
+        animation: 'flash 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }}
+    />
+
+    {/* 3. Icon máy ảnh tĩnh để luôn hiển thị */}
+    <div className="absolute inset-0 flex items-center justify-center opacity-50">
+      <Camera className="w-20 h-20 md:w-24 md:h-24 text-white/60 drop-shadow-xl" strokeWidth={1.5} />
+    </div>
+
+    {/* 4. Thêm keyframes cho cả hai animation */}
+    <style>{`
+      @keyframes travelerFadeIn {
+        0%, 40%, 100% { opacity: 0; transform: scale(0.8); }
+        50%, 90% { opacity: 1; transform: scale(1); }
+      }
+      @keyframes flash {
+        0%, 50%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
+        55% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
+      }
+    `}</style>
+  </div>
+);
+
 export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup, onGoToMap, onLoginSuccess, isInitialSetup }) => {
   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)];
-  }, []);
+  // Sử dụng trực tiếp ảnh nền AVIF từ thư mục `public`
+  const backgroundImage = '/background.avif'; // Giả sử bạn đặt tên file là background.avif
 
   return (
     <div className="h-screen w-full overflow-hidden font-sans bg-gray-900 relative">
@@ -52,6 +84,11 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
         </button>
       </div>
 
+      {/* Body: Animation người lữ hành */}
+      <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+        <TravelerAnimation />
+      </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