20 lines
7.1 KiB
JavaScript
20 lines
7.1 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
import { 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"
|
|
];
|
|
export const LandingPage = ({ onContinue, onGoToSignup, onGoToMap, isInitialSetup }) => {
|
|
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
|
const backgroundImage = useMemo(() => {
|
|
return TRAVEL_IMAGES[Math.floor(Math.random() * TRAVEL_IMAGES.length)];
|
|
}, []);
|
|
return (_jsxs("div", { className: "flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50 relative", children: [_jsxs("div", { className: "absolute top-8 left-8 z-20 flex items-center gap-3 text-white md:text-white drop-shadow-lg", children: [_jsx(Compass, { className: "w-10 h-10" }), _jsx("span", { className: "text-2xl font-black tracking-tighter uppercase", children: "Travel Planner" })] }), _jsxs("div", { className: "hidden md:block md:w-1/2 relative h-full bg-blue-900", children: [_jsx("img", { src: backgroundImage, className: "w-full h-full object-cover opacity-70", alt: "Travel Background" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black/40 to-transparent pointer-events-none" }), _jsxs("div", { className: "absolute bottom-12 left-8 z-20 flex flex-col gap-2 items-start drop-shadow-2xl", children: [_jsx("div", { className: "flex gap-2", children: _jsx("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" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("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" }), _jsx("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" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("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" }), _jsx("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" }), _jsx("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" })] })] })] }), _jsx("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", children: _jsxs("div", { className: "max-w-md w-full space-y-12", children: [_jsx("div", { className: "space-y-4", children: isInitialSetup ? (_jsxs(_Fragment, { children: [_jsxs("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", children: [_jsx(ShieldCheck, { className: "w-3 h-3 mr-1" }), " C\u1EA4U H\u00CCNH H\u1EC6 TH\u1ED0NG L\u1EA6N \u0110\u1EA6U"] }), _jsx("h1", { className: "text-4xl font-extrabold text-gray-900 leading-tight", children: "Thi\u1EBFt l\u1EADp Qu\u1EA3n tr\u1ECB vi\u00EAn" }), _jsx("p", { className: "text-lg text-gray-500 leading-relaxed", children: "Ch\u00E0o m\u1EEBng! H\u1EC7 th\u1ED1ng v\u1EEBa \u0111\u01B0\u1EE3c c\u00E0i \u0111\u1EB7t. Vui l\u00F2ng t\u1EA1o t\u00E0i kho\u1EA3n \u0111\u1EA7u ti\u00EAn \u0111\u1EC3 qu\u1EA3n l\u00FD v\u00E0 v\u1EADn h\u00E0nh trang web." })] })) : (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-4xl font-extrabold text-gray-900 leading-tight", children: "L\u00EAn k\u1EBF ho\u1EA1ch cho h\u00E0nh tr\u00ECnh ti\u1EBFp theo" }), _jsx("p", { className: "text-lg text-gray-500 leading-relaxed", children: "Kh\u00E1m ph\u00E1 c\u00E1c \u0111\u1ECBa \u0111i\u1EC3m n\u1ED5i b\u1EADt qua b\u1EA3n \u0111\u1ED3 c\u1ED9ng \u0111\u1ED3ng ho\u1EB7c \u0111\u0103ng nh\u1EADp \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u t\u1EF1 t\u1EA1o chuy\u1EBFn \u0111i cho ri\u00EAng m\u00ECnh." })] })) }), _jsxs("div", { className: "grid grid-cols-1 gap-4", children: [isInitialSetup && (_jsxs("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", children: [_jsx(UserPlus, { className: "w-5 h-5" }), "B\u1EAFt \u0111\u1EA7u thi\u1EBFt l\u1EADp ngay"] })), _jsxs("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", children: [_jsx(MapIcon, { className: "w-5 h-5" }), "Kh\u00E1m ph\u00E1 c\u00E1c h\u00E0nh tr\u00ECnh du l\u1ECBch"] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("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", children: [_jsx(LogIn, { className: "w-5 h-5" }), "\u0110\u0103ng nh\u1EADp"] }), _jsxs("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", children: [_jsx(UserPlus, { className: "w-5 h-5" }), "\u0110\u0103ng k\u00FD"] })] }), _jsxs("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", children: ["Ti\u1EBFp t\u1EE5c tham quan \u1EA3nh", _jsx(ArrowRight, { className: "w-5 h-5" })] })] }), _jsxs("div", { className: "pt-12 flex items-center gap-4 text-sm text-gray-400 border-t border-gray-100", children: [_jsx("div", { className: "flex -space-x-3", children: [1, 2, 3, 4].map(i => (_jsx("img", { className: "w-10 h-10 rounded-full border-4 border-white", src: `https://i.pravatar.cc/100?img=${i + 20}`, alt: "user" }, i))) }), _jsx("p", { className: "font-medium", children: "Tham gia c\u00F9ng +2,400 ng\u01B0\u1EDDi du l\u1ECBch kh\u00E1c" })] })] }) }), _jsx(LoginModal, { isOpen: isLoginModalOpen, onClose: () => setIsLoginModalOpen(false), onSwitchToSignup: onGoToSignup })] }));
|
|
};
|
|
//# sourceMappingURL=LandingPage.js.map
|