| <!DOCTYPE html> |
| <html lang="vi"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vietravel - Khám phá Việt Nam</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#06b6d4', |
| secondary: '#0891b2', |
| accent: '#ec4899', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| .hero-bg { |
| background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1470004914212-05527e49370b?ixlib=rb-4.0.3'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .room-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .guide-card:hover .guide-img { |
| transform: scale(1.05); |
| } |
| |
| .tour-card:hover { |
| border-color: #06b6d4; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <nav class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold text-primary flex items-center"> |
| <i class="fas fa-umbrella-beach mr-2"></i> |
| Vietravel |
| </a> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="text-gray-700 hover:text-primary transition">Trang chủ</a> |
| <a href="#rooms" class="text-gray-700 hover:text-primary transition">Phòng nghỉ</a> |
| <a href="#tours" class="text-gray-700 hover:text-primary transition">Tour du lịch</a> |
| <a href="#guides" class="text-gray-700 hover:text-primary transition">Hướng dẫn viên</a> |
| <a href="#about" class="text-gray-700 hover:text-primary transition">Giới thiệu</a> |
| <a href="#contact" class="text-gray-700 hover:text-primary transition">Liên hệ</a> |
| </div> |
| <div class="md:hidden"> |
| <button class="text-gray-700 focus:outline-none" id="menu-toggle"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| <div class="md:hidden hidden mt-2 pb-2" id="mobile-menu"> |
| <a href="#home" class="block py-2 text-gray-700 hover:text-primary">Trang chủ</a> |
| <a href="#rooms" class="block py-2 text-gray-700 hover:text-primary">Phòng nghỉ</a> |
| <a href="#tours" class="block py-2 text-gray-700 hover:text-primary">Tour du lịch</a> |
| <a href="#guides" class="block py-2 text-gray-700 hover:text-primary">Hướng dẫn viên</a> |
| <a href="#about" class="block py-2 text-gray-700 hover:text-primary">Giới thiệu</a> |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-primary">Liên hệ</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-bg text-white py-32 px-4"> |
| <div class="container mx-auto text-center"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Khám phá vẻ đẹp Việt Nam</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Hành trình đáng nhớ với những trải nghiệm tuyệt vời cùng Vietravel</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#rooms" class="bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded-full transition duration-300">Đặt phòng ngay</a> |
| <a href="#tours" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 rounded-full transition duration-300">Xem các tour</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Tại sao chọn chúng tôi?</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Vietravel - Đối tác du lịch đáng tin cậy của bạn</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center px-6 py-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-primary/10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-hotel text-primary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Chỗ ở chất lượng</h3> |
| <p class="text-gray-600">Hệ thống khách sạn, resort đạt chuẩn 4-5 sao với mức giá hợp lý</p> |
| </div> |
| <div class="text-center px-6 py-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-primary/10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-map-marked-alt text-primary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Hành trình độc đáo</h3> |
| <p class="text-gray-600">Những lịch trình được thiết kế riêng biệt để khám phá bản sắc địa phương</p> |
| </div> |
| <div class="text-center px-6 py-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-primary/10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-user-tie text-primary text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Hướng dẫn viên chuyên nghiệp</h3> |
| <p class="text-gray-600">Đội ngũ HDV giàu kinh nghiệm, nhiệt tình và am hiểu điểm đến</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="rooms" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Phòng nghỉ của chúng tôi</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Chỗ nghỉ thoải mái với mức giá hợp lý</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden room-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-4.0.3" alt="Deluxe Room" class="w-full h-64 object-cover"> |
| <span class="absolute top-4 right-4 bg-primary text-white px-3 py-1 rounded-full text-sm font-semibold">BEST SELLER</span> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-xl font-bold text-gray-800">Phòng Deluxe</h3> |
| <div class="text-primary flex items-center"> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mt-2">Phòng rộng rãi với view thành phố, đầy đủ tiện nghi</p> |
| <div class="mt-4 flex flex-wrap gap-2"> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-wifi text-primary mr-1"></i> Wifi |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-tv text-primary mr-1"></i> TV |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-temperature-low text-primary mr-1"></i> Điều hòa |
| </span> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-2xl font-bold text-primary">1,200,000đ</span> |
| <span class="text-gray-500 text-sm block">/đêm</span> |
| </div> |
| <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg transition">Đặt ngay</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden room-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3" alt="Family Suite" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-xl font-bold text-gray-800">Family Suite</h3> |
| <div class="text-primary flex items-center"> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mt-2">Phòng gia đình với 2 phòng ngủ riêng biệt, đầy đủ tiện nghi</p> |
| <div class="mt-4 flex flex-wrap gap-2"> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-wifi text-primary mr-1"></i> Wifi |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-utensils text-primary mr-1"></i> Bếp |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-swimming-pool text-primary mr-1"></i> Bể bơi |
| </span> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-2xl font-bold text-primary">2,500,000đ</span> |
| <span class="text-gray-500 text-sm block">/đêm</span> |
| </div> |
| <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg transition">Đặt ngay</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden room-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1586611292717-f828b167408c?ixlib=rb-4.0.3" alt="Beach Villa" class="w-full h-64 object-cover"> |
| <span class="absolute top-4 right-4 bg-accent text-white px-3 py-1 rounded-full text-sm font-semibold">NEW</span> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <h3 class="text-xl font-bold text-gray-800">Beach Villa</h3> |
| <div class="text-primary flex items-center"> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| <i class="fas fa-star mr-1"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 mt-2">Biệt thự bãi biển với view biển tuyệt đẹp, riêng tư</p> |
| <div class="mt-4 flex flex-wrap gap-2"> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-water text-primary mr-1"></i> View biển |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-parking text-primary mr-1"></i> Bãi đỗ xe |
| </span> |
| <span class="bg-gray-100 px-2 py-1 rounded text-sm flex items-center"> |
| <i class="fas fa-spa text-primary mr-1"></i> Spa |
| </span> |
| </div> |
| <div class="mt-6 flex justify-between items-center"> |
| <div> |
| <span class="text-2xl font-bold text-primary">5,800,000đ</span> |
| <span class="text-gray-500 text-sm block">/đêm</span> |
| </div> |
| <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg transition">Đặt ngay</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-10 text-center"> |
| <a href="#" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-semibold px-6 py-3 rounded-full transition">Xem thêm phòng</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tours" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Các Tour Du Lịch</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Những hành trình khám phá đáng nhớ</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="border border-gray-200 rounded-xl overflow-hidden tour-card transition duration-300 hover:shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-4.0.3" alt="Ha Long Bay" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="bg-primary/10 text-primary px-2 py-1 rounded text-xs font-semibold">5 ngày 4 đêm</span> |
| <span class="text-secondary font-bold">12,800,000đ</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Vịnh Hạ Long - Tuần Châu</h3> |
| <p class="text-gray-600 text-sm mb-4">Khám phá vẻ đẹp kỳ vĩ của di sản thiên nhiên thế giới Vịnh Hạ Long</p> |
| <div class="flex items-center text-gray-500 mb-4"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span>Quảng Ninh, Việt Nam</span> |
| </div> |
| <div class="grid grid-cols-3 gap-2 text-xs text-center mb-4"> |
| <div class="bg-gray-100 px-2 py-1 rounded">Khách sạn 4*</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">HDV tiếng Việt</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">Ăn uống đầy đủ</div> |
| </div> |
| <button class="w-full bg-primary hover:bg-secondary text-white py-2 rounded-lg transition">Chi tiết</button> |
| </div> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-xl overflow-hidden tour-card transition duration-300 hover:shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1550541231-bd9668a9e7df?ixlib=rb-4.0.3" alt="Da Lat" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="bg-primary/10 text-primary px-2 py-1 rounded text-xs font-semibold">4 ngày 3 đêm</span> |
| <span class="text-secondary font-bold">8,500,000đ</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Đà Lạt - Thành phố ngàn hoa</h3> |
| <p class="text-gray-600 text-sm mb-4">Trải nghiệm không khí mát mẻ và cảnh sắc thơ mộng của Đà Lạt</p> |
| <div class="flex items-center text-gray-500 mb-4"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span>Lâm Đồng, Việt Nam</span> |
| </div> |
| <div class="grid grid-cols-3 gap-2 text-xs text-center mb-4"> |
| <div class="bg-gray-100 px-2 py-1 rounded">Khách sạn 3*</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">Xe đưa đón</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">Buffet sáng</div> |
| </div> |
| <button class="w-full bg-primary hover:bg-secondary text-white py-2 rounded-lg transition">Chi tiết</button> |
| </div> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-xl overflow-hidden tour-card transition duration-300 hover:shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1563906266818-b91824b4eb43?ixlib=rb-4.0.3" alt="Phu Quoc" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="bg-primary/10 text-primary px-2 py-1 rounded text-xs font-semibold">5 ngày 4 đêm</span> |
| <span class="text-secondary font-bold">15,200,000đ</span> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Phú Quốc - Thiên đường nhiệt đới</h3> |
| <p class="text-gray-600 text-sm mb-4">Thư giãn trên những bãi biển đẹp nhất Việt Nam tại đảo ngọc Phú Quốc</p> |
| <div class="flex items-center text-gray-500 mb-4"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span>Kiên Giang, Việt Nam</span> |
| </div> |
| <div class="grid grid-cols-3 gap-2 text-xs text-center mb-4"> |
| <div class="bg-gray-100 px-2 py-1 rounded">Resort 5*</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">Vé máy bay</div> |
| <div class="bg-gray-100 px-2 py-1 rounded">Ăn buffet</div> |
| </div> |
| <button class="w-full bg-primary hover:bg-secondary text-white py-2 rounded-lg transition">Chi tiết</button> |
| </div> |
| </div> |
| </div> |
| <div class="mt-10 text-center"> |
| <a href="#" class="inline-block border-2 border-primary text-primary hover:bg-primary hover:text-white font-semibold px-6 py-3 rounded-full transition">Xem thêm tour</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Khám phá Vietravel</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Những khoảnh khắc đáng nhớ trong các chuyến đi</p> |
| </div> |
| <div class="max-w-4xl mx-auto bg-white p-2 shadow-lg rounded-lg"> |
| <div class="aspect-w-16 aspect-h-9 relative"> |
| |
| <iframe class="w-full h-96 rounded-lg" src="https://www.youtube.com/embed/L9GQZdtuGsQ?rel=0" title="Vietravel Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Vietravel - Hành trình vạn dặm</h3> |
| <p class="text-gray-600">Chúng tôi mang đến những trải nghiệm du lịch độc đáo, an toàn và đáng nhớ. Vietravel tự hào là đơn vị lữ hành hàng đầu Việt Nam với hơn 20 năm kinh nghiệm tổ chức tour.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="guides" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Đội ngũ hướng dẫn viên</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Những người bạn đồng hành am hiểu điểm đến</p> |
| </div> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md guide-card"> |
| <div class="overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Nguyễn Thị Hương" class="w-full h-64 object-cover guide-img transition duration-300"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800">Nguyễn Thị Hương</h3> |
| <p class="text-primary font-semibold mb-3">Hướng dẫn viên tiếng Việt</p> |
| <p class="text-gray-600 text-sm">Với 8 năm kinh nghiệm, Hương sẽ mang đến cho bạn những câu chuyện thú vị về các điểm đến.</p> |
| <div class="mt-4 flex items-center text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span class="text-sm">Chuyên tour Hà Nội - Hạ Long</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md guide-card"> |
| <div class="overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Trần Văn Minh" class="w-full h-64 object-cover guide-img transition duration-300"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800">Trần Văn Minh</h3> |
| <p class="text-primary font-semibold mb-3">Hướng dẫn viên tiếng Anh</p> |
| <p class="text-gray-600 text-sm">Minh đã dẫn tour cho hơn 100 đoàn khách quốc tế với kiến thức sâu về lịch sử Việt Nam.</p> |
| <div class="mt-4 flex items-center text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span class="text-sm">Chuyên tour miền Trung</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md guide-card"> |
| <div class="overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Lê Thị Mai" class="w-full h-64 object-cover guide-img transition duration-300"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800">Lê Thị Mai</h3> |
| <p class="text-primary font-semibold mb-3">Hướng dẫn viên tiếng Pháp</p> |
| <p class="text-gray-600 text-sm">Mai tốt nghiệp ngành du lịch tại Pháp, am hiểu văn hóa Đông Tây.</p> |
| <div class="mt-4 flex items-center text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span class="text-sm">Chuyên tour miền Nam</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md guide-card"> |
| <div class="overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Phạm Quang Huy" class="w-full h-64 object-cover guide-img transition duration-300"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800">Phạm Quang Huy</h3> |
| <p class="text-primary font-semibold mb-3">Hướng dẫn viên tiếng Nhật</p> |
| <p class="text-gray-600 text-sm">Sống 5 năm tại Nhật, Huy sẽ giúp du khách Nhật hiểu hơn về văn hóa Việt.</p> |
| <div class="mt-4 flex items-center text-gray-500"> |
| <i class="fas fa-map-marker-alt mr-2"></i> |
| <span class="text-sm">Chuyên tour Hạ Long - Sapa</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Cảm nhận khách hàng</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Những chia sẻ chân thành từ du khách</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Chị Hoa" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Chị Hoa</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Tour Đà Lạt với Vietravel thật tuyệt vời! Hướng dẫn viên nhiệt tình, khách sạn sạch sẽ, ăn uống ngon. Tôi sẽ quay lại với Vietravel vào mùa hè năm sau."</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Anh Tuấn" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Anh Tuấn</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Phòng nghỉ tại khách sạn do Vietravel bố trí rất tốt, view đẹp, phục vụ chu đáo. Giá cả cũng hợp lý, tôi rất hài lòng với dịch vụ của Vietravel."</p> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Chị Lan" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Chị Lan</h4> |
| <div class="flex text-yellow-400 text-sm"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Đã đi nhiều tour nhưng tour Hạ Long của Vietravel để lại cho gia đình tôi nhiều ấn tượng đẹp nhất. Hướng dẫn viên rất chuyên nghiệp và nhiệt tình."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-primary text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-2xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Đăng ký nhận ưu đãi</h2> |
| <p class="mb-8">Nhận thông tin về các chương trình khuyến mãi và tour mới nhất từ Vietravel</p> |
| <form class="flex flex-col sm:flex-row gap-2"> |
| <input type="email" placeholder="Email của bạn" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none"> |
| <button type="submit" class="bg-secondary hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-semibold transition duration-300">Đăng ký</button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Liên hệ với chúng tôi</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Chúng tôi luôn sẵn sàng hỗ trợ bạn</p> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Thông tin liên hệ</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-primary/10 text-primary p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Địa chỉ</h4> |
| <p class="text-gray-600">190 Pasteur, Phường 6, Quận 3, TP.HCM</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/10 text-primary p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Điện thoại</h4> |
| <p class="text-gray-600">028 3822 8898 - 1900 1839</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/10 text-primary p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Email</h4> |
| <p class="text-gray-600">info@vietravel.com</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-primary/10 text-primary p-3 rounded-full mr-4"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Giờ làm việc</h4> |
| <p class="text-gray-600">Thứ 2 - Thứ 7: 8:00 - 17:30</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Gửi tin nhắn cho chúng tôi</h3> |
| <form class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Họ tên</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
| </div> |
| </div> |
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Điện thoại</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Nội dung</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"></textarea> |
| </div> |
| <button type="submit" class="bg-primary hover:bg-secondary text-white px-6 py-3 rounded-lg font-semibold transition">Gửi tin nhắn</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-umbrella-beach mr-2"></i> |
| Vietravel |
| </h3> |
| <p class="text-gray-400 mb-4">Vietravel - Đối tác du lịch đáng tin cậy của bạn</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Liên kết nhanh</h3> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Trang chủ</a></li> |
| <li><a href="#rooms" class="text-gray-400 hover:text-white transition">Phòng nghỉ</a></li> |
| <li><a href="#tours" class="text-gray-400 hover:text-white transition">Tour du lịch</a></li> |
| <li><a href="#guides" class="text-gray-400 hover:text-white transition">Hướng dẫn viên</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Về chúng tôi</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Tour nổi bật</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Hạ Long - Tuần Châu</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sapa - Fansipan</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Đà Nẵng - Hội An</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Phú Quốc - Đảo ngọc</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Nha Trang - VinPearl</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Đối tác</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <img src="https://via.placeholder.com/100x50?text=Partner1" alt="Partner 1" class="bg-white p-2 rounded"> |
| <img src="https://via.placeholder.com/100x50?text=Partner2" alt="Partner 2" class="bg-white p-2 rounded"> |
| <img src="https://via.placeholder.com/100x50?text=Partner3" alt="Partner 3" class="bg-white p-2 rounded"> |
| <img src="https://via.placeholder.com/100x50?text=Partner4" alt="Partner 4" class="bg-white p-2 rounded"> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
| <p>© 2023 Vietravel. Bảo lưu mọi quyền.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition opacity-0 invisible"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', function() { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', function() { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bep40/vietour" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
