162 lines
8.0 KiB
TypeScript
162 lines
8.0 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus, ShieldCheck } from 'lucide-react';
|
|
import { LoginModal } from './LoginModal.js';
|
|
|
|
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;
|
|
onGoToMap?: () => void;
|
|
onLoginSuccess?: (user: any) => void;
|
|
isInitialSetup?: boolean;
|
|
}
|
|
|
|
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)];
|
|
}, []);
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
</div>
|
|
|
|
{/* Login Modal Component */}
|
|
<LoginModal
|
|
isOpen={isLoginModalOpen}
|
|
onClose={() => setIsLoginModalOpen(false)}
|
|
onSwitchToSignup={onGoToSignup}
|
|
onLoginSuccess={onLoginSuccess}
|
|
/>
|
|
</div>
|
|
);
|
|
}; |