3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sửa lỗi giao diện

Browse Source
This commit is contained in:
Lộc Phạm
2026-06-13 17:02:55 +07:00
parent 568cb0e0bc
commit 6383965bfa
13 changed files with 569 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LandingPage.tsx
+49 -40
View File
@@ -1,69 +1,78 @@
import React, { useState } from 'react';
import { LogIn, Compass, ArrowRight, Camera } from 'lucide-react';
import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus } from 'lucide-react';
import { LoginModal } from './LoginModal';
interface LandingPageProps {
onContinue?: () => void;
onGoToSignup?: () => void;
onGoToMap?: () => void;
}
export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup }) => {
export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup, onGoToMap }) => {
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
return (
<div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans relative">
{/* Nửa bên trái: Ảnh background mặc định của dự án */}
<div className="hidden md:block md:w-1/2 relative bg-gray-900">
<img
src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?q=80&w=2070&auto=format&fit=crop"
alt="Travel Planner Background"
className="absolute inset-0 h-full w-full object-cover opacity-70"
/>
{/* Overlay màu xanh nhẹ đặc trưng của dự án */}
<div className="absolute inset-0 bg-gradient-to-t from-blue-900/60 to-transparent" />
<div className="absolute bottom-16 left-16 text-white z-10">
<div className="flex items-center gap-3 mb-6">
<div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
<Compass className="w-8 h-8 text-white" />
</div>
<span className="text-3xl font-black tracking-tighter uppercase">Travel Planner</span>
</div>
<h2 className="text-5xl font-bold leading-tight max-w-lg">
Khám phá thế giới, lưu giữ kỉ niệm.
</h2>
<p className="mt-4 text-blue-100 text-lg opacity-80 max-w-sm">
Hợp tác cùng bạn bè để lên lịch trình hoàn hảo nhất cho mọi chuyến đi.
</p>
<div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50">
{/* Nửa bên trái: Hiển thị lưới ảnh du lịch */}
<div className="hidden md:grid md:w-1/2 grid-cols-2 gap-2 p-2 bg-gray-200 relative h-full">
<div className="space-y-2 h-full">
<img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 1" />
<img src="https://images.unsplash.com/photo-1513581166391-887a96df91e7?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 2" />
</div>
<div className="space-y-2 mt-8 h-full">
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 3" />
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 4" />
</div>
<div className="absolute inset-0 bg-gradient-to-r from-transparent to-gray-50/50 pointer-events-none" />
</div>
{/* Nửa bên phải: Nội dung chào mừng và Hành động */}
<div className="flex-1 flex flex-col justify-center items-center bg-white p-8 sm:p-12 md:p-20">
<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-6">
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
Chào mừng bạn đến với trang tạo kế hoạch du lịch
<div className="flex items-center gap-3 text-blue-600 mb-8">
<Compass className="w-10 h-10" />
<span className="text-2xl font-black tracking-tighter uppercase">Travel Planner</span>
</div>
<div className="space-y-4">
<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-xl text-gray-600 leading-relaxed">
Đăng nhập để vào tạo kế hoạch cá nhân hoặc nhấn nút tiếp tục để tham quan các hình ảnh du lịch được chia sẻ.
<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="flex flex-col gap-4">
{/* Nút Đăng nhập */}
<div className="grid grid-cols-1 gap-4">
{/* Nút Khám phá Bản đồ (Cho khách công cộng) */}
<button
onClick={() => setIsLoginModalOpen(true)}
className="group flex items-center justify-center gap-3 bg-blue-600 hover:bg-blue-700 text-white font-bold py-5 px-8 rounded-2xl shadow-xl shadow-blue-200 transition-all active:scale-95"
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"
>
<LogIn className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
Đăng nhập ngay
<MapIcon className="w-5 h-5" />
Xem Bản đồ Công cộng
</button>
{/* Nút Tiếp tục */}
<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 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-5 px-8 rounded-2xl border border-gray-200 transition-all active:scale-95"
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" />