diff --git a/frontend/public/background.avif b/frontend/public/background.avif new file mode 100644 index 0000000..bffe3df Binary files /dev/null and b/frontend/public/background.avif differ diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 18559fe..b7250df 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/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 = () => ( +
+ {/* 1. Animation người lữ hành (SVG Silhouette) */} + + {/* Thân người */} + + {/* Máy ảnh */} + + + + {/* 2. Animation đèn flash (giữ nguyên) */} +
+ + {/* 3. Icon máy ảnh tĩnh để luôn hiển thị */} +
+ +
+ + {/* 4. Thêm keyframes cho cả hai animation */} + +
+); + export const LandingPage: React.FC = ({ 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 (
@@ -52,6 +84,11 @@ export const LandingPage: React.FC = ({ onContinue, onGoToSign
+ {/* Body: Animation người lữ hành */} +
+ +
+ {/* Bottom Bar - Nút hành động chính */}