Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Matchee - Thương hiệu trà sữa Matcha chất lượng</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"> | |
| <style> | |
| /* Custom CSS */ | |
| .hero-section { | |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1511920170033-f839b4c8d318?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .menu-item:hover .menu-overlay { | |
| opacity: 1; | |
| } | |
| .menu-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| } | |
| .timeline-item:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -20px; | |
| transform: translateX(-50%); | |
| width: 2px; | |
| height: 20px; | |
| background-color: #4CAF50; | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.2); | |
| } | |
| .franchise-step { | |
| transition: all 0.3s ease; | |
| } | |
| .franchise-step:hover { | |
| transform: scale(1.05); | |
| } | |
| .chat-popup { | |
| transform: translateY(100%); | |
| transition: all 0.3s ease; | |
| } | |
| .chat-popup.active { | |
| transform: translateY(0); | |
| } | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: all 0.3s ease; | |
| } | |
| .mobile-menu.active { | |
| transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50x50" alt="Matchee Logo" class="h-12"> | |
| <h1 class="text-2xl font-bold text-green-700 ml-2">MATCHEE</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-green-700 font-medium hover:text-green-500">Trang chủ</a> | |
| <a href="#about" class="text-gray-700 font-medium hover:text-green-500">Về Matchee</a> | |
| <a href="#menu" class="text-gray-700 font-medium hover:text-green-500">Menu</a> | |
| <a href="#franchise" class="text-gray-700 font-medium hover:text-green-500">Nhượng quyền</a> | |
| <a href="#news" class="text-gray-700 font-medium hover:text-green-500">Tin tức</a> | |
| <a href="#contact" class="text-gray-700 font-medium hover:text-green-500">Liên hệ</a> | |
| </nav> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <button class="bg-green-600 text-white px-4 py-2 rounded-full hover:bg-green-700 transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> 1900 1234 | |
| </button> | |
| <button class="bg-yellow-400 text-gray-800 px-4 py-2 rounded-full hover:bg-yellow-500 transition"> | |
| <i class="fas fa-store mr-2"></i> Đăng ký nhượng quyền | |
| </button> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-white z-50 p-4 md:hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <img src="https://via.placeholder.com/50x50" alt="Matchee Logo" class="h-12"> | |
| <button id="close-mobile-menu" class="text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col space-y-6"> | |
| <a href="#home" class="text-green-700 font-medium text-lg">Trang chủ</a> | |
| <a href="#about" class="text-gray-700 font-medium text-lg">Về Matchee</a> | |
| <a href="#menu" class="text-gray-700 font-medium text-lg">Menu</a> | |
| <a href="#franchise" class="text-gray-700 font-medium text-lg">Nhượng quyền</a> | |
| <a href="#news" class="text-gray-700 font-medium text-lg">Tin tức</a> | |
| <a href="#contact" class="text-gray-700 font-medium text-lg">Liên hệ</a> | |
| </nav> | |
| <div class="mt-8 space-y-4"> | |
| <button class="w-full bg-green-600 text-white px-4 py-3 rounded-full hover:bg-green-700 transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> 1900 1234 | |
| </button> | |
| <button class="w-full bg-yellow-400 text-gray-800 px-4 py-3 rounded-full hover:bg-yellow-500 transition"> | |
| <i class="fas fa-store mr-2"></i> Đăng ký nhượng quyền | |
| </button> | |
| </div> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-gray-700"><i class="fab fa-facebook-f text-2xl"></i></a> | |
| <a href="#" class="text-gray-700"><i class="fab fa-instagram text-2xl"></i></a> | |
| <a href="#" class="text-gray-700"><i class="fab fa-youtube text-2xl"></i></a> | |
| <a href="#" class="text-gray-700"><i class="fab fa-tiktok text-2xl"></i></a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-section text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">TRÀ MATCHA CHUẨN NHẬT</h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Chất lượng đồng nhất - Giá cả hợp lý - Khởi nghiệp dễ dàng</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <button class="bg-green-600 text-white px-8 py-3 rounded-full hover:bg-green-700 transition font-medium"> | |
| <i class="fas fa-store mr-2"></i> Đăng ký nhượng quyền | |
| </button> | |
| <button class="bg-white text-green-700 px-8 py-3 rounded-full hover:bg-gray-100 transition font-medium"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Tìm xe gần bạn | |
| </button> | |
| <button class="bg-yellow-400 text-gray-800 px-8 py-3 rounded-full hover:bg-yellow-500 transition font-medium"> | |
| <i class="fas fa-mobile-alt mr-2"></i> Đặt hàng online | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Section --> | |
| <section class="bg-gray-50 py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">MATCHEE - KHÁC BIỆT TỪ NGUYÊN LIỆU</h2> | |
| <div class="aspect-w-16 aspect-h-9 max-w-4xl mx-auto rounded-xl overflow-hidden shadow-lg"> | |
| <iframe class="w-full h-96" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advantages Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">LỢI THẾ KINH DOANH CÙNG MATCHEE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-coins text-3xl text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Đầu tư thấp</h3> | |
| <p class="text-gray-600">Chỉ từ 50 triệu đồng, bạn đã có thể sở hữu một xe Matchee và bắt đầu kinh doanh ngay.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-robot text-3xl text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Công nghệ tự động</h3> | |
| <p class="text-gray-600">Máy pha chế tự động giúp đồng nhất chất lượng, giảm phụ thuộc vào nhân sự.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl text-center"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-chart-line text-3xl text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Hoàn vốn nhanh</h3> | |
| <p class="text-gray-600">Với lợi nhuận 40-50%, đối tác có thể hoàn vốn chỉ sau 4-6 tháng kinh doanh.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">THỰC ĐƠN MATCHEE</h2> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button class="px-4 py-2 text-sm font-medium rounded-l-lg bg-green-600 text-white"> | |
| Tất cả | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700"> | |
| Matcha | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700"> | |
| Trà sữa | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium bg-white text-gray-700"> | |
| Cà phê | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700"> | |
| Đồ uống khác | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Menu Item 1 --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-md relative"> | |
| <img src="https://images.unsplash.com/photo-1561049934-eee29b3089e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Matcha Latte" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-xl mb-1">Matcha Latte</h3> | |
| <p class="text-gray-600 text-sm mb-3">Matcha Nhật Bản kết hợp với sữa tươi thơm ngon</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">35.000đ</span> | |
| <button class="bg-green-600 text-white px-3 py-1 rounded-full text-sm hover:bg-green-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0"> | |
| <button class="bg-white text-green-600 px-6 py-2 rounded-full font-medium"> | |
| Xem chi tiết | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-md relative"> | |
| <img src="https://images.unsplash.com/photo-1560717843-60cb3e307976?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Trà sữa trân châu" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-xl mb-1">Trà sữa trân châu</h3> | |
| <p class="text-gray-600 text-sm mb-3">Trà sữa thơm ngon với trân châu dai giòn</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">30.000đ</span> | |
| <button class="bg-green-600 text-white px-3 py-1 rounded-full text-sm hover:bg-green-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0"> | |
| <button class="bg-white text-green-600 px-6 py-2 rounded-full font-medium"> | |
| Xem chi tiết | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Menu Item 3 --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-md relative"> | |
| <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Cà phê sữa đá" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-xl mb-1">Cà phê sữa đá</h3> | |
| <p class="text-gray-600 text-sm mb-3">Cà phê nguyên chất pha với sữa đặc thơm ngon</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">25.000đ</span> | |
| <button class="bg-green-600 text-white px-3 py-1 rounded-full text-sm hover:bg-green-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0"> | |
| <button class="bg-white text-green-600 px-6 py-2 rounded-full font-medium"> | |
| Xem chi tiết | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Menu Item 4 --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-md relative"> | |
| <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Matcha đá xay" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-xl mb-1">Matcha đá xay</h3> | |
| <p class="text-gray-600 text-sm mb-3">Matcha xay cùng đá và sữa tươi, thơm ngon bổ dưỡng</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-600">45.000đ</span> | |
| <button class="bg-green-600 text-white px-3 py-1 rounded-full text-sm hover:bg-green-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0"> | |
| <button class="bg-white text-green-600 px-6 py-2 rounded-full font-medium"> | |
| Xem chi tiết | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-full hover:bg-green-600 hover:text-white transition font-medium"> | |
| Xem toàn bộ thực đơn | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Story Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">CÂU CHUYỆN MATCHEE</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Matchee Story" class="rounded-xl shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-4 text-green-700">Từ tình yêu với Matcha đến thương hiệu hàng đầu</h3> | |
| <p class="text-gray-600 mb-4">Matchee được thành lập năm 2018 với mong muốn mang đến cho người Việt những thức uống Matcha chất lượng với giá cả hợp lý. Xuất phát từ tình yêu với văn hóa trà đạo Nhật Bản, đội ngũ sáng lập đã dành nhiều năm nghiên cứu để tạo ra công thức Matcha hoàn hảo.</p> | |
| <p class="text-gray-600 mb-6">Tên gọi "Matchee" là sự kết hợp giữa "Matcha" và "Cheers", thể hiện tinh thần lan tỏa niềm vui và năng lượng tích cực từ những ly Matcha thơm ngon.</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-green-700 mb-2"><i class="fas fa-eye mr-2"></i>Tầm nhìn</h4> | |
| <p class="text-sm text-gray-600">Trở thành thương hiệu đồ uống Matcha hàng đầu Việt Nam</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-bold text-green-700 mb-2"><i class="fas fa-bullseye mr-2"></i>Sứ mệnh</h4> | |
| <p class="text-sm text-gray-600">Mang Matcha chất lượng đến mọi người với giá cả hợp lý</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">HÀNH TRÌNH PHÁT TRIỂN</h2> | |
| <div class="relative"> | |
| <div class="hidden md:block absolute h-full border-r-2 border-green-500 left-1/2"></div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Timeline Item 1 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-green-600 font-bold">2018</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Thành lập Matchee</h3> | |
| </div> | |
| <p class="text-gray-600">Khởi đầu với cửa hàng đầu tiên tại Hà Nội, chuyên về các loại đồ uống từ Matcha nhập khẩu Nhật Bản.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="relative timeline-item md:mt-20"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-green-600 font-bold">2019</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Ra mắt mô hình xe PopUp</h3> | |
| </div> | |
| <p class="text-gray-600">Phát triển mô hình xe đẩy với chi phí thấp, giúp nhân rộng thương hiệu nhanh chóng.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="relative timeline-item"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-green-600 font-bold">2020</span> | |
| </div> | |
| <h3 class="text-xl font-bold">50 xe trên toàn quốc</h3> | |
| </div> | |
| <p class="text-gray-600">Mở rộng hệ thống với 50 xe tại 15 tỉnh thành, trở thành thương hiệu đồ uống phát triển nhanh nhất.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 4 --> | |
| <div class="relative timeline-item md:mt-20"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-green-600 font-bold">2021</span> | |
| </div> | |
| <h3 class="text-xl font-bold">Giải thưởng Franchise tiềm năng</h3> | |
| </div> | |
| <p class="text-gray-600">Vinh dự nhận giải thưởng "Mô hình nhượng quyền tiềm năng nhất" từ Hiệp hội Nhượng quyền Việt Nam.</p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 5 --> | |
| <div class="relative"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-green-600 font-bold">2023</span> | |
| </div> | |
| <h3 class="text-xl font-bold">150+ xe trên toàn quốc</h3> | |
| </div> | |
| <p class="text-gray-600">Hiện diện tại 30 tỉnh thành với hơn 150 xe, phục vụ hơn 1 triệu khách hàng mỗi tháng.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">KHÁCH HÀNG NÓI VỀ MATCHEE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Chị Ngọc Anh</h4> | |
| <div class="flex text-yellow-400"> | |
| <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">"Matcha Latte của Matchee có vị rất đặc trưng, không quá ngọt và có vị đắng nhẹ rất dễ chịu. Mình uống mỗi ngày mà không thấy ngán."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Anh Minh Quân</h4> | |
| <div class="flex text-yellow-400"> | |
| <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">"Tôi rất ấn tượng với mô hình kinh doanh của Matchee. Sau 3 tháng mở xe, tôi đã hoàn vốn và hiện tại lợi nhuận ổn định 15-20 triệu mỗi tháng."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Chị Hương Giang</h4> | |
| <div class="flex text-yellow-400"> | |
| <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 ngũ hỗ trợ của Matchee rất nhiệt tình. Từ khâu setup đến vận hành đều được hướng dẫn rất chi tiết. Mình rất hài lòng khi hợp tác cùng Matchee."</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-full hover:bg-green-600 hover:text-white transition font-medium"> | |
| Xem thêm đánh giá | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Franchise Section --> | |
| <section id="franchise" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">NHƯỢNG QUYỀN MATCHEE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Franchise Package 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-green-600 text-white py-4 text-center"> | |
| <h3 class="text-xl font-bold">GÓI CƠ BẢN</h3> | |
| <p class="text-lg">50 - 70 TRIỆU ĐỒNG</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>1 xe đẩy tiêu chuẩn</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Máy pha chế tự động</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Đào tạo 3 ngày</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Hỗ trợ setup địa điểm</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-green-600 text-white py-2 rounded-full hover:bg-green-700"> | |
| Đăng ký ngay | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Franchise Package 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105"> | |
| <div class="bg-yellow-400 text-gray-800 py-4 text-center"> | |
| <h3 class="text-xl font-bold">GÓI TIÊU CHUẨN</h3> | |
| <p class="text-lg">70 - 100 TRIỆU ĐỒNG</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>1 xe đẩy cao cấp</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Máy pha chế tự động + tủ lạnh</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Đào tạo 5 ngày</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Hỗ trợ marketing khai trương</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Hỗ trợ chọn địa điểm vành đai</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-yellow-400 text-gray-800 py-2 rounded-full hover:bg-yellow-500"> | |
| Đăng ký ngay | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Franchise Package 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-green-600 text-white py-4 text-center"> | |
| <h3 class="text-xl font-bold">GÓI PREMIUM</h3> | |
| <p class="text-lg">100 - 150 TRIỆU ĐỒNG</p> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>2 xe đẩy cao cấp</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Trọn bộ thiết bị hiện đại</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Đào tạo 7 ngày</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Hỗ trợ marketing 360 độ</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Ưu tiên địa điểm vàng</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> | |
| <span>Hỗ trợ nhân sự 1 tháng</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-green-600 text-white py-2 rounded-full hover:bg-green-700"> | |
| Đăng ký ngay | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center mb-8 text-gray-800">QUY TRÌNH NHƯỢNG QUYỀN</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Step 1 --> | |
| <div class="franchise-step bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-600 font-bold text-xl">1</span> | |
| </div> | |
| <h4 class="font-bold mb-2">Tư vấn</h4> | |
| <p class="text-gray-600 text-sm">Tiếp nhận thông tin và tư vấn mô hình phù hợp</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="franchise-step bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-600 font-bold text-xl">2</span> | |
| </div> | |
| <h4 class="font-bold mb-2">Khảo sát</h4> | |
| <p class="text-gray-600 text-sm">Khảo sát địa điểm và ký hợp đồng nhượng quyền</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="franchise-step bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-600 font-bold text-xl">3</span> | |
| </div> | |
| <h4 class="font-bold mb-2">Đào tạo</h4> | |
| <p class="text-gray-600 text-sm">Đào tạo vận hành, pha chế và quản lý tài chính</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="franchise-step bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-600 font-bold text-xl">4</span> | |
| </div> | |
| <h4 class="font-bold mb-2">Khai trương</h4> | |
| <p class="text-gray-600 text-sm">Hỗ trợ setup và khai trương thành công</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-yellow-400 text-gray-800 px-8 py-3 rounded-full hover:bg-yellow-500 transition font-medium"> | |
| <i class="fas fa-file-alt mr-2"></i> Tải hồ sơ nhượng quyền | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section id="news" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">TIN TỨC & SỰ KIỆN</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- News 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-gray-500">15/06/2023</span> | |
| <h3 class="text-xl font-bold my-2">Matchee mở rộng thị trường miền Trung</h3> | |
| <p class="text-gray-600 mb-4">Matchee chính thức có mặt tại Đà Nẵng với 5 xe PopUp tại các địa điểm đông đúc...</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Xem thêm <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- News 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-gray-500">02/06/2023</span> | |
| <h3 class="text-xl font-bold my-2">Xu hướng đồ uống healthy 2023</h3> | |
| <p class="text-gray-600 mb-4">Matcha tiếp tục là xu hướng đồ uống được ưa chuộng nhờ lợi ích sức khỏe và hương vị độc đáo...</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Xem thêm <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- News 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <span class="text-sm text-gray-500">20/05/2023</span> | |
| <h3 class="text-xl font-bold my-2">Câu chuyện thành công của đối tác Matchee</h3> | |
| <p class="text-gray-600 mb-4">Chị Nguyễn Thị Hương - đối tác Matchee tại Hải Phòng đã hoàn vốn chỉ sau 4 tháng kinh doanh...</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Xem thêm <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-full hover:bg-green-600 hover:text-white transition font-medium"> | |
| Xem thêm tin tức | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">HÌNH ẢNH & VIDEO</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1561049934-eee29b3089e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1560717843-60cb3e307976?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="aspect-square overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1561049934-eee29b3089e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Gallery" class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-full hover:bg-green-600 hover:text-white transition font-medium"> | |
| Xem thêm hình ảnh | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">LIÊN HỆ MATCHEE</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-4">Thông tin liên hệ</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Địa chỉ</h4> | |
| <p class="text-gray-600">Tầng 5, Tòa nhà Matchee, 123 Trần Duy Hưng, Hà Nội</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Hotline</h4> | |
| <p class="text-gray-600">1900 1234</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-600">info@matchee.vn</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-green-600 mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Giờ làm việc</h4> | |
| <p class="text-gray-600">8:00 - 18:00 từ Thứ 2 đến Thứ 7</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-3">Kết nối với chúng tôi</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-pink-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-700"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-red-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-700"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="bg-black text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-800"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-50 p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-4">Tìm xe Matchee gần bạn</h3> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.096866647464!2d105.7801083154023!3d21.02881689315026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ab4cd0a66ad9%3A0x6a0e4757a1df7a0!2zMTIzIFRy4bqnbiBEdXkgSMawbmcsIFRy4bqnbiBEdXkgSMawbmcsIENhdSBEeSwgSGFub2ksIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1623830287593!5m2!1sen!2s" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-4">Đăng ký tư vấn nhượng quyền</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Họ và tên</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Số đ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-2 focus:ring-green-500 focus:border-green-500"> | |
| </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-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Địa điểm kinh doanh dự kiến</label> | |
| <input type="text" id="location" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Nội dung cần tư vấn</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-medium"> | |
| Gửi yêu cầu tư vấn | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">CÂU HỎI THƯỜNG GẶP</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-left">Chi phí đầu tư một xe Matchee là bao nhiêu?</h3> | |
| <i class="fas fa-chevron-down text-green-600"></i> | |
| </button> | |
| <div class="faq-content mt-3 hidden"> | |
| <p class="text-gray-600">Tùy thuộc vào gói nhượng quyền bạn chọn, chi phí đầu tư dao động từ 50 - 150 triệu đồng. Gói cơ bản bao gồm xe đẩy và máy pha chế tự động có giá từ 50-70 triệu, gói cao cấp hơn bao gồm nhiều thiết bị và hỗ trợ marketing có giá từ 100-150 triệu.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-left">Thời gian hoàn vốn là bao lâu?</h3> | |
| <i class="fas fa-chevron-down text-green-600"></i> | |
| </button> | |
| <div class="faq-content mt-3 hidden"> | |
| <p class="text-gray-600">Theo thống kê từ các đối tác hiện tại, thời gian hoàn vốn trung bình là 4-6 tháng với lợi nhuận 40-50%. Tuy nhiên, thời gian hoàn vốn có thể thay đổi tùy thuộc vào vị trí kinh doanh và khả năng vận hành của từng đối tác.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-left">Matchee hỗ trợ gì cho đối tác nhượng quyền?</h3> | |
| <i class="fas fa-chevron-down text-green-600"></i> | |
| </button> | |
| <div class="faq-content mt-3 hidden"> | |
| <p class="text-gray-600">Matchee hỗ trợ đối tác toàn diện từ khâu setup đến vận hành: đào tạo pha chế và quản lý, hỗ trợ chọn địa điểm, thiết kế và cung cấp xe đẩy, máy móc, nguyên liệu, hỗ trợ marketing khai trương, và đồng hành trong suốt quá trình kinh doanh.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-left">Tôi không có kinh nghiệm kinh doanh có thể tham gia được không?</h3> | |
| <i class="fas fa-chevron-down text-green-600"></i> | |
| </button> | |
| <div class="faq-content mt-3 hidden"> | |
| <p class="text-gray-600">Hoàn toàn có thể. Matchee có chương trình đào tạo bài bản từ cơ bản đến nâng cao, phù hợp với cả những người chưa có kinh nghiệm. Hệ thống vận hành được thiết kế đơn giản với máy pha chế tự động giúp bạn dễ dàng bắt đầu kinh doanh.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-left">Nguyên liệu của Matchee có nguồn gốc từ đâu?</h3> | |
| <i class="fas fa-chevron-down text-green-600"></i> | |
| </button> | |
| <div class="faq-content mt-3 hidden"> | |
| <p class="text-gray-600">Matcha của Matchee được nhập khẩu trực tiếp từ Nhật Bản, đảm bảo chất lượng và hương vị nguyên bản. Các nguyên liệu khác như trà, sữa, trân châu đều được lựa chọn kỹ lưỡng từ các nhà cung cấp uy tín trong nước và quốc tế, đạt tiêu chuẩn an toàn vệ sinh thực phẩm.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-full hover:bg-green-600 hover:text-white transition font-medium"> | |
| Xem thêm câu hỏi | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-green-700 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">ĐĂNG KÝ NHẬN TIN KHUYẾN MÃI</h2> | |
| <p class="max-w-2xl mx-auto mb-8">Nhận thông tin khuyến mãi, sự kiện và các chương trình ưu đãi đặc biệt từ Matchee</p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Nhập email của bạn" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-yellow-400 text-gray-800 px-6 py-3 rounded-r-lg hover:bg-yellow-500 font-medium"> | |
| Đăng ký | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50x50" alt="Matchee Logo" class="h-12"> | |
| <h3 class="text-2xl font-bold ml-2">MATCHEE</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Thương hiệu đồ uống Matcha hàng đầu Việt Nam</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Về Matchee</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Câu chuyện thương hiệu</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tầm nhìn - Sứ mệnh</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Hành trình phát triển</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Đội ngũ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tuyển dụng</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Hỗ trợ</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Câu hỏi thường gặp</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Chính sách bảo mật</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Điều khoản sử dụng</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Chính sách nhượng quyền</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Liên hệ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Liên hệ</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span class="text-gray-400">Tầng 5, Tòa nhà Matchee, 123 Trần Duy Hưng, Hà Nội</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span class="text-gray-400">1900 1234</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span class="text-gray-400">info@matchee.vn</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Matchee. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chat Popup --> | |
| <div id="chat-popup" class="chat-popup fixed bottom-0 right-0 mb-6 mr-6 w-72 bg-white rounded-t-xl shadow-xl z-50"> | |
| <div class="bg-green-600 text-white px-4 py-3 rounded-t-xl flex justify-between items-center"> | |
| </html> |